echarts的后台交互
2015-07-17 10:32
281 查看
好久没写东西,这两天研究了下echarts,总算是大功告成了,写把实体类放上来
public class EchartsVo { private List<String> xAxis; private List<String> lengend; private List<Series> seriesList; public List<String> getxAxis() { return xAxis; } public void setxAxis(List<String> xAxis) { this.xAxis = xAxis; } public List<String> getLengend() { return lengend; } public void setLengend(List<String> lengend) { this.lengend = lengend; } public List<Series> getSeriesList() { return seriesList; } public void setSeriesList(List<Series> seriesList) { this.seriesList = seriesList; } }
public class Series { private String name; private String type; private List<Double> data; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getType() { return type; } public void setType(String type) { this.type = type; } public List<Double> getData() { return data; } public void setData(List<Double> data) { this.data = data; } }
从后台中返回“EchartsVo”的json数据即可在jsp页面中操作了
<script type="text/javascript"> $(function(){ require.config({ paths: { echarts: '/csmis/js/echarts' } }); require( [ 'echarts', 'echarts/chart/line', // 按需加载所需图表,如需动态类型切换功能,别忘了同时加载相应图表 'echarts/chart/bar' ],DrawEChart); function DrawEChart(ec){ $.getJSON("/csmis/alarmStatics/getStaticsEchartsData.action",function(result){ var myChart = ec.init(document.getElementById('main')); var option = { tooltip : { trigger: 'axis' }, legend: { data: result.lengend /*由于我的option.lengend.data = result.lengend;报错提示data属性不能赋值,这么坑爹的错误,所以就写在echarts里了*/ }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, xAxis : [ { type : 'category', data : [] } ], yAxis : [ { type : 'value', splitArea : {show : true} } ], series : [] }; option.xAxis[0].data = result.xAxis; option.series = result.seriesList; myChart.setOption(option); var ecConfig = require('echarts/config'); function eConsole(param) { return; myChart.setOption(option); } myChart.on(ecConfig.EVENT.CLICK, eConsole); }); } }); </script>
由于我的option.lengend.data = result.lengend;报错提示data属性不能赋值,这么坑爹的错误,所以就写在echarts里了 在这里提示返回的result是EchartsVo的json数据。
相关文章推荐
- http防盗链
- centos装新版php
- JS 中如何判断 undefined
- IOS8下地图定位的变化
- 对unity3d编辑器进行扩展的教程
- Unity3D之Editor扩展学习——四大名捕闹京东
- 计算数组的字节数
- URL地址中的#符号使用说明
- Oracle导入和导出dmp后缀的文件
- 黑马程序员---ios学习日志9
- 每天进步一点达——MySQL——myisampack
- 如何将word完整的转换成pdf文件
- ubuntu14.10下安装qemu-kvm
- Linux Socket编程(不限Linux)
- Unity3D自带例子AngryBots的分析
- Unity 自动寻路Navmesh之入门
- Unity 自动寻路Navmesh之高级主题
- 手动脱Mole Box壳实战总结
- TFS中项目集合规划的思考
- How To Use XDOLoader to Manage, Download and Upload Files? (DOC ID 469585.1)