ECharts.js学习(二)动态数据绑定
来源:互联网 发布:java乘法函数 编辑:程序博客网 时间:2024/06/06 13:58
参考 自 http://www.cnblogs.com/leoxuan/p/6513591.html
Echarts 数据绑定
简单的统计表已经可以生成,不过之前图标数据都是直接写在参数里面的,而实际使用中,我们的数据一般都是异步读取的。EChart.js对于数据异步读取这块提供了异步加载的方法。
绑定多组数据
很多时候需要展示的数据不单单是一组数据,很多时候会进行一个数据对比。这个时候只需要在series中增加一组数据,legend中添加一下这个数据组的name
$(document).ready(function(){//指定图标的配置和数据var option = {title : {text:'Echarts 数据统计'},legend : {data:['访问量','用户量']},xAxis:{data:["Android","IOS","PC","Other"]},yAxis:{},series:[{name:'访问量',type:'bar',data:[180,420,333,83]},{name:'用户量', type:'bar', data:[125,330,230,60]}]};//初始化echarts实例 var myChart = echarts.init(document.getElementById('chartmain')); //使用制定的配置项和数据显示图表 myChart.setOption(option);});
数据异步加载
EChart中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption
填入数据和配置项就行。
绑定数据的方式有两种,一种是写写好一些图表参数,然后数据留空,然后在异步读取数据的时候,绑定数据。还有一种就是直接异步读取数据的时候同时设置图表参数和数据绑定。
首先我们准备一份需要加载的数据文件data.json,数据内容:
{"name":["Android","IOS","PC","Other"],"data":[420,200,360,100]}
第一种异步加载的时候设置图表参数和绑定数据
<script type="text/javascript"> //初始化echarts实例 var myChart = echarts.init(document.getElementById('chartmain')); //异步加载的配置项和数据显示图表 $.get('data.json').done(function (data) { data = eval('('+data+')'); myChart.setOption({ title:{ text:'ECharts 异步加载数据' }, tooltip:{}, legend:{ data:['访问量'] }, xAxis:{ data:data.name }, yAxis:{}, series:[ { name:'访问量', type:'bar', data:data.data } ] }) }) </script>
第二种先设置图表参数,后绑定数据
<script type="text/javascript"> //初始化echarts实例 var myChart = echarts.init(document.getElementById('chartmain')); //设置图标配置项 myChart.setOption({ title:{ text:'ECharts 异步加载数据' }, tooltip:{}, legend:{ data:['访问量'] }, xAxis:{ data:[] }, yAxis:{}, series:[ { name:'访问量', type:'bar', data:[] } ] }) //异步加载数据 $.get('data.json').done(function (data) { data = eval('('+data+')'); myChart.setOption({ xAxis:{ data:data.name }, series:[ { //根据名字对应到相应的系列 name:"访问量", data:data.data } ] }) }) </script>
因为是异步加载,所以有时候数据加载会慢,或者延迟。在数据没有加载前,图表这样的。面对这样的图表,肯定会觉得这是没有数据吗,还是图表有问题.对于这块ECharts增加了一个加载动画。
Loading动画加载
//打开loading动画 myChart.showLoading(); //加载数据函数 function bindData(){ //为了效果明显,我们做了延迟读取数据 setTimeout(function(){ //异步加载数据 $.get('data.json').done(function (data) { //获取数据后,隐藏loading动画 myChart.hideLoading(); data = eval('('+data+')'); myChart.setOption({ xAxis:{ data:data.name }, series:[ { //根据名字对应到相应的系列 name:"访问量", data:data.data } ] }) }) },2000) } bindData();
阅读全文
0 0
- ECharts.js学习(二)动态数据绑定
- echarts -- 动态绑定data中的数据
- vue.js动态数据绑定学习
- js数据动态绑定
- echarts图表动态获取后台数据详解(二)
- AngularJS 学习 (二)数据绑定
- D3.js学习笔记(二)——使用绑定在DOM上的数据
- D3.js学习笔记(二)——使用绑定在DOM上的数据
- django学习(二)之分页、vue.js数据绑定及模态对话框的使用
- echarts 实例(一:动态数据)
- ECharts动态加载数据(简单)
- echarts动态加载数据
- Echarts动态加载数据
- ECharts动态获取数据
- 前端之js-echarts(二)
- echarts下拉列表切换数据(二)
- iOS学习(二十四)Objective-C 动态绑定
- js事件on动态绑定数据,绑定多个事件
- 如何学习java编程,做一个程序员大牛呢?
- Python多态
- 区块链介绍
- Windbg双机调试配置
- 【帝国CMS】列表页分页标签样式及首位隐藏JS
- ECharts.js学习(二)动态数据绑定
- SSM框架搭建
- BZOJ 3172: [Tjoi2013]单词 AC自动机/后缀自动机
- springmvc创建导出视图
- 取值方法
- android权限管理
- 88. Merge Sorted Array
- PHPCMS 配置支付宝接口
- 面试OR笔试13——字母数字排序