echart漏斗图动画效果

客官°小女子只卖身不卖艺 2022-10-24 02:52 180阅读 0赞

一、前言

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

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

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

博主想实现的效果如下：

![漏斗图动画][20210129103623171.gif]

二、思路

想过改变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)

[https_zekeup.com_openSource_FunnelChart_index.html]: https://zekeup.com/openSource/FunnelChart/index.html
[https_zekeup.com_package_FunnelChart.rar]: https://zekeup.com/package/FunnelChart.rar
[20210129103623171.gif]: /images/20221024/b9a55b8fee574cbbb6a30584e4bc7802.png