echarts实现进度环图

 效果图如下：

option代码如下：

    // 定义参数
    // 开始角度
    let startAngle = 180;
    // 刻度最大值 ，按照百分比来设置
    let max = 100;
    // 图形大小
    let radius = '120%';
    // 数据
    let data = [75];
    // 是否展示背景
    let showBackground = false;
    // 环的宽度
    let barWidth = 10;
    // 颜色 color[0]为0%处的颜色 color[1]为100%处的颜色
    let color = ['rgba(0, 242, 255, 1)', 'rgba(0, 242, 255, 1)'];

    // 中间文字样式
    // 文字大小
    let textFontSize = 24;
    // 文字颜色
    let textColor = '#000';
    // 文字加粗
    let textFontWeight = 'bolder';

    // 配置项
    let options = {
      title: [{
        text: '进度环图',
      }, {
        // 圆环中间数字
        text: data[0] + '%',
        textStyle: {
          fontSize: textFontSize,
          fontWeight: textFontWeight,
          color: textColor,
        },
        // 居中显示
        left: 'center',
        top: 'center',
      }],
      angleAxis: {
        // 开始角度
        startAngle: startAngle,
        // 刻度最大值
        max: max,
        // 顺时针
        clockwise: false,
        // 隐藏刻度线
        show: false
      },
      radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: {
          show: false
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      polar: {
        center: ['50%', '50%'],
        // 图形大小
        radius: radius
      },
      series: [
        {
          stack: '测试',
          type: 'bar',
          data: data,
          // 是否展示背景
          showBackground: showBackground,
          coordinateSystem: 'polar',
          roundCap: true,
          // 柱子宽度
          barWidth: barWidth,
          silent: true,
          itemStyle: {
            normal: {
              opacity: 1,
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                colorStops: [
                  {
                    offset: 0,
                    // 0% 处的颜色
                    color: color[0]
                  },
                  {
                    offset: 1,
                    // 100% 处的颜色
                    color: color[1]
                  }
                ],
                // 缺省为 false
                global: false
              },
            }
          }
        },
      ]
    };