Echarts后台option对象

简介:

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



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

[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  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 ? 在CODE上查看代码片 派生到我的代码片
  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 ? 在CODE上查看代码片 派生到我的代码片
  1. <div id="main"  style="height: 400px; border: 1px solid #ccc; padding: 10px;">图形正在加载中...</div>  


[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. $(function(){  
  2.     require([ 'echarts','echarts/chart/line' ],DrawEChart);  
  3. });  

[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  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. }  

jar包下载: http://mvnrepository.com/artifact/com.github.abel533/ECharts
目录
相关文章
|
3月前
|
搜索推荐 前端开发 数据可视化
【优秀python web毕设案例】基于协同过滤算法的酒店推荐系统,django框架+bootstrap前端+echarts可视化,有后台有爬虫
本文介绍了一个基于Django框架、协同过滤算法、ECharts数据可视化以及Bootstrap前端技术的酒店推荐系统,该系统通过用户行为分析和推荐算法优化,提供个性化的酒店推荐和直观的数据展示,以提升用户体验。
141 1
|
6月前
|
Java 关系型数据库 MySQL
基于springboot心理树洞管理系统(分前后台springboot+mybatis+mysql+maven+vue+echarts)
基于springboot心理树洞管理系统(分前后台springboot+mybatis+mysql+maven+vue+echarts)
Echarts大屏开发|前后台通用场景
Echarts大屏开发|前后台通用场景
|
6月前
|
Java BI 数据库
基于SSM框架实现面向小微企业的简历管理系统企业简历管理系统(分前后台spring+springmvc+mybatis+maven+jsp+css+echarts)
基于SSM框架实现面向小微企业的简历管理系统企业简历管理系统(分前后台spring+springmvc+mybatis+maven+jsp+css+echarts)
|
JSON 前端开发 JavaScript
Echarts实战案例代码(15):月收入年龄分段等MYSQL分类统计PHP后台数据管理接口API数据的解决方案
Echarts实战案例代码(15):月收入年龄分段等MYSQL分类统计PHP后台数据管理接口API数据的解决方案
183 0
|
12月前
|
JSON 数据格式
ECharts折线图渲染json格式数据(格式为对象)
ECharts折线图渲染json格式数据(格式为对象)
130 0
echarts插件-从后台请求的数据在页面显示空白的问题
echarts插件-从后台请求的数据在页面显示空白的问题
124 0
143Echarts - 矩形树图(ECharts Option Query)
143Echarts - 矩形树图(ECharts Option Query)
62 0
|
数据管理 PHP 容器
layui框架实战案例(2):LayUI表格与Echarts图表交互展示及PHP后台数据管理(搜索、翻页、动态显示)
layui框架实战案例(2):LayUI表格与Echarts图表交互展示及PHP后台数据管理(搜索、翻页、动态显示)
496 0
|
数据采集 数据可视化 前端开发
漏刻有时数据可视化大屏核心完整版框架PHP后台数据管理 API数据接口 Echarts图表库 自带电脑端和手机端两套模版且支持自定义前端模版开发
漏刻有时数据可视化大屏核心完整版框架PHP后台数据管理 API数据接口 Echarts图表库 自带电脑端和手机端两套模版且支持自定义前端模版开发
211 0