瀏覽器端圖表庫(kù)大多會(huì)選擇 SVG 或者 Canvas 進(jìn)行渲染议忽。對(duì)于繪制圖表來(lái)說(shuō)溉跃，這兩種技術(shù)往往是可替換的村刨，效果相近。但是在一些場(chǎng)景中撰茎，他們的表現(xiàn)和能力又有一定差異嵌牺。于是，對(duì)它們的選擇取舍，就成為了一個(gè)一直存在的不易有標(biāo)準(zhǔn)答案的話題逆粹。
ECharts 從初始一直使用 Canvas 繪制圖表募疮。而ECharts v4.0發(fā)布了 SVG 渲染器，從而提供了一種新的選擇僻弹。只須在初始化一個(gè)圖表實(shí)例時(shí)阿浓，設(shè)置renderer 參數(shù)為'canvas'或'svg'即可指定渲染器，比較方便蹋绽。
SVG 和 Canvas 這兩種使用方式差異很大的技術(shù)芭毙，能夠做到同時(shí)被透明支持，主要?dú)w功于 ECharts 底層庫(kù)ZRender的抽象和實(shí)現(xiàn)卸耘，形成可互換的 SVG 渲染器和 Canvas 渲染器退敦。
選擇哪種渲染器
一般來(lái)說(shuō)，Canvas 更適合繪制圖形元素?cái)?shù)量較多（這一般是由數(shù)據(jù)量大導(dǎo)致）的圖表（如熱力圖蚣抗、地理坐標(biāo)系或平行坐標(biāo)系上的大規(guī)模線圖或散點(diǎn)圖等）侈百，也利于實(shí)現(xiàn)某些視覺(jué)特效。但是翰铡，在不少場(chǎng)景中钝域，SVG 具有重要的優(yōu)勢(shì)：它的內(nèi)存占用更低（這對(duì)移動(dòng)端尤其重要）、并且用戶使用瀏覽器內(nèi)置的縮放功能時(shí)不會(huì)模糊锭魔。
選擇哪種渲染器网梢，我們可以根據(jù)軟硬件環(huán)境、數(shù)據(jù)量赂毯、功能需求綜合考慮。
在軟硬件環(huán)境較好拣宰，數(shù)據(jù)量不大的場(chǎng)景下党涕，兩種渲染器都可以適用，并不需要太多糾結(jié)巡社。
在環(huán)境較差膛堤，出現(xiàn)性能問(wèn)題需要優(yōu)化的場(chǎng)景下，可以通過(guò)試驗(yàn)來(lái)確定使用哪種渲染器晌该。比如有這些經(jīng)驗(yàn)：
在須要?jiǎng)?chuàng)建很多 ECharts 實(shí)例且瀏覽器易崩潰的情況下（可能是因?yàn)?Canvas 數(shù)量多導(dǎo)致內(nèi)存占用超出手機(jī)承受能力）肥荔，可以使用 SVG 渲染器來(lái)進(jìn)行改善。大略的說(shuō)朝群，如果圖表運(yùn)行在低端安卓機(jī)燕耿，或者我們?cè)谑褂靡恍┨囟▓D表如水球圖等，SVG 渲染器可能效果更好姜胖。
數(shù)據(jù)量較大（經(jīng)驗(yàn)判斷 > 1k）誉帅、較多交互時(shí)，建議選擇 Canvas 渲染器。
我們強(qiáng)烈歡迎開(kāi)發(fā)者們反饋給我們使用的體驗(yàn)和場(chǎng)景蚜锨，幫助我們更好的做優(yōu)化档插。
注：當(dāng)前某些特殊的渲染依然需要依賴(lài) Canvas：如炫光尾跡特效、帶有混合效果的熱力圖等亚再。
如何使用渲染器
如果是用如下的方式完整引入echarts郭膛，代碼中已經(jīng)包含了 SVG 渲染器和 Canvas 渲染器
import?*?as?echarts?from?'echarts';
如果你是按照在項(xiàng)目中引入 Apache ECharts一文中的介紹使用按需引入，則需要手動(dòng)引入需要的渲染器
import?*?as?echarts?from?'echarts/core';//?可以根據(jù)需要選用只用到的渲染器
import?{?SVGRenderer,?CanvasRenderer?}?from?'echarts/renderers';
echarts.use([SVGRenderer,?CanvasRenderer]);
然后氛悬，我們就可以在代碼中则剃，初始化圖表實(shí)例時(shí)，傳入?yún)?shù)選擇渲染器類(lèi)型：
//?使用?Canvas?渲染器（默認(rèn)）
var?chart?=?echarts.init(containerDom,?null,?{?renderer:?'canvas'?});
//?等價(jià)于：
var?chart?=?echarts.init(containerDom);
//?使用?SVG?渲染器
var?chart?=?echarts.init(containerDom,?null,?{?renderer:?'svg'
