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>
效果展示