echarts实现刻度盘

需求：产品要求制作一个刻度圆环，并存在点击事件

思路：使用echarts中的圆环和仪表盘叠加，并为chart添加点击效果

代码展示：

<script>
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF']
let echartData = [
  {
    name: 'A',
    value: '3720'
  },
  {
    name: 'B',
    value: '2920'
  },
  {
    name: 'C',
    value: '2200'
  },
  {
    name: 'D',
    value: '1420'
  },
  {
    name: 'E',
    value: '1820'
  }
]
let option: any
let chart: any
const refChart = ref<HTMLElement | undefined>(undefined)

const initChart = () => {
  option = {
    color: color,
    title: false,
    series: [
      {
        type: 'gauge',
        radius: '70%',
        startAngle: '0',
        endAngle: '-359.99',
        splitNumber: '30',
        pointer: {
          show: false
        },
        title: {
          show: false
        },
        detail: {
          show: false
        },
        axisLine: {
          lineStyle: {
            width: 20,
            opacity: 0
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          length: 48,
          lineStyle: {
            color: '#082b4b',
            width: 3,
            type: 'solid'
          }
        },
        axisLabel: {
          show: false
        },
        zlevel: 1
      },
      {
        type: 'pie',
        radius: ['45%', '60%'],
        center: ['50%', '50%'],
        data: echartData,
        hoverAnimation: false,
        label: false
      }
    ]
  }
  chart.setOption(option)
}
const clickDialog = (params: any) => {
  console.log('获取到了', params.data.name)
}

onMounted(() => {
  chart = echarts.init(refChart.value!)
  chart.on('click', clickDialog)
  initChart()
})
</script>
<template>
  <div class="chart" ref="refChart"></div>
</template>
<style lang="less" scoped>
@import '@/styles/mixin.less';
.chart {
  width: 600px;
  height: 600px;
}
</style>

成品展示：