首页 > 代码库 > Echarts后台option对象

Echarts后台option对象

最近在工作中使用到了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({
														text: "图表数据正在努力加载...",
													});
													var date = $("#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("不好意思大爷,图表请求数据失败啦!");
																}
															}
														);
												}

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

Echarts后台option对象