最近在工作中使用到了Echarts来制作图表，在网上搜了好多例子几乎都是千篇一律的在前台写死一些js，然后把变量通过ajax或者遍历集合的方式插进去，这样子一旦某一页面的图表一多，就会异常混乱，，偶然在开源中国看到有人做成了个Echarts对象的jar包，在后台进行完美封装传回一个option在前台接收了并set进option即可。试了试，效果非常好。下面给出例子代码：
该方法返回的keyword指向了前台负责图表显示的jsp页面
public String keyword() {if(this.dateNum == null || this.dateNum.equals("")) {this.dateNum = "5" ;}return "keyword" ;}
该方法根据jsp的ajax传回来显示的条数dateNum进行数据库取值（这地方我没有使用实时拿值，而是通过定时来把数据更新进一张表，从而图表拿值会非常迅速）
可以看出我定义了一个Option对象，里面的参数都可以在里面以方法或者属性的方式调用。最后封装好Option后，把他放入jsonObject对象传回前台一接收json值即可。
public String getKeyWordData() throws ParseException{LoginUser user = (LoginUser) ((SecurityContext) ServletActionContext.getRequest().getSession().getAttribute("SPRING_SECURITY_CONTEXT")).getAuthentication().getPrincipal();Long id = user.getId() ;int num = Integer.parseInt(this.dateNum) ;jsonObj = new JSONObject() ;//取到该用户的所有关键字放入legendName数组List<String> names = this.cacheCountManager.getKeywordNames(id) ;String[] legendName = new String[names.size()] ;for(int i=0;i<names.size();i++) {String name = names.get(i) ;legendName[i] = name ;}String[] riqiArr = new String[num] ;for(int j=num;j>0;j–) {String riqi = getStrDate(String.valueOf(j)) ;riqiArr[num-j] = riqi ;}Option option=new GsonOption();option.title().text("关键词文章统计");option.tooltip().trigger(Trigger.axis);option.legend().data(legendName);ValueAxis axis = new ValueAxis();axis.type(AxisType.category).boundaryGap(false).data(riqiArr);option.xAxis(axis);CategoryAxis yaxis = new CategoryAxis();yaxis.type(AxisType.value);option.yAxis(yaxis);List<Series> seriess = new ArrayList<Series>() ;MarkPoint mp = new MarkPoint() ;mp.data(new Data().type(MarkType.max).name("最大值"),new Data().type(MarkType.min).name("最小值")) ;for(int i=0;i<names.size();i++) {Integer[] countArr = new Integer[num] ;Line line = new Line() ;String name = names.get(i) ;for(int j=num;j>0;j–) {String riqi = getStrDate(String.valueOf(j)) ;countArr[num-j] = this.cacheCountManager.getCount(id, riqi, name) ;}line.name(name).type(SeriesType.line).data(countArr).markPoint(mp) ;seriess.add(line) ;}option.series(seriess);jsonObj=JSONObject.fromObject(option.toString());return "echartsJson"; }
页面显示部分很简洁。
<div id="main" style="height: 400px; border: 1px solid #ccc; padding: 10px;">图形正在加载中…</div>$(function(){require([ 'echarts','echarts/chart/line' ],DrawEChart);});function DrawEChart(ec) {var myChart;myChart = ec.init(document.getElementById('main'));myChart.showLoading({<span style="white-space:pre"></span>text: "图表数据正在努力加载…",});var date = $("#dateNum").val() ;$.ajax({<span style="white-space:pre"></span>type : "post",<span style="white-space:pre"></span>data:{"dateNum":date},url : "${ctx}/statistics/statistics!getKeyWordData.action",dataType : "json",success : function(data) {myChart.setOption(data.jsonObj);<span style="white-space:pre"></span>myChart.hideLoading();},error : function(errorMsg) {<span style="white-space:pre"></span>alert("不好意思大爷，图表请求数据失败啦！");}});}jar包下载：
一路走来，我们无法猜测将是迎接什么样的风景，
