速记：SFDC 2016 - 百度ECharts 宿爽 《ECharts的结构和演进》.docxVIP

主题：2016杭州开发者大会—前端分会场 时间：2016年12月10日下午1：40 会场主持人：独立开发者(时光相册) 郭宇 议题：《ECharts的结构和演进》 讲师：百度ECharts 宿爽 宿爽：大家好，我是ECharts团队的宿爽。 这个题目是《ECharts的结构和演进》，ECharts这个东西是浏览器端数据可视化图表库。经过了大概三年多发展，在国内人的人数还比较多。 ECharts不是一个内部所发展出来的，主要还是靠github上开发者的反馈，基于这些反馈做进一步的升级修改等等。在这些反馈的过程中，它就有一个演变的过程。今天来介绍这种演变，想通过这个来给大家一些信息，写同类组件库时可以有什么样的参考。基本的纲要，大概的意思是首先介绍一下顶层结构和一些基本的设定。讲一下数据结构的抽象，再一些细节的东西。 （图示）这是几个LEVEL0，意思是最顶层的结构。ECharts这个词广义来讲是组件库整个意义。如果狭义的话分为两部分，下一部分是zrender，相当于是抽象。把底层引擎抽象了。这些引擎被zrender抽象出来，给上层的echarts用，echarts是各种图表，各种业务逻辑的汇总。独立分开这两个层，下面大概讲话一下ZRENDER层的东西，ZRENDER干了几件事，一个是渲染引擎隔离，可以用canvas和vml等渲染，兼容不同浏览器。第二，对象抽象和状态的维护。像ZRENDER这样的渲染是没有状态的，需要进行一种抽象。我们在渲染时还是更希望在场景中，对一个个带有状态的东西进行操作。比如说我们所绘制的都是几何图形，圆或者矩形，或者多边形，或者一些曲线之类的。然后描述这些东西，由它来组成一个个的图像。传统的渲染方式基本上是这样，所以ZRENDER层里面把这些图形元素抽象成Element，进行不同层级的渲染。 另外是用户封装的操作，可以是鼠标手势，浏览器触摸手势，常用操作封装，比如拖拽之类的功能。这些封装之后，由ZRENDER提供鼠标事件操作，提供不同平台的差异。再就是动画功能知识，认为在数据可视化这件事情里，动画还是比较重要的。它能够在有交互的可视化环境里，里面图形元素都处于变化的状态，由交互发生了改变。动画能够让用户不失去改变的焦点，如果没有动画的话，突变就会让人觉得很难受，所以这个是在可视化中比较重要的一个概念，在ZRENDER里实现的动画就是通过实现基于frame实现的。 还有基本的图形支持，说的就是常见的，能够图形变换的，平移缩放。也能够判断点是不是在图形内，这样一些帮助的方法。 还有其它事件，以及颜色帮助函数，eventful，这个就是ZRENDER层里所实现的东西。这些东西，这些概念实际上是比较固定的，所以ZRENDER里面的代码状态也是比较稳定，修改的情况不多。它对外提供，对上层提供的接口也是比较稳定的。 而到了ECHARTS，就是实现各个图表，还有组件，比如各种组坐标系，地图。还有工具栏，提示框等等，这些东西。然后用户的交互行为，用户点击了什么，应该会发生什么样的响应。以及整个ECHARTS对用户提供的API，都在ECHARTS手里实现，这里占用了大量代码。这些逻辑实际是不太稳定的，因为有新的需求来就会进行扩展，有BUG就会进行修复，所以这里就变化多，需扩展，代码设计得容易维护。今天这里讨论的主要是ECharts层里进行的代码结构设计，所运用的知识和原则也是基本的软件工程里说了多少年的原则，只是它的具体实践经验在这里分享一下。 架构和演变，ECharts从ECharts1到2到3，3年多，快四年发展过来，因为最开始的时候。作者也不是那么清晰，到底该怎么设计这个东西，逐渐知道了，慢慢了解了以后。知道具体设计的东西，怎么样把它影射成为代码这件事情越来越明白了，就导致有软件结构演变的过程。 在这个之前介绍一下基本概念，基本定义。在这个基本定义之下才有后面这些讨论。首先是说ECharts声明式接口，所有数据、组件、布局、行为由用户声明的option决定。举个例子，这是ECharts画出来的图，这个图到底该长成什么样子。用户这些鼠标事件该有什么反应，全都在左篇声明里决定。声明里声明了title组件，以及X轴，Y轴组件，系列，以及里面的数据，整个一大篇声明就描述了图表的行为。 由这个设定就可以看出最顶级的ECharts数据流，就相当于用户来写这么一篇声明。option描述完之后输入给ECharts，ECharts进行数据处理和渲染。如果里面规定了有什么样内置的交互需求，用户从交互输入给ECharts，鼠标，ECharts自己一个内部的循环，然后响应这个事件。如果不满足，会向外抛出事件，用户收到事件之后可以修改option，再