<template>
  <div
    ref="charts"
    style="min-width: 12vw;max-height:220px;height:220px;"
  />
</template>

<script>
import * as echarts from 'echarts'
import { debounce } from '@/utils'

export default {
  props: {
    config: Object
  },
  watch: {
    config: {
      handler: function(val) {
        this.$nextTick(() => {
          this.init()
        })
      },
      immediate: true,
      deep: true,
    }
  },
  data() {
    return {
      chart: null
    }
  },
  computed: {
    option() {
      let percent = 0;
      if (this.config.total === 0) {
        percent = 0
      } else {
        percent = ((this.config.value / this.config.total) * 100).toFixed(2)
      }
      const center = ['50%', '55%']
      const self = this
      return {
        grid: {
          left: '0',
          top: '0',
          right: '0',
          bottom: '0',
          containLabel: false
        },
        // backgroundColor: '#0E1327',
        backgroundColor: 'transparent',
        tooltip: {
          show: false
        },

        angleAxis: {
          show: false,
          max: 100 * 360 / 270, //-45度到225度，二者偏移值是270度除360度
          type: 'value',
          startAngle: 225, //极坐标初始角度
          splitLine: {
            show: false
          }
        },
        barMaxWidth: '11%', //圆环宽度
        radiusAxis: {
          show: false,
          type: 'category'
        },
        //圆环位置和大小
        polar: {
          center: center,
          radius: '100%'
        },

        series: [

          // 最外圈的边框(左右)
          {
            name: '内部透明起始结束的圆边',
            type: 'gauge',
            center: center,
            radius: '80%',
            splitNumber: 10,
            axisLine: {
              lineStyle: {
                color: [
                  // 右/下/左/上
                  [0.3, new echarts.graphic.LinearGradient(
                    1, 0, 0, 0,
                    [{
                      offset: 0.4,
                      color: this.config.opacityBorder[0]
                    }, {
                      offset: 1,
                      color: this.config.opacityBorder[1]
                    }]
                  )],
                  [0.7, new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [{
                      offset: 0,
                      color: this.config.opacityBorder[0]
                    }, {
                      offset: 1,
                      color: this.config.opacityBorder[0]
                    }]
                  )],
                  [1, new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [{
                      offset: 0.4,
                      color: this.config.opacityBorder[0]
                    }, {
                      offset: 1,
                      color: this.config.opacityBorder[1]
                    }]
                  )]
                ],
                width: 2
              }
            },
            z: 4,
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            //仪表盘详情，用于显示数据。
            detail: {
              show: true,
              offsetCenter: [0, '95%'],
              color: '#fff',
              formatter(params) {
                return `{t1|${self.config.valueLabel}}\n{t2|${self.config.totalLabel}}`
              },
              rich: {
                t1: {
                  fontFamily: 'PingFang TC',
                  fontSize: '5%',
                  color: '#C6CEEC',
                  lineHeight: 18
                },
                t2: {
                  fontFamily: 'PingFang TC',
                  fontSize: '10%',
                  color: '#FFFFFF',
                  lineHeight: 18
                }
              }
            },
            label: {
              show: false
            },
            pointer: {
              show: false
            },
            title: {
              //标题
              show: false
            },
            data: [
              {
                name: percent + '%',
                value: percent
              }
            ]
          },

          // 带有阴影的边框
          {
            name: 'border',
            type: 'pie',
            clockWise: false,
            radius: '70%',
            center: center,
            animation: false,
            z: 0,
            data: [{
              value: 0,
              color: 'transparent',
              label: {
                show: false
              },
              labelLine: {
                show: false
              },
              emphasis: {
                disabled: true
              },
              select: {
                disabled: true
              },
              tooltip: {
                show: false
              },
              itemStyle: {
                color: '#071422',
                shadowColor: this.config.shadowColor,
                shadowBlur: 25,
                shadowOffsetX: 0,
                shadowOffsetY: -25
              }
            }]
          },
          // 阴影的边框(中间)
          {
            name: '内部透明起始结束的圆边',
            type: 'gauge',
            center: center,
            radius: '70%',
            axisLine: {
              lineStyle: {
                color: [
                  // 右/下/左/上
                  [0.4, new echarts.graphic.LinearGradient(
                    1, 0, 0, 0,
                    [{
                      offset: 0,
                      color: this.config.opacityBorder[0]
                    }, {
                      offset: 1,
                      color: this.config.opacityBorder[1]
                    }]
                  )],
                  [0.6, new echarts.graphic.LinearGradient(
                    1, 0, 0, 0,
                    [{
                      offset: 0,
                      color: this.config.opacityBorder[0]
                    }, {
                      offset: 1,
                      color: this.config.opacityBorder[0]
                    }]
                  )]
                ],
                width: 2
              }
            },
            z: 4,
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            detail: {
              show: false
            },
            label: {
              show: false
            },
            pointer: {
              show: false
            },
            title: {
              //标题
              show: false
            },
            data: [
              {
                name: percent + '%',
                value: percent
              }
            ]
          },

          // 刻度
          {
            name: '外部刻度',
            type: 'gauge',
            center: center,
            radius: '75%',
            min: 0, //最小刻度
            max: 100, //最大刻度
            splitNumber: 10, //刻度数量
            startAngle: 225,
            endAngle: -45,
            axisLine: {
              show: false,
              lineStyle: {
                width: 1,
                color: [
                  [1, 'rgba(0,0,0,0)']
                ]
              }
            },
            //仪表盘轴线
            axisLabel: {
              show: false
            }, //刻度标签。
            axisTick: {
              show: true,
              splitNumber: 4,
              lineStyle: {
                //用颜色渐变函数不起作用
                color: '#6DCBFF',
                width: 1
              },
              length: 1
            },
            //刻度样式
            splitLine: {
              show: true,
              length: 2,
              lineStyle: {
                //用颜色渐变函数不起作用
                color: '#6DCBFF'
              }
            }, //分隔线样式
            detail: {
              show: false
            },
            pointer: {
              show: false
            }
          },

          // 最宽的圆环，上层, 显示彩色的进度条
          {
            type: 'bar',
            data: [
              {
                value: percent,
                itemStyle: {
                  //图形渐变颜色方法，四个数字分别代表，右，下，左，上，offset表示0%到100%
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 1,
                    x2: 0,
                    y2: 0,
                    colorStops: [
                      {
                        offset: 0,
                        color: this.config.progressBar[0]
                      }, {
                        offset: 1,
                        color: this.config.progressBar[1]
                      }
                    ]
                  }
                }
              }
            ],
            barGap: '-100%', //柱间距离,上下两层圆环重合
            coordinateSystem: 'polar',
            roundCap: true, //顶端圆角从 v4.5.0 开始支持
            //圆环层级，同zindex
            z: 2
          },
          // 最宽的圆环，下层, 显示底色的进度条
          {
            type: 'bar',
            data: [
              {
                value: 100,
                itemStyle: {
                  color: this.config.progressBarBG
                }
              }
            ],
            barGap: '-100%',
            coordinateSystem: 'polar',
            roundCap: true,
            z: 1
          },

          {
            name: '内部透明起始结束的圆边',
            type: 'gauge',
            center: center,
            radius: '40%',
            splitNumber: 10,
            axisLine: {
              lineStyle: {
                color: [
                  [0, new echarts.graphic.LinearGradient(
                    0, 1, 0, 0,
                    [{
                      offset: 0,
                      color: this.config.circle2Color[0]
                    }, {
                      offset: 1,
                      color: this.config.circle2Color[1]
                    }]
                  )],
                  [0.2, new echarts.graphic.LinearGradient(
                    0, 1, 0, 0,
                    [{
                      offset: 0,
                      color: this.config.circle2Color[0]
                    }, {
                      offset: 1,
                      color: this.config.circle2Color[1]
                    }]
                  )],
                  [0.8, new echarts.graphic.LinearGradient(
                    0, 0, 1, 0,
                    [{
                      offset: 0,
                      color: this.config.circle2Color[1]
                    }, {
                      offset: 1,
                      color: this.config.circle2Color[1]
                    }]
                  )],
                  [1, new echarts.graphic.LinearGradient(
                    0, 0, 0, 1,
                    [{
                      offset: 0,
                      color: this.config.circle2Color[1]
                    }, {
                      offset: 1,
                      color: this.config.circle2Color[0]
                    }]
                  )]
                ],
                width: 1
              }
            },
            z: 4,
            axisLabel: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
            detail: {
              show: false
            },
            label: {
              show: false
            },
            pointer: {
              show: false
            },
            title: {
              //标题
              show: false
            },
            data: [
              {
                name: percent + '%',
                value: percent
              }
            ]
          },

          // 内圆的边框
          {
            name: '外边框',
            type: 'pie',
            clockWise: false,
            hoverAnimation: false,
            radius: ['35%', '35%'],//边框大小
            center: center,//边框位置
            tooltip: {
              show: false
            },
            label: {
              show: false
            },
            data: [
              {
                value: 10,
                itemStyle: {
                  normal: {
                    borderWidth: 1,//设置边框粗细
                    borderColor: this.config.circle2Color[1]//边框颜色
                  }
                }
              }
            ]
          },

          // 内圆
          {
            type: 'pie',
            radius: '35%',
            center: center,
            z: 1,
            itemStyle: {
              normal: {
                color: new echarts.graphic.RadialGradient(.5, .5, .8, [
                    {
                      offset: 0,
                      color: this.config.innerCircle[0]
                    },
                    {
                      offset: .5,
                      color: this.config.innerCircle[1]
                    },
                    {
                      offset: 1,
                      color: this.config.innerCircle[2]
                    }
                  ],
                  false
                ),
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                }
              }
            },
            hoverAnimation: false,
            label: {
              normal: {
                show: true,
                position: 'center',
                color: '#4c4a4a',
                formatter: `{t1|${percent}%}\n{t2|${this.config.value}}\n{t3|${this.config.unit}}`,
                rich: {
                  t1: {
                    fontFamily: 'PingFang TC',
                    fontSize: '5%',
                    color: '#C6CEEC',
                    lineHeight: 14
                  },
                  t2: {
                    fontFamily: 'PingFang TC',
                    fontSize: '10%',
                    color: '#FFFFFF',
                    lineHeight: 14,
                    fontWeight: 600
                  },
                  t3: {
                    fontFamily: 'PingFang TC',
                    fontSize: '5%',
                    color: '#C6CEEC',
                    lineHeight: 14
                  }
                }
              },
              emphasis: {//中间文字显示
                show: true
              }
            },
            tooltip: {
              show: false
            },
            data: [100]
          }
        ]
      }
    }
  },
  mounted() {
    window.addEventListener('resize', debounce(() => {
      this.chart?.resize()
    }, 200))

  },
  methods: {
    init() {
      if (!this.chart) {
        this.chart = echarts.init(this.$refs.charts)
      }
      this.chart.setOption(this.option)
    }
  }
}
</script>
<style scoped>

</style>
