<template>
  <div class="chart" ref="chart"></div>
</template>

<script>
import * as echarts from 'echarts'
import { fontSize } from '@/views/groupPage/util'
export default {
  name: 'percentGaugeChart', //设计施工综合图表
  props: {
    value: { default: 0 },
    title: {}
  },
  data() {
    return { myChart: null }
  },
  watch: {
    value(val) {
      this.$nextTick(() => {
        this.initialChart()
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initialChart()
    })
    //图表大小自适应
    window.addEventListener('resize', this.onResize)
  },
  methods: {
    destroyChart() {
      if (this.myChart != null) {
        this.myChart.dispose()
        this.myChart = null
      }
    },
    onResize() {
      if (this.myChart) {
        this.myChart.resize()
      }
    },
    initialChart() {
      this.destroyChart()
      let dataArr = [{ value: this.value }]
      let img =
        this.value >= 0
          ? require('@/views/groupPage/images/模块图标/统计分析/向上箭头.png')
          : require('@/views/groupPage/images/模块图标/统计分析/向下箭头.png')
      let color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        {
          offset: 0,
          color: 'rgba(1, 125, 219, 1)' // 0% 处的颜色
        },
        {
          offset: 0.17,
          color: 'rgba(5, 173, 221, 1)'
        },
        {
          offset: 0.9,
          color: 'rgba(5, 173, 221, 1)'
        },
        {
          offset: 1,
          color: 'rgba(1, 125, 219, 1)' // 100% 处的颜色
        }
      ])
      var colorSet = [[1, color]]
      var rich = {
        valueNumber: {
          fontSize: fontSize(16),
          color: '#fff',
          fontWeight: 'bold'
        },
        valueUnit: {
          fontSize: fontSize(16),
          color: '#fff',
          fontWeight: '500'
        },
        arrow: {
          height: fontSize(13),
          width: fontSize(9),
          padding: 0,
          backgroundColor: {
            image: img
          }
        }
      }
      let option = {
        title: {
          text: this.title,
          textStyle: {
            color: '#fff',
            fontSize: fontSize(14),
            fontFamily: 'Source Han Sans CN',
            fontWeight: 400
          },
          left: 'center',
          bottom: 0
        },
        series: [
          {
            type: 'gauge',
            name: '外层辅助',
            radius: '74%',
            startAngle: '225',
            endAngle: '-45',
            splitNumber: '100',
            pointer: {
              show: false
            },
            detail: {
              show: false
            },
            data: [
              {
                value: 1
              }
            ],
            axisLine: {
              show: true,
              lineStyle: {
                color: [[1, 'rgba(14, 167, 255, 1)']],
                width: 2,
                opacity: 1
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: true,
              length: 20,
              lineStyle: {
                color: '#051932',
                width: 0,
                type: 'solid'
              }
            },
            axisLabel: {
              show: false
            }
          },
          {
            type: 'gauge',
            radius: '68%',
            startAngle: '225',
            endAngle: '-45',
            pointer: {
              show: false
            },
            detail: {
              formatter: function (value) {
                // var num = Math.round(value)
                var num = value
                return '{valueNumber|' + num + '}{valueUnit|%}{arrow|}'
              },
              rich: rich,
              offsetCenter: ['0%', '0%']
            },
            data: dataArr,
            title: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: colorSet,
                width: 8
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            }
          },
          {
            name: '灰色内圈', //刻度背景
            type: 'gauge',
            z: 2,
            radius: '70%',
            startAngle: '225',
            endAngle: '0',
            splitNumber: '5',
            axisLine: {
              // 坐标轴线
              lineStyle: {
                // 属性lineStyle控制线条样式
                color: [[1, 'transparent']],
                width: 2,
                opacity: 1 //刻度背景宽度
              }
            },
            splitLine: {
              show: false
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: false
            },
            axisTick: {
              length: 1,
              show: true,
              lineStyle: {
                color: 'rgba(14, 167, 255, 1)',
                width: 2
              }
            },
            detail: {
              show: 0
            }
          },
          {
            //内圆
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            z: 1,
            itemStyle: {
              color: new echarts.graphic.RadialGradient(
                0.5,
                0.5,
                0.8,
                [
                  {
                    offset: 0,
                    color: 'rgba(14, 167, 255, 1)'
                  },
                  {
                    offset: 0.5,
                    color: '#0868A1'
                  },
                  {
                    offset: 1,
                    color: '#044A7C'
                  }
                ],
                false
              )
            },
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            data: [100]
          }
        ]
      }
      this.creatChart(option, this.$refs.chart)
    },
    creatChart(option, ref) {
      this.myChart = echarts.init(ref) //this.$refs.chart
      this.myChart.resize()
      this.myChart.setOption(option, {
        notMerge: true
      })
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.onResize)
    this.destroyChart()
  }
}
</script>

<style lang='scss' scoped>
.chart {
  height: 100%;
  width: 100%;
}
</style>