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

Created with Raphaël 2.2.0 原始数据 ECharts中的算法计算canvas绘制图表时需要的数据 canvas通过数据绘制图表最终显示在浏览器中的图表

二、组件化——让开发者定制图表的解决方案

为了能满足用户的需求，ECharts对个色图表的组成也做了研究，并将其称之为组件。ECharts中的组件包括xAxis（直角坐标系 X 轴）、yAxis（直角坐标系 Y 轴）、grid（直角坐标系底板）、angleAxis（极坐标系角度轴）、radiusAxis（极坐标系半径轴）、polar（极坐标系底板）、geo（地理坐标系）、dataZoom（数据区缩放组件）、visualMap（视觉映射组件）、tooltip（提示框组件）、toolbox（工具栏组件）、series（系列）等等等等，几乎是满足了所有图表的需求。
为了更直观的展示这些组件是如何完善图表的，官方教程中给出了这样的一张图：

可以看到ECharts对整个图表中的各个部分都做了拆分，组件化为使用者提供了更多的选择，让ECharts在高度封装的前提下，又能满足开发者们的自定义需要。

三、ECharts如何了解你的想法

当然，ECharts有了非常好的解决方案，但也需要一种简洁的方法来了解开发者的想法，降低学习成本是一个优秀框架的前提，过高的学习成本会阻碍一个优秀框架的进步。万幸的是ECharts解决了这个问题。

仔细研究上面canvas确定绘图区域的方法，会发现canvas是结合DOM来选定绘图区域来最终确定坐标系的，这样做的好处的，可以通过CSS来控制最终图表的位置，绘图区域的调整和修改最终也不会影响到绘图的结果。ECharts在选取绘制区域上也使用了这一种方法：

<body><!-- 为 ECharts 准备一个具备大小（宽高）的 DOM --><div id="main" style="width: 600px;height:400px;"></div>
</body>

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

上面中通过dom确定了接下来的绘图区域。无论后续绘图区域的位置及宽高如何变化，ECharts都会基于该元素绘制图表。

确定在哪绘图后，ECharts需要了解开发者需要怎样的图表，基于组件化的设计，ECharts规定了开发者需要通过一个简单的option对象，来配置图表中的各个组件，例如官方文档中的简单例子：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>ECharts</title><!-- 引入 echarts.js --><script src="echarts.min.js"></script>
</head>
<body><!-- 为ECharts准备一个具备大小（宽高）的Dom --><div id="main" style="width: 600px;height:400px;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('main'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data:['销量']},xAxis: {data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script>
</body>
</html>

可以看出option对象中的属性最终都以组件的方式展示在了图表中：title属性被展示为图表的标题，legend属性被渲染成为图表的图例，xAxis属性被渲染成X轴，series属性被渲染成了柱状图（series是ECharts中的一个基础概念，它指一组数值以及他们映射成的图，后面的文章中会有介绍）。

四、ECharts真正的魅力

理解完上面的内容，会发现ECharts的语法真的非常简单，熟练运用后，制作图表或许比一点一点的调整CSS更容易，但这只是一个开始。

在我看来，ECharts真正的魅力在于除了绘图，它会帮你完成很多看似无关紧要的细节，比如动画效果：

除了这种初次加载时的动画，还包括一些数据加载中的动画效果，你会惊讶的发现这些效果不仅仅作用在核心图上，整个图表的组件都会跟随动画进行变动：

这些用心的小细节会让页面的使用者更加舒心。当然ECharts除了这些还有很多惊艳的地方，小到组件上的一些小细节，大到绘制3D图表等，也难怪它的运用范围如此广泛。

五、不安于现状的ECharts

ECharts本身已经十分优秀了，项目覆盖率也非常的广，但是ECharts 5又一次创造了变革。抛开数据层面的进步不说，使用svg渲染代替canvas渲染就已经让人十分乘醉。

先对比一下在浏览器中放大250%后两种渲染方式的区别，先看canvas下渲染的：

发现了什么？放大250%后，图表已经已经完全虚化。再看看svg下渲染的结果：

看出差距了吗？svg完全解决了虚化的问题，真的是强迫症工程师的福音。

我们再看看两种渲染结果在最终的html文档中的表现，先看canvas的：

看出来了吗？canvas最终在html里面只有一个标签，即容器标签，所有的操作都是在JavaScript脚本中进行的，再看看svg的：

svg渲染后，图中的每一个元素都会以标签的形式展现在最终的html文档中，这样做的好处就是给哪些大佬们提供了自我发挥的空间，虽然我暂时没有尝试，但是，svg可能的确会使ECharts变得更加灵活。

参考和应用

https://echarts.apache.org/zh/index.html （Apache ECharts官网）
https://www.runoob.com/w3cnote/html5-canvas-intro.html （《学习 HTML5 Canvas 这一篇文章就够了》（菜鸟教程））