echarts 条形统计图 持续上升的效果

    var myChart = echarts.init(document.getElementById('main'));
    option = {
        xAxis: {
            type: 'category',
            'axisLabel': {
                'interval': 0
            },
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', "666"],
            splitLine: {
                show: false
            },
            
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [10, 20, 10, 8, 0, 11, 10, 30],
            type: 'bar',
            axisType: 'category',
            autoPlay: true,
            playInterval: 1000,
        }]
    };
    window.setInterval(function(){
        getApi();

// document.getElementById('main').removeAttribute('_echarts_instance_'); //重新加载数据

    },3000)
    function getApi() {
        //x上限,y下限     
        var x = 5    ;
        var y = 0;
        //设置时间 1-10秒  1000-毫秒
        setTimeout(getApi, 1000);
        var rand1 = parseInt(Math.random() * (x - y + 1) + y);
        var rand2 = parseInt(Math.random() * (x - y + 1) + y);
        var rand3 = parseInt(Math.random() * (x - y + 1) + y);
        var rand4 = parseInt(Math.random() * (x - y + 1) + y);
        var rand5 = parseInt(Math.random() * (x - y + 1) + y);
        var rand6 = parseInt(Math.random() * (x - y + 1) + y);
        var rand7 = parseInt(Math.random() * (x - y + 1) + y);
        var rand8 = parseInt(Math.random() * (x - y + 1) + y);
        
            option.series[0].data[0] += rand1;
            option.series[0].data[1] += rand2;
            option.series[0].data[2] += rand3;
            option.series[0].data[3] += rand4;
            option.series[0].data[4] += rand5;
            option.series[0].data[5] += rand6;
            option.series[0].data[6] += rand7;
            option.series[0].data[7] += rand8;
        

// console.log("option.series.data",option.series.data);
// myChart = echarts.init(document.getElementById('main'));

        myChart.setOption(option,true);
    }
    


clipboard.png

现在是每隔1秒执行一次,但执行时是直接跳到当前值

阅读 2k
1 个回答

将option中series的获取写成一个方法,再将这个方法放入定时器中。配置加载一次后面就刷新数据就好了

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题