echarts 极坐标实现【环形】柱状图

效果图如下：

polar 极坐标属性配置：

polar: {
    center: ['50%', '50%'], // 中心（圆心）坐标
    radius: '100%' //图形大小
},

angleAxis 极坐标系的角度轴:

angleAxis: {
    max: 100, // 满分
    clockwise: false, // 逆时针
},

radiusAxis 极坐标系的径向轴:

radiusAxis: {
    type: 'category',
},

如何实现环形柱状图呢？

{
    type: 'bar',
    data: [{  // 设置单项数据
        name: '作文得分',
        value: 75,
    }],
    coordinateSystem: 'polar',  // 使用极坐标坐标系
    roundCap: true, // 在环形柱条两侧，使用圆弧效果
    barWidth: 25,
    barGap: '-100%', // 两环重叠
    z: 2, 
}

想要做出带有进度条的环形柱状图的话，同样我们添加一个环形柱状图，然后将两个环形柱状图重叠在一起即可。