常用的 echarts 绘制图表都是基于 canvas 或者 svg

这里简单写一下实现的原理

柱状图

 <canvas id="bar-chart" width="500" height="500"></canvas>
复制代码

var data = [16, 68, 20, 30, 54];
function drawBar(data) {
  let canvas = document.getElementById("bar-chart");
  let c = canvas.getContext("2d");

  // 设置背景
  c.fillStyle = "white";
  c.fillRect(0, 0, 500, 500);

  // 设置柱状
  c.fillStyle = "blue";
  for (var i = 0; i < data.length; i++) {
    var dp = data[i];
    // y 轴和 canvas 是相反的所以需要减去高度 dp*5
    c.fillRect(40 + i * 100, 460 - dp * 5, 50, dp * 5);
  }

  // 设置坐标轴
  c.fillStyle = "black";
  c.lineWidth = 2.0;
  c.beginPath();
  c.moveTo(30, 10);
  c.lineTo(30, 460);
  c.lineTo(490, 460);
  c.stroke();

  // 设置 y 轴标签
  c.fillStyle = "black";
  for (var i = 0; i < 5; i++) {
    c.fillText((4 - i) * 20 + "", 4, i * 100 + 60);
    c.beginPath();
    c.moveTo(25, i * 100 + 60);
    c.lineTo(30, i * 100 + 60);
    c.stroke();
  }

  // 设置 x 轴标签
  for (var i = 0; i < 5; i++) {
    c.fillText(data[i], 60 + i * 100, 475);
  }

  c.font = "bold 30px serif";
  c.fillText("柱状图", 200, 30);
}

复制代码

饼图

<canvas id="pie-chart" width="500" height="500"></canvas>
复制代码

var data = [16, 68, 20, 30, 54];
function drawPie(data) {
  const colors = ["orange", "green", "blue", "yellow", "teal"];
  let canvas = document.getElementById("pie-chart");
  let c = canvas.getContext("2d");

  // 计算总和
  let total = data.reduce((cur, t) => (t += cur));

  // 绘制饼图
  let prev = 0; // 当前扇形开始弧度
  for (let i = 0; i < data.length; i++) {
    // 结束弧度
    let angle = prev + (data[i] / total) * Math.PI * 2;

    // 设置颜色
    c.fillStyle = colors[i % colors.length];

    // 绘制扇形
    c.beginPath();
    c.moveTo(250, 250);
    c.arc(250, 250, 150, prev, angle, false);
    c.lineTo(250, 250);
    c.fill();
    c.strokeStyle = "black";
    c.stroke();
    prev = angle;
  }

  c.fillText("饼状图", 200, 50);
}
复制代码