社區看了很多，無法用餅圖來實現，在官方 Issues 看到類似問題，官方已解決，使用極坐標來實現。
option = {
title: {
text: '95.08%',
textStyle: {
color: '#333',
fontSize: 16
},
subtext: '100萬',
subtextStyle: {
color: '#333',
fontSize:16
},
itemGap: 10, // 主副標題距離
left: 'center',
top: 'center'
},
angleAxis: {
max: 100, // 滿分
clockwise: false, // 逆時針
// 隱藏刻度線
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
radiusAxis: {
type: 'category',
// 隱藏刻度線
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
splitLine: {
show: false
}
},
polar: {
center: ['50%', '50%'],
radius: ['60%','100%'] //圖形大小
},
series: [{
type: 'bar',
data: [{
name: '作文得分',
value: 75,
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
offset: 0,
color: '#6BAAF9'
}, {
offset: 0.5,
color: '#6BAAF9'
},{
offset: 1,
color: '#1A59A8'
}])
}
},
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 15,
barGap: '-100%', // 兩環重疊
z: 2,
},{ // 灰色環
type: 'bar',
data: [{
value: 100,
itemStyle: {
color: '#E9F5FF',
shadowColor: 'rgba(1, 0, 0, 0.2)',
shadowBlur: 5,
shadowOffsetY: 2
}
}],
coordinateSystem: 'polar',
roundCap: true,
barWidth: 15,
barGap: '-100%', // 兩環重疊
z: 1
}]
}
此配置為我經國原文鏈接改造過后的圖：
原為鏈接：https://blog.csdn.net/z291493823/article/details/103502767?utm_medium=distribute.pc_relevant_download.none-task-blog-2~default~BlogCommendFromBaidu~default-1.nonecase&dist_request_id=&depth_1-utm_source=distribute.pc_relevant_download.none-task-blog-2~default~BlogCommendFromBaidu~default-1.nonecas
查看 demo
https://gallery.echartsjs.com/editor.html?c=xuyO-o_wd
官方 Pull requests https://github.com/apache/incubator-echarts/pull/11393
官方 Pull requests https://github.com/apache/incubator-echarts/pull/11393
環形圓角圖在線更改：https://www.makeapie.com/editor.html?c=xuyO-o_wd
更多作品：https://www.makeapie.com/explore.html?u=bd-1949357510&type=work#sort=rank~timeframe=all~author=all