echarts 與 highcharts

王笑朝發(fā)布于2019-08-22 17:35 / 2931人閱讀

摘要：渲染能力采用渲染除了對(duì)使用，一般來(lái)說(shuō)，更適合繪制圖形元素?cái)?shù)量非常大這一般是由數(shù)據(jù)量大導(dǎo)致的圖表如熱力圖地理坐標(biāo)系或平行坐標(biāo)系上的大規(guī)模線圖或散點(diǎn)圖等，也利于實(shí)現(xiàn)某些視覺特效如交通圖。

一．簡(jiǎn)介

echarts
echarts是百度公司前端開發(fā)的一個(gè)圖表庫(kù)，2013年發(fā)布第一版，主要采用canvas畫圖，目前版本3.8.4；完全免費(fèi)；

highchart
highcharts是國(guó)外的一家公司開發(fā)的圖表庫(kù)，主要采用svg畫圖，不支持h5的瀏覽器采用vml繪制，2009 年發(fā)布第一版，目前版本6.0.3；

Highcharts 是國(guó)際知名的成熟的商業(yè)軟件（也開源），商用要付費(fèi)；

二．對(duì)比

兼容性
Echarts：ie9+、Firefox、chrome、safari、opera等；

highcharts ：ie6+、Firefox、chrome、safari、opera等；

文檔友好程度
Echarts：百度團(tuán)隊(duì)開發(fā)，中文API；多種實(shí)例，支持在線編輯運(yùn)行js代碼；

Highcharts：國(guó)外公司開發(fā)，支持中文API；多種實(shí)例，支持在線編輯運(yùn)行js代碼，文檔說(shuō)明相比echarts更細(xì)致詳細(xì)；

穩(wěn)定性
Echarts：在個(gè)別低版本瀏覽器會(huì)出現(xiàn)bug。

Highcharts：穩(wěn)定性非常好，適用于各種瀏覽器，相對(duì)于echarts更勝一籌；

圖表的豐富程度
Echarts：

1.圖表類：支持的圖表類型有直線圖、曲線圖、區(qū)域圖、柱狀圖、餅狀圖、散狀點(diǎn)圖、儀表圖、氣泡圖、雷達(dá)圖、樹狀圖、象形柱圖、關(guān)系圖、瀑布流圖等，形式多樣，效果炫酷。

2.3D表現(xiàn)力：柱狀圖，三維地球，結(jié)合百度地圖三維展示（效果絢麗）。

3.地圖類：結(jié)合百度地圖（遷徙圖、熱力圖，散點(diǎn)圖，交通圖），效果酷炫。

Highcharts：

1.圖表類：支持的圖表類型有直線圖、曲線圖、區(qū)域圖、柱狀圖、餅狀圖、散狀點(diǎn)圖、儀表圖、氣泡圖、瀑布流圖等。

2.3D表現(xiàn)力：柱狀圖，餅狀圖，氣泡圖。

3.地圖類：2d線性地圖（geojson數(shù)據(jù)）。

社區(qū)活躍度
Echarts：國(guó)內(nèi)開發(fā)，百度前端團(tuán)隊(duì)維護(hù)，版本更新速度快，國(guó)內(nèi)不少愛好者嘗試發(fā)布新實(shí)例。

Highcharts：國(guó)外公司開發(fā)，版本性能穩(wěn)定，國(guó)內(nèi)外使用者眾多。社區(qū)更大，比較專業(yè)。

渲染能力
Echarts：采用canvas渲染（除了對(duì) IE8- 使用 VML），一般來(lái)說(shuō)，Canvas 更適合繪制圖形元素?cái)?shù)量非常大（這一般是由數(shù)據(jù)量大導(dǎo)致）的圖表（如熱力圖、地理坐標(biāo)系或平行坐標(biāo)系上的大規(guī)模線圖或散點(diǎn)圖等），也利于實(shí)現(xiàn)某些視覺特效（如交通圖）。不過(guò)echarts3.8版本會(huì)考慮svg和canvas兩種渲染方式。動(dòng)態(tài)增加刪除節(jié)點(diǎn)不靈活，需要重繪。

Highcharts：采用SVG渲染（除了對(duì) IE8- 使用 VML），SVG 渲染器相比 Canvas 渲染器在移動(dòng)端的總體表現(xiàn)更好。在另一些數(shù)據(jù)量較大或者有圖表交互動(dòng)畫的場(chǎng)景中，目前的 SVG 渲染器的性能還比不過(guò) Canvas 渲染器。在pc端，數(shù)據(jù)量不大的情況，實(shí)例相當(dāng)。動(dòng)態(tài)增加刪除節(jié)點(diǎn)靈活，不需要重繪。

三．總結(jié)

Echarts：圖標(biāo)樣式多樣、支持2d和3d地圖展示，效果炫酷；兼容性弱；完全免費(fèi)。

Highcharts：穩(wěn)定性強(qiáng)；兼容性強(qiáng)；圖標(biāo)樣式相對(duì)少；比較專業(yè)；個(gè)人免費(fèi)，商用收費(fèi)。