ECharts.js学习（二）动态数据绑定
Echarts?數(shù)據(jù)綁定
簡單的統(tǒng)計表已經(jīng)可以生成，不過之前圖標數(shù)據(jù)都是直接寫在參數(shù)里面的，而實際使用中，我們的數(shù)據(jù)一般都是異步讀取的。EChart.js對于數(shù)據(jù)異步讀取這塊提供了異步加載的方法。
綁定多組數(shù)據(jù)
很多時候需要展示的數(shù)據(jù)不單單是一組數(shù)據(jù)，很多時候會進行一個數(shù)據(jù)對比。這個時候只需要在series中增加一組數(shù)據(jù)，legend中添加一下這個數(shù)據(jù)組的name
<!DOCTYPE html> <html> <head><title>ECharts.js 數(shù)據(jù)綁定</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">//指定圖標的配置和數(shù)據(jù)var option = {title:{text:'ECharts 數(shù)據(jù)統(tǒng)計'},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'));//使用制定的配置項和數(shù)據(jù)顯示圖表myChart.setOption(option);</script> </body> </html>效果展示
數(shù)據(jù)異步加載
EChart中實現(xiàn)異步數(shù)據(jù)的更新非常簡單，在圖表初始化后不管任何時候只要通過 jQuery 等工具異步獲取數(shù)據(jù)后通過?setOption?填入數(shù)據(jù)和配置項就行。
綁定數(shù)據(jù)的方式有兩種，一種是寫寫好一些圖表參數(shù)，然后數(shù)據(jù)留空，然后在異步讀取數(shù)據(jù)的時候，綁定數(shù)據(jù)。還有一種就是直接異步讀取數(shù)據(jù)的時候同時設置圖表參數(shù)和數(shù)據(jù)綁定。
首先我們準備一份需要加載的數(shù)據(jù)文件data.json，數(shù)據(jù)內容：
{"name":["Android","IOS","PC","Other"],"data":[420,200,360,100]}第一種異步加載的時候設置圖表參數(shù)和綁定數(shù)據(jù)
<script type="text/javascript"> //初始化echarts實例var myChart = echarts.init(document.getElementById('chartmain')); //異步加載的配置項和數(shù)據(jù)顯示圖表$.get('data.json').done(function (data) {data = eval('('+data+')'); myChart.setOption({title:{text:'ECharts 異步加載數(shù)據(jù)'},tooltip:{},legend:{data:['訪問量']},xAxis:{data:data.name},yAxis:{},series:[{name:'訪問量',type:'bar',data:data.data}]})})</script>第二種先設置圖表參數(shù)，后綁定數(shù)據(jù)
<script type="text/javascript"> //初始化echarts實例var myChart = echarts.init(document.getElementById('chartmain')); //設置圖標配置項myChart.setOption({title:{text:'ECharts 異步加載數(shù)據(jù)'},tooltip:{},legend:{data:['訪問量']},xAxis:{data:[]},yAxis:{},series:[{name:'訪問量',type:'bar',data:[]}]})//異步加載數(shù)據(jù)$.get('data.json').done(function (data) {data = eval('('+data+')'); myChart.setOption({ xAxis:{data:data.name}, series:[{ //根據(jù)名字對應到相應的系列name:"訪問量",data:data.data}]})})</script>效果展示
?因為是異步加載，所以有時候數(shù)據(jù)加載會慢，或者延遲。在數(shù)據(jù)沒有加載前，圖表這樣的。面對這樣的圖表，肯定會覺得這是沒有數(shù)據(jù)嗎，還是圖表有問題.對于這塊ECharts增加了一個加載動畫。
Loading動畫加載
//打開loading動畫myChart.showLoading();//加載數(shù)據(jù)函數(shù)function bindData(){//為了效果明顯，我們做了延遲讀取數(shù)據(jù)setTimeout(function(){ //異步加載數(shù)據(jù)$.get('data.json').done(function (data) { //獲取數(shù)據(jù)后，隱藏loading動畫myChart.hideLoading();data = eval('('+data+')'); myChart.setOption({xAxis:{data:data.name},series:[{//根據(jù)名字對應到相應的系列name:"訪問量",data:data.data}]})})},2000)}bindData();效果展示
數(shù)據(jù)動態(tài)實時更新
<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天內數(shù)據(jù)實時更新'},xAxis:{type:"category",boundaryGap:false,data:date},yAxis:{boundaryGap:[0,'100%'],type:'value'},series:[{name:'成交',type:'line',smooth:true, //數(shù)據(jù)光滑過度symbol:'none', //下一個數(shù)據(jù)點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 面向对象的五大基本原则
- 下一篇： IDEA建立Spring MVC Hel