<template>
  <div :id="id" :style="`width:${curWidth}px;height:${curHeight}px`"></div>
</template>
<script>
/**
 * @author chenyanqing
 * @date 2019/10/19
 * @Description 仪表盘
 * @props 数据格式：{
 *    id: '',
      width: 0,
      height: 0,
      total: "500",
      already: "100",
      rate:    仪表盘角度
    }
 * 
 */

import { countSize } from "@/utils/utils";
export default {
  props: ["id", "width", "height", "title", "total", "already", "rate"],
  data() {
    return {
      curWidth: this.width,
      curHeight: this.height,
      option: {
        tooltip: {
          formatter: "{a} <br/>{b} : {c}%"
        },
        color: ["#c23531"],
        series: [
          {
            max:1000,
            name: "业务指标",
            type: "gauge",
            radius: '90%',
            startAngle: 200,
            endAngle: -20,
            title: {
              fontSize: '40%',
              offsetCenter: [0, "30%"],
              fontFamily: "Arial",
              color: "#738dca",
              rich: {}
            },
            data: [
              {
                value: 1,
                name: "教师数"
              }
            ],
            detail: {
              formatter: "300",
              offsetCenter: [0, "-5%"],
              color: "#fff",
              fontSize: "70%"
            },
            pointer: {
              //指针
              //这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
              show: false
            },
            //分隔线样式。
            splitLine: {
              show: false
            },
            //刻度样式
            axisTick: {
              show: false
            },
            //刻度单位标签。10,20,30。
            axisLabel: {
              show: true,
              color: "#fff",
              fontSize: '40%',
              distance: -25,
              padding: [0, -5, 10, 0],
              formatter: function(v) {   //用于显示最大刻度
                switch (v + "") {
                  case "1000":
                    return "1000"; 
                }
              }
            },
            axisLine: {
              // 坐标轴线  整体圆的粗细
              show: true,
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: countSize(.12),
                color: [[1, "#0e122d"]],
                shadowBlur: 4,
                shadowColor: "#2e3fd5",
                shadowOffsetX: 1,
                shadowOffsetY: 1
              }
            }
          },
          {
            name: "进度条",
            type: "gauge",
            //半径
            radius: '90%',
            //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
            startAngle: 200,
            //结束角度。
            endAngle: 80,   // 进度条度数 200到-20（200，150，90，10，0，-20）
            center: ["50%", "50%"],
            axisLabel: {
              show: true,
              margin: 80,
              color: "#fff",
              fontSize: '40%',
              distance: -15,
              padding: [0, 0, 5, -10],
              formatter: function(v) {
                switch (v + "") {
                  case "0":
                    return "0";
                }
              }
            },

            //仪表盘轴线相关配置。
            axisLine: {
              // 坐标轴线
              show: true,
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: countSize(.12),
                color: [
                  [
                    1,
                    new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: "#2171b0"
                      },
                      {
                        offset: 1,
                        color: "#0ccdd4"
                      }
                    ])
                  ]
                ]
              }
            },
            //分隔线样式。
            splitLine: {
              show: false
            },
            //刻度样式
            axisTick: {
              show: false
            },
            //仪表盘指针。
            pointer: {
              //这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
              show: false
            },
            //仪表盘标题。
            title: {
              show: false
            },
            //仪表盘详情，用于显示数据。
            detail: {
              show: false
            },
            data: [
              {
                value: 19
              }
            ],
            zlevel: 2
          }
        ]
      }
    };
  },
  watch: {
    width(newVal, oldVal) {
      this.curWidth = newVal;
      this.refreshEchart()
    },
    height(newVal, oldVal) {
      this.curHeight = newVal;
      this.refreshEchart()
    },
    title(newVal, oldVal) {
      this.option.series[0].data[0].name = newVal;
      this.refreshEchart()
    },
    total(newVal, oldVal){
      this.option.series[0].max = Number(newVal);
      this.option.series[0].axisLabel.formatter = function(v) {
        switch (v + "") {
          case newVal.toString():
            return newVal.toString();
        }
      }
      this.refreshEchart()
    },
    already(newVal, oldVal){
      this.option.series[0].detail.formatter = newVal.toString();
      this.refreshEchart()
    },
    rate(newVal, oldVal){
      // 计算进度条角度
      let newVals = Number(newVal);
      if(newVals>=90.91){
        if(newVals == 100){
          this.option.series[1].endAngle = -20
        }else{
          let num = 100-newVals;
          this.option.series[1].endAngle =-20+(num * 2.2);
        }
      }else{
        this.option.series[1].endAngle = 200 - (newVals * 2.2);
      }
      this.refreshEchart()
    },
  },
  mounted() {
    this.option.series[0].data[0].name = this.title;
    if(this.already){
      // 最大值
      this.option.series[0].max = this.total;
      //  已有的数据
      this.option.series[0].detail.formatter = this.already;
      this.option.series[0].axisLabel.formatter = (v)=>{
        switch (v + "") {
          case this.total.toString():
            return this.total.toString();
        }
      }
      // 计算进度条角度
      let newVals = Number(this.rate);
      if(newVals>=90.91){
        if(newVals == 100){
          this.option.series[1].endAngle = -20
        }else{
          let num = 100-newVals;
          this.option.series[1].endAngle =-20+(num * 2.2);
        }
      }else{
        this.option.series[1].endAngle = 200 - (newVals * 2.2);
      }
      this.initEchart();
    }
  },
  methods: {
    refreshEchart(){
      if(this.curWidth && this.curHeight && this.total && this.already){
        this.initEchart();
      }
    },
    initEchart() {
      const _div = document.getElementById(this.id);
      setTimeout(() => {
        let myChart = this.$echarts.init(_div);
        myChart.setOption(this.option, true);
        window.onresize = myChart.resize;
      }, 500);
    }
  }
};
</script>

<style scoped>
</style>