Echarts实现圆角圆环

直接看效果图吧

话不多说，直接贴代码

  const option = {
                title: {
                    text: '72%',
                    textStyle: {
                        color: "#000000",
                        fontSize: 18 //圆环中间文字大小设置
                    },
                    left: "center",
                    top: "center"
                },
                angleAxis: {
                    max: 100, // 满分
                    clockwise: true, // 逆时针
                    // 隐藏刻度线
                    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: "100%" //图形大小
                },
                series: [
                    {
                        type: "bar",
                        data: [
                            {
                                name: "占比",
                                value: 72,
                                itemStyle: {
                                    normal: {
                                        color: "#3CBE99" //有颜色的环的颜色
                                    }
                                }
                            }
                        ],
                        coordinateSystem: "polar",
                        roundCap: true,
                        barWidth: 18, //环的宽度
                        barGap: "-100%", // 两环重叠
                        z: 2
                    },
                    {
                        // 灰色环
                        type: "bar",
                        data: [
                            {
                                value: 100,
                                itemStyle: {
                                    color: "#E6ECF9",
                                    shadowColor: "rgba(0, 0, 0, 0.1)",
                                    shadowBlur: 2,
                                    shadowOffsetY: 2
                                }
                            }
                        ],
                        coordinateSystem: "polar",
                        roundCap: true,
                        barWidth: 18,
                        barGap: "-100%", // 两环重叠
                        z: 1
                    }
                ]
            };

echarts使用的版本为 echarts: ^4.1.0

比较懒，凑合看吧

(\ _ /)
( * . *)
/>❤️