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对象相关推荐
- javascript select option对象总结
javascript select option对象总结 一基础理解: var e = document.getElementById("selectId"); e. option ...
- select 下拉菜单Option对象使用add(elements,index)方法动态添加
2019独角兽企业重金招聘Python工程师标准>>> 原生js 的add函数为下拉菜单增加选项 1.object.add(oElement [, iIndex]) index 可选 ...
- 前端:JS/35/二级联动菜单,select对象,select对象的属性,option对象,option对象属性,实例:省份列表与城市列表的联动
二级联动菜单 select 对象 一个<select>标记,对应一个select对象: select对象的属性 1,options[] :设置或返回下拉列表中<option>标 ...
- jQuery取得列表控件选中的option对象
开发工具与关键技术:VS 后端 作者:陈芝番 撰写时间:2019.7.7 这个jQuery取得列表控件选中的option对象,比起原始表单控件清晰看到option对象,但还是各有各的特点,jQue ...
- ECharts学习总结(五):echarts的Option概览
注:下面内容摘自echarts官网,原文地址:http://echarts.baidu.com/doc/doc.html#%E9%80%89%E9%A1%B9 option 图表选项,包含图表实例任何 ...
- Echarts中Option属性设置
一.title--标题组件 标题组件,包含主标题和副标题. title:{x:"left", // 'left' | 'right' | 'center' | '100px'y:& ...
- Web前台传对象字符串到后台并让后台反序列化对象字符串的方法(ASP.NET) json对象和字符串的转换
从零开始做了两个月多一点的.NET开发,期间经常遇到需要从Web前台传数据给后台处理的情况.比如下面(用了jQuery的Ajax Post),这里为了演示方便没有对参数进行encodeURICompo ...
- vue+echarts 后台获取数据_vue+element+echarts 响应式后台管理系统,了解一下?
寒假结束了,趁着寒假,自己玩了一下element和echarts去实现了一个简单的后台管理系统. 项目比较简单,十分适合入门,涉及到了轮播图,表格,表单,echarts柱形图和折线图,以及网页的响应式 ...
- postman 传递数组对象_postman json请求参数向JAVA后台传对象以及数组
一,JSON格式传递实体类对象,postman请求参数格式如下(Headers请求头添加 Content-Type:application/json) 后台接收如下(@ResponseBody用于数据 ...
最新文章
- 删除单链表中的重复节点(c语言版本)
- 不能摸鱼的工作不是好工作?
- 常考数据结构与算法:反转字符串
- How mBDOC is generated and saved in DB
- C#中使用DTS来导入数据及相关问题
- Towards Efficient Privacy-Preserving Inspection of TLS Encrypted Traffic
- day27 java的集合(5) HashMap集合和与Hashtable的区别
- Java虚拟机的什么周期
- 几个安卓 app 暴露超1亿用户的数据
- ogg sqlserver2012 抽取不到日志_ogg抽取进程与数据字典的关系
- LOL登录后黑屏,主界面一直加载解决办法
- linux下载安装命令
- 销售管理系统java sql_java+sqlserver商品销售管理系统的设计与实现
- java标识符规范书写的规则
- 性能测试专项:帧率测试 FPS
- PMCAFF微课17期 - 教你如何用数据玩转移动互联网APP运营(笔记下载)
- 网页播放视频没有进度条怎么可以实现倍速播放
- 黑群晖linux安装教程,黑群晖菜鸟安装教程(一)制作U盘引导及软洗白!
- 计算机毕业设计ssm工作室管理系统v186g系统+程序+源码+lw+远程部署
- php file取不到手机相册,php file_get_contents 读取不了图片
热门文章
- 大数据使用及现状调研报告
- Centos/ubuntu配置SVN服务
- [0] Tornado Todo 开篇
- Ext.MessageBox.Show使用Progress
- Svchost.exe进程详解及Svchost.exe病毒清除方法
- 【Visual C++】游戏开发笔记四十 浅墨DirectX教程之八 绘制真实质感的三维世界:光照与材质专场...
- SQLDump***.txt
- 用设计模式去掉没必要的状态变量 —— 状态模式
- CodeBlocks 导航栏/输出栏/菜单栏消失
- intellij无法输入中文