Vue3水球图

<div class="ads" style="width: 175px;height: 175px;border: 3px solid red;border-radius: 50%;display: flex;justify-content: center;align-items: center; border-color: #0F81A1#1ACDFD  	#0F81A1  #1ACDFD;">
					<div  class="dfg" style="width:170px;height:170px;" ref="hygrometer"></div>
				</div>

const drawLiquidfill =function(){
				      // 基于准备好的dom，初始化echarts实例
				      let hygrometer = proxy.$echarts.init(proxy.$refs.hygrometer)
				      // 使用指定的配置项和数据显示图表
				      hygrometer.setOption({
				        tooltip: {
				          show: false
				        },
				          series: [{
				            name: '0',
				            type: 'liquidFill',
				            radius: '150px',
				            data: [5],
				            label: {
				                normal: {
				                    color: '#27e5f1',
				                    insideColor: '#fff',
				                    textStyle: {
				                        fontSize: 40,
				                        fontWeight: 'bold',
				                    }
				                }
				            },
				            color: [{
				                type: 'linear',
				                x: 0,
				                y: 1,
				                x2: 0,
				                y2: 0,
				                colorStops: [{
				                    offset: 1,
				                    color: ['#6a7feb'], // 0% 处的颜色
				                }, {
				                    offset: 0,
				                    color: ['#27e5f1'], // 100% 处的颜色
				                }],
				                global: false // 缺省为 false
				            }],
				            outline: {
				                show: true,
				                borderDistance: 5,
				                itemStyle: {
				                    borderColor: '#27e5f1',
				                    borderWidth: 3
				                }
				            }
				        }]
				      })
					  console.log(hygrometer._chartsViews[0].__model.option);
					  		
						  
			  		}

	    @keyframes rotate360 {
	        100% {
	            transform: rotate(360deg);
	        }
			
	    }
		@keyframes rotate {
		   100% {
		       transform: rotate(-360deg);
		   }
			
		}
	.ads{
		animation: rotate360 5s linear 0.2s infinite;
		
	}
	.dfg{
		animation: rotate 5s linear 0.2s infinite;
	}

效果图