需要达到里面的图和外面的图的区域对应
// 人力類型 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);
},
运行结果: