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

export default {
  name:"RingPieChart",
  data() {
    return {
      option:{
        tooltip: {
          trigger: 'item'
        },
        series: {
          name: this.name,
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          tooltip: {
            valueFormatter: this.valueFormatter
          },
          label: {
            show: true,
            // position: 'center',
            fontSize: 12,
            color: '#5eeef4',
            formatter:this.formatter
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 12,
              fontWeight: 'bold',
              color: '#5eeef4',
            }
          },
          data: this.data
        }
      },
      chart: null,
    }
  },
  watch: {
      data(n, o){
        this.refresh();
      },
      name(n, o){
        this.refresh();
      }
  },
  methods: {
    resizeChart() {
      if (this.chart) {
        this.chart.resize();
      }
    },
    refresh(){
      this.option.series.data = this.data;
      this.option.series.name = this.name;
      if (this.chart){
        this.chart.setOption(this.option);
      }
    }
  },
  mounted() {
    setTimeout(() => {
      let chartDom = this.$refs.chart;
      this.chart = echarts.init(chartDom);
      this.refresh();
      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'},
        ];
      },
    },
    formatter:{
      type: Function,
      default: function (param) {
          return param.name + '\r\n' + param.value;
      },
    },
    valueFormatter:{
      type: Function,
      default: function (param) {
        return param.value
      },
    }
  }

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