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

 


ECharts 4.0,數據可視化

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

1. 全新ECharts 4.0

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

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

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

讓開發者使用ECharts變得更加輕鬆

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

讓更多的人在更多的場景都能訪問使用ECharts製作的可視化產品

  • 首創數據可視化產品的無障礙訪問支持
  • 新增對於微信小程序的支持
  • 基於Gallery研發出了PowerPoint插件

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

1.1 千萬級數據可視化的無阻塞體驗

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

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

  • 數據的流加載支持
  • 增量渲染
  • 內存優化、
  • WebGL繪製優化

克服了以下各種難題:

  • 大體積文件的傳輸耗時、
  • 幾千萬的數據處理導致的瀏覽器卡頓阻塞
  • 無法實時重繪所有圖形、
  • 大數據存儲在瀏覽器上後過高的內存佔用會導致GC

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

1.2 支持SVG渲染,內存佔用更少,可導出高清矢量圖片

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

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

ECharts 4.0,數據可視化

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

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

ECharts 4.0,數據可視化

1.3 新增旭日圖,為多層數據帶來更酷的展現方式

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

ECharts 4.0,數據可視化ECharts 4.0,數據可視化

ECharts 為旭日圖提供了非常豐富的配置項。以文字為例,提供了徑向、切向、水平、或任意的旋轉⻆度,並且可以在圖形元素的內側或外側,以多種對⻬方式顯示文字。實現了旭日圖的數據下鑽功能,點擊一個數據後,可以展現表示其後代元素的旭日圖,並且使用優雅的動畫進行過度。在這些強大的功能幫助之下,用戶可以使用旭日圖,輕鬆創建出藝術品級別的可視化作品。

1.4 數據與樣式分離讓數據傳入變得更加方便

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

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

示例:

{
    dataset: {
        source: [
            ['product', '2015', '2016', '2017'],
            ['Matcha Latte', 89.3, 95.8, 97.7],
            ['Milk Tea', 92.1, 89.4, 83.1],
            ['Cheese Cocoa', 94.4, 91.2, 92.5],
            ['Walnut Brownie', 85.4, 76.9, 78.1]
        ]
    },
    xAxis: {type: 'category'},
    yAxis: {}
    series: [
        {type: 'bar'},
        {type: 'bar'},
        {type: 'bar'}
    ]
}

1.5 更扁平的配置項層級,更便捷的書寫

在3.0 版本中,ECharts 已經做了一次Option 扁平化的嘗試,減少了樣式設置的層級,這次更進一步去掉了normal這個層級,樣式可以像下面這樣直接寫在itemStyle,label層級下!

series: [{
    type: 'bar',
    itemStyle: {
        color: '#ff00ff',
        opacity: 0.5
    }
}]

而所有的高亮的配置都會統一放在一個emphasis的大結構下

series: [{
    type: 'bar',
    emphasis: {
        itemStyle: {
            color: '#ff00ff'
        },
        label: {
            show: true
        }
    }
}]

更扁平的層級可以讓配置項更加干淨,書寫也更加便捷!

1.6 首創數據可視化產品的無障礙訪問支持

當我們說到“可視化”的時候,往往很自然地將它與“看得見”聯繫在一起,但其實這是片面的。W3C制定了無障礙富互聯網應用規範集(WAI-ARIA,the Accessible Rich Internet Applications Suite),致力於使得網頁內容和網頁應用能夠被更多殘障人士訪問。

ECharts 4.0 遵從這一規範,支持自動根據圖表配置項智能生成描述,使得有視力障礙的人可以在朗讀設備的幫助下了解圖表內容,讓圖表可以被更多人群訪問。通過增加嚴格遵循W3C 規範的aria-label 屬性,針對大部分圖表類型進行智能語音描述生成,也支持開發者自定義設置該屬性,以最合理的方式進行無障礙的訪問。

舉例來說,對於下面一個餅圖,在配置了aria.show = true 的前提下,圖表DOM會增加一個aria-label屬性(W3C規範中,該屬性會被朗讀設備認為是該DOM節點的描述) ,其值是:

這是一個關於“某站點用戶訪問來源”的表示訪問來源的餅圖,包括5個數據項。其數據是——直接訪問的數據是335,佔13.08%;郵件營銷的數據是310,佔12.1%;聯盟廣告的數據是234,佔9.13%;視頻廣告的數據是135,佔5.27%;搜索引擎的數據是1548,佔60.42%。

ECharts 4.0,數據可視化

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

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

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

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

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

1.8 以後可以在PPT 裡使用ECharts 了

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

ECharts 4.0,數據可視化

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

2. 其它重量產品

除了ECharts 4.0,還發布了

  • ECharts GL 1.0 正式版

ZRender 4.0

  • WebGL 框架Clay GL
  • Visual DL

2.1 ECharts GL 1.0正式版

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

  • 集成Mapbox 地理可視化組件

ECharts 4.0,數據可視化

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

ECharts 4.0,數據可視化

  • 新增了建築群可視化的組件

ECharts 4.0,數據可視化

  • 加入了更多的二維加速組件去優化交互的重繪

ECharts 4.0,數據可視化ECharts 4.0,數據可視化

2.2 ZRender 4.0 版本升級

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

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

ECharts 4.0,數據可視化

ECharts 4.0,數據可視化

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

2.3 高性能漸進式WebGL 框架ClayGL

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

ECharts 4.0,數據可視化

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

ECharts 4.0,數據可視化

團隊後續將圍繞ClayGL 打造一系列的可視化工具及Web3D 產品。

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

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

訪問Visual DL Github 了解項目詳情

下方為產品示例:

ECharts 4.0,數據可視化ECharts 4.0,數據可視化

ECharts 4.0,數據可視化ECharts 4.0,數據可視化

相關文章:

ECharts, PHP, MySQL, Ajax, JQuery 實現前後端數據可視化

Flask+Echarts 實現動圖圖表

DataV接入ECharts圖表庫可視化利器強強聯手

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

ECharts 3 測試版發布,煥然一新的面貌

Echarts在數據新聞上的應用

關於數據可視化商業圖表工具ECharts背後那些事兒

End.

轉貼自: 36大數據

 


留下你的回應

以訪客張貼回應

0
  • 找不到回應

Popular Tags

每月文章