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方法就是删除数组中的第一个数据，返回值为删除的值。