java+echarts实现动态图表,jsp前台页面通过ajax异步请求,controller层处理完数据返回前台实现动态图表。
一个简单实例:
1. 前台echarts图表依赖js文件:
echarts.js下载地址 :http://echarts.baidu.com/download.html
jquery-1.11.2.min.jsjquery依赖js文件
2.前台页面:
引用echarts.js、jquery-1.11.2.min.js
编写图表:
更多类型的图表参考echarts官网,地址:http://echarts.baidu.com/examples/
2.java后台controller层:
package controller;
import javax.servlet.http.HttpServletResponse;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import dao.JsonUtil;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import vo.User;
@Controller
public class Usercontroller {@ResponseBody
@RequestMapping("/login.do")
public void login(HttpServletResponse response){
JSONObject jo=new JSONObject();
JSONArray arr=new JSONArray();
arr.add(1);
arr.add(2);
arr.add(3);
arr.add(4);
arr.add(5);
arr.add(6);
JSONArray arr1=new JSONArray();
arr1.add(10);
arr1.add(20);
arr1.add(30);
arr1.add(40);
arr1.add(50);
arr1.add(60);
jo.put("xAxis", arr);
jo.put("series", arr1);
System.out.println( "========>"+jo.toString());
//后台输出的json格式://========>{"xAxis":[1,2,3,4,5,6],"series":[10,20,30,40,50,60]}
//========>{"xAxis":[1,2,3,4,5,6],"series":[10,20,30,40,50,60]}JsonUtil.write(response, jo);
//把值返回给前台
}
}
【java|java+echarts实现动态图表详解】实际使用查询出数据组装成“{"xAxis":[1,2,3,4,5,6],"series":[10,20,30,40,50,60]}“这种格式json返回给前台即可。
3.测试
文章图片
推荐阅读
- Java|Java基础——数组
- 人工智能|干货!人体姿态估计与运动预测
- java简介|Java是什么(Java能用来干什么?)
- Java|规范的打印日志
- Linux|109 个实用 shell 脚本
- 程序员|【高级Java架构师系统学习】毕业一年萌新的Java大厂面经,最新整理
- Spring注解驱动第十讲--@Autowired使用
- SqlServer|sql server的UPDLOCK、HOLDLOCK试验
- jvm|【JVM】JVM08(java内存模型解析[JMM])
- 技术|为参加2021年蓝桥杯Java软件开发大学B组细心整理常见基础知识、搜索和常用算法解析例题(持续更新...)