简易雷达图实现

前言

昨天产品突然甩了一个任务给我，页面里包含了一个能力数值图，我一看就是雷达图，不说闲话，赶紧卷起袖子干起来吧。

思路

用类实现，引入配置，通过canvas画图来实现

准备

回顾一下类的使用，打算用类来实现一个

class CanvasCapabilityMap {
  // 构造函数
  constructor(mapRef, mapOption) {
    this.mapOption = mapOption
    this.mapRef = mapRef
  }
  // 类方法
  initCapabilityMap() {
  }
}

const canvasMap = new CanvasCapabilityMap(); 
canvasMap.initCapabilityMap(list)

再看一眼canvas

const ctx = canvas.getContext('2d') // 获取画笔
ctx.beginPath(); // 开始路径
ctx.moveTo(0, 0) // 移动到开始位置
ctx.lineTo(x, y) // 画线
ctx.closePath(); // 结束路径
ctx.stroke(); // 描边
ctx.fill(); // 填充

// 画圆/圆弧  
// x,y表示圆弧的圆心坐标；
// radius表示圆弧的半径；
// startAngle表示圆弧的起始弧度，与x轴正方向的夹角；
// endAngle表示圆弧的终止弧度，与x轴正方向的夹角；
// anticlockwise表示是否逆时针，取值为true或false。
ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

开整

画个圆

    // 画虚线圆
    drawDashRound (x, y, radius, step, ctx) {
        const count = Math.floor(360 / step);
        step = step / 180 * Math.PI * 2;
        for (let b = 0, e = step / 2; e <= 360; b += step, e += step) {
            ctx.beginPath()
            ctx.arc(x, y, radius, b, e);
            ctx.stroke();
        }
    }
    // 画实线圆
    drawArc(half, r, ctx) {
        ctx.beginPath();
        ctx.arc(half, half, r, 0, 2*Math.PI)
        ctx.stroke();
        ctx.closePath();
    }

获取圆弧上的点的位置(能力形状)

    getPoint(r, sx, sy, count){
      let point = [];
      let radians = (Math.PI / 180) * Math.round(360 / count);
      for(let i = 0; i < count; i++){
          let x = sx + r * Math.sin(radians * i),
              y = sy + r * Math.cos(radians * i);
   
          point.push({ x, y } ); 
      }
      return point
    }

加上连线，再加上一点点细节。

完整代码