使用 SVG 還是 Canvas 渲染
大多數瀏覽器端的圖表庫都使用 SVG 或者 Canvas 作為底層的渲染器。通常，這兩種技術是可以互換的，並且效果類似。但是在一些特定場景和案例中，差異可能會很明顯。因此，決定使用哪種技術來渲染圖表一直是一個艱難的選擇。
ECharts 從一開始就使用 Canvas 作為渲染器。自 v4.0 版本起，ECharts 提供了 SVG 渲染器作為附加選項。你可以在初始化圖表時，將 renderer 引數指定為 'canvas' 或 'svg'。
SVG 和 Canvas 在使用上有顯著的差異。ECharts 之所以能統一支援這兩種技術，得益於底層庫 ZRender 的抽象和實現。
如何選擇渲染器
通常來說，Canvas 更適用於元素數量非常多的圖表（如地理座標系或平行座標系中的熱力圖、大規模的折線圖或散點圖等），以及帶有視覺特效的圖表。然而，SVG 有一個重要的優勢：它的記憶體佔用更小（這對於移動裝置很重要），並且在放大時不會模糊。
渲染器的選擇可以基於軟硬體環境、資料量和功能需求的綜合考量。
- 在軟硬體環境較好、資料量不大的場景下，兩種渲染器都能勝任，無需過多糾結。
- 在環境較差、出現效能問題需要最佳化時，可以透過實驗來確定使用哪種渲染器。例如，有以下這些經驗。
- 在需要建立許多 ECharts 例項且瀏覽器容易崩潰的情況下（可能是因為 Canvas 數量過多導致記憶體佔用超出手機容量），可以使用 SVG 渲染器來改善。粗略地說，如果圖表執行在低端安卓裝置上，或者我們使用一些特定的圖表，例如水球圖，SVG 渲染器可能會表現得更好。
- 對於資料量較大（經驗值為大於 1k）的情況，總是推薦使用 Canvas 渲染器。
我們非常歡迎開發者們反饋他們的使用經驗和場景，以幫助我們做出更好的最佳化。
注意：目前，一些特殊效果仍然依賴於 Canvas：例如軌跡特效、帶有混合效果的熱力圖等。
自 v5.3.0 起，SVG 渲染器使用虛擬 DOM 進行了重構，效能提升了 2-10 倍，在某些特定場景下甚至可以達到數十倍！更多詳情請參考 #836。
如何使用渲染器
如果透過以下方式完整引入 echarts，那麼它已經自動引入並註冊了 SVG 渲染器和 Canvas 渲染器。
import * as echarts from 'echarts';如果你正在使用按需引入，你需要手動引入所需的渲染器。
import * as echarts from 'echarts/core';
// You can use only the renderers you need
import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
echarts.use([SVGRenderer, CanvasRenderer]);然後你可以在初始化圖表時設定 renderer 引數。
// Use the Canvas renderer (default)
var chart = echarts.init(containerDom, null, { renderer: 'canvas' });
// Equivalent to
var chart = echarts.init(containerDom);
// use the SVG renderer
var chart = echarts.init(containerDom, null, { renderer: 'svg' });