vue 封装水球图

本文主要是介绍vue 封装水球图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、安装 echarts 与 echarts-liquidfill

pnpm i echarts
pnpm i echarts-liquidfill

2、组件中引入

import * as echarts from 'echarts'
import 'echarts-liquidfill'

3、封装通用组件

    <div class="waterball-chart"><div ref="chartContainer" style="width: 100%; height: 90%"></div></div>

import { ref, onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import 'echarts-liquidfill'
const props = defineProps<{borderColor: anytitleInfo: anypercentage: anycolor: anylabelNumber: anypercentSize: anyunitSize: anypadding: any
}>()
const chartContainer = ref(null)
// ----------------------------------
const drawWaterball = (percentage: any) => {const chart = echarts.init(chartContainer.value)const option = {series: [{type: 'liquidFill',data: [percentage / 100], // 百分比的值，取值范围为0到1color: [props.color],radius: '85%', // 水球图的半径，可以根据需要调整label: {formatter(param: any) {return [`{a|${props.labelNumber || (param.value * 100).toFixed(0)}}`,'{b|%}',].join('')},rich: {a: {fontSize: props.percentSize,color: '#FFFFFF',fontFamily: 'DINPro',fontWeight: 400,},b: {fontSize: props.unitSize,color: '#FFFFFF',fontFamily: 'DINPro-Regular',fontWeight: 400,padding: props.padding,},},},title: {text: `${(0.2 * 100).toFixed(0)}{a|%}`,textStyle: {fontSize: 12,fontFamily: 'Microsoft Yahei',fontWeight: 'normal',color: '#bcb8fb',rich: {a: {fontSize: 10,},},},x: 'center',y: '35%',},backgroundStyle: {color: {type: 'radial',x: 0.5,y: 0.5,r: 0.8,colorStops: [{offset: 0,color: 'rgba(204, 230, 255,1)', // 0% 处的颜色},{offset: 0.5,color: 'rgba(204, 230, 255, 1)', // 0% 处的颜色},{offset: 1,color: 'rgba(204, 230, 255, 1)', // 100% 处的颜色},],globalCoord: false, // 缺省为 false},},outline: {// show:false,borderDistance: 0,itemStyle: {borderWidth: 10,borderColor: props.borderColor,},},},],}setTimeout(() => {chart.resize()chart.setOption(option)}, 8)
}
// ---------------------------------
watch(() => props.percentage,(newValue) => {drawWaterball(newValue)},
)
// ---------------------------------
onMounted(() => {drawWaterball(props.percentage)
})

4、效果图