assessment-front/pages/report/progressCircle.vue

<template>
  <view class="flex progress_box" :style="style">
    <view>{{ label || '' }}</view>
		<canvas ref="canvas"
      class="progress_bar" 
      :canvas-id="`cpbar${code}`" 
      :id="`cpbar${code}`" 
      type="2d"></canvas>
    <view class="value">{{ value || 0 }}</view>
  </view>
</template>

<script>

  const START = - Math.PI * 3 / 2  + Math.PI * 1 / 4 - Math.PI * 1 / 24
  const END = Math.PI * 1 / 4 + Math.PI * 1 / 24

  export default {
    props: {
      label: {
        type: String,
        default: '',
      },
      value: {
        type: String | Number,
        default: 0,
      },
      color: {
        type: String,
        default: '#014FA2'
      }
    },
    data() {
      return {
        code: Math.floor(Math.random() * 100).toString()
      }
    },
    computed: {
      style() {
        return `color: ${this.color};`
      }
    },
    mounted() {
      this.drawProgress(this.color)
    },
    methods: {
      drawProgress(color) {

        const clientWidth = this.$refs.canvas.$el.clientWidth

        const ctx = uni.createCanvasContext(`cpbar${this.code}`)
        
        let Ratio = clientWidth / 126
        let w = 14 * Ratio
        ctx.setLineWidth(w); // 设置圆环的宽度
        ctx.setStrokeStyle(color); // 设置圆环的颜色

        let width = 126 * Ratio
        let height = 126 * Ratio
        ctx.beginPath();
        let x = width / 2
        let y = height / 2
        let r = 62 * Ratio - w / 2
        ctx.arc(x, y, r, START, END, false);
        ctx.stroke();

        ctx.draw()

        return

        uni.createSelectorQuery().in(this)
        .select('.progress_bar')
        .fields({
          node: true,
          size: true
        })
        .exec(async (res) => {
          // const canvas = res[0].node
          console.log('res', res)
          // Canvas 画布的实际绘制宽高
          // const width = res[0].width
          // const height = res[0].height
          const width = res.width
          const height = res.height
          // //根据dpr调整
          // const dpr = wx.getWindowInfo().pixelRatio
          // canvas.width = width * dpr
          // canvas.height = height * dpr

          // let Ratio = width / 126
          let Ratio = 1
          console.log('Ratio', Ratio)
          
          // 渲染上下文
				  const ctx = uni.createCanvasContext('myCanvas', this)
          console.log('ctx', ctx)

          // ctx.scale(dpr, dpr)
          // ctx.clearRect(0, 0, width, height)
          
          let w = 14 * Ratio
          ctx.setLineWidth(w); // 设置圆环的宽度
          ctx.setStrokeStyle(color); // 设置圆环的颜色
          // ctx.lineCap = 'round'; // 设置圆环端点的形状
          
          ctx.beginPath();
          let x = width / 2
          let y = height / 2
          let r = 62 * Ratio - w / 2
          ctx.arc(x, y, r, START, END, false);
          ctx.stroke();

          ctx.draw()
        })

      },
    },
  }
</script>

<style lang="scss" scoped>

  $size: 126rpx;

  .progress_box {
    position: relative;
    width: $size;
    // height: $size;
    height: 154rpx;
    align-items: flex-end;
    font-size: 22rpx;
    line-height: 40rpx;
  }

  .progress_bar {
    position: absolute;
    top: 0;
    left: 0;
    width: $size;
    height: $size;
  }

  .value {
    position: absolute;
    top: 40rpx;
    left: 50%;
    transform: translateX(-50%);
    font-size: 32rpx;
    font-weight: 600;
  }


</style>