assessment-front/pages_order/report/progressCircle.vue

<template>
  <view class="flex progress_box" :style="style">
    <view>{{ label || '' }}</view>
		<canvas class="progress_bar" :canvas-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) {
        uni.createSelectorQuery().in(this)
        .select('.progress_bar')
        .fields({
          node: true,
          size: true
        })
        .exec(async (res) => {
          const canvas = res[0].node
          // Canvas 画布的实际绘制宽高
          const width = res[0].width
          const height = res[0].height
          //根据dpr调整
          const dpr = wx.getWindowInfo().pixelRatio
          canvas.width = width * dpr
          canvas.height = height * dpr

          let Ratio = width / 126
          
          // 渲染上下文
          const ctx = canvas.getContext('2d')

          ctx.scale(dpr, dpr)
          ctx.clearRect(0, 0, width, height)
          
          let w = 14 * Ratio
          ctx.lineWidth = w; // 设置圆环的宽度
          ctx.strokeStyle = 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();
        })

      },
    },
  }
</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>