<template>
  <div class="bigscreen-echarts-gauge">
    <div :id="eId" :style="styles"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts/core';
import { GaugeChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
export default {
  name: "echartsRadarWrap",
  props: {
    eId: {
      type: String
    },
    styles: {
      type: String
    },
    colorList: {
      type: [Array, String],
      default: ["#27d0ec"]
    },
    option: {
      stype: Number,
      default: 0
    }
  },
  data() {
    return {
      chart: null
    };
  },
  created() {
    this.chart = null;
    echarts.use([GaugeChart, CanvasRenderer]);
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      if (!this.chart) {
        this.chart = echarts.init(document.getElementById(this.eId));
      }
      const options = {
        series: [
          {
            type: "gauge",
            color: this.colorList,
            min: 0,
            max: 100,
            progress: {
              show: true,
              width: 3
            },
            axisLine: {
              lineStyle: {
                width: 3
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              distance: 2,
              length: '3',
              lineStyle: {
                width: 1,
                color: '#dcdcdc'
              }
            },
            axisLabel: {
              distance: 7,
              color: '#999',
              fontSize: 5
            },
            pointer: {
              offsetCenter: [0, '0%'],
              length: '60%',
              width: '1',
              itemStyle: {
                // color: '#000'
              }
            },
            anchor: {
              show: true,
              showAbove: true,
              size: 6,
              itemStyle: {
                borderWidth: 1
              }
            },
            title: {
              show: false,
              text: "今日报警"
            },
            grid: {
              left: "10",
              right: "10",
              bottom: "5",
              top: 50,
              containLabel: true,
            },
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 4,
                // color: [
                //   [1, "#1A3F81"]
                // ]
              }
            },

            detail: {
              color: this.colorList[0] || "#27d0ec",
              valueAnimation: true,
              fontSize: 18,
              offsetCenter: ['0', '80%']
            },
            data: [
              {
                value: this.option
              }
            ]
          }
        ]
      };
      this.chart.setOption(options);
    }
  },
  watch: {
    option(val, oldVal) {
      this.chart = null;
      this.drawLine();
    }
  }
};
</script>
<style lang="scss">
.bigscreen-echarts-gauge {
  height: calc(100% - 30px);
  height: calc(100% - 15px);
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
