水波球在项目中的引用

<template>
  <div :id="props.elementID" class="w100 h100 charts-wrapper"></div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import 'echarts-liquidfill';
import { defineProps, onMounted, PropType } from 'vue';

interface DataParm {
  name: string;
  value: number;
  firstColor: string;
  lastColor: string;
}

const props = defineProps({
  elementID: {
    type: String,
    rquired: true
  },
  data: Object as PropType<DataParm>,
  firstColor: {
    type: String,
    rquired: true
  },
  lastColor: {
    type: String,
    rquired: true
  }
});
const createChart = (): void => {
  const chartDom = document.getElementById(props.elementID);
  const myChart = echarts.init(chartDom);
  console.log(props);
  let value = null;
  if ((props.data?.value ?? 0) > 100) {
    value = 100 / (props.data?.value ?? 0); // precent
  } else {
    value = (props.data?.value ?? 0) / 100; // precent
  }

  const firstColor = props.data?.firstColor ?? '';
  const lastColor = props.data?.lastColor ?? '';
  console.log(value);
  console.log(firstColor);
  console.log(lastColor);

  const option = {
    series: [
      {
        type: 'liquidFill',
        radius: '66%',
        center: ['50%', '50%'],
        // color: [lastColor, firstColor],
        data: [value, value], // data个数代表波浪数
        amplitude: 8,
        color: [
          {
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0,
            colorStops: [
              {
                offset: 1,
                color: [firstColor] // 0% 处的颜色
              },
              {
                offset: 0,
                color: [lastColor] // 100% 处的颜色
              }
            ],
            global: false // 缺省为 false
          }
        ],
        // 图形样式
        itemStyle: {
          opacity: 0.74, // 波浪的透明度
          shadowBlur: 0 // 波浪的阴影范围
        },
        backgroundStyle: {
          borderWidth: 0,
          borderColor: '#448af9',
          color: '#0C4283'
        },
        label: {
          show: true,
          textStyle: {
            color: '#FFF',
            insideColor: '#12786f',
            fontSize: 20
          },
          formatter: () => `${props.data?.value ?? 0}个`
        },
        outline: {
          show: false
        }
      }
    ]
  };
  myChart.setOption(option);
};

onMounted(() => {
  createChart();
});
</script>
<style lang="scss" scoped></style>

需要在package.json加入依赖

"echarts": "^5.2.0",
"echarts-liquidfill": "^3.1.0",

Make A Pie - 水球图https://www.makeapie.com/editor.html?c=xQG69obZUy我引用的水波球的原型