<template>
  <Echart
    ref="chart"
    :options="option"
    height="100%"
    width="100%"/>
</template>

<script>
  import Echart from "@/common/echart/index"
  import {countSize} from '@/utils/index.js'
  /**
   * @author wangxiaoying
   * @date 2021.07.14
   * @Description 仪表盘
   * @props 数据格式：{
   *   width: 0,
       height: 0,
       seriesData: [
        {already:34, total:'100'}
      ]
    }
   */
  export default {
    name: "gauge1",
    components: {Echart},
    props: {
      centerText: {
        type: String,
        default: '完成率'
      },
      color: {
        type: String,
        default: '#ff8080'
      },
      seriesData: {
        type: Object,
        default: () => {
          return {already: '34', total: '100', rate: 34}
        }
      },
      lineWidth:{
        type: Number,
        default: 0.3
      } // 轨迹宽度，rem为单位
    },
    data(){
      return{
        option: {
          tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
          },
          color: this.color,
          series: [
            {
              name: '业务指标',
              type: 'gauge',
              radius: '70%',
              title: {
                fontSize: '100%',
                offsetCenter: [0, '80%'],
                fontFamily: 'Arial',
                width: countSize(0.54),
                // height: countSize(0.25),
                lineHeight: 1.5,
                color: this.color,
                rich: {}
              },
              data: [
                {
                  value: 50,
                  name: this.centerText
                }
              ],
              detail: {
                formatter: '{value}%',
                offsetCenter: [0, '-5%'],
                color: 'red',
                fontSize: countSize(0.5),
                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: countSize(this.lineWidth),
                  color: [[1, '#262795']]
                }
              }
            },
            {
              name: '进度条',
              type: 'gauge',
              // 半径
              radius: '70%',
              // 起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
              startAngle: 225,
              // 结束角度。
              endAngle: 0,
              center: ['50%', '50%'],
              // 仪表盘轴线相关配置。
              axisLine: {
                // 坐标轴线
                show: true,
                lineStyle: {
                  // 属性lineStyle控制线条样式
                  width: countSize(this.lineWidth),
                  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: {
      seriesData (newVal) {
        console.log('refresh Data' + newVal)
        this.option.series[0].data[0].value = newVal.rate
        this.refreshEchart()
      },
      centerText (val) {
        this.option.series[0].data[0].name = val
        this.refreshEchart()
      },
      // color(val){
      //
      // }
    },
    mounted(){
      this.refreshChart()
    },
    methods:{
      refreshChart(){
        if (this.seriesData) {
          const rate = this.seriesData.rate.toFixed(1)
          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 = -35
            } else {
              let num = 100 - rate
              this.option.series[1].endAngle = -35 + (num * 2.7)
            }
          } else {
            this.option.series[1].endAngle = 215 - rate * 2.7
          }
        }
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>