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: any
  titleInfo: any
  percentage: any
  color: any
  labelNumber: any
  percentSize: any
  unitSize: any
  padding: any
}>()
const chartContainer = ref(null)
// ----------------------------------
const drawWaterball = (percentage: any) => {
  const chart = echarts.init(chartContainer.value)
  const option = {
    series: [
      {
        type: 'liquidFill',
        data: [percentage / 100], // 百分比的值，取值范围为0到1
        color: [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、效果图