異步加載

數(shù)據(jù)是在初始化后setOption中直接填入的，但是很多時(shí)候可能數(shù)據(jù)需要異步加載后再填入。ECharts 中實(shí)現(xiàn)異步數(shù)據(jù)的更新非常簡單，在圖表初始化后不管任何時(shí)候只要通過 jQuery 等工具異步獲取數(shù)據(jù)后通過 setOption 填入數(shù)據(jù)和配置項(xiàng)就行。

loading 動(dòng)畫

如果數(shù)據(jù)加載時(shí)間較長，一個(gè)空的坐標(biāo)軸放在畫布上也會(huì)讓用戶覺得是不是產(chǎn)生 bug 了，因此需要一個(gè) loading 的動(dòng)畫來提示用戶數(shù)據(jù)正在加載。

ECharts 默認(rèn)有提供了一個(gè)簡單的加載動(dòng)畫。只需要調(diào)用 showLoading 方法顯示。數(shù)據(jù)加載完成后再調(diào)用 hideLoading 方法隱藏加載動(dòng)畫。

myChart.showLoading();
$.get('data.json').done(function (data) {
    myChart.hideLoading();
    myChart.setOption(...);
});

效果如下

image.png

數(shù)據(jù)的動(dòng)態(tài)更新

ECharts 由數(shù)據(jù)驅(qū)動(dòng)，數(shù)據(jù)的改變驅(qū)動(dòng)圖表展現(xiàn)的改變，因此動(dòng)態(tài)數(shù)據(jù)的實(shí)現(xiàn)也變得異常簡單。

所有數(shù)據(jù)的更新都通過 setOption實(shí)現(xiàn)，你只需要定時(shí)獲取數(shù)據(jù)，setOption 填入數(shù)據(jù)，而不用考慮數(shù)據(jù)到底產(chǎn)生了那些變化，ECharts 會(huì)找到兩組數(shù)據(jù)之間的差異然后通過合適的動(dòng)畫去表現(xiàn)數(shù)據(jù)的變化。

具體效果：

image.png