小程序绘制环形图

雨点打透心脏的1/2处 2023-01-14 10:53 169阅读 0赞

效果图：

![20210420143853843.png][]

wxml：

<view class='progress_box' wx:for="{
       {canvasProgressbg}}" wx:key="*this" wx:for-index="listIndex" wx:for-item="item">
                      <canvas class="progress_bg" canvas-id="{
       {item.bgid}}"> </canvas>
                      <canvas class="progress_canvas" canvas-id="{
       {item.pgid}}"> </canvas>
                      <view class="progress_text">
                        <text class='progress_info'> {
       {item.grade}}%</text>
                      </view>
                    </view>

js：

Page({
      data: {
        canvasProgressbg: [{
          bgid: "canvasProgressbg1",
          pgid: "canvasProgress1",
          test_name: "在线率",
          grade: "80"
        }]
      },
      drawProgressbg() {
        let w = wx.getSystemInfoSync().screenWidth;
        let that = this;
        for (let i = 0; i < that.data.canvasProgressbg.length; i++) {
          let ctx = wx.createCanvasContext(that.data.canvasProgressbg[i].bgid)
          ctx.setLineWidth(8*w/375);
          ctx.setStrokeStyle('#DDEDFA');
          ctx.setLineCap('round');
          ctx.beginPath();
          ctx.arc(51*w/375, 51*w/375, 43*w/375, 0, 2 * Math.PI, false);
          ctx.stroke();
          ctx.draw();
        }
      },
      drawCircle () {
        let w = wx.getSystemInfoSync().screenWidth;
        let that = this;
        for (let i = 0; i < that.data.canvasProgressbg.length; i++) {
          let context = wx.createCanvasContext(that.data.canvasProgressbg[i].pgid);
          context.setLineWidth(8*w/375);
          context.setStrokeStyle('#55A5E6');
          context.setLineCap('round');
          context.beginPath();
          context.arc(51*w/375, 51*w/375, 43*w/375, -Math.PI / 2, that.data.canvasProgressbg[i].grade/50 * Math.PI - Math.PI / 2, false);
          context.stroke();
          context.draw()
        }
      },
      onLoad: function () {
        this.drawProgressbg();
        this.drawCircle()
      }
    })

wxss：

.progress_box{
      width: 206rpx;
      height: 206rpx;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .progress_bg {
      position: absolute;
      width: 206rpx;
      height: 206rpx;
      z-index: 9;
    }
    .progress_canvas {
      width: 206rpx;
      height: 206rpx;
      z-index: 9;
    }
    .progress_text {
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .progress_info {
      letter-spacing: 2rpx;
      color: #55A5E6;
      font-weight: 600;
      font-size: 38rpx;
    }

[20210420143853843.png]: /images/20221022/b6178e6ecda44cc9b608b8b7081fcf52.png