非同步載入

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

loading 動畫 

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

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

myChart.showLoading({
    text: 'loading',
    color: '#4cbbff',
    textColor: '#4cbbff',
    maskColor: 'rgba(0, 0, 0, 0.9',
});
$.get('data.json').done(function (data) {
    myChart.hideLoading();
    myChart.setOption(...);
});