阅读 1614

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 渲染器模块。

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


关注下面的标签,发现更多相似文章
评论