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 gallery.echartsjs.com/editor.html…

官方 Pull requests github.com/apache/incu…