Echarts 实现圆角环形图

社区看了很多，无法用饼图来实现，在官方 Issues 看到类似问题，官方已解决，使用极坐标来实现。

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
  }]

官方 Pull requests https://github.com/apache/incubator-echarts/pull/11393

• 发现一处可优化地方，可以无需绘制灰色环，使用showBackground替代，修改series处代码

series: [
  {
    type: 'bar',
    showBackground: true,
    backgroundStyle: {
      color: '#e2e2e2'
    },
    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
  }
]