vue2.x + echart 5.x 实现环形利用率图

<template>
  <div ref="main" class="rate-chart"></div>
</template>
<script>
import * as echarts from 'echarts'
export default {
  methods: {
    init() {
      const myChart = echarts.init(this.$refs.main)
      let value = 65.52
      const option = {
        series: [
          {
            clockwise: true,
            hoverAnimation: false,
            legendHoverLink: false,
            hoverOffset: 0,
            name: '外层空心圆',
            type: 'pie',
            radius: ['98%', '98%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            itemStyle: {
              borderColor: '#414141',
              borderWidth: 2
            },
            data: [{ value: 0 }]
          },
          {
            clockwise: true,
            hoverAnimation: false,
            legendHoverLink: false,
            hoverOffset: 0,
            name: '内层空心圆',
            type: 'pie',
            radius: ['60%', '60%'], // 设置内外半径
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            labelLine: {
              show: false
            },
            data: [{ value: 0, name: '' }],
            itemStyle: {
              borderColor: '#414141',
              borderWidth: 2,
              color: 'none'
            }
          },
          {
            type: 'pie',
            radius: ['86%', '70%'],
            silent: true,
            clockwise: true,
            startAngle: 0,
            z: 0,
            zlevel: 0,
            data: [
              {
                value: value,
                itemStyle: {
                  color: '#FF4500'
                },
                label: {
                  position: 'center',
                  fontSize: 14,
                  color: '#fff',
                  formatter: function () {
                    return value + '%'
                  }
                }
              },
              {
                value: 100 - value,
                label: {
                  show: false
                },
                itemStyle: {
                  normal: {
                    color: '#414141'
                  }
                }
              }
            ]
          },
          {
            name: '',
            type: 'gauge',
            radius: '88%',
            center: ['50%', '50%'],
            startAngle: 0,
            endAngle: 360,
            splitNumber: 10,
            hoverAnimation: true,
            axisTick: {
              show: false
            },
            splitLine: {
              length: '20%',
              distance: -10,
              lineStyle: {
                width: '4',
                color: '#000'
              }
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: false
            },
            axisLine: {
              show: false
            }
          }
        ]
      }
      myChart.setOption(option)
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped lang="less">
.rate-chart {
  width: 100%;
  height: 100%;
}
</style>

实现方式：
3个饼图 +  1个仪表盘图（做分割用）