echart漏斗图动画效果

一、前言

又快过年了，时间过得真快啊！好废话不多说。

demo预览地址：https://zekeup.com/openSource/FunnelChart/index.html

demo下载地址（rar压缩包）：https://zekeup.com/package/FunnelChart.rar

博主想实现的效果如下：

二、思路

想过改变echart的option配置项来实现效果，开始改变data数据，效果不理想，想到改变颜色属性，于是实现了上述效果。

ps:其实代码实现不难，难的是上面这个gif图的制作，我用PS搞了半天，男上加男。希望各位码子（古代尊称某某子）点个赞吧！

三、关键代码

主要是改变color的部分代码

//5秒钟开始一次动画
    timer=setInterval(()=>{
        //把上两个的透明度变为0
        EchartOption.color=['rgba(121,135,179,0)', 'rgba(255,228,128,0)','rgba(255,153,104,1)'];
        EchartObj.setOption(EchartOption,true);
        setTimeout(()=>{
            //把一个的透明度变为0
            EchartOption.color=['rgba(121,135,179,0)', 'rgba(255,228,128,1)','rgba(255,153,104,1)'];
            EchartObj.setOption(EchartOption,true);
            setTimeout(()=>{
                //没有透明度
                EchartOption.color=['rgba(121,135,179,1)', 'rgba(255,228,128,1)','rgba(255,153,104,1)'];
                EchartObj.setOption(EchartOption,true);
            },1000)
        },1000)
    },5000)