一、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,绘制出各色图表。