ECharts 在1月16日發(fā)布新版本 V4.0.0 了邑雅。我們老大當(dāng)天晚上就在微信上分享了這個“重磅”消息嗦玖，然后讓我們準(zhǔn)備新版本升級患雇。
那 ECharts 4 到底多了那些厲害的新特性呢？我先來分析分析宇挫。
現(xiàn)在打開ECharts官網(wǎng)苛吱，首頁就是一個滿屏“超大寫”的 4。夠簡潔也夠霸氣器瘪。
先看版本說明又谋，找到v4.0.0。主要變更有：
- 支持最高達(dá)千萬級數(shù)據(jù)量渲染娱局。
- ZRender SVG渲染引擎發(fā)布彰亥。
- 新增 dataset 組件。
- 發(fā)布旭日圖（sunburst）衰齐。
- 支持無障礙富互聯(lián)網(wǎng)應(yīng)用規(guī)范集任斋。
-
label、itemstyle等配置被扁平化。 - 兩套內(nèi)置的顏色主題废酷。
- 支持
legend.data不指定時瘟檩，自動根據(jù)系列生成。 - 支持類目軸（
axis.type: 'category'）中axis.data不指定時澈蟆，自動根據(jù)數(shù)據(jù)生成墨辛。
這些更新中，大多數(shù)人會特別關(guān)注的就是前三個吧趴俘。而1和2都關(guān)系到圖表渲染性能睹簇，dataset則方便對數(shù)據(jù)的管理，聽著就讓人躍躍欲試了寥闪。
而其他的特性太惠，比如“支持無障礙富互聯(lián)網(wǎng)應(yīng)用規(guī)范集”，雖然方便了更多殘障人士訪問挺有意義疲憋，但是應(yīng)用場景不多凿渊，至少我們的項(xiàng)目還沒有考慮到這個需求。所以不做調(diào)研缚柳。
只分析分析前三個特性埃脏。
支持最高達(dá)千萬級數(shù)據(jù)量渲染
對于大數(shù)據(jù)量的渲染場景，支持了增量加載數(shù)據(jù)（支持用戶對數(shù)據(jù)分塊后加載）和漸進(jìn)渲染（支持交互的無阻塞）秋忙。
增量加載參考示例大量數(shù)據(jù)的lines-ny彩掐。
漸進(jìn)渲染參考示例lines-airline。
這兩個例子翰绊，Chrome上表現(xiàn)還是不錯的佩谷。數(shù)據(jù)分塊加載旁壮，縮放平移也還流暢监嗜。
但是IE上就體驗(yàn)很差了，有的例子（比如lines-ny）直接報錯抡谐，無法運(yùn)行裁奇。
不過，要是數(shù)據(jù)量大麦撵，而且還是動態(tài)圖表刽肠，那就不好說了。比如1w節(jié)點(diǎn)2w7邊的NPM依賴圖免胃，在Chrome上也嚴(yán)重卡頓音五。
ZRender SVG渲染引擎
ECharts 4 支持 canvas / SVG雙引擎渲染了！還可以按照場景所需進(jìn)行切換羔沙！而且做法很方便躺涝。
SVG 和 Canvas 這兩種使用方式差異很大的技術(shù)，能夠做到同時被透明支持扼雏，主要?dú)w功于 ECharts 底層庫 ZRender 的抽象和實(shí)現(xiàn)坚嗜，形成可互換的 SVG 渲染器和 Canvas 渲染器夯膀。
默認(rèn)還是Canvas渲染，如果要改成SVG苍蔬，就在init()時候設(shè)置renderer參數(shù)诱建。
init函數(shù) API：
(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {
devicePixelRatio?: number
renderer?: string
width?: number|string
height? number|string
}) => ECharts
如果要指定使用SVG渲染圖表：
var myChart = echarts.init(dom,'',{renderer:'svg'});
實(shí)際效果如何呢？
我分別用普通小數(shù)據(jù)的區(qū)域圖area-simple和大量數(shù)據(jù)的航線地圖 lines-airline感受了一下碟绑。
Canvas 和 SVG 渲染出來效果是差不多的俺猿，修改也非常方便。
除了某些特殊的渲染可能依賴 Canvas：如炫光尾跡特效蜈敢、帶有混合效果的熱力圖等辜荠，絕大部分功能 SVG 都是支持的。此外抓狭，目前的 SVG 版中伯病，富文本、材質(zhì)功能尚未實(shí)現(xiàn)否过。
那順便也了解一下 Canvas 和 SVG 的區(qū)別：
- 瀏覽器內(nèi)置縮放（ctrl -/+）時午笛，canvas會模糊，svg不會苗桂；
- 對于移動端药磺，canvas不太友好，而svg內(nèi)存占用忻何啊癌佩；
- 數(shù)據(jù)量大，交互較多時便锨，canvas占優(yōu)勢围辙，svg渲染器性能就差一點(diǎn)。
ECharts 官方建議這么選擇渲染器：
- 在軟硬件環(huán)境較好放案，數(shù)據(jù)量不大的場景下（例如 PC 端做商務(wù)報表）姚建，兩種渲染器都可以適用，并不需要太多糾結(jié)吱殉。
- 在環(huán)境較差掸冤，出現(xiàn)性能問題需要優(yōu)化的場景下，可以通過試驗(yàn)來確定使用哪種渲染器友雳。比如有這些經(jīng)驗(yàn)：
- 在須要創(chuàng)建很多 ECharts 實(shí)例且瀏覽器易崩潰的情況下（可能是因?yàn)?Canvas 數(shù)量多導(dǎo)致內(nèi)存占用超出手機(jī)承受能力）稿湿，可以使用 SVG 渲染器來進(jìn)行改善。大略得說押赊，如果圖表運(yùn)行在低端安卓機(jī)饺藤，或者我們在使用一些特定圖表如 水球圖 等，SVG 渲染器可能效果更好。
- 數(shù)據(jù)量很大策精、較多交互時舰始，可以選用 Canvas 渲染器。
總的來說這個特性還是挺完美咽袜，畢竟別的JS可視化庫都是基于其中一種渲染丸卷。
新增 dataset 組件
相比起來，這個新特性實(shí)用多了询刹。直接來個例子：
以前谜嫉，數(shù)據(jù)是這樣聲明的：
option: {
xAxis: {
type: 'category',
data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie']
},
yAxis: {}
series: [
{
type: 'bar',
name: '2015',
data: [89.3, 92.1, 94.4, 85.4]
},
{
type: 'bar',
name: '2016',
data: [95.8, 89.4, 91.2, 76.9]
},
{
type: 'bar',
name: '2017',
data: [97.7, 83.1, 92.5, 78.1]
}
]
}
這種方法雖然直觀，但是大多數(shù)情況下凹联，我們都需要處理數(shù)據(jù)之后沐兰，才能夠匹配這種形式。
有了ECharts 4的dataset蔽挠，可以這樣聲明了：
option = {
legend: {},
tooltip: {},
dataset: {
// 提供一份數(shù)據(jù)住闯。
source: [
['product', '2015', '2016', '2017'],
['Matcha Latte', 43.3, 85.8, 93.7],
['Milk Tea', 83.1, 73.4, 55.1],
['Cheese Cocoa', 86.4, 65.2, 82.5],
['Walnut Brownie', 72.4, 53.9, 39.1]
]
},
// 聲明一個 X 軸，類目軸（category）澳淑。默認(rèn)情況下比原，類目軸對應(yīng)到 dataset 第一列。
xAxis: {type: 'category'},
// 聲明一個 Y 軸杠巡，數(shù)值軸量窘。
yAxis: {},
// 聲明多個 bar 系列，默認(rèn)情況下氢拥，每個系列會自動對應(yīng)到 dataset 的每一列蚌铜。
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
}
或者用對象數(shù)組：
option = {
legend: {},
tooltip: {},
dataset: {
// 這里指定了維度名的順序，從而可以利用默認(rèn)的維度到坐標(biāo)軸的映射嫩海。
// 如果不指定 dimensions冬殃，也可以通過指定 series.encode 完成映射，參見后文出革。
dimensions: ['product', '2015', '2016', '2017'],
source: [
{product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
{product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
{product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
{product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
]
},
xAxis: {type: 'category'},
yAxis: {},
series: [
{type: 'bar'},
{type: 'bar'},
{type: 'bar'}
]
};
總之給開發(fā)者增添了不少便利造壮。
總結(jié)
這次ECharts更新到版本V4渡讼，能讓大多數(shù)人感到很受用的應(yīng)該是骂束，添加了SVG渲染器，和使用dataset來傳入數(shù)據(jù)集成箫。
而聽上去很厲害的“支持最高達(dá)千萬級數(shù)據(jù)量渲染”展箱，卻不是那么完美，適用的場景有限蹬昌，而且在瀏覽器兼容性上也很糟糕混驰，而這又是絕大多數(shù)前端工程師和產(chǎn)品經(jīng)理都很在意的一點(diǎn)。所以還需要完善，不太適合直接投入生產(chǎn)環(huán)境栖榨。
另外昆汹，絕大多數(shù)時候，使用ECharts的項(xiàng)目都涉及不到的千萬級數(shù)據(jù)量渲染這種情況婴栽。開發(fā)者更關(guān)注的是常用的場景满粗，更專注一些常用的圖表，有沒有什么有意思的更新和優(yōu)化愚争。這一點(diǎn)有些遺憾映皆。
參考閱讀
- ECharts 特性： http://echarts.baidu.com/feature.html
