[转]Echarts 后台交互

原地址http://blog.youkuaiyun.com/gaogaoshan/article/details/38037849

jsp页面

[html] view plain copy

1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
3. <html>  
4. <head>  
5. <title>line</title>  
6. <script type="text/javascript" src="${pageContext.request.contextPath}/js/echarts2.0/esl.js"></script>  
7. <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.8.3.js"></script>  
8. </head>  
9.   
10. <body>  
11.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->  
12.         <div id="main" style="height:400px"></div>  
13.   
14.   
15.     <script type="text/javascript" language="javascript">  
16.         var myChart;  
17.         var eCharts;  
18.   
19.         require.config({  
20.             paths : {  
21.                 'echarts' : '${pageContext.request.contextPath}/js/echarts2.0/echarts' ,  
22.                 'echarts/chart/line' : '${pageContext.request.contextPath}/js/echarts2.0/echarts' //需要的组件  
23.             }  
24.         });  
25.   
26.         require(  
27.             [ 'echarts',   
28.               'echarts/chart/line'  
29.             ], DrawEChart //异步加载的回调函数绘制图表  
30.         );  
31.   
32.         //创建ECharts图表方法  
33.         function DrawEChart(ec) {  
34.             eCharts = ec;  
35.             myChart = eCharts.init(document.getElementById('main'));  
36.             myChart.showLoading({  
37.                 text : "图表数据正在努力加载..."  
38.             });  
39.             //定义图表options  
40.             var options = {  
41.                 title : {  
42.                     text : "未来一周气温变化",  
43.                     subtext : "纯属虚构",  
44.                     sublink : "http://www.baidu.com"  
45.                 },  
46.                 tooltip : {  
47.                     trigger : 'axis'  
48.                 },  
49.                 legend : {  
50.                     data : [ "最高气温" ]  
51.                 },  
52.                 toolbox : {  
53.                     show : true,  
54.                     feature : {  
55.                         mark : {  
56.                             show : true  
57.                         },  
58.                         dataView : {  
59.                             show : true,  
60.                             readOnly : false  
61.                         },  
62.                         magicType : {  
63.                             show : true,  
64.                             type : [ 'line', 'bar' ]  
65.                         },  
66.                         restore : {  
67.                             show : true  
68.                         },  
69.                         saveAsImage : {  
70.                             show : true  
71.                         }  
72.                     }  
73.                 },  
74.                 calculable : true,  
75.                 xAxis : [ {  
76.                     type : 'category',  
77.                     boundaryGap : false,  
78.                     data : [ '1', '2', '3', '4', '5', '6', '7' ]  
79.                 } ],  
80.                 yAxis : [ {  
81.                     type : 'value',  
82.                     axisLabel : {  
83.                         formatter : '{value} °C'  
84.                     },  
85.                     splitArea : {  
86.                         show : true  
87.                     }  
88.                 } ],  
89.                 grid : {  
90.                     width : '90%'  
91.                 },  
92.                 series : [ {  
93.                     name : '最高气温',  
94.                     type : 'line',  
95.                     data : [ 11, 22, 33, 44, 55, 33, 44 ],//必须是Integer类型的,String计算平均值会出错  
96.                     markPoint : {  
97.                         data : [ {  
98.                             type : 'max',  
99.                             name : '最大值'  
100.                         }, {  
101.                             type : 'min',  
102.                             name : '最小值'  
103.                         } ]  
104.                     },  
105.                     markLine : {  
106.                         data : [ {  
107.                             type : 'average',  
108.                             name : '平均值'  
109.                         } ]  
110.                     }  
111.                 } ]  
112.             };  
113.             myChart.setOption(options); //先把可选项注入myChart中  
114.             myChart.hideLoading();  
115.             getChartData();//aja后台交互   
116.         }  
117.     </script>  
118.   
119.   
120.     <script type="text/javascript">  
121.         function getChartData() {  
122.             //获得图表的options对象  
123.             var options = myChart.getOption();  
124.             //通过Ajax获取数据  
125.             $.ajax({  
126.                 type : "post",  
127.                 async : false, //同步执行  
128.                 url : "${pageContext.request.contextPath}/echarts/line_data",  
129.                 data : {},  
130.                 dataType : "json", //返回数据形式为json  
131.                 success : function(result) {  
132.                     if (result) {  
133.                         options.legend.data = result.legend;  
134.                         options.xAxis[0].data = result.category;  
135.                         options.series[0].data = result.series[0].data;  
136.   
137.                         myChart.hideLoading();  
138.                         myChart.setOption(options);  
139.                     }  
140.                 },  
141.                 error : function(errorMsg) {  
142.                     alert("不好意思，大爷，图表请求数据失败啦!");  
143.                     myChart.hideLoading();  
144.                 }  
145.             });  
146.         }  
147.     </script>  
148. </body>  
149. </html>  

controller

[java] view plain copy

1. package com.ffcs.wlan.controller;  
2. import java.util.ArrayList;  
3. import java.util.Arrays;  
4. import java.util.List;  
5. import org.slf4j.Logger;  
6. import org.slf4j.LoggerFactory;  
7. import org.springframework.stereotype.Controller;  
8. import org.springframework.web.bind.annotation.RequestMapping;  
9. import org.springframework.web.bind.annotation.ResponseBody;  
10. import com.ffcs.wlan.model.EchartData;  
11. import com.ffcs.wlan.model.Series;  
12.   
13. @Controller  
14. @RequestMapping("/echarts")  
15. public class EntityController {  
16.       
17.     private static final Logger logger = LoggerFactory.getLogger(EntityController.class);  
18.   
19.     @RequestMapping("/line_data")  
20.     @ResponseBody  
21.     public EchartData lineData() {  
22.         logger.info("lineData....");  
23.           
24.         List<String> legend = new ArrayList<String>(Arrays.asList(new String[]{"最高气温"}));//数据分组  
25.         List<String> category = new ArrayList<String>(Arrays.asList(new String []{"周一","周二","周三","周四","周五","周六","周日"}));//横坐标  
26.         List<Series> series = new ArrayList<Series>();//纵坐标  
27.           
28.         series.add(new Series("最高气温", "line",   
29.                         new ArrayList<Integer>(Arrays.asList(  
30.                                 21,23,28,26,21,33,44))));  
31.           
32.         EchartData data=new EchartData(legend, category, series);  
33.         return data;  
34.     }  
35.       
36.     @RequestMapping("/line_page")  
37.     public String linePage() {  
38.         logger.info("linePage....");  
39.         return "report/line";  
40.     }  
41.       
42.       
43. }  

Echarts 类

[java] view plain copy

1. package com.ffcs.wlan.model;  
2.   
3. import java.util.ArrayList;  
4. import java.util.List;  
5.   
6. public class EchartData {  
7.   
8.     public List<String> legend = new ArrayList<String>();//数据分组  
9.     public List<String> category = new ArrayList<String>();//横坐标  
10.     public List<Series> series = new ArrayList<Series>();//纵坐标  
11.       
12.       
13.     public EchartData(List<String> legendList, List<String> categoryList, List<Series> seriesList) {  
14.         super();  
15.         this.legend = legendList;  
16.         this.category = categoryList;  
17.         this.series = seriesList;  
18.     }  
19.       
20. }  

Series 类

[java] view plain copy

1. package com.ffcs.wlan.model;  
2.   
3. import java.util.List;  
4.   
5.   
6. public class Series  {  
7.       
8.     public String name;  
9.       
10.     public String type;  
11.       
12.     public List<Integer> data;//这里要用int 不能用String 不然前台显示不正常（特别是在做数学运算的时候）  
13.   
14.     public Series( String name, String type, List<Integer> data) {  
15.         super();  
16.         this.name = name;  
17.         this.type = type;  
18.         this.data = data;  
19.     }  
20.   
21.   
22. }