vue中echarts实现水球动画图

实现如上图样式

思路：把后面图片用背景图片写入 中间水球图使用echarts中的liquidFill

由于自己是在vue中使用的 首先要用npm安装

npm i echarts-liquidfill -s

在页面引用

import "echarts-liquidfill";

//html模块

<div class="carLeft">
   <div class="carCharts" ref="carCharts"></div>
</div>


//css模块

 .carLeft{
        width: 1.4rem;
        height: 1.66rem;
        margin-right: 0.24rem;
        margin-top: 0.24rem;
        background: url(../assets/image/carBg.png) no-repeat;
        background-size: 100%;
        position: relative;
        .carCharts{
            position: absolute;
            top: 0.26rem;
            left: .13rem;
            width: .9rem;
            height: .9rem;
            // left: 0.1rem;
        }
    }

//js模块

                        var myChart = echarts.init(this.$refs.carCharts);
                        const echartsData =  [40, 60];

                        var option = {
                            waveLength:'100%',
                            // x轴
                            xAxis:{
                                show:false, // 不显示
                            },
                            // y轴
                            yAxis: {
                                show:false, // 不显示
                            },
                            grid:{
                                top:'2.5%',
                                right:'40',
                                bottom:'2.5%',
                                left:0,
                            },
                            series: [{
                                type: 'liquidFill',
                                radius: '100%',  // 半径大小
                                center: ['50%', '50%'],    // 布局位置
                                waveLength:'150',
                                data:echartsData, // 水球波纹值


                                //根据设计设置水波球背景颜色为透明
                                backgroundStyle: {
                                    color: 'rgba(255,255,255,0)',
                                },
                                outline: { // 轮廓设置  不展示
                                    show: false
                                },
                                itemStyle: {  
                                    //设置水球波动的渐变颜色
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 1,
                                            color: 'rgba(23,242,206, .65)'
                                        },  {
                                            offset: 0.9,
                                            color: 'rgba(23,242,206, .15)'
                                        },{
                                            offset: 0.4,
                                            color: 'rgba(23,242,206, .15)'
                                        },{
                                            offset: 0,
                                            color: 'rgba(12,255,215,1)'
                                        }],
                                        globalCoord: false
                                    }
                                },
                                //水球中间展示字体及颜色
                                label:{
                                    normal:{
                                        textStyle: {
                                            fontSize: 24,
                                            color:'#fff',
                                            fontWeight:400,
                                            formatter: '',
                                        }
                                    }
                                }
                            }]
                        };
                        myChart.clear();
                        myChart.resize();
                        myChart.setOption(option);