canvas画圆环自适应屏幕宽度

1.样图

2.html

 

        

          

            {{item.value}}
            {{item.name}}
          
          
        
      

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

//画圆环（可以放入公共方法中，方便其它页面使用）
drawAnnuli(item,lineWidth,startPoint,widthRate,R1Rate) {
  let WIDTH=document.body.offsetWidth*widthRate,
  HEIGHT=document.body.offsetWidth*widthRate,//宽高需相同
  R1=document.body.offsetWidth*R1Rate;

  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)
    })