Canvas or SVG？一张好图，两手准备，就在 ECharts 4.0

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'});
复制代码

是不是特别简单呀？赶紧用起来吧~\(^o^)/~