<template>
  <div :id="perfectId" style="width: 100%; height: 230px"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: {
    rate: {
      type: Number,
    },
    all: {
      type: Number,
    },
    name: {
      type: String,
    },
    perfectId: {
      type: String,
    },
    color: {
      type: String,
    },
  },
  data() {
    return {
      chartPie: null,
      data: [],
    };
  },
  watch: {
    rate(value) {
      this.drawCharts();
    },
  },

  mounted: function () {
    this.drawCharts();
  },
  methods: {
    drawPieChart() {
      const gaugeData = [
        {
          value: 8,
          perfect: 0,
          name: 'Perfect',
          title: {
            offsetCenter: ['0%', '-16%'],
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ['0%', '20%'],
          },
        },
      ];
      let option = {
        series: [
          {
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false,
            },
            color: this.color,
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 1,
                borderColor: this.color,
              },
            },
            axisLine: {
              lineStyle: {
                width: 10,
              },
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
              distance: 50,
            },
            data: gaugeData,
            title: {
              fontSize: 14,
            },
            detail: {
              width: 50,
              height: 14,
              fontSize: 14,
              color: 'inherit',
              borderColor: 'inherit',
              borderRadius: 20,
              borderWidth: 1,
              formatter: '{value}%',
            },
          },
        ],
      };
      gaugeData[0].value = parseFloat(
        ((this.rate / this.all) * 100).toFixed(2)
      );

      gaugeData[0].name = this.name + '：' + this.rate;
      this.chartPie = echarts.init(document.getElementById(this.perfectId));
      this.chartPie.setOption({
        series: [
          {
            data: gaugeData,
            pointer: {
              show: false,
            },
          },
        ],
      });
      option && this.chartPie.setOption(option);
    },
    drawCharts() {
      this.drawPieChart();
    },
  },
};
</script>

<style scoped></style>
