<template>
  <div ref="chart" style="width: 100%;height: 50%;" @click=""/>
</template>
<script>
import * as echarts from "_echarts@5.4.3@echarts";

export default {
  name:"RingPieChart",
  data() {
    return {
      option:{
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: this.name,
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: true,
              // position: 'center',
              fontSize: 12,
              color: '#5eeef4',
              formatter(param) {
                return param.name + '\r\n' + param.value
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 12,
                fontWeight: 'bold',
                color: '#5eeef4',
              }
            },
            data: this.data
          }
        ]
      },
      chart: null,
    }
  },
  watch: {
      data(newValue, oldValue){
          this.option.data = newValue;
          this.chart.setOption(this.option);
      },
      name(newName, oldName){
        this.option.series.name = newName;
        this.chart.setOption(this.option);
      }
  },
  methods: {
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    }
  },
  mounted() {
    setTimeout(() => {
      let chartDom = this.$refs.chart;
      this.chart = echarts.init(chartDom);
      this.chart.setOption(this.option);
      window.addEventListener('resize', this.resizeChart);
    }, 500)
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeChart);
  },
  props:{
    name: {
      type: String,
      default: "环形饼图",
    },
    data: {
      type: Array,
      default: function () {
        return [
          {value: 500, name: '值1'},
          {value: 2500, name: '值3'},
          {value: 1100, name: '值2'},
        ];
      },
    }
  }

}
</script>
<style scoped>
</style>
