10分钟了解何为ECharts

一、Echarts是如何画图的

在ECharts 5没有出现之前，ECharts官方的首页还不是现在的简约风格。打开后映入眼帘的是一个很有科技感的视频，作为一个前端小白来讲，哇，前端还能这么秀？相信很多人都会有这样的想法，因为没有深入了解过大前端的小白们大都无法将数组、对象和眼前这个直观的图表联系起来。但是如果仔细研究后会发现，ECharts的原理其实也没有那么难。

整个ECharts库都是以canvas为基础的！canvas是一个可以在页面上固定的画图区域建立坐标系，然后通过JavaScript脚本在坐标系中绘制圆、盒、文字等。比如下面这段代码：

<canvas id="canvasArea" width="300" height="300"></canvas>

canvas {
   
  border: 1px solid black;
}

function draw(){
   
  var canvas = document.getElementById('canvasArea');
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "rgb(200,0,0)";
  ctx.fillRect (10, 10, 55, 50);
  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
  ctx.fillRect (30, 30, 55, 50);
}
draw();

这是一段简单的canvas代码，用来生成两个矩形，在浏览器中显示的结果如下：

上图中黑色边框圈起来的区域便是画图区域。利用坐标和宽窄，canvas便会自动帮助我们生成我们想要图案。

理解清楚这一步以后，就可以理解ECharts究竟做了什么了：Echarts拿到数据后，通过一系列的计算，算出canvas绘制图案时所需要的数据（坐标、高度、宽度等）；最终通过canvas，绘制出各色图表。