mky-vent-5/src/components/chart/Pie.vue

<template>
  <div ref="chartRef" :style="{ height, width }"></div>
</template>
<script lang="ts">
  import { defineComponent, PropType, ref, Ref,watchEffect,reactive,watch } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';

  export default defineComponent({
    name:"Pie",
    props: {
      chartData:{
        type: Array,
        default: () => ([]),
      },
      size: {
        type: Object,
        default: ()=>{}
      },
      option:{
        type: Object,
        default: () => ({}),
      },
      width: {
        type: String as PropType<string>,
        default: '100%',
      },
      height: {
        type: String as PropType<string>,
        default: 'calc(100vh - 78px)',
      },
    },
      emits: ['click'],
      setup(props, {emit}) {
      const chartRef = ref<HTMLDivElement | null>(null);
      const { setOptions, getInstance,resize } = useECharts(chartRef as Ref<HTMLDivElement>);
        const option = reactive({
            tooltip: {
                formatter: '{b} ({c})',
            },
            series: [
                {
                    type: 'pie',
                    radius: '72%',
                    center: ['50%', '55%'],
                    data: [],
                    labelLine: { show: true },
                    label: {
                        show: true,
                        formatter: '{b} \n ({d}%)',
                        color: '#B1B9D3',
                    },
                }
            ],
        });

        watchEffect(() => {
            props.chartData && initCharts();
        });
          /**
           * 监听拖拽大小变化
           */
        watch(
          () => props.size,
          () => {
              resize();
          },
          {
              immediate: true,
          }
        );
        function initCharts(){
            if(props.option){
                Object.assign(option,props.option);
            }
            option.series[0].data = props.chartData;
            setOptions(option);
            resize();
            getInstance()?.off('click', onClick)
            getInstance()?.on('click', onClick)
        }

        function onClick(params) {
          emit('click', params)
        }

      return { chartRef };
    }
  });
</script>