echarts实现环形图嵌套饼图

需求描述：最外层环形图展示总体检查进度，内层分别展示三个模块的检查进度
设计效果：

思路：首先画出外层圆环，将内层圆环采用定位的方式，使其呈现在环形图中间
代码：

<div class="chartBox">
	 <div id='progressChart'></div>
	 <div id="pieChart"></div>
</div>

此处需要注意的是，不可将里层的div（即id为pieChart的div）直接嵌入到外层的div（即id为progressChart的div）中，这样里层的div是无法定位的

.chartBox{
    width:50%;
    position:relative;
    #progressChart{
        width:100%;
        height:100%
    }
    #pieChart{
        width: 70%;
        height: 70%;
        border-radius: 50%;
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%, -50%);
    }
}

 // 进度条
getProgressChart(){
	let dom = document.getElementById('progressChart');
	let myChart = this.echarts.init(dom);
	let getvalue = [];
	getvalue.push(this.totalProgress);
	let option = {
	  tooltip: {
	      formatter: function (params) {
	          return '<span style="color: #fff;">检查总进度：'+ getvalue + '%</span>';
	      }
	  },
	  angleAxis: {
	      max: 100,
	      clockwise: true, // 逆时针
	      // 隐藏刻度线
	      show: false
	  },
	   radiusAxis: {
	       type: 'category',
	       show: true,
	       axisLabel: {
	           show: false,
	       },
	       axisLine: {
	           show: false,
	       },
	       axisTick: {
	           show: false
	       },
	   },
	   polar: {
	       center: ['50%', '50%'],
	       radius: ['80%','100%'] //图形大小
	   },
	   series: [{
	       type: 'bar',
	       data: getvalue,
	       showBackground: true,
	       backgroundStyle: {
	           color: '#EDEDED',
	       },
	       coordinateSystem: 'polar',
	       roundCap: true,
	       barWidth: 20,
	       itemStyle: {
	           normal: {
	               opacity: 1,
	               color:'#22A4FB'
	           }
	       },
	   }]
  };
  myChart.setOption(option);
},
// 饼图
getPieChart(){
    let dom = document.getElementById('pieChart');
    let myChart = this.echarts.init(dom);
    let option = {
        tooltip: {
            trigger: 'item',
            formatter: e => {
                return `
                    ${e.name}<br/>
                    检查项: ${e.data.value}项<br/>
                    进度: ${e.data.rate}%
                `
            }
        },
        angleAxis: {
            type: 'category',
            // 去掉边线
            axisLine: {
                show: false
            },
        },
        radiusAxis: {
            max: 100,
            // 去掉刻度线
            axisLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: false
            },
        },
        polar: {
            radius: [0, '100%']
        },
        series: [
            // 饼图
            {
                type: 'pie',
                radius: [0, '100%'],
                label: {
                    lineHeight: 14,
                    formatter: e => {
                        return `${e.name}`
                    },
                    normal: { 
                        show: true,
                        color: '#4A4A4A',
                        position: 'inner' 
                    }
                },
                itemStyle: {
                    borderWidth: 3,
                    borderColor: '#fff',
                },
                data: [
                    {
                        value: this.checkItems1,
                        // 因为触发的是饼图的 tooltip，这里对应放极坐标的 data 值
                        rate: this.checkPrt1,
                        name: '数据规范性检查',
                        itemStyle: {
                            color: 'rgba(237, 237, 237, .5)',
                        }
                    },
                    {
                        value: this.checkItems2,
                        rate: this.checkPrt2,
                        name: '图形一致性检查',
                        itemStyle: {
                            color: 'rgba(237, 237, 237, .5)',
                        }
                    },
                    {
                        value: this.checkItems3,
                        rate: this.checkPrt3,
                        name: '图数一致性检查',
                        itemStyle: {
                            color: 'rgba(237, 237, 237, .5)',
                        }
                    }
                ],
            },
            // 极坐标 - 玫瑰图
            {
                type: 'bar',
                name: '数据规范性检查',
                max: 100, // 100 的比例
                data: [this.checkPrt1], // 控制半径占比
                barWidth: (this.checkItems1 / this.totalTerm) * 100 + '%', // 控制和饼图角度一致
                barGap: 0,
                itemStyle: {
                    color: '#22A4FB'
                },
                coordinateSystem: 'polar',
            }, {
                type: 'bar',
                name: '图形一致性检查',
                data: [this.checkPrt2],
                max: 100,
                barWidth:  (this.checkItems2 / this.totalTerm) * 100 + '%',
                barGap: 0,
                itemStyle: {
                    color: '#22A4FB'
                },
                coordinateSystem: 'polar',
            }, {
                type: 'bar',
                name: '图数一致性检查',
                data: [this.checkPrt3],
                max: 100,
                barWidth:  (this.checkItems3 / this.totalTerm) * 100 + '%',
                barGap: 0,
                itemStyle: {
                    color: '#22A4FB',
                },
                coordinateSystem: 'polar',
            }
        ],
    };
    myChart.setOption(option);
},