Echart动效系列01——循环切换数据以实现图表的动态效果

Posted 2020-12-24 cdoneix

效果：通过不断修改（定时器）Echart系列中的数据，并且重新渲染，实现Echart图表的动态效果，避免枯燥的静态图表

示例地址：http://v.bootstrapmb.com/2020/1/r6k0g7355/   

var myechart = echarts.init($(‘.line‘)[0]);
    myechart.setOption(option);

    //点击效果
    var data = {
        year: [
            [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
            [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
        ],
        quarter: [
            [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
            [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
        ],
        month: [
            [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
            [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
        ],
        week: [
            [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
            [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
        ]
    }
    $(‘.sales ‘).on(‘click‘, ‘.caption a‘, function () {
        $(this).addClass(‘active‘).siblings(‘a‘).removeClass(‘active‘);
        //option series   data
        //获取自定义属性值
        var key = $(this).attr(‘data-type‘);
        //取出对应的值
        key = data[key];
        //将值设置到 图表中
        option.series[0].data = key[0];
        option.series[1].data = key[1];
        //再次调用才能在页面显示
        myechart.setOption(option);
    });

//定时器
    var index = 0;
    var timer = setInterval(function () {
        index++;
        if (index > 4) {
            index = 0;
        };
        $(‘.sales .caption a‘).eq(index).click();
    }, 2000);