shuimu-dashboard-h5/src/components/Charts/LiquidChart.vue

<!-- 水球图 -->
<template>
  <div :id="id" :class="className" :style="{ height, width }" />
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import "echarts-liquidfill";

const props = defineProps({
  id: {
    type: String,
    default: "liquidChart",
    required: true,
  },
  className: {
    type: String,
    default: "chart",
  },
  width: {
    type: String,
    default: "160px",
  },
  height: {
    type: String,
    default: "160px",
  },
  color: {
    type: String,
    default: "#2f539b",
  },
  bgColor: {
    type: String,
    default: "#e6e8f9",
  },
  data: {
    type: Number,
    default: 0,
    required: true,
  },
});

const options = {
  series: [
    {
      type: "liquidFill", // 水球图样式
      radius: "90%",
      center: ["50%", "50%"], // 水球图位置
      amplitude: 5, // 波浪波动起伏大小
      waveLength: "50%", // 波浪长度
      color: [props.bgColor], // 波浪颜色
      itemStyle: {
        opacity: 1, //波浪透明度
        shadowBlur: 0, //波浪阴影
      },
      backgroundStyle: {
        backgroundColor: "#ffffff",
        color: "#ffffff", // 内部球背景颜色
        borderWidth: 0, // 内部球边框宽度
        borderColor: "#ffffff", // 内部球边框颜色
      },
      outline: {
        borderDistance: 5, // 外边框与内边框间的距离
        itemStyle: {
          borderWidth: 5, // 外边框的宽度
          borderColor: props.color,
        },
      },
      label: {
        formatter: props.data,
        color: props.color, // 在波浪上方时的文字颜色
        insideColor: "#ffffff", // 在波浪下方时的文字颜色
        fontSize: 30, // 文字大小
      },
      data: [props.data / 100], // 水球的注满度 60%
    },
  ],
};

onMounted(() => {
  const chart = echarts.init(
    document.getElementById(<string>props.id) as HTMLDivElement
  );
  chart.setOption(options);

  window.addEventListener("resize", () => {
    chart.resize();
  });
});
</script>