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