使用 SVG 或 Canvas 渲染
大多數瀏覽器端的圖表函式庫使用 SVG 或 Canvas 作為底層渲染器。一般來說，這兩種技術可以互換並具有相似的效果。但是，在某些特定情況下，差異可能會很明顯。因此，決定使用哪種技術來渲染圖表始終是一個艱難的選擇。
從一開始，Canvas 就被用作 ECharts 的渲染器。自v4.0起，ECharts 提供了 SVG 渲染器作為一個額外的選項。您可以在初始化圖表時將renderer 參數指定為 'canvas' 或 'svg'。
SVG 和 Canvas 在使用上有顯著差異。ECharts 中對這兩種技術的統一支援歸功於底層函式庫ZRender的抽象和實作。
如何選擇渲染器
一般來說，Canvas 更適合具有大量元素的圖表（熱圖、地理或平行座標中的大規模線圖或散佈圖等）以及視覺效果。然而，SVG 有一個重要的優勢：它具有較低的記憶體使用量（這對於行動裝置來說很重要），並且在放大時不會模糊。
渲染器的選擇可以基於硬體和軟體環境、資料量和功能需求的組合。
- 在硬體和軟體環境良好且資料量不大的情況下，兩種渲染器都可以工作，並且不需要過於糾結於它們。
- 在環境較差且出現需要優化的效能問題的情況下，可以通過實驗來確定要使用哪種渲染器。例如，有以下經驗。
- 在必須建立許多 ECharts 實例且瀏覽器容易崩潰的情況下（可能是因為 Canvas 的數量導致記憶體佔用超過手機容量），可以使用 SVG 渲染器來進行改進。粗略地說，如果圖表在低階 Android 上執行，或者如果我們使用特定的圖表（例如液體填充圖），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' });
