Echarts后台封装option对象

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

public String keyword() {
if(this.dateNum &＃61;&＃61; null || this.dateNum.equals("")) {
this.dateNum &＃61; "5" ;
}
return "keyword" ;
}

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

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

public String getKeyWordData() throws ParseException{
LoginUser user &＃61; (LoginUser) ((SecurityContext) ServletActionContext
.getRequest().getSession()
.getAttribute("SPRING_SECURITY_CONTEXT")).getAuthentication()
.getPrincipal();
Long id &＃61; user.getId() ;
int num &＃61; Integer.parseInt(this.dateNum) ;
jsonObj &＃61; new JSONObject() ;
//取到该用户的所有关键字放入legendName数组
List names &＃61; this.cacheCountManager.getKeywordNames(id) ;
String[] legendName &＃61; new String[names.size()] ;
for(int i&＃61;0;i String name &＃61; names.get(i) ;
legendName[i] &＃61; name ;
}
String[] riqiArr &＃61; new String[num] ;
for(int j&＃61;num;j>0;j--) {
String riqi &＃61; getStrDate(String.valueOf(j)) ;
riqiArr[num-j] &＃61; riqi ;
}
Option option&＃61;new GsonOption();
option.title().text("关键词文章统计");
option.tooltip().trigger(Trigger.axis);
option.legend().data(legendName);
ValueAxis axis &＃61; new ValueAxis();
axis.type(AxisType.category).boundaryGap(false).data(riqiArr);
option.xAxis(axis);
CategoryAxis yaxis &＃61; new CategoryAxis();
yaxis.type(AxisType.value);
option.yAxis(yaxis);
List seriess &＃61; new ArrayList() ;
MarkPoint mp &＃61; new MarkPoint() ;
mp.data(new Data().type(MarkType.max).name("最大值"),
new Data().type(MarkType.min).name("最小值")) ;
for(int i&＃61;0;i Integer[] countArr &＃61; new Integer[num] ;
Line line &＃61; new Line() ;
String name &＃61; names.get(i) ;
for(int j&＃61;num;j>0;j--) {
String riqi &＃61; getStrDate(String.valueOf(j)) ;
countArr[num-j] &＃61; this.cacheCountManager.getCount(id, riqi, name) ;
}
line.name(name).type(SeriesType.line).data(countArr).markPoint(mp) ;
seriess.add(line) ;
}
option.series(seriess);
jsonObj&＃61;JSONObject.fromObject(option.toString());
return "echartsJson";
}

页面显示部分很简洁。

$(function(){
require([ &＃39;echarts&＃39;,&＃39;echarts/chart/line&＃39; ],DrawEChart);
});

function DrawEChart(ec) {
var myChart;
myChart &＃61; ec.init(document.getElementById(&＃39;main&＃39;));
myChart.showLoading({
text: "图表数据正在努力加载...",
});
var date &＃61; $("#dateNum").val() ;
$.ajax({
type : "post",
data:{"dateNum":date},
url : "${ctx}/statistics/statistics!getKeyWordData.action",
dataType : "json",
success : function(data) {
myChart.setOption(data.jsonObj);
myChart.hideLoading();
},
error : function(errorMsg) {
alert("不好意思大爷&＃xff0c;图表请求数据失败啦&＃xff01;");
}
});
}

jar包下载&＃xff1a;http://mvnrepository.com/artifact/com.github.abel533/ECharts