<template>
  <!-- 将固定id改为ref引用 -->
  <div ref="chartContainer" style="height: 100%;"></div>
</template>
<script setup>
import * as echarts from 'echarts';
import { onMounted, onUnmounted, ref, watch, defineProps } from 'vue';

// 定义组件的属性，使其可复用
const props = defineProps({
  // 图表数据
  chartData: {
    type: Array,
    default: () => [
      { value: 40, name: 'rose 1' },
      { value: 38, name: 'rose 2' },
      { value: 32, name: 'rose 3' },
      { value: 30, name: 'rose 4' },
      { value: 28, name: 'rose 5' },
      { value: 26, name: 'rose 6' },
      { value: 22, name: 'rose 7' },
      { value: 18, name: 'rose 8' }
    ]
  },
  // 图表标题
  chartName: {
    type: String,
    default: 'Nightingale Chart'
  },
  // 是否显示工具箱
  showToolbox: {
    type: Boolean,
    default: true
  },
  // 是否显示图例
  showLegend: {
    type: Boolean,
    default: true
  },
  // 内半径
  innerRadius: {
    type: Number,
    default: 0
  },
  // 外半径
  outerRadius: {
    type: Number,
    default: 200
  },
  // 扇形间距
  padAngle: {
    type: Number,
    default: 0
  },
  title: {
    type: Object,
    default: () => ({
      text: 'Nightingale Chart',
      left: 'center'
    })
  },
  roseType: {
    type: String,
    default: 'radius'
  }
});

// 图表容器引用
const chartContainer = ref(null);
// 图表实例引用
const chartInstance = ref(null);

// 初始化图表
const initChart = () => {
  const chartDom = chartContainer.value;
  if (!chartDom) return;

  // 如果已经存在实例，先销毁
  if (chartInstance.value) {
    chartInstance.value.dispose();
  }

  // 创建新实例
  chartInstance.value = echarts.init(chartDom);

  // 设置图表选项
  const option = {
    title: props.title,
    legend: props.showLegend ? {
      top: 'bottom'
    } : false,
    toolbox: props.showToolbox ? {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    } : false,
    series: [
      {
        name: props.chartName,
        type: 'pie',
        radius: [props.innerRadius, props.outerRadius],
        center: ['50%', '50%'],
        roseType: props.roseType,
        // 在 ECharts 5.3.3 中，当 roseType 为 'area' 时，padAngle 需要特殊处理
        // 为了确保间距生效，我们需要添加一个小的非零值来替代0
        // padAngle: props.padAngle === 0 ? 0.1 : props.padAngle,
        itemStyle: {
          borderColor: '#fff',
          borderWidth:props.padAngle
        },
        // 显示百分比
        label: {
          show: true,
          formatter: function(params) {
            // 对于值为0的项，显示0%而不是极小值计算出的百分比
            if (props.chartData.find(d => d.name === params.name && d.value === 0)) {
              return params.name + ': 0%';
            }
            return params.name + ': ' + params.percent + '%';
          }
        },
        // 鼠标悬停时的样式
        emphasis: {
          label: {
            show: true,
            fontSize: '16',
            fontWeight: 'bold',
            formatter: function(params) {
              // 对于值为0的项，显示0%而不是极小值计算出的百分比
              if (props.chartData.find(d => d.name === params.name && d.value === 0)) {
                return params.name + ': 0%';
              }
              return params.name + ': ' + params.percent + '%';
            }
          }
        },
        // 处理数据，确保值为0的项也能显示
        data: props.chartData.map(item => ({
          ...item,
          // 对于值为0的数据，设置一个极小值来确保它在饼图中显示
          value: item.value === 0 ? 0.0000001 : item.value
        }))
      }
    ]
  };

  // 应用选项
  chartInstance.value.setOption(option);
};

// 处理窗口大小变化，自动调整图表大小
const handleResize = () => {
  if (chartInstance.value) {
    chartInstance.value.resize();
  }
};

// 组件挂载时初始化图表
onMounted(() => {
  initChart();
  window.addEventListener('resize', handleResize);
});

// 组件卸载时销毁图表实例并移除事件监听
onUnmounted(() => {
  if (chartInstance.value) {
    chartInstance.value.dispose();
  }
  window.removeEventListener('resize', handleResize);
});

// 监听数据变化，更新图表
watch(() => props.chartData, () => {
  initChart();
}, { deep: true });

// 监听其他配置变化，更新图表
watch([
  () => props.chartName,
  () => props.showToolbox,
  () => props.showLegend,
  () => props.innerRadius,
  () => props.outerRadius,
  () => props.padAngle,
  ()=> props.roseType,
], () => {
  initChart();
});
</script>
<style scoped>
:deep(div) {
  width: 100%;
  height: 100%;
  /* min-height: 400px; */
}
</style>
