非同步載入

入門示例中的資料是在初始化後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
        }]
    });
});

如下：

<iframe src="http://echarts.baidu.com/gallery/view.html?c=doc-example/tutorial-async&amp;edit=1&amp;reset=1" width="400" height="300"></iframe>

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

loading 動畫

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

ECharts 預設有提供了一個簡單的載入動畫。只需要呼叫 showLoading 方法顯示。資料載入完成後再呼叫 hideLoading 方法隱藏載入動畫。

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

效果如下：

<iframe src="http://echarts.baidu.com/gallery/view.html?c=doc-example/tutorial-loading&amp;edit=1&amp;reset=1" width="400" height="300"></iframe>

資料的動態更新

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

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

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

具體可以看下面示例：

<iframe src="http://echarts.baidu.com/gallery/view.html?c=doc-example/tutorial-dynamic-data&amp;edit=1&amp;reset=1" width="400" height="300"></iframe>