<template>
  <div
    :id="id"
    :style="{width:curWidth==0?'95%':curWidth+'px',height:curHeight==0?'95%':curHeight+'px',paddingLeft:curWidth==0?'5%':curWidth*0.05+'px'}"
  >
  </div>
</template>
<script>
/**
 * @author chenyanqing
 * @date 2019/10/19
 * @Description 仪表盘2,
 * @props 数据格式：{
 *    id: 'traffic_govern_id',
      width: 0,
      height: 0,
      seriesData: [
        {already:34, total:'100'}
      ]
    }
 *
 */

import {countSize} from '@/utils/utils'
export default {
  name: 'EchartGauge2',
  props: {
    id: {
      type: String,
      required: true
    },
    width: {
      type: Number | String,
      default: 50
    },
    height: {
      type: Number | String,
      default: 50
    },
    color: {
      type: String,
      default: 'blue'
    },
    seriesData: {
      type: Object,
      default: () => {
        return {already: '34', total: '100', rate: 34}
      }
    }
  },
  data () {
    return {
      curWidth: this.width,
      curHeight: this.height,
      option: {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        color: this.color,
        series: [
          {
            name: '业务指标',
            type: 'gauge',
            title: {
              fontSize: '85%',
              offsetCenter: [0, '70%'],
              backgroundColor: {
                image: require('@/assets/images/complete.png')
              },
              fontFamily: 'Arial',
              width: countSize(0.54),
              height: countSize(0.25),
              lineHeight: countSize(0.3),
              color: '#00caff',
              rich: {}
            },
            data: [
              {
                value: 50,
                name: '完成率'
              }
            ],
            detail: {
              formatter: '{value}%',
              offsetCenter: [0, '-5%'],
              color: 'red',
              fontSize: '150%',
              fontWeight: 'bold',
              fontFamily: 'sans-serif'
            },
            pointer: {
              // 指针
              show: false
            },
            // 分隔线样式。
            splitLine: {
              show: false
            },
            // 刻度样式
            axisTick: {
              show: false
            },
            // 刻度单位标签。10,20,30。
            axisLabel: {
              show: false
            },
            axisLine: {
              // 坐标轴线  整体圆的粗细
              show: true,
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 9,
                color: [[1, '#262795']]
              }
            }
          },
          {
            name: '进度条',
            type: 'gauge',
            // 半径
            // radius: 65,
            // 起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
            startAngle: 225,
            // 结束角度。
            endAngle: 0,
            center: ['50%', '50%'],
            // 仪表盘轴线相关配置。
            axisLine: {
              // 坐标轴线
              show: true,
              lineStyle: {
                // 属性lineStyle控制线条样式
                width: 9,
                color: [
                  [
                    1,
                    new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: '#0336ff'
                      },
                      {
                        offset: 1,
                        color: '#01b4ff'
                      }
                    ])
                  ]
                ]
              }
            },
            // 分隔线样式。
            splitLine: {
              show: false
            },
            // 刻度样式
            axisTick: {
              show: false
            },
            // 刻度标签。
            axisLabel: {
              show: false
            },
            // 仪表盘指针。
            pointer: {
              show: false
            },
            // 仪表盘标题。
            title: {
              show: false
            },
            // 仪表盘详情，用于显示数据。
            detail: {
              show: false
            },
            zlevel: 2
          }
        ]
      }
    }
  },
  watch: {
    width (newVal, oldVal) {
      this.curWidth = newVal
      this.refreshEchart()
    },
    height (newVal, oldVal) {
      this.curHeight = newVal
      this.refreshEchart()
    },
    seriesData (newVal, oldVal) {
      this.option.series[0].data[0].value = newVal.rate
      this.refreshEchart()
    }
  },
  mounted () {
    if (this.seriesData) {
      const rate = this.seriesData.rate.toFixed(1)
      // this.option.series[0].data = this.seriesData
      this.option.series[0].data[0].value = rate
      this.option.series[0].detail.color = this.color
      if (rate >= 83.3) {
        if (rate === 100) {
          this.option.series[1].endAngle = -45
        } else {
          let num = 100 - rate
          this.option.series[1].endAngle = -45 + (num * 2.7)
        }
      } else {
        this.option.series[1].endAngle = 225 - rate * 2.7
      }
      this.initEchart()
    }
  },
  methods: {
    refreshEchart () {
      if (this.curWidth && this.curHeight && this.seriesData != null) {
        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>