最近在工作中使用到了Echarts来制作图表，在网上搜了好多例子几乎都是千篇一律的在前台写死一些js，然后把变量通过ajax或者遍历集合的方式插进去，这样子一旦某一页面的图表一多，就会异常混乱，偶然在开源中国看到有人做成了个Echarts对象的jar包，在后台进行完美封装传回一个option在前台接收了并set进option即可。试了试，效果非常好。
下面给出例子代码：

该方法返回的keyword指向了前台负责图表显示的jsp页面




    1. public String keyword() {  
2. this.dateNum == null || this.dateNum.equals("")) {  
3. this.dateNum = "5" ;  
4.        }  
5.        return "keyword" ;   
6.    }




    该方法根据jsp的ajax传回来显示的条数dateNum进行数据库取值（这地方我没有使用实时拿值，而是通过定时来把数据更新进一张表，从而图表拿值会非常迅速）

    可以看出我定义了一个Option对象，里面的参数都可以在里面以方法或者属性的方式调用。最后封装好Option后，把他放入jsonObject对象传回前台一接收json值即可。



    1. public String getKeyWordData() throws ParseException{  
2. user = (LoginUser) ((SecurityContext) ServletActionContext  
3.                 .getRequest().getSession()  
4.                 .getAttribute("SPRING_SECURITY_CONTEXT")).getAuthentication()  
5.                 .getPrincipal();  
6. id = user.getId() ;  
7. num = Integer.parseInt(this.dateNum) ;  
8. jsonObj = new JSONObject() ;  
9.        //取到该用户的所有关键字放入legendName数组  
10. <String> names = this.cacheCountManager.getKeywordNames(id) ;  
11. legendName = new String[names.size()] ;  
12. i=0;i<names.size();i++) {  
13. name = names.get(i) ;  
14.            legendName[i] = name ;  
15.        }  
16. riqiArr = new String[num] ;  
17. j=num;j>0;j--) {  
18. riqi = getStrDate(String.valueOf(j)) ;  
19.            riqiArr[num-j] = riqi ;  
20.        }  
21. option=new GsonOption();  
22.        option.title().text("关键词文章统计");  
23.        option.tooltip().trigger(Trigger.axis);  
24.        option.legend().data(legendName);  
25. axis = new ValueAxis();  
26.        axis.type(AxisType.category).boundaryGap(false).data(riqiArr);  
27.        option.xAxis(axis);  
28. yaxis = new CategoryAxis();  
29.        yaxis.type(AxisType.value);  
30.        option.yAxis(yaxis);  
31. <Series> seriess = new ArrayList<Series>() ;  
32. mp = new MarkPoint() ;  
33.        mp.data(new Data().type(MarkType.max).name("最大值"),  
34.                new Data().type(MarkType.min).name("最小值")) ;  
35. i=0;i<names.size();i++) {  
36. countArr = new Integer[num] ;  
37. line = new Line() ;  
38. name = names.get(i) ;  
39. j=num;j>0;j--) {  
40. riqi = getStrDate(String.valueOf(j)) ;  
41.                countArr[num-j] = this.cacheCountManager.getCount(id, riqi, name) ;  
42.            }  
43.            line.name(name).type(SeriesType.line).data(countArr).markPoint(mp) ;  
44.            seriess.add(line) ;  
45.        }  
46.        option.series(seriess);  
47. jsonObj=JSONObject.fromObject(option.toString());  
48.        return "echartsJson";  
49.    }

    页面显示部分很简洁。




    1. <div id="main"  style="height: 400px; border: 1px solid #ccc; padding: 10px;">图形正在加载中...</div>



    1. $(function(){  
2.     require([ 'echarts','echarts/chart/line' ],DrawEChart);  
3. });



    1. function DrawEChart(ec) {  
2.     var myChart;  
3. myChart = ec.init(document.getElementById('main'));  
4.     myChart.showLoading({  
5. <span style="white-space:pre">    </span>text: "图表数据正在努力加载...",  
6.     });  
7. date = $("#dateNum").val() ;  
8.     $.ajax({  
9. <span style="white-space:pre">    </span>type : "post",  
10. <span style="white-space:pre">    </span>data:{"dateNum":date},  
11.         url : "${ctx}/statistics/statistics!getKeyWordData.action",  
12.         dataType : "json",  
13.         success : function(data) {  
14.             myChart.setOption(data.jsonObj);  
15. <span style="white-space:pre">    </span>myChart.hideLoading();  
16.         },  
17.         error : function(errorMsg) {  
18. <span style="white-space:pre">    </span>alert("不好意思大爷，图表请求数据失败啦！");  
19.         }  
20.     });  
21. }


    jar包下载：http://mvnrepository.com/artifact/com.github.abel533/ECharts