ECharts 全新大版本 4.0 正式發(fā)布 即將支持微信小程序中使用ECharts

ECharts 4.0,數(shù)據(jù)可視化

2018年1月16日,ECharts (echarts.baidu.com)發(fā)布了最新大版本 4.0,新版本在產(chǎn)品的性能、功能、易用性等各個方面進行了全面提升。和 ECharts 4.0 一起發(fā)布的還有 ECharts GL 1.0正式版,ZRender 4.0全新版本,WebGL 框架 ClayGL、深度學習框架Visual DL等,可謂是一次ECharts團隊在數(shù)據(jù)可視化領(lǐng)域的大閱兵。

1. 全新 ECharts 4.0

本次 ECharts 4.0 新版本主要的升級點包括:

帶給用戶更強大的性能和功能

千萬級數(shù)據(jù)可視化的無阻塞體驗渲染引擎 ZRender 全面升級,正式支持SVG新增了旭日圖類型

讓開發(fā)者使用ECharts變得更加輕松

數(shù)據(jù)與樣式分離讓數(shù)據(jù)傳入變得更加方便更扁平的配置項層級,更便捷的書寫

讓更多的人在更多的場景都能訪問使用ECharts制作的可視化產(chǎn)品

首創(chuàng)數(shù)據(jù)可視化產(chǎn)品的無障礙訪問支持新增對于微信小程序的支持基于Gallery研發(fā)出了PowerPoint插件

下面分別為大家詳細介紹其中的重點升級功能:

1.1 千萬級數(shù)據(jù)可視化的無阻塞體驗

ECharts 作為一個通用的數(shù)據(jù)可視化解決方案,能夠穩(wěn)定高效的展示幾百到十萬量級的數(shù)據(jù)集一直是 ECharts 引以為豪的一個特性。而在 4.0 中,ECharts 把這一數(shù)量級又進行了大幅度提升。

在 4.0 中,ECharts通過以下手段:

數(shù)據(jù)的流加載支持增量渲染內(nèi)存優(yōu)化、WebGL繪制優(yōu)化

克服了以下各種難題:

大體積文件的傳輸耗時、幾千萬的數(shù)據(jù)處理導致的瀏覽器卡頓阻塞無法實時重繪所有圖形、大數(shù)據(jù)存儲在瀏覽器上后過高的內(nèi)存占用會導致 GC

把性能量級提升到了千萬級別,在部分場景下測試數(shù)據(jù)能夠到達億級別,把ECharts的性能能力再一次提升到業(yè)界領(lǐng)先水平。后續(xù)會有專門的技術(shù)文章詳細分享 ECharts 團隊是如何在性能上做到極致。

1.2 支持SVG渲染,內(nèi)存占用更少,可導出高清矢量圖片

ECharts 4.0 支持以Canvas、SVG、VML的形式渲染圖表,不同的渲染方式提供了更多選擇,使得在各種場景下都有更好的表現(xiàn)。

新增的SVG渲染方式,在內(nèi)存占用方面有很好的表現(xiàn),以折線圖、柱狀圖、餅圖為例,SVG渲染占用的內(nèi)存是Canvas渲染的十分之一。這意味著,對于移動端場景,尤其是配置較為低端的安卓手機而言,在原先使用Canvas會造成卡頓甚至頁面崩潰的情況下,SVG也能順滑地完成渲染工作。

ECharts 4.0,數(shù)據(jù)可視化

渲染性能針對不同類型的圖表和運行平臺有較大差異,有些場景下SVG優(yōu)于Canvas,有些則次于,用戶可以根據(jù)自己的使用場景選擇更合適的渲染方式。通常來說,SVG渲染折線圖和餅圖的效率更高,而由于Canvas渲染矩形的效率很高,所以柱狀圖使用Canvas渲染的效率高于SVG。另一方面,IE對于SVG的支持較差,因而性能一般比Canvas差;而Chrome上的SVG則有很好的表現(xiàn)。對于性能敏感的需求,用戶可以測試特定圖表的性能表現(xiàn),并決定在各種平臺上分別使用哪種渲染方式。

此外,有用戶反饋需要在PDF報表中加入ECharts圖表的圖片,之前使用Canvas渲染的文件尺寸很大。而現(xiàn)在使用SVG渲染可以將圖表導出為矢量圖片,文件尺寸更小,并且永遠不會產(chǎn)生鋸齒,是在PDF中插入圖表的更好的選擇。以電腦端瀏覽器中典型的圖表尺寸(1280×600)為例,導出圖片的文件尺寸分別為:

ECharts 4.0,數(shù)據(jù)可視化

1.3 新增旭日圖,為多層數(shù)據(jù)帶來更酷的展現(xiàn)方式

每次大版本升級一定會伴隨著新的強大圖表的支持,4.0 也不例外,ECharts 在本次升級中新增了一種叫做旭日圖的圖表類型。旭日圖可以理解為多個層次的餅圖,內(nèi)圈是外圈的父元素,通過這樣的形式,可以很直觀高效地展現(xiàn)帶有層次結(jié)構(gòu)的數(shù)據(jù)占比情況,并且具有很好的視覺效果。

ECharts 4.0,數(shù)據(jù)可視化 ECharts 4.0,數(shù)據(jù)可視化

ECharts 為旭日圖提供了非常豐富的配置項。以文字為例,提供了徑向、切向、水平、或任意的旋轉(zhuǎn)?度,并且可以在圖形元素的內(nèi)側(cè)或外側(cè),以多種對?方式顯示文字。實現(xiàn)了旭日圖的數(shù)據(jù)下鉆功能,點擊一個數(shù)據(jù)后,可以展現(xiàn)表示其后代元素的旭日圖,并且使用優(yōu)雅的動畫進行過度。在這些強大的功能幫助之下,用戶可以使用旭日圖,輕松創(chuàng)建出藝術(shù)品級別的可視化作品。

1.4 數(shù)據(jù)與樣式分離讓數(shù)據(jù)傳入變得更加方便

讓開發(fā)者簡便地進行圖表開發(fā)是ECharts的設(shè)計初衷,之前 ECharts 一直采用的聲明式的圖表配置,數(shù)據(jù)一直聲明在各個“系列”中,這種方式易于直觀理解。但是一些實踐場景中,使用者更傾向于,把數(shù)據(jù)這種大體量的信息,單獨配置,從而便于管理,以及能夠被多個組件復(fù)用。

從4.0開始,ECharts支持了單獨的數(shù)據(jù)集聲明,從而數(shù)據(jù)可以單獨管理,被多個組件復(fù)用,并且可以自由指定數(shù)據(jù)到視覺的映射。這在不少場景下能帶來使用上的方便。有了數(shù)據(jù)表之后,使用者可以靈活得配置:數(shù)據(jù)如何對應(yīng)到軸和圖形系列,可以改變圖表對于行列的理解,也可以指定坐標軸對應(yīng)的行列。

示例:

ECharts 希望在無障礙訪問的探索和嘗試,能夠幫助更廣泛的用戶能夠了解真實,探索世界。

1.7 馬上就可以在微信小程序中使用ECharts了!

很多微信小程序開發(fā)者表示他們強烈需要像ECharts這樣的可視化工具。但是微信小程序是不支持DOM操作的,Canvas接口也和瀏覽器不盡相同。

因此,ECharts團隊和微信小程序官方團隊合作,提供了ECharts的微信小程序版本。開發(fā)者可以通過熟悉的ECharts配置方式,快速開發(fā)圖表,滿足各種可視化需求。

目前項目已完成了開發(fā)和內(nèi)測工作,目前正在等待微信小程序開發(fā)工具的更新上線,敬請期待!

1.8 以后可以在 PPT 里使用 ECharts 了

在 PPT 中插入 ECharts 一直是許多PPTer反饋最多的需求,如今,終于可以在 PPT 里使用 ECharts 了!你可以在 Gallery 里創(chuàng)建你自己的圖表作品后保存。然后在 PPT 里插入 ECharts 組件,選擇你剛保存的圖表,馬上你就可以在 PPT 里擁有一個豐富的樣式,動畫和交互的圖表展示了!

ECharts 4.0,數(shù)據(jù)可視化

目前該插件已經(jīng)在等待微軟商店審核,相信不需要多久,用戶進行該功能的試用。

2. 其它重量產(chǎn)品

除了 ECharts 4.0,還發(fā)布了

ECharts GL 1.0 正式版

ZRender 4.0

WebGL 框架 Clay GLVisual DL

2.1 ECharts GL 1.0正式版

去年發(fā)布的 ECharts GL(歡迎star) 引起了可視化屆一片驚呼,如今該產(chǎn)品的 1.0 正式版正式發(fā)布,在正式版中,修復(fù)了大量的穩(wěn)定性問題,完善了文檔,同時,新增了以下強大的功能:

集成 Mapbox 地理可視化組件

ECharts 4.0,數(shù)據(jù)可視化

支持洋流風場等向量場的可視化

ECharts 4.0,數(shù)據(jù)可視化

新增了建筑群可視化的組件

ECharts 4.0,數(shù)據(jù)可視化

加入了更多的二維加速組件去優(yōu)化交互的重繪

ECharts 4.0,數(shù)據(jù)可視化 ECharts 4.0,數(shù)據(jù)可視化

2.2 ZRender 4.0 版本升級

作為ECharts的底層渲染庫,ZRender承擔起了抹平平臺差異、封裝技術(shù)細節(jié)、提高渲染性能等責任。在此次發(fā)布的4.0版本中,SVG渲染的支持使得ZRender的渲染能力有了進一步提升。

ZRender以基本圖形元素為核心,提供了矩形、圓形、扇形、多邊形、折線段、貝賽爾曲線等十多種基本圖形,并支持圖形直接的組合與剔除,最終以Canvas、SVG或VML的形式輸出,并且支持交互處理。ZRender封裝了不同平臺的事件處理機制,將諸如底層鼠標事件映射到圖形層面的事件(例如能夠獲取到鼠標懸停在圖形上的事件),方便開發(fā)者處理事件。因此,對于與圖形元素強相關(guān)的需求,用戶可以考慮使用ZRender矢量化的邏輯對圖形進行管理,能夠方便高效地完成渲染和交互任務(wù)。

ECharts 4.0,數(shù)據(jù)可視化

ECharts 4.0,數(shù)據(jù)可視化

在此之前,ZRender主要是作為ECharts的底層渲染庫存在的,隨著ZRender的直接用戶越來越多,團隊在ZRender官網(wǎng)開放了ZRender的API文檔,并且給出了教程和例子,幫助大家更方便地學會使用。

2.3 高性能漸進式 WebGL 框架 ClayGL

除了 ZRender,ECharts團隊這次也發(fā)布了 ECharts GL 底層所使用的 WebGL 框架: ClayGL。ClayGL 是一個漸進式的高性能 WebGL 框架(這里感謝 Vue 提出的漸進式框架的概念),能夠幫助用戶快速創(chuàng)建一個 Web3D 應(yīng)用,在 ECharts GL 中的應(yīng)用已經(jīng)證明了其能力之強大。

ECharts 4.0,數(shù)據(jù)可視化

在去年,ClayGL 已經(jīng)在手機百度這樣擁有上億用戶的產(chǎn)品中落地了三維模型展示的應(yīng)用,充分驗證了產(chǎn)品的可靠性。

ECharts 4.0,數(shù)據(jù)可視化

團隊后續(xù)將圍繞 ClayGL 打造一系列的可視化工具及 Web3D 產(chǎn)品。

2.4 深度學習可視化平臺 Visual DL

從去年開始,團隊和百度PaddlePaddle深度合作,打造了一款深度學習可視化平臺 Visual DL,也在這次一同發(fā)布,希望通過可視化的方法將模型訓練過程中的各個參數(shù)以及計算的數(shù)據(jù)流圖實時地展現(xiàn)出來,以幫助模型訓練者更好的理解、調(diào)試、優(yōu)化模型。用戶只需要通過 Visual DL 提供的接口將模型相關(guān)的各種參數(shù)數(shù)據(jù)寫入日志中,然后Visual DL 會讀取日志中的模型相關(guān)數(shù)據(jù)將其展示出來,這些數(shù)據(jù)包括模型訓練過程中的各種定量的度量、用戶傳入的或者中間訓練過程生成的各種圖片、以及神經(jīng)網(wǎng)絡(luò)訓練過程中的計算數(shù)據(jù)流圖。

訪問 Visual DL Github 了解項目詳情

下方為產(chǎn)品示例:

ECharts 4.0,數(shù)據(jù)可視化 ECharts 4.0,數(shù)據(jù)可視化

ECharts 4.0,數(shù)據(jù)可視化 ECharts 4.0,數(shù)據(jù)可視化

相關(guān)文章:

ECharts, PHP, MySQL, Ajax, JQuery 實現(xiàn)前后端數(shù)據(jù)可視化

Flask+Echarts 實現(xiàn)動圖圖表

DataV接入ECharts圖表庫 可視化利器強強聯(lián)手

ECharts又搞大動作!3.5 版本提供更多數(shù)據(jù)可視化圖表

ECharts 3 測試版發(fā)布,煥然一新的面貌

Echarts在數(shù)據(jù)新聞上的應(yīng)用

關(guān)于數(shù)據(jù)可視化商業(yè)圖表工具ECharts背后那些事兒

極客網(wǎng)企業(yè)會員

免責聲明:本網(wǎng)站內(nèi)容主要來自原創(chuàng)、合作伙伴供稿和第三方自媒體作者投稿,凡在本網(wǎng)站出現(xiàn)的信息,均僅供參考。本網(wǎng)站將盡力確保所提供信息的準確性及可靠性,但不保證有關(guān)資料的準確性及可靠性,讀者在使用前請進一步核實,并對任何自主決定的行為負責。本網(wǎng)站對有關(guān)資料所引致的錯誤、不確或遺漏,概不負任何法律責任。任何單位或個人認為本網(wǎng)站中的網(wǎng)頁或鏈接內(nèi)容可能涉嫌侵犯其知識產(chǎn)權(quán)或存在不實內(nèi)容時,應(yīng)及時向本網(wǎng)站提出書面權(quán)利通知或不實情況說明,并提供身份證明、權(quán)屬證明及詳細侵權(quán)或不實情況證明。本網(wǎng)站在收到上述法律文件后,將會依法盡快聯(lián)系相關(guān)文章源頭核實,溝通刪除相關(guān)內(nèi)容或斷開相關(guān)鏈接。

2018-01-16
ECharts 全新大版本 4.0 正式發(fā)布 即將支持微信小程序中使用ECharts
2018年1月16日,ECharts (echarts baidu com)發(fā)布了最新大版本 4 0,新版本在產(chǎn)品的性能、功能、易用性等各個方面進行了全面提升。

長按掃碼 閱讀全文