Echarts 实现圆角环形图

网上找了很久，最终才在官方 github 反馈的问题中找到了可实现方法，博客最后放官方地址。

Echarts 版本需要 ≥4.5.0

下面是 option 代码

title: {
	text: '75',
	textStyle: {
		color: '#01c4a3',
		fontSize: 40
	},
	subtext: '总分：100分',
	subtextStyle: {
		color: '#909090',
	},
	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: '140%' //图形大小
},
series: [{
	type: 'bar',
    data: [{
		name: '作文得分',
		value: 75,
		itemStyle: {
			normal: {
				color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
					offset: 0,
					color: '#aaf14f'
				}, {
					offset: 1,
					color: '#0acfa1'
				}])
			}
		},
    }],
	coordinateSystem: 'polar',
	roundCap: true,
	barWidth: 25,
	barGap: '-100%', // 两环重叠
	z: 2,
},{ // 灰色环
    type: 'bar',
    data: [{
		value: 100,
		itemStyle: {
			color: '#e2e2e2',
			shadowColor: 'rgba(0, 0, 0, 0.2)',
			shadowBlur: 5,
			shadowOffsetY: 2
		}
    }],
    coordinateSystem: 'polar',
    roundCap: true,
    barWidth: 25,
    barGap: '-100%', // 两环重叠
    z: 1
  }]

查看 demo https://gallery.echartsjs.com/editor.html?c=xuyO-o_wd
官方 Pull requests https://github.com/apache/incubator-echarts/pull/11393