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

你可能感兴趣的:(ECharts)