echars的仪表盘

效果

代码：

<template>
  <div class="chartsBox" ref="supplierNumRef" id="ProductionProgressChart"></div>
</template>

<script setup>
import * as echarts from 'echarts'
defineOptions({ name: 'ProductionProgress' })

const setEcharts = () => {
  var chartDom = document.getElementById('ProductionProgressChart')
  var ProductionProgressChart = echarts.init(chartDom)
  var highlight = '#1B95F6'

  var value = 64
  let option = {
    angleAxis: {
      show: false,
      max: (100 * 360) / 270,
      type: 'value',
      startAngle: 225,
      splitLine: {
        show: false
      }
    },
    // 圆环宽度
    barMaxWidth: 10,
    radiusAxis: {
      show: false,
      type: 'category',
      z: 10
    },
    polar: {
      // 圆环大小
      radius: '110%'
    },
    series: [
      // 外围刻度
      {
        type: 'gauge',
        center: ['50%', '50%'],
        radius: '100%', 
        splitNumber: 10,
        min: 0,
        max: 100,
        startAngle: 225,
        endAngle: -45,
        axisLine: {
          show: false,
          lineStyle: {
            width: 1,
            color: [[1, 'rgba(0,0,0,0)']]
          }
        }, //仪表盘轴线
        axisTick: {
          show: true,
          lineStyle: {
            color: 'rgba(84,147,255,0.14)',
            width: 1
          },
          length: 8
        }, //刻度样式
        splitLine: {
          show: false,
          length: -1,
          lineStyle: {
            color: 'rgba(255,255,255,0.6)'
          }
        }, //分隔线样式
        axisLabel: {
          show: false,
          distance: -1,
          textStyle: {
            color: highlight,
            fontSize: '12',
            fontWeight: 'bold'
          }
        },
        pointer: {
          show: 0
        },
        detail: {
          show: 0
        }
      },
      // //中间刻度
      {
        type: 'gauge',
        center: ['50%', '50%'],
        radius: '80%', 
        splitNumber: 10,
        min: 0,
        max: 100,
        startAngle: 225,
        endAngle: -45,
        axisLine: {
          show: false,
          lineStyle: {
            width: 1,
            color: [
              [0.45, '#00E9FF'],
              [0.5, '#356bd4'],
              [0.55, '#5365ed'],
              [1, '#9c15de']
            ]
          }
        }, //仪表盘轴线
        axisTick: {
          show: true,
          lineStyle: {
            color: [[1, '#fff']],
            width: 1
          },
          length: -3
        }, //刻度样式
        splitLine: {
          show: true,
          length: -5,
          lineStyle: {
            color: 'auto',
            width: 1
          }
        }, //分隔线样式
        axisLabel: {
          show: false
        },
           pointer: {
          show: false,
          length: '105%'
        },
           itemStyle: {
          normal: {
            color: highlight
          }
        },
           data: [
          {
            value: value
          }
        ],
        detail: {
          show: true,
          height: 60,
          offsetCenter: [0, '15%'],
          formatter: '{percert|{value}}{text|%}\n{name|当前生产进度}',
          rich: {
            percert: {
              fontFamily: 'DINAlternate, DINAlternate',
              fontWeight: 'bold',
              fontSize: 25,
              color: '#1DE4F7'
            },
            text: {
              fontFamily: 'PingFangSC, PingFang SC',
              fontWeight: 400,
              fontSize: 13,
              color: ' #1DE4F7'
            },
            name: {
              fontFamily: 'PingFangSC, PingFang SC',
              fontWeight: 400,
              fontSize: 8,
              color: '#FFFFFF',
              lineHeight: 8
            }
          }
        },
      },
      // 内容圆环
      {
        type: 'bar',
        barWidth: 6,
        data: [
          {
            value: value,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#1DE6F0'
                },
                {
                  offset: 0.5,
                  color: '#FDCE82'
                },
                {
                  offset: 1,
                  color: '#D054CC'
                }
              ]),
              shadowColor: 'rgba(35, 176, 176, 0.5)',
              shadowBlur: 5
            }
          }
        ],
        barGap: '-100%',
        coordinateSystem: 'polar',
        roundCap: true,
        z: 2,
        animationDuration: 2000
      },
      {
        // 底层圆环
        type: 'bar',
        barWidth: 6,
        data: [
          {
            value: 100,
            itemStyle: {
              color: 'rgba(0,132,255,0.24)'
            }
          }
        ],
        barGap: '-100%',
        coordinateSystem: 'polar',
        roundCap: true,
        z: 1,
        animation: false
      }
    ]
  }
  ProductionProgressChart.setOption(option)
  window.addEventListener('resize', () => {
    ProductionProgressChart.resize()
  })
}
onMounted(() => {
  nextTick(() => {
    setEcharts()
  })
})
</script>
<style lang="scss" scoped>

.chartsBox {
  width: 40%;
  height: 16vh;
}
</style>