學習下ECharts 非同步載入資料

導讀	ECharts 通常資料設定在 setOption 中，如果我們需要非同步載入資料，可以配合 jQuery等工具，在非同步獲取資料後透過 setOption 填入資料和配置項就行。

ECharts 通常資料設定在 setOption 中，如果我們需要非同步載入資料，可以配合 jQuery等工具，在非同步獲取資料後透過 setOption 填入資料和配置項就行。 json 資料：

echarts_test_data.json 資料：
{
    "data_pie" : [
    {"value":235, "name":"影片廣告"},
    {"value":274, "name":"聯盟廣告"},
    {"value":310, "name":"郵件營銷"},
    {"value":335, "name":"直接訪問"},
    {"value":400, "name":"搜尋引擎"}
    ]
}

例項

var myChart = echarts.init(document.getElementById('main'));
$.get('(data) {
    myChart.setOption({
        series : [
            {
                name: '訪問來源',
                type: 'pie',    // 設定圖表型別為餅圖
                radius: '55%',  // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。
                data:data.data_pie
            }
        ]
    })
}, 'json')

如果非同步載入需要一段時間，我們可以新增 loading 效果，ECharts 預設有提供了一個簡單的載入動畫。只需要呼叫 showLoading 方法顯示。資料載入完成後再呼叫 hideLoading 方法隱藏載入動畫：

例項

var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();  // 開啟 loading 效果
$.get('(data) {
    myChart.hideLoading();  // 隱藏 loading 效果
    myChart.setOption({
        series : [
            {
                name: '訪問來源',
                type: 'pie',    // 設定圖表型別為餅圖
                radius: '55%',  // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。
                data:data.data_pie
            }
        ]
    })
}, 'json')

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

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

例項

var base = +new Date(2014, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];
var data = [Math.random() * 150];
var now = new Date(base);
function addData(shift) {
    now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
    date.push(now);
    data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);
    if (shift) {
        date.shift();
        data.shift();
    }
    now = new Date(+new Date(now) + oneDay);
}
for (var i = 1; i < 100; i++) {
    addData();
}
option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: date
    },
    yAxis: {
        boundaryGap: [0, '50%'],
        type: 'value'
    },
    series: [
        {
            name:'成交',
            type:'line',
            smooth:true,
            symbol: 'none',
            stack: 'a',
            areaStyle: {
                normal: {}
            },
            data: data
        }
    ]
};
setInterval(function () {
    addData(true);
    myChart.setOption({
        xAxis: {
            data: date
        },
        series: [{
            name:'成交',
            data: data
        }]
    });
}, 500);

原文來自：