數據異步加載
EChart中實現異步數據的更新非常簡單，在圖表初始化后不管任何時候只要通過 jQuery 等工具異步獲取數據后通過 setOption 填入數據和配置項就行。
綁定數據的方式有兩種，一種是寫寫好一些圖表參數，然后數據留空，然后在異步讀取數據的時候，綁定數據。還有一種就是直接異步讀取數據的時候同時設置圖表參數和數據綁定。
准備要加載的數據文件data.json假數據實際項目中數據是由后台傳遞過來的，數據內容：
{
"name":["iso","english","china","ufo","seo"],
"data":[400,200,300,100,11]
}
第一種異步加載的時候設置圖表參數和綁定數據，JavaScript中的代碼如下：
var container = document.getElementById('container');
// 初始化echarts對象
var myContainer = echarts.init(container);
$.get('echarts.json', function(data) {//與服務器連接成功
console.log(data);//獲取到的json數據是個對象
myContainer.setOption(option = {
title:{
text:'ECharts 異步加載數據'
},
tooltip:{},
legend:{
data:['訪問量']
},
xAxis:{
data:data.name
},
yAxis:{},
series:[
{
name:'訪問量',
type:'line',
data:data.data
}
]
});
});
運行結果為
第二種先設置圖表參數，后綁定數據。 JavaScript中的代碼如下：
// 初始化echarts對象
var myContainer = echarts.init(document.getElementById('container'));
myContainer.setOption(option = {
title:{
text:'echarts異步加載數據'
},
tooltip:{},
legend:{},
xAxis:{
data:[]
},
yAxis:{},
series:[
{
name:'訪問量',
type:'bar',
data:[]
}
]
});
$.get('echarts.json',function(res){
// console.log(res);
myContainer.setOption({
xAxis:{
data:res.name
},
series:[{
data:res.data
}
]
});
});
運行結果為：
Loading動畫加載
//打開loading動畫
myContainer.showLoading();
//加載數據函數
function bindData(){
//為了效果明顯，我們做了延遲讀取數據
setTimeout(function(){
//異步加載數據
$.get('echarts.json',function(res){
//獲取數據后，隱藏loading動畫
myContainer.hideLoading();
myContainer.setOption(option = {
title:{
text:'echartsLoading加載'
},
tooltip:{},
legend:{},
xAxis:{
data:res.name
},
yAxis:{},
series:[
{
name:'訪問量',
type:'bar',
data:res.data
}
]
});
})
},2000)
}
bindData();
由於運行的動態圖上傳有點麻煩，在這里我截圖兩張圖片，分別是加載前與加載后:
加載后圖片：
數據動態實時更新
數據實時更新的代碼：
var container = document.getElementById('container');
// 初始化echarts對象
var myContainer = echarts.init(container);
var base = + new Date(2018,9,30);
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();
}
//設置圖標配置項
myContainer.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:'pink'
}
},
data:data
}]
})
setInterval(function(){
addData(true);
myContainer.setOption({
xAxis:{
data:date
},
series:[{
name:'成交',
data:data
}]
});
},1000)
運行圖
改代碼是上面數據加載方式的所有頁面代碼，可以直接復制，編輯查看運行效果。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>echarts-異步加載數據</title> 6 <link rel="stylesheet" href="11.scss"> 7 <script type="text/javascript" src="js/echarts.js"></script> 8 <script type="text/javascript" src="js/echarts.min.js"></script> 9 <script type="text/javascript" src="jquery.min.js"></script> 10 <style> 11 #container{ 12 width: 500px; 13 height: 400px; 14 border: 1px solid #ccc; 15 /*background-color: #ccc;*/ 16 } 17 </style> 18 </head> 19 <body> 20 <div id="container"></div> 21 <!-- --> 22 <script type="text/javascript"> 23 var container = document.getElementById('container'); 24 // 初始化echarts對象 25 var myContainer = echarts.init(container); 26 27 // 第一種異步加載的時候設置圖表參數和綁定數據 28 // 異步加載配置項與數據顯示圖表 29 /*$.get('echarts.json', function(data) {//與服務器連接成功 30 console.log(data);//獲取到的json數據是個對象 31 myContainer.setOption(option = { 32 title:{ 33 text:'ECharts 異步加載數據' 34 }, 35 tooltip:{}, 36 legend:{ 37 data:['訪問量'] 38 }, 39 xAxis:{ 40 data:data.name 41 }, 42 yAxis:{}, 43 series:[ 44 { 45 name:'訪問量', 46 type:'line', 47 data:data.data 48 } 49 ] 50 }); 51 });*/ 52 53 // 第二種先設置圖表參數，后綁定數據 54 /*myContainer.setOption(option = { 55 title:{ 56 text:'echarts異步加載數據' 57 }, 58 tooltip:{}, 59 legend:{}, 60 xAxis:{ 61 data:[] 62 }, 63 yAxis:{}, 64 series:[ 65 { 66 name:'訪問量', 67 type:'bar', 68 data:[] 69 } 70 ] 71 }); 72 $.get('echarts.json',function(res){ 73 // console.log(res); 74 myContainer.setOption({ 75 xAxis:{ 76 data:res.name 77 }, 78 series:[{ 79 data:res.data 80 } 81 ] 82 }); 83 });*/ 84 /* //打開loading動畫 85 myContainer.showLoading(); 86 //加載數據函數 87 function bindData(){ 88 //為了效果明顯，我們做了延遲讀取數據 89 setTimeout(function(){ 90 //異步加載數據 91 $.get('echarts.json',function(res){ 92 //獲取數據后，隱藏loading動畫 93 myContainer.hideLoading(); 94 myContainer.setOption(option = { 95 title:{ 96 text:'echartsLoading加載' 97 }, 98 tooltip:{}, 99 legend:{}, 100 xAxis:{ 101 data:res.name 102 }, 103 yAxis:{}, 104 series:[ 105 { 106 name:'訪問量', 107 type:'bar', 108 data:res.data 109 } 110 ] 111 }); 112 }) 113 },2000) 114 } 115 116 bindData(); */ 117 118 //初始化echarts實例 119 var base = + new Date(2017,3,8); 120 var oneDay = 24*3600*1000; 121 var date = []; 122 var data = [Math.random()*150]; 123 var now = new Date(base); 124 var day = 30; 125 function addData(shift){ 126 now = [now.getFullYear(),now.getMonth()+1,now.getDate()].join('/'); 127 date.push(now); 128 data.push((Math.random()-0.5)*10+data[data.length-1]); 129 if (shift) { 130 console.log(data); 131 date.shift(); 132 data.shift(); 133 } 134 now = new Date(+new Date(now)+oneDay); 135 } 136 137 for (var i = 0; i < day; i++) { 138 addData(); 139 } 140 //設置圖標配置項 141 myContainer.setOption({ 142 title:{ 143 text:'ECharts 30天內數據實時更新' 144 }, 145 xAxis:{ 146 type:"category", 147 boundaryGap:false, 148 data:date 149 }, 150 yAxis:{ 151 boundaryGap:[0,'100%'], 152 type:'value' 153 }, 154 series:[{ 155 name:'成交', 156 type:'line', 157 smooth:true, //數據光滑過度 158 symbol:'none', //下一個數據點 159 stack:'a', 160 areaStyle:{ 161 normal:{ 162 color:'red' 163 } 164 }, 165 data:data 166 }] 167 }) 168 setInterval(function(){ 169 addData(true); 170 myContainer.setOption({ 171 xAxis:{ 172 data:date 173 }, 174 series:[{ 175 name:'成交', 176 data:data 177 }] 178 }); 179 },1000) 180 </script> 181 </body> 182 </html>