Echarts 数据绑定

简单的统计表已经可以生成，不过之前图标数据都是直接写在参数里面的，而实际使用中，我们的数据一般都是异步读取的。EChart.js对于数据异步读取这块提供了异步加载的方法。

绑定多组数据

很多时候需要展示的数据不单单是一组数据，很多时候会进行一个数据对比。这个时候只需要在series中增加一组数据，legend中添加一下这个数据组的name

<!DOCTYPE html>
<html>
<head><title>ECharts.js 数据绑定</title><meta charset="utf-8"><script type="text/javascript" src="js/echarts.js"></script>
</head>
<body><div id="chartmain" style="width:600px; height: 400px;"></div><script type="text/javascript">//指定图标的配置和数据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);</script>
</body>
</html>

效果展示

数据异步加载

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();

效果展示

数据动态实时更新

<script type="text/javascript">        //初始化echarts实例var myChart = echarts.init(document.getElementById('chartmain'));var base = + new Date(2017,3,8);var oneDay = 24*3600*1000;var date = [];var data = [Math.random()*150];var now = new Date(base);var day = 30;function addData(shift){now = [now.getFullYear(),now.getMonth()+1,now.getDate()].join('/');        date.push(now);        data.push((Math.random()-0.5)*10+data[data.length-1]);if (shift) {console.log(data);date.shift();data.shift();}now = new Date(+new Date(now)+oneDay);        }for (var i = 0; i < day; i++) {addData();}//设置图标配置项myChart.setOption({title:{text:'ECharts 30天内数据实时更新'},xAxis:{type:"category",boundaryGap:false,data:date},yAxis:{boundaryGap:[0,'100%'],type:'value'},series:[{name:'成交',type:'line',smooth:true, //数据光滑过度symbol:'none', //下一个数据点stack:'a',areaStyle:{normal:{color:'red'}},data:data}]})setInterval(function(){addData(true);myChart.setOption({xAxis:{data:date},series:[{name:'成交',data:data}]});},1000)
</script>

效果展示

来源：http://www.cnblogs.com/leoxuan/p/6513591.html#top

转载于:https://www.cnblogs.com/ourLifes/p/8017481.html

ECharts.js学习（二）动态数据绑定相关推荐

ECharts.js学习（三）
2019独角兽企业重金招聘Python工程师标准>>> ECharts.js 交互组件 ECharts.js有很多的交互组件,一般经常用到的组件有这些: title:标题组件,包 ...
three.js学习二
物体: 物体由两部分组成,材质和形状形状: 物体的形状,球体,正方体,线条,粒子等直线线条: var material = new THREE.LineBasicMaterial({//这是线段材 ...
网页3D效果库Three.js学习[二]-了解照相机
camera 上篇大致了解了three.js ,并可以创建一个简单的可动的立方体.下来我们着重了解下camera (照相机),照相机其实就是视角,就像你的眼睛.Three.js有两种不同的相机模式:直 ...
Three.js学习二——Three.js极简入门
目录准备开发环境掌握一些概念性知识编码测试创建一个场景(Creating a scene) 创建一个场景渲染场景使立方体动起来结果准备开发环境 1.一台可用浏览器的带文件系统的电脑: ...
three.js学习(二)
组.交互.dat.gui的使用 1.组就像可以把一些THREE创建的物体放到场景里一样,也可以把物体放到组里,然后再把组放到场景里为什么要这么做呢 ?(这不是脱裤子放屁) 可以把放进组的物体看作一 ...
JS高级的学习(二)
JS高级的学习(二) set对象 Set 是一个对象存放数据数据永远不会重复 Set 当成是一个数组遍历使用数组方法 find findIndex Map 数组转成 Set对象 const ...
node.js 学习笔记（二）模板引擎和C/S渲染
node.js 学习笔记(二)模板引擎和C/S渲染文章目录 node.js 学习笔记(二)模板引擎和C/S渲染一.初步实现Apache功能 1.1 使用模板引擎 1.2 在 node 中使用模板引 ...
js中使用echarts做图表的动态展示
ECharts 是一个基于 JavaScript 的开源可视化图表库,强烈建议在官网上学习,更清楚明了https://echarts.apache.org/zh/index.html 下面的只做为个人 ...
全国省份GDP动态统计图表echarts.js插件
下载地址echarts.js插件实现的全国宏观经济指标可视化图表,js全国省份GDP动态统计图表插件. dd:

ECharts.js学习（二）动态数据绑定

Echarts 数据绑定

绑定多组数据

效果展示

数据异步加载

效果展示

Loading动画加载

效果展示

数据动态实时更新

效果展示

ECharts.js学习（二）动态数据绑定相关推荐

最新文章

热门文章