echarts嵌套饼图

1：静态页面效果

var myChart1 = echarts.init(document.getElementById('_top'));
option1 = {
    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },
    legend: {
         orient: 'vertical',
         left: 'left',
         data: ['学生','教师','家长','学生（小学）','学生（初中）']
    },
    series: [
        {
            name:'学段分类统计',
            type: 'pie',
            radius: ['10%', '35%'],
            label: {
                normal: {
                    position: 'inner'
                }
            },//扇形区域内显示文字
            data:[
                {value:25, name:'学生'},
                {value:35, name:'教师'},
                {value:45, name:'家长'}
            ],
            color: ['#10EFE0','#EF42A4','#FF8F03']
        },
        {
            name:'角色分类统计',
            type: 'pie',
            radius: ['35%', '75%'],
            label: {
                normal: {
                    position: 'inner'
                }
            },
            labelLine: {
                normal: {
                    show: true,
                }
            },
            data:[
                { value: 10, name: '学生（小学）' },
                { value: 10, name: '学生（初中）' },
                { value: 5, name: '学生（高中）' },
                { value: 15, name: '教师（小学）' },
                { value: 15, name: '教师（初中）' },
                { value: 5, name: '教师（高中）' },
                { value: 20, name: '家长（小学）' },
                { value: 10, name: '家长（初中）' },
                { value: 15, name: '家长（高中）' },

            ],
            color:['#51CEC6','#6AE2D9','#96F5EF','#EF87C2','#F79DD0','#FFC8E7','#FFB703','#FFCD50','#FFE296']
        },

    ],

};
myChart1.setOption(option1);

2：封装JS

function EdiObjValue(obj, target, editName) {
    for (var prop in obj) {
      if (obj.hasOwnProperty(prop)) {
        if (obj[prop] == target) {
          obj[prop] = editName;
        }
        if (Object.prototype.toString.call(obj[prop]) == '[object Object]') {
          EdiObjValue(obj[prop], target, editName)
        } else if (Object.prototype.toString.call(obj[prop]) == '[object Array]') {
          obj[prop].map(item => {
            EdiObjValue(item, target, editName)
          })
        }
      }
    }
  }


 w.multiChart = function (dom, data) {
    var dom = document.getElementById(dom);
    var chart = echarts.init(dom);

    option = {
    		tooltip: {
    			trigger: 'item',
    			formatter: "{a} <br/>{b}: {c} ({d}%)"
    		},
    		legend: {
    	         orient: 'vertical',
    	         left: 'left',
    	         data: 'xAxisData'
    	    },
    		series: [
    			{
    				name:'shopName',
    				type: 'pie',
    				radius: ['10%', '35%'],
    				label: {
    					normal: {
    						position: 'inner'
    					}
    				},//扇形区域内显示文字
    				data:'seriesData1',
    				color: ['#10EFE0','#EF42A4','#FF8F03']
    			},
    			{
    				name:'shopName',
    				type: 'pie',
    				radius: ['35%', '75%'],
    				label: {
    					normal: {
    						position: 'inner'
    					}
    				},
    				labelLine: {
    					normal: {
    						show: true,
    					}
    				},
    				data:'seriesData2',
    				color:['#51CEC6','#6AE2D9','#96F5EF','#EF87C2','#F79DD0','#FFC8E7','#FFB703','#FFCD50','#FFE296']
    			},

    		],

    };

    Object.keys(data).forEach(item => {
      EdiObjValue(option, item, data[item])
    })
    chart.setOption(option, true);
  }

3：后台动态获取数据

$.ajax({
			type : 'post',
			url: baseUrl + "BIAction/buslineAttendance",//调用后台接口获取折线图上的数据
            dataType: "jsonp",
            success:function(result){
             var options = {
               		 	shopName:result.shopName,
                        xAxisData: result.names,
                        seriesData1: result.innerMapList,//内层  
                        seriesData2: result.extMapList //外层
                       
                }    
                multiChart(id,options)
                return options  	
        }
    })