前端可视化

相关书籍

SVG

不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序（比如谷歌地图） 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快） 不适合游戏应用

canvas

依赖分辨率 不支持事件处理器 弱的文本渲染能力 能够以 .png 或 .jpg 格式保存结果图像 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

阿里飞冰

前端数据可视化入门指南

AntiV

基于图形语法的图表库：G2

BizChart

阿里巴巴国际 UED 团队出品，G2 的 react 封装，主打电商业务图表可视化，沉淀电商业务线的可视化规范。在 React 项目中实现常见图表和自定义图表。

Viser

阿里数据平台技术部出品，支持 vue, react，angularjs三个框架。

anti-f2

F2，一个专注于移动，开箱即用的可视化解决方案，完美支持 H5 环境同时兼容多种环境（node, 小程序，weex）。完备的图形语法理论，满足你的各种可视化需求。专业的移动设计指引为你带来最佳的移动端图表体验。

数据可视化分析平台开源方案集锦

SVG or Canvas

TIP

Canvas 和 SVG 是两大基于浏览器的渲染方案，在选择图表库的时候，用户有时也会在这两者之间纠结。但是纠结的时候，你是否真的明白这两者在哪些方面有优劣？ECharts 4.0 推出 Canvas、SVG 双引擎渲染方案，用户可以使用一个配置项一键切换，成为我们所知的第一个支持双引擎的可视化工具。同样的接口，同样的渲染视觉效果，不一样的精彩！那么，Canvas 与 SVG 分别适用于什么样的场景呢？本文将详细介绍我们提供测试多种平台、多种数据量、多种图表类型等维度的渲染性能，给出在不同场景下的推荐方案。

图中，绿色表示推荐使用 SVG，红色表示推荐使用 Canvas，↑箭头越多表示推荐程度越强烈，“-”表示两者差别不大，或者根据不同情况有不同选择。我们应该如何读懂上图呢？在实际的使用场景中，可能对于同一个图表多个维度的结论是相反的（比如图表个数多的时候 SVG ↑↑↑，但是如果数据量也很大又会 Canvas ↑）。这时候，一方面是参考箭头多少决定哪种影响更大，另一方面如果确实对性能要求比较高，可以参考这个结论自行做更细致的测试。

因为图表本身的属性和展示平台的变化性可能非常丰富，所以很难简单地根据某个维度直接给出结论。本文能做的就是尽可能把一些比较确定性的结论告诉大家（比如移动平台优选 SVG），作为官方给大家指一条相对明确的方向。而用户在实际的使用过程中，如果碰到了性能瓶颈，可以根据这个进一步测试改进。另外需要注意的是，本文的结论都是针对 ECharts 4.0 版本的实现测试得出的，不同可视化工具的实现方式可能并不一定完全适应。后期性能优化后，也可能会引起其他的变动。

下面，我们就一些重要的结论作说明。

移动平台优选SVG

在移动端（尤其是低端安卓机）上，由于内存和 CPU 资源的限制，Canvas 的表现可能非常差，而相比之下 SVG 就会有很大优势。

在我们测试的三星 Note 3 和红米 1s 上，一个包含 10 个数据点的折线图，用 Canvas 渲染的初始动画 FPS 分别是 20 与 5；而使用 SVG 渲染，则可以达到 44 与 20。这样的差异是很明显可以感知出的。

SVG 在 iOS 平台的表现也常常优于 Canvas，只是因为 iOS 配置相对更好，这一优势不太显著。比如我们测试的 iPhone 7 上，包含 10 个数据点的折线图在 SVG 和 Canvas 渲染时都是 60 FPS。当数据量达到 1000 时，差异才表现出来，SVG 和 Canvas 分别是 60 与 32 FPS。因此，我们强烈建议在移动平台优先选择 SVG 进行渲染。

图表个数很多时优选 SVG

当图表个数很多时，占用的内存很大程度上造成了页面是否卡顿的体验差异。在这一情况下，SVG 表现出非常明显的优势。

“图表个数很多”相对电脑端一般需要十来个图表以上，相对手机端则个位数也会体现出差异。占对于图表个数达到 100 个这样比较极端的情况，Canvas 的内存占用量相比 SVG 可以达到十倍以上。

当你感觉到滚动屏幕页面卡顿时，可能是因为内存占用较多引起的，这时候可以考虑使用 SVG 渲染。

导出小文件高清晰时使用 SVG

SVG 渲染导出的 SVG 文件更小，却可以保持矢量无限清晰放大。我们接到用户反馈经常有在 PDF 中插入图表的需求，这时如果插入 SVG，不仅可以使图片更清晰，也可以使 PDF 的尺寸更小。 对于设计师而言，也可以使用导出的 SVG 进行二次编辑。

部分特殊渲染效果只有 Canvas 支持

除了某些特殊的渲染可能依赖 Canvas：如炫光尾迹特效、带有混合效果的热力图等，绝大部分功能 SVG 都是支持的。此外，目前的 SVG 版中，富文本、材质功能尚未实现。

炫光尾迹特效：

数据量特别大时推荐使用 Canvas 渲染

如果数据量比较大（>1000）、和大量图形高频率交互时，推荐使用 Canvas 渲染。搭配使用 ECharts 4.0 推出的渐进式渲染，可以有更好的性能表现。

如何指定以 Canvas 或 SVG 渲染

ECharts 默认使用 Canvas 渲染。如果想使用 SVG 渲染，ECharts 代码中须包括有 SVG 渲染器模块。

• ECharts 的 预构建文件 中，常用版 和 完整版 已经包含了 SVG 渲染器，可直接使用。而 精简版 没有包括。 如果 在线自定义构建 ECharts，则需要勾上页面下方的 “SVG 渲染”。 如果 线下自定义构建 ECharts，则须引入 SVG 渲染器模块，即：

import 'zrender/lib/svg/svg';

然后，我们就可以在代码中，初始化图表实例时，传入参数 选择渲染器类型：

// 使用 Canvas 渲染器（默认）
var chart = echarts.init(containerDom, null, {renderer: 'canvas'});
// 等价于：
var chart = echarts.init(containerDom);

// 使用 SVG 渲染器
var chart = echarts.init(containerDom, null, {renderer: 'svg'});