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

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;
        }
    }

Done！