Echarts属性通过定时器实现动画效果的研究（柱图）

最新推荐文章于 2024-06-28 08:46:07 发布

漏刻有时

最新推荐文章于 2024-06-28 08:46:07 发布

阅读量1k

点赞数 1

分类专栏： echarts

LOCKDATAV出品，为避免断章取义走弯路，请注意环境配置和时间。

本文链接：https://blog.csdn.net/weixin_41290949/article/details/109339376

版权

echarts 专栏收录该内容

205 篇文章 29 订阅

订阅专栏

在这里插入图片描述
Echarts组件可以通过定时器实现不同的动画效果。

正常渲染图形

 var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var option = {
        backgroundColor: '#080b30',
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
            show: false,
            type: 'value'
        },
        series: [{
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar',
            barWidth: "30%",
            itemStyle: {
                barBorderRadius: [10, 10, 0, 0]
            }
        }]
    };

    myChart.setOption(option, true);

定时改变对应的属性

    var arr = [0, 1];
    var i = 0;
    var t = setInterval(show, 2000);

    //变色;
    var colorList = ['#ff7f50', '#87cefa'];

    function show() {
        myChart.setOption({
            series: [{
                itemStyle: {
                    color: colorList[i],//柱条的颜色
                    shadowColor: 'rgba(255,255, 255, 0.8)',//阴影颜色
                    shadowBlur: arr[i] * 30,//阴影的模糊大小
                }
            }]
        });

        i = i + 1;
        if (i == arr.length) {
            //clearInterval(t);
            i = 0;
        }
    }