五维图代码绘制: 可以不在因为单独需要五维图而用echarts

今天在vue3官网看到了一个关于SVG Graph的的五维图绘制, 正好项目最近也需要, 特来mark一下. 记录一下学习过程

1. svg是有polygon标签的, 我们只需要指定polygon里面的标签的路径, 就可以绘制出来
2. 需要在用svg, svg里面的路径参数, 则是依靠用vue来帮助我们进行控制

var stats  = [
  { label: "A", value: 100 },
  { label: "B", value: 100 },
  { label: "C", value: 100 },
  { label: "D", value: 100 },
  { label: "E", value: 100 },
  { label: "F", value: 100 }
];


function drawMultiPolygon(value, index, total) {
    var x = 0;
    var y = -value * 0.8;
    var angle = ((Math.PI * 2) / total) * index;
    var cos = Math.cos(angle);
    var sin = Math.sin(angle);
    var tx = x * cos - y * sin + 100;
    var ty = x * sin + y * cos + 100;
    return {
      x: tx,
      y: ty
    };

}

// 拿到多边形绘制路径
let polygonPath = stats.map(function(stat, i) {
  var point = valueToPoint(stat.value, i, total);
  return point.x + "," + point.y;
}).join(" ");