Echarts中间空心饼状图

ECharts 中间空心饼状图
官网：https://www.echartsjs.com/examples/zh/index.html

<template>
  <div id="zdry-chart"></div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'zajcChart',
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String
      //   default: "chart"
    }
  },
  data() {
    return {}
  },
  created() {},
  mounted() {
    this.init()
  },
  methods: {
    init() {
      let option = {
        tooltip: {},
        color: ['#4F9AFF', '#5ADBDC'],
        title: {
          text: '下发数',
          // subtext: 7789,
          subtext: 1772,
          textStyle: {
            color: '#f2f2f2',
            fontSize: 13,
            top: '10px'
            // align: 'center'
          },
          subtextStyle: {
            fontSize: 20,
            color: ['#ff9d19'],
            fontWeight: 800
          },
          x: 'center',
          y: 'center'
        },
        grid: {
          bottom: 150,
          left: 100,
          right: '10%'
        },
        series: [
          // 主要展示层的
          {
            radius: ['40%', '81%'],
            center: ['50%', '50%'],
            type: 'pie',
            label: {
              normal: {
                show: true,
                formatter: '{b}{d}%',
                textStyle: {
                  fontSize: 15
                },
                position: 'outside'
              },
              emphasis: {
                show: true
              }
            },
            labelLine: {
              normal: {
                show: true,
                length: 5,
                length2: 25
              },
              emphasis: {
                show: true
              }
            },
            data: [
              {
                name: '完成数',
                 value: 1151
              },
              {
                name: '未检查数',
                value: 620
              }
            ]
          },
          // 边框的设置
          {
            radius: ['40%', '44%'],
            center: ['50%', '50%'],
            type: 'pie',
            label: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            labelLine: {
              normal: {
                show: false
              },
              emphasis: {
                show: false
              }
            },
            animation: false,
            tooltip: {
              show: false
            },
            data: [
              {
                value: 1,
                itemStyle: {
                  color: 'rgba(250,250,250,0.3)'
                }
              }
            ]
          },
          {
            name: '外边框',
            type: 'pie',
            clockWise: false, //顺时加载
            hoverAnimation: false, //鼠标移入变大
            center: ['50%', '50%'],
            radius: ['65%', '65%'],
            label: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: '',
                name: '',
                itemStyle: {
                  normal: {
                    borderWidth: 2,
                    borderColor: '#0b5263'
                  }
                }
              }
            ]
          }
        ]
      }
      this.cszaChart = echarts.init(document.getElementById('zdry-chart'))
      this.cszaChart.setOption(option)
    }
  }
</script>

<style></style>