canvas画圆环自适应屏幕宽度

1.样图

2.html

<div class="circle-wrapper">
        <div class="circle-item140" v-for="(item,index) in detail.circleData" :key="index">
          <div class="circle-info">
            <span>{{item.value}}</span>
            <span>{{item.name}}</span>
          </div>
          <canvas :id="item.param" v-correctZoom></canvas>
        </div>
      </div>

3.css

//页面单独样式
.circle-wrapper {
      display: flex;
      justify-content: space-around;
    }

//canvas画圆环公共样式
.wrapper{
  //160/1722即期望宽度/对应页面宽度
  .circle-item140,.circle-item160{
    border: 5px solid transparent;
    margin:auto;
    position: relative;
    .circle-info {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #fff;
      position: absolute;
      top:50%;
      left:50%;
    }
    canvas{
      position: absolute;
      top:50%;
      left:50%;
    }
  }
  .circle-item160{
    width: 9.3vw;
    height: 9.3vw;
    .circle-info {
      width: 9.3vw;
      height: 9.3vw;
      margin-top:-4.65vw;
      margin-left:-4.65vw;
    }
    canvas{
      margin-top:-4.65vw;
      margin-left:-4.65vw;
    }
  }
  .circle-item140{
    width: 7.3vw;
    height: 7.3vw;
    .circle-info {
      width: 7.3vw;
      height: 7.3vw;
      margin-top:-3.65vw;
      margin-left:-3.65vw;
    }
    canvas{
      margin-top:-3.65vw;
      margin-left:-3.65vw;
    }
  }
}

4.js部分

circleData: [
        {name: '全部设备', param: 'raiseAllDevices', value: 2000, max: 2000, color: '#1964fb'},
        {name: '累计预警', param: 'raiseAllAlarm', value: 1320, max: 2000, color: '#ff605f'},
        {name: '已处理', param: 'raiseHandled', value: 1120, max: 2000, color: '#5ab486'},
        {name: '未处理', param: 'raiseNoHandled', value: 1200, max: 2000, color: '#fb5f57'},
      ],

canvasAttr:{
        lineWidth:8,
        startPoint:-90,//顶部开始画
        widthRate:0.073,//视口宽度的率
        R1Rate:0.033,//半径相对于视口宽度的率
      },
drawCircle() {
        detail.circleData.forEach(item => {
          drawAnnuli(item,
            canvasAttr.lineWidth,
            canvasAttr.startPoint,
            canvasAttr.widthRate,
            canvasAttr.R1Rate)
        })
      },

//画圆环（可以放入公共方法中，方便其它页面使用）
dfunction getBaseWidth(){
              let baseWidth = document.body.offsetWidth
              let boxHeight = document.querySelector("#circlehumi").offsetHeight
              return {
                WIDTH:Math.min(baseWidth*widthRate,boxHeight),
                HEIGHT:Math.min(baseWidth*widthRate,boxHeight),//宽高需相同
                R1:Math.min(boxHeight*13,baseWidth)*R1Rate
              }
            }
  let {WIDTH,HEIGHT,R1}=getBaseWidth()

  let sAngle = startPoint * Math.PI / 180;//开始位置
  let eAngle = (startPoint - 360 * item.value / item.max) * Math.PI / 180;//结束位置

  let canvas = document.getElementById(item.param)
  canvas.width = WIDTH;
  canvas.height = HEIGHT;
  if (canvas) {
    let ctx = canvas.getContext('2d');
    ctx.clearRect(0, 0, WIDTH, HEIGHT);
    ctx.strokeStyle = '#59658c';
    ctx.beginPath();
    ctx.arc(WIDTH / 2, HEIGHT / 2, R1, 0, Math.PI * 2);
    ctx.lineWidth = lineWidth;
    ctx.stroke()
    ctx.closePath()
    if(item.value!=0){//如果0应该不显示
      ctx.strokeStyle = item.color;
      ctx.beginPath();
      ctx.arc(WIDTH / 2, HEIGHT / 2, R1, sAngle, eAngle, true);
      ctx.lineWidth = lineWidth;
      ctx.lineCap = 'round';
    }
    ctx.stroke()
    ctx.closePath()
  }
}
…………

onMounted(()=>{
      detail.drawCircle()
      window.addEventListener('resize',detail.drawCircle)
    })
    onBeforeUnmount(() => {
      window.removeEventListener('resize',detail.drawCircle)
    })