<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,
            progress: {
              show: true,
              width: 15
            },
            // axisLine: {
            //   lineStyle: {
            //     width: 15
            //   }
            // },
            axisTick: {
              show: false
            },
            splitLine: {
              length: 15,
              show: false,
              lineStyle: {
                width: 2,
                color: "#004299a3"
              }
            },
            axisLabel: {
              distance: 25,
              show: false,
              color: "#999",
              fontSize: 10
            },
            anchor: {
              show: false,
              showAbove: true,
              size: 5,
              itemStyle: {
                borderWidth: 2
              }
            },
            title: {
              text: "今日报警"
            },
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 15,
                color: [
                  [1, "#1d2c65"]
                ]
              }
            },

            detail: {
              valueAnimation: true,
              fontSize: 15,
              color: this.colorList[0] || "#27d0ec",
              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);
  width: 100%;
}
</style>
