wechat-ui/src/views/dashboard/workbench/components/ChartsPie.vue

<template>
  <div ref="echartsLineRef" style="height: 400px"></div>
</template>
<script lang="ts" setup>
  import { Ref, ref, watchEffect } from 'vue';
  import { useECharts } from '@/hooks/web/useECharts';

  const echartsLineRef = ref<HTMLDivElement | null>(null);
  const { setOptions } = useECharts(echartsLineRef as Ref<HTMLDivElement>);
  const { title, data } = defineProps<{
    title: string;
    data: {
      value: number;
      name: string;
    }[];
  }>();

  watchEffect(() => {
    setOptions({
      title: {
        text: title,
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b} <br/>{c} ({d}%)',
      },
      legend: {
        type: 'scroll',
        // orient: 'vertical',
        bottom: 'bottom',
      },
      series: [
        {
          name: title,
          type: 'pie',
          radius: ['45%', '60%'],
          // avoidLabelOverlap: false,
          padAngle: 5,
          label: {
            formatter: '{b} {d}%',
            color: 'inherit',
          },
          data,
        },
      ],
    });
  });
</script>