白日何短短,百年苦易满

Echarts动态加载后台数据小总结

公司最近的一个大数据交易项目用到了Echarts这款纯JS的图表库,它提供了可高度个性化定制的数据可视化图表,在美观度、数据加载的效率上几乎成了大数据图表化展示的不二选择。Echarts官网(http://echarts.baidu.com/)也有关于异步数据加载的示例,但只是读取json文件且没涉及到较复杂的动态数据加载,这对于未使用过Echarts的开发者来说也许不甚明了,遂作此小结希望可节省各位看官的开发时间,以及为日后知识遗忘做备份。下面切入正题。

注意:1、用Ajax请求获取后台数据 2、Echarts只能处理Json数据

后台Controller:根据业务需求不同而返回不同数据,我前台要循环遍历Echarts的series进行数据添加,所以后台返了个二维数组过去。

5

前端JSP页面:为Echarts准备一个具有高宽的dom容器

jsp

前端JS:初始化时即加载Echarts,将不需要进行加载的配置项(例如title、tooltip等)不作改动,将需要动态加载数据的配置放入ajax的success:function(){}中进行处理。

js1

定义一个为series这个即将动态加入数据的配置项准备的名为Item的数组容器,

接着对后台返回过来的数据(childkind)进行遍历,将遍历出的数据赋给容器中的相应属性(例:tp.name=childkind[i])。由于series里面的data属性(接收的是数组数据)也需要进行数据动态加载,接着再定义一个list数组,循环写入数据到list中,再将list数组返给tp.data。

最后再设置Echarst相关配置项。

js2

未经允许不得转载:徐宏涛博客 » Echarts动态加载后台数据小总结

分享到:更多 ()

评论 抢沙发

评论前必须登录!