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）。從單一的技術產品研發團隊進化為從各個方面聯合各種夥伴推進視覺化工作的聯盟組織。

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