ECharts - 7.異步數據加載和更新

異步數據加載和更新

異步加載

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

var myChart = echarts.init(document.getElementById('main'));

$.get('data.json').done(function (data) {
    myChart.setOption({
        title: {
            text: '異步數據加載示例'
        },
        tooltip: {},
        legend: {
            data:['銷量']
        },
        xAxis: {
            data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
        },
        yAxis: {},
        series: [{
            name: '銷量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    });
});

或者先設置完其它的樣式，顯示一個空的直角座標軸，然後獲取數據後填入數據。

var myChart = echarts.init(document.getElementById('main'));
// 顯示標題，圖例和空的座標軸
myChart.setOption({
    title: {
        text: '異步數據加載示例'
    },
    tooltip: {},
    legend: {
        data:['銷量']
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '銷量',
        type: 'bar',
        data: []
    }]
});

// 異步加載數據
$.get('data.json').done(function (data) {
    // 填入數據
    myChart.setOption({
        xAxis: {
            data: data.categories
        },
        series: [{
            // 根據名字對應到相應的系列
            name: '銷量',
            data: data.data
        }]
    });
});

如下：

ECharts 中在更新數據的時候需要通過name屬性對應到相應的系列，上面示例中如果name不存在也可以根據系列的順序正常更新，但是更多時候推薦更新數據的時候加上系列的name數據。

loading 動畫

如果數據加載時間較長，一個空的座標軸放在畫布上也會讓用戶覺得是不是產生 bug 了，因此需要一個 loading 的動畫來提示用戶數據正在加載。

ECharts 默認有提供了一個簡單的加載動畫。只需要調用 showLoading 方法顯示。數據加載完成後再調用 hideLoading 方法隱藏加載動畫。

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

效果如下：

數據的動態更新

ECharts 由數據驅動，數據的改變驅動圖表展現的改變，因此動態數據的實現也變得異常簡單。

所有數據的更新都通過 setOption實現，你只需要定時獲取數據，setOption 填入數據，而不用考慮數據到底產生了那些變化，ECharts 會找到兩組數據之間的差異然後通過合適的動畫去表現數據的變化。

ECharts 3 中移除了 ECharts 2 中的 addData 方法。如果只需要加入單個數據，可以先 data.push(value) 後 setOption

具體可以看下面示例：