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^)/~