ECharts動態更新

首先初始化一個ECharts實例：

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

接着隨便放幾個內容進去：

myChart.setOption({
        title: {
            text: '異步數據加載示例'
        },
        tooltip: {},
        legend: {
            data: ['銷量']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '銷量',
            type: 'bar',
            boundaryGap:false,
            data: []
        }]
    });

所有的動態更新，修改數據後，直接再setOption即可，比如上面的圖表沒有內容，然後：

    var names = [1, 2, 3];
    var nums = [3, 4, 5];
    myChart.setOption({
            xAxis: {
                data: names
            },
            series: [{
                name: '銷量',
                data: nums
            }]
        })

這樣就可以異步更新內容了。中間可以加入loading頁面，通過下面代碼啓動

    myChart.showLoading();

通過下面代碼關閉

    myChart.hideLoading()

當然，也可以通過對names[]和nums[]不斷push的方法，動態加入新的數據。

        names.push(nname);
        nums.push(nnum);

但是這樣圖表會越來越密集，所以可以做一個判斷，

        if (names.length>7){
            names.shift();
            nums.shift();
        }

shift方法就是刪除數組中的第一個數據，返回值爲刪除的值。