<!--
 * @Author: your name
 * @Date: 2021-10-27 09:46:14
 * @LastEditTime: 2021-10-27 10:26:52
 * @LastEditors: Please set LastEditors
 * @Description: 仪表盘
 * @FilePath: \hyyfScreen\src\views\Environment\charts\ChartDashboard.vue
-->
<template>
  <div :id="'dashboard' + id"  class="chartDashboard"></div>
</template>
<script>
export default {
  props: {
    id: {
      type: Number,
      required: true
    },
    data: {
      type: Object,
      required: true
    }
  },
  watch: {
    data: {
      handler(newVal){
        if (newVal) {
          this.myChart.clear();
          this.init();
        }
      },
      deep: true
    }
  },
  data() {
    return {
      myChart: null
    }
  },
  methods: {
    init() {
      const _this = this
      let option = {
        series: [
          {
            type: 'gauge',
            radius: "100%",
            center: ["50%", "64%"],
            startAngle: 225,
            endAngle: -45,
            min: 0,
            max: this.data.max,
            splitNumber: this.data.splitNumber,
            axisLine: {
              lineStyle: {
                width: 6,
                color: [ // 圆环颜色
                  [0.33, 'rgb(0,204,0)'],
                  [0.66, 'rgb(255,155,38)'],
                  [1, 'rgb(232,56,92)']
                ]
              }
            },
            pointer: {
              // icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
              length: '70%',
              width: 5,
              // offsetCenter: [0, '0%'],
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              length: 10,
              lineStyle: {
                color: 'auto',
                width: 2
              }
            },
            splitLine: {
              length: 15,
              lineStyle: {
                color: 'auto',
                width: 1
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 12,
              distance: 0,
              // formatter: function (value) {
              //   if (value === 0.875) {
              //     return 'A';
              //   } else if (value === 0.625) {
              //     return 'B';
              //   } else if (value === 0.375) {
              //     return 'C';
              //   } else if (value === 0.125) {
              //     return 'D';
              //   }
              //   return '';
              // }
            },
            title: {
              offsetCenter: [0, '-20%'],
              fontSize: 30
            },
            detail: {
              fontSize: 15,
              offsetCenter: [0, '40%'],
              valueAnimation: true,
              formatter: function (value) {
                return value + _this.data.unit;
              },
              color: 'rgb(0,153,255)'
            },
            data: [
              {
                value: this.data.data,
                // name: 'Grade Rating'
              }
            ]
          }
        ]
      }
      this.myChart.setOption(option)
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(document.getElementById('dashboard' + this.id));
    this.init()
  },
}
</script>
<style scoped>
.chartDashboard {
  width: 100%;
  height: 100%;
}
</style>
