<template>
  <div>
    <!-- 仪表盘 调用方式 -->
    <div ref="gaugeChart" :style="{ height: `${height}px` }" class="chart-box"></div>
  </div>
</template>
<script>
export default {
  name: 'gaugeChart',
  props: {
    color: {
      type: Array,
      default: () => ['#E6EBF8', '#5470c6']
    },
    height: {
      type: String,
      default: '340'
    },
    startAngle: {
      type: String,
      default: '180'
    },
    endAngle: {
      type: String,
      default: '0'
    },
    data: {
      type: Number,
      default: 0,
    },
    gradeName:{//等级名称
      type: String,
      default: '',
    },
    subjectName:{//科目名称
      type: String,
      default: '',
    },
    chartData: {
      type: Array,
      default: []
    },
    fullScore: {
      type: [String, Number],
      default: '',
    }
  },
  components: {},
  data() {
    return {
      myChart: null,
      colors: [
        "#5470C6",
        "#3BA272",
        "#FAC858",
        "#995FB3",
        "#EE6666",
        "#72C0DD",
        "#90CB75",
        "#EA7ACB",
        "#FC8451",
        "#65789B",
        "#178BD3",
        "#26A616",
        "#A6129E",
        "#D3A141",
        "#234098",
        "#047640",
        "#B43535",
        "#848BDC",
        "#D6AF83",
        "#84313D",//一组
        "#5470C6",
        "#3BA272",
        "#FAC858",
        "#995FB3",
        "#EE6666",
        "#72C0DD",
        "#90CB75",
        "#EA7ACB",
        "#FC8451",
        "#65789B",
        "#178BD3",
        "#26A616",
        "#A6129E",
        "#D3A141",
        "#234098",
        "#047640",
        "#B43535",
        "#848BDC",
        "#D6AF83",
        "#84313D"//一组
      ]
    }
  },
  watch: {
    option: {
      handler() {
        this.initChart();
      },
    },
  },
  computed: {},
  created() { },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      if (this.myChart) {
        this.myChart.dispose();
      }
      this.myChart = this.$echarts.init(this.$refs.gaugeChart, null, {
        devicePixelRatio: 2,
      });
      let _that = this;
      let lineColors = [],values = [];
      this.chartData.forEach((item,key)=>{
        lineColors.push([item.value / 100 , this.colors[key]])
        values.push(item.range)
      })
      let option = {
        series: [{
          name: "Indicator",
          type: "gauge",
          center: ['50%', '55%'],
          radius: '100%',
          min: 0,
          max: 100,
          splitNumber: 100,
          detail: {
            borderColor: '#F8FAFF',
            shadowColor: "rgba(0,0,0,0.05)",//box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.05);
            shadowOffsetX: 0,
            shadowOffsetY: 0,
            shadowBlur: 6,
            borderWidth: 1,
            width: 160,
            height: 80,
            borderRadius: [80, 80, 0, 0],
            fontSize: 24,
            offsetCenter: [0, '-25%'],
            valueAnimation: true,
            formatter: function () {
              const val = _that.gradeName ?? '-'
              return '{value|' + val + '}';
            },
            rich: {
              value: {
                padding:[70, 0, 0, 0],
                fontWeight: 'bolder',
                fontSize: 24,
              }
            },
            color: 'inherit'
          },
          data: [{
            value: Number(this.data),
            // name: `${this.subjectName}(总分${this.fullScore})`
          }],
          endAngle: this.endAngle || 360,
          startAngle: this.startAngle || 0,
          clockwise: true,//仪表盘刻度是否是顺时针增长
          axisLine: { //仪表盘轴
            show: true,
            roundCap: false,//是否在两端显示成圆形
            lineStyle: {
              width: 28,
              color: lineColors
            }
          },
          progress: {
            show: false,
          },
          splitLine: {
            length: 8,
            distance: 5,
            lineStyle: {
              // 设置从默认颜色到白色的渐变
              // color: {
              //   type: 'linear',
              //   x: 0,
              //   y: 0,
              //   x2: 1,
              //   y2: 0,
              //   colorStops: [
              //     { offset: 0, color: '#995FB3' },  // 起始颜色使用默认
              //     { offset: 1, color: 'rgba(255,255,255,0.5)' }   // 结束颜色为白色
              //   ]
              // },
              color:'#ddd',
              shadowColor: '#fff', // 默认颜色
              shadowBlur: 10,
              width: 1
            }
          },
          axisTick: {
            distance: 5,
            show: false,
            length: 8,
            lineStyle: {
              color: 'auto',
              width: 1
            }
          },
          axisLabel: {
            show: true,
            color: '#999999',
            fontSize: 12,
            distance: -20,
            rotate: 'tangential',
            formatter: function (value) {
              const key = values.indexOf(value)
              if(key > -1){
                return _that.chartData[key].label;
              }else{
                return ''
              }
            }
          },
          title: {
            offsetCenter: [0, '-8%'],
            color: '#666666',
            fontSize: 14
          },
          pointer: {
            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
            length: '17%',
            width: 7,
            offsetCenter: [0, '-54%'],
            itemStyle: {
              color: 'auto'
            }
          }
        }]
      };
      this.myChart.setOption(option);
      window.addEventListener("resize", this.resizeFn);
    },
    resizeFn() {
      this.myChart.resize();
    },
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeFn);
  },
}
</script>
<style lang="scss" scoped>
.chart-box {
  width: 100%;
  height: 300px;
}
</style>