echarts 内外联系图

需要达到里面的图和外面的图的区域对应

   // 人力類型 rate 扇形
    setTypeRateChart: function (d,e,f,a) {
      let pieData=[];
      let k=['教师','医生','售货员','男','女','小孩'];
    //   let a = _this.aa.emp;
      let dataType=k;
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById('levelRate'));
      // 指定图表的配置项和数据
      for(let i=0;i<3;i++){
        pieData.push({
          name: k[i],
          value: a[i],
          children: [{
            name: '男',
            value: d[i],
        }, {
            name: '女',
            value: e[i],

        },{
            name: '小孩',
            value: f[i],

        }]
      })
      };
    
      colorList= ['#f00','#0f0','#00f'];

      let sInner
      let sOuter = []
      sInner = pieData.map(d => {
      if (d.children) {
          d.children.forEach(r => {
              sOuter.push({
                  name: r.name,
                  value: r.value,
                  type: d.name
              })
          })
      }
      return {
          name: d.name,
          value: d.value
      }
      })

      var option1 = {

        color: colorList,
        tooltip: {
            formatter(data) {
              _this.aa.empData=data.data.type;
              // console.log( _this.aa.empData,"888888888888")
                let d = data.data
                if (d.type) {
                    return d.type + '</br>' + d.name + '：' + d.value
                }
                return d.name + '：' + d.value
            }
        },
        legend: {
                  selectedMode:false,
                  show: true,
                  icon: "circle",
                  itemWidth: 9,
                  itemGap: 25,
                  data:dataType,
                  // 显示方向
                  orient: "vertical",
                  // x轴方向的位置
                  x: "90%",
                  y:'18%'
        },
        series: [{
                startAngle: 70,
                hoverAnimation: false,
                type: 'pie',
                selectedMode: 'single',
                radius: '40%',
                center:['46%','63%'],
                label: {
                    normal: {
                        position: 'inner',
                        formatter(d) {
                            return d.name 
                        }
                    }
                },
                labelLine: {
                    normal: {
                        show: false
                    }
                },
                data: sInner
            },
            {
                startAngle: 70,
                name:_this.aa.empData,
                // avoidLabelOverlap: false,
                // roseType: 'angle',
                center:['46%','63%'],
                hoverAnimation: false,
                color:["#62d6fe","#be9cff","#ff91b9"],
                type: 'pie',
                radius: ['45%', '65%'],
                label: {
                    normal: {
                      show:true,
                      formatter(data){
                        return  '{a|'+data.data.type+"}\n{hr|}\n "+ data.data.name+ '  :  ' +data.data.value+ '  {per|'+data.percent+'% }  ';
                      },
                      // backgroundColor: '#eee',
                      borderColor: '#aaa',
                      borderWidth: 0.5,
                      borderRadius: 4,
                      rich: {
                          a: {
                              color: '#000',
                              lineHeight: 20,
                              align: 'center'
                          },
                          hr: {
                              borderColor: '#aaa',
                              width: '100%',
                              borderWidth: 0.5,
                              height: 0
                          },
                          b: {
                              fontSize: 14,
                              lineHeight: 22
                          },
                          per: {
                              color: '#eee',
                              height:13,
                              backgroundColor: '#132a45',
                              padding: [2,4],
                              borderRadius: 5,
                          }
                      }
                    },
                },
                labelLine: {
                  normal: {
                      show: true
                  }
              },
                data: sOuter
            },
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option1);
    },

运行结果: