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

Posted cdoneix

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Echart动效系列01——循环切换数据以实现图表的动态效果相关的知识,希望对你有一定的参考价值。

效果:通过不断修改(定时器)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);

 

以上是关于Echart动效系列01——循环切换数据以实现图表的动态效果的主要内容,如果未能解决你的问题,请参考以下文章

Echart图表使用

WPF 使用Webbrowser加载Echart图表库实现蜡烛图。

WPF 使用Webbrowser加载Echart图表库实现蜡烛图。

echart入门

在小程序中使用Echart图表

echart 柱状图的双y轴怎么实现