echarts d3比较_ECharts 学习笔记

Echarts是一款声明式的可视化图表库，相比于其他图表库，其主要的优势在于易用性、内置丰富的交互以及高性能。本文在Echarts5发布之际，笔者重新学习echarts，主要结合18年Echarts的一篇文章，来对Echarts有一个更深入的了解。
Li, Deqing, et al. "ECharts: a declarative framework for rapid construction of web-based visualization." Visual Informatics 2.2 (2018): 136-146.

主要内容

1. 背景（图形语法、图形开发工具）
2. 声明式可视化
3. 定制化的可视化
4. 架构（渐进式可视化，多线程渲染，Zrender）

1. 背景

1.1 图形语法

图表工具，如excel和manyEyes 支持快速选择已有的可视化模板生成图表。但这限制了可视化的自由，使得用户智能受限于已经提供的图表模板。
Wilkinson提出了图形语法，将可视化拆解为更基本的图形粒度的声明。这大大扩展了可视化表达的自由程度。基于此，诞生了Polaris（即后来的Tableau），GGPolt2以及ggivs。一些可视化的框架做了更低阶的抽象来实现更简洁的声明，如InfoVis Toolkit, Improvise, prefuse和Flare，这些工具中，可继承的组件和组合运算能力被赋予用户来实现更自由的可视化开发。另有一方面，更针对“数据可视化”的声明式的领域特定语言(DSL)，如ProtoVis, D3和Vega允许用户直接将数据映射到可视化元素上去。vega-lite则进一步抽象了交互行为。

1.2 图形开发工具

早期的web端的可视化工具主要是基于Java和Flash。

• PRocessing : Java applet
• Flare: ActionScript (Adobe Flash Player)
• JavaScript + SVG -> JS InfoVis Toolkit, protoVis, D3.js
  • SVG提供了2D图形的绘制能力
  • JS提供了灵活易用的回调和和DOM事件

但SVG本身存在一定的性能问题，主要源于DOM本身非常的笨重。后续，更多的可视化库开始尝试Canvas。

• Vega Canvas带来了相比SVG 2 - 4倍的性能提升。
• 但对于单一的可视化元素，Canvas并不提供原生的支持。

Echarts实现了一个2D的向量绘制库Zrender，其允许你基于Canvas进行绘制同时获得图形元素的事件能力。

1.3 定制化可视设计

• D3提供了非常灵活的自定义能力，但也带来了一定的使用成本。
• 数据驱动向导(Data-Driven Guides, DDG)提倡从数据出发，对简单的图形，将其设计属性和数据属性进行绑定。
• 为了保证灵活性和易用性，Echarts提供了Series组件，使得用户可以基于一些预定义好的图表并进行调整衍生（也没有很大的优势，经常被误认为是一个图表库）。

可视化另外一个难点是交互系统。

• D3允许用户使用原生的事件系统，并提供behaviors来复用一些特定的交互。
• Vega将交互抽象为数据流，使用Functional Reactive Programming的方式来处理可视化的交互。这种抽象可以避免回调地狱与复杂的状态维护，但存在一定的上手门槛。
• Vega-lite基于Vega进一步抽象了数据可视化中的特定交互行为，但其支持的交互相对有限。
• Echarts将大量交互内置，直接提供给用户，同时提供事件系统（也没有很大的优势）。

2. 声明式的可视化设计

Echarts使用完全的单一JSON格式作为配置项来声明可视化，其使用Series来抽象一组图形元素，并将其和数据绑定。也可以理解为Series是一个图表类型的实例。听起来就是一个朴素的图表库，但是Series更多是包含某个图表类自己更定制的信息，其他不同图表类通用的组件会被单独拆出来，如Legend，Tooltip等。
Echarts提供一个简单的SetOption方法来创建并更新图表组件，其内置基于键值的diff算法来比对多次Option的差异来进行针对的更新。
每一个Echarts组件，都会包含三种函数：

• visual-encoding：实现数据驱动的可视化映射，将数据属性和图形属性进行绑定。
• guide：提供描述性的信息，如标签、辅助线等
• interaction：dataZoom, brushing

3. 定制化可视化设计

• 交互声明
  • Echarts提供事件回调机制，为了实现数据驱动交互，回调中可以拿到ComponentType，seriesType，data，dataIndex
• 定制Series
  • 基于内置的pipeline，大部分组件都可以直接复用(如zoom，visual encoding，tooltip)，用户只需要定义需要变动的部分。
• 跨平台
  • 统一的表现和行为：Zrender保证在各个平台设备上具备一致性。
• 响应式设计

4. 架构

4.1 基于数据流程的架构

原文是streaming architecture，但其实不是指streaming data，为了避免歧义，这里叫数据流程，或者是不是也可以叫生命周期。

原文并没有给出这种流程设计优势的充分解释，这里就当做是一种可行的实践。

4.1.1 渐进式的可视化

在数据加载、更新或由于交互发生变化的时，整个可视化渲染的过程是渐进式的，而不是一蹴而就的。对于数据源，会把完整的数据区块划分为多个小区块。每一个区块的数据独立进行 布局、映射、渲染。这样做是为了保证每一个区块都能尽可能在16ms内完成计算，从而防止浏览器的主线程卡顿。每个区块计算任务完成后，会调用requestAnimationFrame，同时暂停接下来的任务，直到下一帧。如果在这个过程中发生了交互行为，那么所有旧的任务都会被废弃，然后创建新的任务。这样，浏览器的主线程可以不被阻塞，用户可以一直和可视化进行互动，并即时的得到相应。

4.1.2 多线程渲染

当所有的计算任务都发生在主线程上时，Canvas必须等待计算任务完成后才可以绘制，反之亦然。如下图：

为了进一步提升性能，Echarts实现了多线程的渲染机制。（但是翻了很久没找到相关的代码）借助web worker的能力，在浏览器中开启一个计算线程。为了可以让Echarts运行在计算线程中，计算线程里会生成一个虚拟的canvas，虚拟canvas会记录所有计算任务最重触发的操作，如改变填充样式，绘制文本等。这些操作会被记录在一个Float32Array 命令数组中。当一个计算任务完成，这个指令数组会被通过postMessage传送到UI主线程。主线程中的canvas只需将最重需要执行的指令数组依次执行即可。与此同时，Worker线程并不需要等待主线程绘制完成，而是可以直接开启下次计算任务。如下图

这里还是保持怀疑，涉及数据可视化数据（可能很大），要求在16ms内给予响应，以相当高的频率在web worker和主线程间进行传输，本身的通讯开销可能非常大，甚至不见得比完全在主线程要好。感兴趣可以去看Surma的postMessage性能测评的文章：https://dassur.ma/things/is-postmessage-slow/ 但是由于我暂时还没找到echarts具体实现的源码，所以此部分待议。

4.2 Zrender

Zrender是Echarts底层依赖的2D向量绘制库。

• 图形元素管理：Zrender会将一个个绘制过的图形，作为独立的对象维护管理起来。这些图形对象被存储在一颗树结构中，像DOM树一样。
• 叶子节点被称为displayable，包含最基本的元素，如文本、图片、路径。
  • Path会对应一个Float32Array的数组，存储Path的相关信息，在重绘等情况下使用
• 非叶子节点被称为group，group是很多基本元素的集合
• 渲染管理：Zrender会管理不同元素的绘制顺序。
• 事件系统：Canvas上绘制的图形不能够相应任何鼠标事件，可以理解为绘制过程只是在画布上的像素进行着色。为了解决这个问题，Zrender提供了事件系统，使得绘制的图形可以独立响应特定的事件。对于每一个图形，Zrende会检测一个事件的位置坐标(x, y)是否在图形的包络盒中，如果在，则会将该元素传递给事件的回调，让事件知道被触发的图形元素。同时zrender还会提供事件冒泡能力。
• Zrender的事件系统是基于纯粹的JS实现的，不与具体的渲染引擎耦合，所以其可以轻松的和Canvas、SVG，VML等渲染引擎搭配使用。

5. 性能比较

对比Echarts, HightCharts, Chart.js和C3的性能（捏软柿子...）

总结

Echarts提供了一个跨平台、高性能、易用且富交互的可视化工具。相比于大部分其他可视化工具，Echarts非常适合作为生产环境下可视化开发的优先选择。
Echarts在v4时期就已经具备visualMap, dataset等功能，这使得其也具备图形语法的声明写法，同时也拥有灵活的坐标系统。这给基于其他图形语法可视化工具构建的应用，提供了一种额外的切换选择。
Echarts5使用TS进行重构，原生层面对TS的支持给广大开发者提供了极大的便利。5.0.1支持更便捷的按需引入方式，使得一直以来令人困扰的打包体积问题也得到了解决。性能上，v5也进行了脏矩形优化，以及折线图的采样优化等。