Echarts后台option对象

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

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

[html]  view plain  copy

 print ?

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

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

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

[html]  view plain  copy

 print ?

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

页面显示部分很简洁。

[html]  view plain  copy

 print ?

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

[html]  view plain  copy

 print ?

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

[html]  view plain  copy

 print ?

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