首页 > 代码库 > 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对象
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。