pasd_pc/src/components/ReportAnalytics/reportCircularDiagram.vue

<template>
  <div ref="chartDom" style="width:600px;height:400px;"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { nextTick, onMounted, onUnmounted, ref, watch } from "vue";
import { listCircularDiagram } from "@/api/sidebar/reportAnalytics.js";
import { defineProps } from "vue";

const props = defineProps({
  data: {
    type: Array,
    required: true,
    default: () => []
  }
});

//创建一个响应式引用来保存DOM元素
const chartDom = ref(null);
let chartInstance = null;

var option = {
  title: {
    text: "巡检人统计情况",
    left: "left"
  },
  tooltip: {
    trigger: "item"
  },
  // legend: {
  //   orient: "vertical",
  //   left: "left"
  // },
  series: [
    {
      type: "pie",
      radius: ["40%", "70%"],
      data: [
      
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      }
    }
  ]
};

//监听到有新值传入，调用函数重新渲染
watch(() => props.data, (newData) => {
  if (chartInstance && newData) {
    option.series[0].data = newData;
    freshEchart();
  }
}, { deep: true });

onMounted(async () => {
  await nextTick(); //确保dow已经渲染完成
  chartInstance = echarts.init(chartDom.value);
  freshEchart();
});

const freshEchart = () => {
  option.series[0].data=props.data;
  chartInstance && chartInstance.clear();
  chartInstance.setOption(option);
};

// 销毁ECharts实例
onUnmounted(() => {
  if (chartInstance != null && chartInstance.dispose) {
    chartInstance.dispose();
  }
});
</script>

<style>
</style>