主要利用極座標軸和bar,以及roundCap.
option = {
angleAxis: {
max: 100,
startAngle:90,
show:false,
handle:{size:50,show:true},
splitLine: {
show: false
}
},
grid:{width:'10'},
radiusAxis: {
type: 'category',
show:false,
splitLine: {
show: false
},
name:'111',
data: ['50%', '42%', 'x', 'y', 'z'],
},
polar: {
tooltip:{show:true},
radius:['50%','100%']
},
series: [{
type: 'bar',
stack:'one',
label:{position:'inside',color:'rgba(176,240,255,1)',formatter:"{d}%"},
data: [50, 10, 9, 80, 100],
roundCap: true,
zlevel:2,
coordinateSystem: 'polar',
name: 'Without Round Cap',
// color:'rgba(7,108,118,1)',
itemStyle: {
borderColor: 'red',
borderWidth: 0,
label:{formatter: '{b}: {@score}',show:true,position:'inside',color:'black',backgroundColor:'black'},
}
}, {
type: 'bar',
stack:'one',
roundCap:true,
zlevel:1,
data: [50, 90, 91, 20, 0],
coordinateSystem: 'polar',
name: 'With Round Cap',
color: 'rgba(176,240,255,1)',
// barWidth:10,
itemStyle: {
borderColor: 'rgba(7,108,118,1)',
borderWidth: 1
}
}],
legend: {
show: true,
data: ['Without Round Cap', 'With Round Cap']
}
};
效果圖: