这里是实现完成的效果~

代码如下：

<view>
  <canvas class="canvas-wrapper" :canvas-id="randomId"></canvas>
</view>

created() {
  // 随机id是为了避免组件在多个地方使用有冲突
  this.randomId = 'canvas' + (Math.random() * 1000000).toFixed(0)
},
initCanvas() {
  const query = uni.createSelectorQuery().in(this);
  query.select('#' + this.randomId).boundingClientRect(data => {
    const { width, height } = data
    const ctx = uni.createCanvasContext(this.randomId)
    
    ctx.scale(width / 126, height / 126) // 页面适配，获取缩放比例进行缩放
  
    // 先填充一个完整的圆作为背景
    ctx.beginPath() // 开始路径
    ctx.arc(63, 63, 60, 0, 2 * Math.PI);
    ctx.setFillStyle('#F2F2F7')
    ctx.fill()
    ctx.closePath() // 结束路径
  
    // 起始位置在最上面，所以是-(Math.PI / 2)
    const startRadian = -(Math.PI / 2)
  
    // 根据百分比计算对应的弧度得出结束位置
    const angle = 360 * this.percent / 100
    const radian = angle * Math.PI / 180
    const endRadian = startRadian + radian
  
    // 绘制进度条
    ctx.beginPath()
    ctx.arc(63, 63, 52, startRadian, endRadian) // 创建圆弧
    ctx.setStrokeStyle('#00BB7A') // 设置填充颜色
    ctx.setLineWidth(15) // 设置填充线宽
    ctx.stroke() // 开始描边
    ctx.closePath()
  
    // 绘制进度条中间文字
    ctx.beginPath()
    ctx.setFontSize(16)
    ctx.setFillStyle('#AEAEB2')
    ctx.setTextAlign('center') // 设置文字居中
    ctx.fillText('参与率', 126 / 2, 126 / 2 - 5); // 第二个参数需要设置canvas宽度的一半
    ctx.closePath()
  
    // 绘制进度条中间百分比
    ctx.beginPath()
    ctx.setFontSize(16)
    ctx.setFillStyle('#000000')
    ctx.setTextAlign('center')
    ctx.fillText(this.percent.toFixed(1) + '%', 126 / 2, 126 / 2 + 25);
    ctx.closePath()
  
    ctx.draw()
  }).exec();
}