ECharts.js学习（二）动态数据绑定
生活随笔
收集整理的這篇文章主要介紹了
ECharts.js学习（二）动态数据绑定
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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学习（二）动态数据绑定的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 随笔27 面向对象的五大基本原则
- 下一篇： git 创建tag , 查看tag