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等，可謂是一次百度在數據可視化領域的大閱兵。伴隨這些產品的發佈，百度也發佈了全新升級的數據可視化品牌----「百度數據可視化實驗室」，標誌着百度在數據可視化領域將開啓一番大的動做。

首先歡迎一波star！

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也能順滑地完成渲染工做。

渲染性能針對不一樣類型的圖表和運行平臺有較大差別，有些場景下SVG優於Canvas，有些則次於，用戶能夠根據本身的使用場景選擇更合適的渲染方式。一般來講，SVG渲染折線圖和餅圖的效率更高，而因爲Canvas渲染矩形的效率很高，因此柱狀圖使用Canvas渲染的效率高於SVG。另外一方面，IE對於SVG的支持較差，於是性能通常比Canvas差；而Chrome上的SVG則有很好的表現。對於性能敏感的需求，用戶能夠測試特定圖表的性能表現，並決定在各類平臺上分別使用哪一種渲染方式。

此外，有用戶反饋須要在PDF報表中加入ECharts圖表的圖片，以前使用Canvas渲染的文件尺寸很大。而如今使用SVG渲染能夠將圖表導出爲矢量圖片，文件尺寸更小，而且永遠不會產生鋸齒，是在PDF中插入圖表的更好的選擇。以電腦端瀏覽器中典型的圖表尺寸（1280x600）爲例，導出圖片的文件尺寸分別爲：

1.3 新增旭日圖，爲多層數據帶來更酷的展示方式

每次大版本升級必定會伴隨着新的強大圖表的支持，4.0 也不例外，ECharts 在本次升級中新增了一種叫作旭日圖的圖表類型。旭日圖能夠理解爲多個層次的餅圖，內圈是外圈的父元素，經過這樣的形式，能夠很直觀高效地展示帶有層次結構的數據佔比狀況，而且具備很好的視覺效果。

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 但願在無障礙訪問的探索和嘗試，可以幫助更普遍的用戶可以瞭解真實，探索世界。

1.7 立刻就能夠在微信小程序中使用ECharts了！

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

所以，ECharts團隊和微信小程序官方團隊合做，提供了ECharts的微信小程序版本。開發者能夠經過熟悉的ECharts配置方式，快速開發圖表，知足各類可視化需求。

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

1.8 之後能夠在 PPT 裏使用 ECharts 了

在 PPT 中插入 ECharts 一直是許多PPTer反饋最多的需求，現在，終於能夠在 PPT 裏使用 ECharts 了！你能夠在 Gallery 裏建立你本身的圖表做品後保存。而後在 PPT 裏插入 ECharts 組件，選擇你剛保存的圖表，立刻你就能夠在 PPT 裏擁有一個豐富的樣式，動畫和交互的圖表展現了！

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

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 地理可視化組件

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

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

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

2.2 ZRender 4.0 版本升級

做爲ECharts的底層渲染庫，ZRender承擔起了抹平平臺差別、封裝技術細節、提升渲染性能等責任。在這次發佈的4.0版本中，SVG渲染的支持使得ZRender的渲染能力有了進一步提高。

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

在此以前，ZRender主要是做爲ECharts的底層渲染庫存在的，隨着ZRender的直接用戶愈來愈多，團隊在ZRender官網開放了ZRender的API文檔，而且給出了教程和例子，幫助你們更方便地學會使用。

2.3 高性能漸進式 WebGL 框架 ClayGL

除了 ZRender，ECharts團隊此次也發佈了 ECharts GL 底層所使用的 WebGL 框架： ClayGL。ClayGL 是一個漸進式的高性能 WebGL 框架（這裏感謝 Vue 提出的漸進式框架的概念），可以幫助用戶快速建立一個 Web3D 應用，在 ECharts GL 中的應用已經證實了其能力之強大。

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

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

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

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

訪問 Visual DL Github 瞭解項目詳情

下方爲產品示例：

3. 全新團隊品牌「百度數據可視化實驗室」

在發佈各個新產品的同時，ECharts 團隊宣佈團隊品牌升級爲「百度數據可視化實驗室」（vis.baidu.com）。從單一的技術產品研發團隊進化爲從各個方面聯合各類夥伴推動可視化工做的聯盟組織。

新成立的百度數據可視化實驗室，但願可以依託完善的產品支撐及豐富的經驗，致力於提供更強大的數據可視化產品、參與數據可視化規範的制定、積極參與可視化基礎知識的推廣、傳播數據可視化學術界及業界的研究成果及解決方案，和廣大夥伴一同推進數據可視化行業的發展。