<template>
  <div class="gauge" :id="id" />
</template>

<script setup>
  import * as echarts from 'echarts'
  import { fitChartSize } from '@/utils/dataUtil'

  const props = defineProps({
    id: {
      type: String,
      default: () => ''
    }
  })

  let gaugeChart = null

  onMounted(() => {
    init()
  })
  const init = () => {
    // 基于准备好的dom，初始化echarts实例
    gaugeChart = echarts.init(document.getElementById(props.id))
    gaugeChart.setOption({
      series: [
        {
          type: 'gauge',
          startAngle: 180,
          endAngle: 0,
          min: 0,
          max: 100,
          radius: '100%',
          splitNumber: 10,
          center: ['50%', '60%'],
          itemStyle: {
            color: '#58D9F9',
            shadowColor: 'rgba(0,138,255,0.45)',
            shadowBlur: 10,
            shadowOffsetX: 2,
            shadowOffsetY: 2
          },
          progress: {
            show: true,
            roundCap: true,
            width: fitChartSize(6)
          },
          axisLine: {
            roundCap: true,
            lineStyle: {
              width: fitChartSize(6)
            }
          },
          pointer: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          detail: {
            width: '100%',
            lineHeight: 20,
            height: 20,
            offsetCenter: [0, '20%'],
            valueAnimation: true,
            formatter: function (value) {
              return '{value|' + value.toFixed(0) + '}{unit|%}'
            },
            rich: {
              value: {
                fontSize: fitChartSize(12),
                fontWeight: 'bolder',
                color: '#02F9FA'
              },
              unit: {
                fontSize: fitChartSize(12),
                color: '#02F9FA'
              }
            }
          },
          data: [
            {
              value: 80
            }
          ]
        }
      ]
    })
    window.addEventListener('resize', resize)
  }
  const resize = () => {
    if (gaugeChart) {
      gaugeChart.dispose()
      init()
    }
  }
</script>

<style lang="scss" scoped>
  .gauge {
    width: vw(70);
    height: vh(50);
  }
</style>
