<script setup lang="ts">
import * as echarts from 'echarts';
import {computed, onMounted, onUnmounted, ref, watch} from 'vue';

const props = defineProps({
  option: {type: Object, default: {
      title: {
        text: '数据加载失败',
        show: true
      }
    }}
});

const pie = ref<HTMLElement>(); // 组件实例
let pieChart: echarts.ECharts | null = null;

onMounted(() => {
  if (pie.value) {
    pieChart = echarts.init(pie.value);
    pieChart.setOption(props.option);
  }
});

// 监听option变化，更新图表
watch(() => props.option, (newOption) => {
  if (pieChart) {
    pieChart.setOption(newOption);
  }
}, { deep: true });

// 组件卸载时清理
onUnmounted(() => {
  if (pieChart) {
    pieChart.dispose();
    pieChart = null;
  }
});

</script>

<template>
  <div ref="pie" style="width: 100%; height: 100%;"></div>
</template>

<style scoped>

</style>