Echarts通过json加载数据
最近因为项目的需要学习Echarts,通过官网http://echarts.baidu.com/feature.html可以系统学习,下面就说下自己写的一个例子。
一、创建实体:
public class Series { public String name; public String type; public List<Integer> data; public Series(String name, String type, List<Integer> data) { this.name = name; this.type = type; this.data = data; } public String toName() { return name; } }
二、写控制层,具体情况根据自己框架
@Controller @RequestMapping("/demo") public class DemoController { private static final Logger logger = LoggerFactory .getLogger(DemoController.class); @RequestMapping("/echartsQuery") public String echartsQuery(Model model, String pageNos) { logger.info("展示页面开始"); logger.info("展示页面结束"); return "wsip/echartsShow"; } @RequestMapping("/echartsView") @ResponseBody public String echartsView() { List<String> xAxisData = new ArrayList<String>(); List< JSONObject> seriesList = new ArrayList< JSONObject>(); for (int i = 1; i < 13; i++) { xAxisData.add(i+"月"); } for (int i = 1; i < 4; i++) { List<Integer> list = new ArrayList<Integer>(); for (int j = 1; j < 13; j++) { list.add((int)(Math.random()*100)); } Series series = new Series("销售"+i, Series.TYPE_LINE, list); JSONObject job = new JSONObject(); job.put("name", series.toName()); job.put("type", "bar"); job.put("data",series.data); seriesList.add(job); } //xAxisData和seriesList转为json JSONObject jsob = new JSONObject(); jsob.put("xAxisData", xAxisData); jsob.put("seriesList", seriesList); return jsob.toString(); } }
这里的数据不是查询数据库,而是模拟查询的数据,原理一样。其中@ResponseBody这个注解一定要有,不然前台获取的不是json数据。
三、页面
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%> <c:set var="BP" value="${pageContext.request.contextPath}" /> <!DOCTYPE html> <html> <head> <meta charset="utf-8" http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="renderer" content="webkit|ie-comp|ie-stand"> <title>demo</title> <link rel="stylesheet" href="${BP}/resources/ued-new/css/rdc.min.css"> <link rel="stylesheet" href="${BP}/resources/ued-new/css/style.css"> <script src="${BP}/resources/ued-new/plugins/jquery-1.10.2.min.js"></script> <script src="${BP}/resources/js/plugins/echarts-3/echarts.min.js"></script> </head> <body> <div class="ued-crumbs ued-crumbs-line"> <span class="ued-crumbs-title"><i class="ued-ico ued-ico-home"></i><b>您当前所在位置:</b></span> <a href="#">echarts</a> </div> <br><br><br><br> <div class="title "> <h1>echarts</h1> </div> <div class="rcont-mould"> <!-- 为ECharts准备一个具备大小(宽高)的Dom --> <div id="main" style="width: 100%;height:500px;"></div> </div> </body> <script type="text/javascript"> //基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 显示标题,图例和空的坐标轴 option = { title: { text: '2016年三位销售员业绩', subtext: '数据为虚构' }, tooltip: {}, legend: { data:["销售1","销售2","销售3"] }, toolbox: { show:true, feature: { dataView:{show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, xAxis: { type:"category", data: [] }, yAxis: [{ type:"value", }], series: [ { name:"销售1", type:"bar", data:[] }, { name:"销售2", type:"bar", data:[] }, { name:"销售3", type:"bar", data:[] } ] }; myChart.showLoading(); //loading动画 $.ajax({ type : "post", async : true, url : "${pageContext.request.contextPath}/demo/echartsView", dataType:"json", success:function(result) { if(result) { var obj = eval('(' + result + ')'); myChart.hideLoading(); myChart.setOption({ xAxis:{ data:obj.xAxisData }, series:obj.seriesList }); } }, error : function(errorMsg) { //请求失败时执行该函数 alert("请求数据失败!"); myChart.hideLoading(); } }); myChart.setOption(option); </script> </html>
其中要引入的echarts.min.js可以在官网下载。
四、效果图