zoukankan      html  css  js  c++  java
  • 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);
  • 相关阅读:
    Murano Weekly Meeting 2016.05.24
    Murano Weekly Meeting 2016.05.17
    Murano Weekly Meeting 2016.05.10
    python3.4 x86_64-linux-gnu-gcc Error
    初学makefile
    解决Spring JdbcTemplate调用queryForObject()方法结果集为空时报异常
    svn命令行使用
    jquery选中checkbox
    jstl core and jstl fn
    linux上的shutdown命令
  • 原文地址:https://www.cnblogs.com/cdoneiX/p/13042675.html
Copyright © 2011-2022 走看看