Echarts 实现圆角环形图

 第一种方式：使用 bar 实现

想要的效果：

代码实现：

    const chartData = {
      title: {
        text: '97', // 圆环中间数字
        textStyle: {
          color: '#222222',
          fontSize: 20,
        },
        subtext: '成功数',
        subtextStyle: {
          color: '#222222',
        },
        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: '100%', // 图形大小
      },
      series: [
        {
          type: 'bar',
          data: [
            {
              name: '交易结果成功数',
              value: 97,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [ // 渐变色，如果正常一个颜色的话，直接写 color：色值；
                    {
                      offset: 0,
                      color: '#0091ff',
                    },
                    {
                      offset: 1,
                      color: '#cfe8fc',
                    },
                  ]),
                },
              },
            },
          ],
          coordinateSystem: 'polar',
          roundCap: true,
          barWidth: 10,
          barGap: '-100%',
          z: 2,
        },
        {
          // 灰色环
          type: 'bar',
          data: [
            {
              value: 100,
              itemStyle: {
                color: '#cfe8fc',
                shadowColor: 'rgba(0, 0, 0, 0.2)',
                shadowBlur: 5,
                shadowOffsetY: 2,
              },
            },
          ],
          coordinateSystem: 'polar',
          roundCap: true,
          barWidth: 10,
          barGap: '-100%', // 两环重叠
          z: 1,
        },
      ],
    };