社区看了很多,无法用饼图来实现,在官方 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