uniapp 实现渐变圆弧进度条，并且根据实际数值，控制进度

 在uni-app中实现渐变圆弧进度条可以使用canvas来绘制。下面是一个简单的示例：

在template中添加canvas标签：

<canvas canvas-id="progressCanvas" style="width: 200px; height: 200px;"></canvas>

在script中添加以下代码：

export default {
  onReady() {
    this.drawProgress(0.7); // 根据实际数值设置进度
  },
  methods: {
    drawProgress(progress) {
      const ctx = uni.createCanvasContext('progressCanvas', this);
      const width = 200;
      const height = 200;
      const radius = 80;
      const lineWidth = 20; // 进度条宽度
      const startAngle = Math.PI / 2;//正数向下闭合Math.PI / 2，负数向上闭合-Math.PI / 2
      const endAngle = startAngle + progress * 2 * Math.PI;

      // 渐变色
      const gradient = ctx.createLinearGradient(0, 0, width, height);
      gradient.addColorStop(0, '#ff0000');
      gradient.addColorStop(1, '#00ff00');

      // 绘制底部圆
      ctx.beginPath();
      ctx.arc(width / 2, height / 2, radius, 0, 2 * Math.PI);
      ctx.setStrokeStyle('#eaeaea');
      ctx.setLineWidth(lineWidth);
      ctx.stroke();

      // 绘制进度条
      ctx.beginPath();
      ctx.arc(width / 2, height / 2, radius, startAngle, endAngle, false);
      ctx.setStrokeStyle(gradient);
      ctx.setLineWidth(lineWidth);
      ctx.setLineCap('round');
      ctx.stroke();

      // 显示进度数值
      ctx.setFontSize(20);
      ctx.setFillStyle('#000000');
      ctx.setTextAlign('center');
      ctx.setTextBaseline('middle');
      ctx.fillText((progress * 100).toFixed(0) + '%', width / 2, height / 2);

      ctx.draw();
    }
  }
}

上述代码中，在 onReady 生命周期（根据实际情况，选择生命周期）中调用 drawProgress 方法，并传入实际数值来设置进度。drawProgress 方法使用canvas绘制圆弧进度条，使用渐变色来表示进度。

将起始角度 startAngle 设置为 Math.PI / 2，即1/4 圆的起始位置。然后根据进度计算结束角度 endAngle。这样就实现了圆形进度条的闭合区域在下面。

添加了一个变量 lineWidth 来控制进度条的宽度，可以根据需要进行调整。

在绘制进度条后，我们使用 ctx.fillText() 方法在圆形进度条中间显示实际进度数值。设置了字体大小、字体颜色、文本对齐方式和基线方式，以确保文字居中显示。

注意要使用 uni.createCanvasContext 创建canvas的绘图上下文，并指定canvas的id。