2018 年 1 月 16 日，百度 EFE團(tuán)隊(duì)正式發(fā)布了旗下知名開(kāi)源產(chǎn)品 ECharts 的最新大版本 4.0，新版本在產(chǎn)品的性能、功能、易用性等各個(gè)方面進(jìn)行了全面提升，標(biāo)志著百度在可視化領(lǐng)域又一突破性里程碑的到來(lái)。
3月 31日，由百度開(kāi)發(fā)者中心主辦、極客邦科技承辦、百度創(chuàng)新中心贊助的第 77期百度技術(shù)沙龍邀請(qǐng)了來(lái)自百度高級(jí)技術(shù)經(jīng)理祖明、百度資深前端研發(fā)工程師宿爽、百度高級(jí)前端研發(fā)工程師張?chǎng)├?、百度高?jí)前端研發(fā)工程師王俊婷、百度資深前端研發(fā)工程師沈毅和百度高級(jí)前端研發(fā)工程師李德清六位講師，從 ECharts 的產(chǎn)品特性、技術(shù)實(shí)現(xiàn)、可視化實(shí)踐、開(kāi)源社區(qū)建設(shè)等四個(gè)維度出發(fā)，全面介紹如何更好運(yùn)用 ECharts 來(lái)讓用戶(hù)洞察數(shù)據(jù)，為聽(tīng)眾帶來(lái)一場(chǎng)深入了解 ECharts的分享盛宴。
1 ECharts開(kāi)源之路
百度高級(jí)技術(shù)經(jīng)理祖明做了開(kāi)場(chǎng)演講，他首先介紹了百度開(kāi)源的 ECharts項(xiàng)目的發(fā)展史，在 2013年 6月 ECharts 1.0 發(fā)布到 2018年 1月 ECharts 4.0 發(fā)布的四年時(shí)間里，ECharts項(xiàng)目累計(jì)迭代了 64個(gè)版本，Github 關(guān)注數(shù)達(dá)到 26,530，受到了來(lái)自業(yè)界權(quán)威的關(guān)注和廣泛好評(píng)。
2013年 6月，ECharts 發(fā)布 1.0版本；2014年 6月，ECharts發(fā)布 2.0版本，在 1.0的基礎(chǔ)上使性能有 3+倍的提升，增加直角系全圖表，支持大規(guī)模數(shù)據(jù)，新增時(shí)間軸、儀表盤(pán)、漏斗圖、異變地圖并且支持 svg擴(kuò)展；隨后，團(tuán)隊(duì)根據(jù)前端技術(shù)發(fā)展的趨勢(shì)及用戶(hù)的需求，對(duì) ECharts整體的技術(shù)架構(gòu)進(jìn)行了極大的重構(gòu)優(yōu)化，在 2016年 1月發(fā)布了 ECharts 3.0，3.0無(wú)論在功能上、性能上、包括產(chǎn)品的樣式與交互都有著極大的提升。
今年的 1月 16日，ECharts 4.0橫空出世，八項(xiàng)新特性，讓產(chǎn)品更上一個(gè)臺(tái)階，ECharts 4.0 希望打造一款能讓更多的人在更多的場(chǎng)景都能享受到數(shù)據(jù)可視化帶來(lái)的價(jià)值，幫助人們探索世界、了解真實(shí)。
ECharts 4.0 最大的亮點(diǎn)是帶來(lái)了 8 項(xiàng)堪稱(chēng)“黑科技”的全新特性：
千萬(wàn)級(jí)數(shù)據(jù)可視化渲染能力
SVG + Canvas 雙引擎
全新旭日?qǐng)D
數(shù)據(jù)與樣式分離
更扁平的配置項(xiàng)
無(wú)障礙訪問(wèn)支持
微信小程序支持
PowerPoint 插件
ECharts的未來(lái)
近日，全球著名開(kāi)源社區(qū) Apache基金會(huì)宣布“百度開(kāi)源的 ECharts項(xiàng)目全票通過(guò)進(jìn)入 Apache孵化器”。這是百度第一個(gè)進(jìn)入國(guó)際頂級(jí)開(kāi)源社區(qū)的項(xiàng)目，也標(biāo)志著百度開(kāi)源正式進(jìn)入開(kāi)源發(fā)展的快車(chē)道。在未來(lái)，ECharts團(tuán)隊(duì)會(huì)持續(xù)維護(hù)，希望有更多的人來(lái)加入，為開(kāi)發(fā)者提供更好的體驗(yàn)。
2 ECharts 4.0 核心特性解析
ECharts的成功和廣泛應(yīng)用，必然離不開(kāi)其顛覆性的功能設(shè)計(jì)和技術(shù)特征。ECharts資深研發(fā)工程師宿爽和張?chǎng)├蛞?ECharts 4.0新的技術(shù)特征為起點(diǎn)，介紹新版本在大數(shù)據(jù)渲染、數(shù)據(jù)集、跨平臺(tái)、無(wú)障礙訪問(wèn)等多個(gè)技術(shù)特性的使用場(chǎng)景和設(shè)計(jì)原理。
大數(shù)據(jù)量渲染
大數(shù)據(jù)量渲染在本文中指的是千到千萬(wàn)的數(shù)據(jù)在瀏覽器中的渲染和交互，ECharts4.0在優(yōu)化這些事情上下了很大的功夫。數(shù)據(jù)可視化以瀏覽器作為一個(gè)重要的輸出方式，但瀏覽器在性能上有一定的限制。主要為以下幾個(gè)方面：
程序執(zhí)行的時(shí)長(zhǎng)。在瀏覽器里面，JS的執(zhí)行會(huì)阻塞渲染和用戶(hù)交互的響應(yīng)。
內(nèi)存的占用。大數(shù)據(jù)的運(yùn)算可能會(huì)引起瀏覽器崩潰，也有可能會(huì)因 GC開(kāi)銷(xiāo)過(guò)大導(dǎo)致運(yùn)行不流暢。
網(wǎng)絡(luò)加載。對(duì)于百兆千兆的數(shù)據(jù)，文件體積有可能數(shù)十甚至上百 MB，如果在網(wǎng)絡(luò)上展示，則不能在數(shù)據(jù)全部下載完成才開(kāi)始渲染。
ECharts 對(duì)這些做了一系列優(yōu)化，包括：基于場(chǎng)景特點(diǎn)的優(yōu)化、程序?qū)用娴膬?yōu)化、用戶(hù)感官的優(yōu)化、加載的優(yōu)化：
基于場(chǎng)景特點(diǎn)的優(yōu)化
以圖形的簡(jiǎn)化為例，講述了 ECharts 是如何基于場(chǎng)景特點(diǎn)進(jìn)行優(yōu)化。如下圖是一個(gè) K線(xiàn)圖，每個(gè)圖形的復(fù)雜結(jié)構(gòu)在渲染時(shí)會(huì)比繪制簡(jiǎn)單圖形需要更長(zhǎng)的時(shí)間，導(dǎo)致大數(shù)據(jù)量時(shí)的交互卡頓。而當(dāng)實(shí)際縮放到一定程度時(shí)，將這些圖形簡(jiǎn)化成線(xiàn)，則會(huì)較大提高渲染效率。
程序?qū)用娴膬?yōu)化
主要從程序結(jié)構(gòu)和代碼表達(dá)入手，從而優(yōu)化程序運(yùn)行效率。
例如合并路徑，在處理大數(shù)據(jù)量的時(shí)候，主要使用 Canvas。Canvas提供的 API比較底層，需要進(jìn)行抽象后才能構(gòu)筑復(fù)雜的、易維護(hù)的應(yīng)用。ECharts的底層庫(kù) Zrender，用面向?qū)ο蟮姆绞桨驯讳秩竞凸芾淼膶?shí)體抽象成為圖形元素，每個(gè)圖形元素自己負(fù)責(zé)自己的渲染。抽象的弊端是犧牲了一定性能：渲染時(shí)因?yàn)槊總€(gè)圖形渲染都要先調(diào)用 Canvas API設(shè)置樣式，然后構(gòu)建路徑，頻繁的狀態(tài)切換帶來(lái)了性能的損失。所以可以對(duì)大數(shù)據(jù)的場(chǎng)景，合并圖形元素，設(shè)置一次樣式，構(gòu)建所有路徑。
另外關(guān)于內(nèi)存的使用，程序的 GC時(shí)間過(guò)長(zhǎng)可能會(huì)導(dǎo)致渲染的卡頓。
如下面的截圖，瀏覽器花了 5毫秒的時(shí)間進(jìn)行了 10兆的 Minor GC，時(shí)間聽(tīng)起來(lái)不長(zhǎng)，實(shí)際上如果能保證不卡頓，每一幀的允許時(shí)間只有幾十毫秒，那么 GC消耗的時(shí)間就比較可觀了。優(yōu)化手段，可以是重用對(duì)象，減少老生代大對(duì)象的頻繁回收。也可以使用 Typed Array或定長(zhǎng) Array，從而降低內(nèi)存占用、減少 reallocation。但是帶來(lái)的麻煩就是，需要自己管理 array length、擴(kuò)容、以及手動(dòng)把多維度數(shù)組降為一維。
因此，程序?qū)蛹?jí)的優(yōu)化是通用的，但是會(huì)導(dǎo)致可讀性的破壞，程序魯棒性的降低，所以，這種優(yōu)化只在必要時(shí)使用。
用戶(hù)感觀的優(yōu)化
看如下 ECharts3的渲染流程圖，最左邊是原始的數(shù)據(jù)，經(jīng)過(guò)從左到右的過(guò)程，進(jìn)行處理數(shù)據(jù)，布局，渲染，最后畫(huà)到屏幕上面。如果出現(xiàn)了交互，就需要重新布局，重新渲染，重走這個(gè)過(guò)程。在大數(shù)據(jù)下，整體流程全走完的時(shí)間是很可觀的。當(dāng)時(shí)間難于減少時(shí)，經(jīng)常的思路就是流，或者說(shuō)漸進(jìn)增量的渲染。
如下是 ECharts4的一個(gè)管線(xiàn)圖，最左邊是原始數(shù)據(jù)，會(huì)被 ECharts自動(dòng)分片，每一個(gè) Chunk從左到右走完整的渲染流程，走完后直接在 SVG或者 Canvas中被渲染出來(lái)。然后按時(shí)間線(xiàn)往下，下一個(gè) Chunk繼續(xù)走。這樣將任務(wù)分片進(jìn)行而非整塊阻塞，使用戶(hù)覺(jué)得并沒(méi)有卡頓。
數(shù)據(jù)加載的優(yōu)化
對(duì)于百兆千兆的數(shù)據(jù)，文件體積有可能數(shù)十甚至上百 MB。
優(yōu)化的手段，首先是可以使用 Typed Array直接存成二進(jìn)制文件而非文本文件，這樣能極大的壓縮數(shù)據(jù)文件的體積。ECharts已支持直接使用 Typed Array傳入數(shù)據(jù)。
另外，如果在網(wǎng)絡(luò)上展示，不宜在數(shù)據(jù)全部下載完成才開(kāi)始渲染，ECharts支持了增量渲染后，使用者可以將文件分片加載，加載的文件直接傳入 ECharts進(jìn)行渲染。
數(shù)據(jù)集
數(shù)據(jù)集為數(shù)據(jù)輸入方式提供了一個(gè)新的選項(xiàng)：直接傳入二維表（二維數(shù)組或者對(duì)象數(shù)組）形式的數(shù)據(jù)，然后通過(guò)配置視覺(jué)映射（即，哪些行哪些列映射到哪些軸、顏色等）來(lái)得到可視化結(jié)果。這比較符合數(shù)據(jù)可視化制作和探索的操作思路：基于一份數(shù)據(jù)，改變映射規(guī)則，發(fā)現(xiàn)信息。這也方便了數(shù)據(jù)和樣式的分別管理，從而易于程序開(kāi)發(fā)。
跨平臺(tái)圖形接口
什么是跨平臺(tái)的圖形接口？
對(duì)于一個(gè) 2D的圖形接口而言，通常包括矩形、圓形、路徑等這樣一些圖形元素，而圖形元素又包括屬性，并且圖形元素和元素之間可以進(jìn)行相互的組合，進(jìn)行遮罩處理等。我們說(shuō) ECharts支持跨平臺(tái)，指的是哪些平臺(tái)呢？我們考慮了以下幾個(gè)方面：首先是瀏覽器，瀏覽器是基于不同的方式進(jìn)行渲染的，比如 Canvas，SVG，VML，這樣的場(chǎng)景下不同的分辨率我們可能希望使用不同的布局方式，通過(guò)響應(yīng)式的方式使得空間的利用更加合理。對(duì)于特殊平臺(tái)，比如說(shuō)像服務(wù)端的渲染以及微信小程序端，也對(duì)它進(jìn)行了兼容。除此之外，還對(duì)盲人使用的朗讀設(shè)備進(jìn)行無(wú)障礙訪問(wèn)的設(shè)置。
為什么需要跨平臺(tái)的圖形接口？
對(duì)于用戶(hù)，他其實(shí)并不關(guān)心這個(gè)圖表是用 Canvas做的，還是 SVG做的。對(duì)他而言，良好的體驗(yàn)才是最重要的，他只希望能夠看到正常的圖表，并且有良好體驗(yàn)的圖形渲染結(jié)果。至于這個(gè)圖形是如何渲染的，他并不關(guān)心。而對(duì)于開(kāi)發(fā)者而言，他則需要將所有的平臺(tái)一一實(shí)現(xiàn)。
基于這樣的場(chǎng)景，就需要對(duì)不同的平臺(tái)進(jìn)行兼容，并且不同的平臺(tái)有些設(shè)備存在一些性能上的差異。
ECharts解決方案——ZRender 提供三種渲染器
ECharts使用的是 ZRender底層渲染器。ZRender提供了三種渲染器，分別是 Canvas，SVG和 VML。它對(duì)上提供了一種渲染平臺(tái)無(wú)關(guān)的圖形接口，對(duì)下封裝兼容不同平臺(tái)的實(shí)現(xiàn)算法。
1、如何支持多種渲染方式？
百度高級(jí)前端工程師羨轍舉例說(shuō)明。首先聲明一個(gè)矩形，只需要告訴它 X坐標(biāo)，Y坐標(biāo)，寬度以及高度信息，它的渲染引擎就會(huì)根據(jù)具體的渲染平臺(tái)去做不同的渲染底層的實(shí)現(xiàn)，底層是一個(gè)叫路徑代理 PathProxy的類(lèi)，它會(huì)負(fù)責(zé)記錄這個(gè)底層的繪制指令。根據(jù)不同的渲染器，底層進(jìn)行不同的實(shí)現(xiàn)。通過(guò)這樣的一種方式，不但可以使用一種統(tǒng)一的方式，還可以對(duì)于不同的渲染器進(jìn)行渲染。它還有一個(gè)好處是，假設(shè)使用 Web Worker進(jìn)行批量化渲染，也可以根據(jù)這個(gè)數(shù)組實(shí)現(xiàn)渲染。
2、如何支持事件處理
為了不同的渲染器有相同的事件處理機(jī)制，我們對(duì)整個(gè)圖表容器綁定了事件。也就是說(shuō)，對(duì)于 SVG、VML 而言，我們不對(duì)其 DOM 樹(shù)下的每個(gè)元素綁定事件。這樣就能和 Canvas 有一套統(tǒng)一的事件處理機(jī)制。
在判斷事件將被哪個(gè)圖形元素響應(yīng)的時(shí)候，我們會(huì)反向循環(huán)渲染列表，也就是先判斷鼠標(biāo)是否在位于屏幕前面的圖形內(nèi)。判斷的時(shí)候，會(huì)先將鼠標(biāo)坐標(biāo)變換到圖形坐標(biāo)系。這是因?yàn)閳D形可能是經(jīng)過(guò)平移旋轉(zhuǎn)縮放的，甚至圖形與圖形之間還可能有組合的變換。將鼠標(biāo)變換到圖形坐標(biāo)系后，我們就可以知道兩者的相對(duì)關(guān)系，然后先根據(jù)包圍盒做粗略的判斷，再根據(jù)路徑做精確的判斷。如果鼠標(biāo)在該圖形內(nèi)，則讓這個(gè)圖形進(jìn)行事件分發(fā)與冒泡，如果不在，則對(duì)位于屏幕后方的元素一一判斷。
3、SVG渲染如何部分更新
Canvas 在渲染的時(shí)候會(huì)完全重繪，但是它的效率很高。而對(duì)于 SVG 而言，比如有一千個(gè)點(diǎn)的散點(diǎn)圖，在 DOM 中就有一千個(gè)對(duì)應(yīng)的節(jié)點(diǎn)。如果每一幀都需要將所有 DOM 元素刪除再重新添加，那么效率是很低的。
因此，我們維護(hù)一個(gè)渲染對(duì)象列表，每幀將新的渲染對(duì)象列表與上一幀的進(jìn)行 diff，獲得新增、修改、刪除的渲染對(duì)象列表，再根據(jù)列表對(duì) DOM 相關(guān)節(jié)點(diǎn)進(jìn)行調(diào)整。
4、SVG渲染如何優(yōu)化效率
以漸變?yōu)槔?，采用?fù)用漸變定義的實(shí)現(xiàn)方式
定義一個(gè) SVG 中
漸變、遮罩、陰影等繼承該類(lèi)
每一個(gè)漸變對(duì)象共享一個(gè)
更新渲染對(duì)象的時(shí)候
檢查漸變對(duì)象是否生成過(guò) DOM 節(jié)點(diǎn)
如果有，則將 fill 或 stroke 設(shè)為該 DOM id 對(duì)應(yīng)的 url
如果沒(méi)有，則生成一個(gè)新的 DOM，并在漸變對(duì)象中引用
更新渲染對(duì)象的時(shí)候
渲染前將所有漸變標(biāo)記為未被使用
新增或更新對(duì)象時(shí)，如果有漸變，將其標(biāo)記為已使用
更新漸變屬性（顏色、位置等）
渲染后未被使用的漸變 DOM 將從
ECharts解決方案——響應(yīng)式設(shè)計(jì)支持
ECharts支持三種定位方式：
像素、百分比、位置描述定位
除此之外 ECharts還實(shí)現(xiàn)了一種響應(yīng)式的布局方式，也就是可以將圖表在不同分辨下，使用不同的配置以及布局。這個(gè)是如何實(shí)現(xiàn)的，看下方右邊這張圖，它由兩部分組成，一個(gè)是 baseOption，一個(gè)是 media。baseOption說(shuō)的是對(duì)所有分辨率都會(huì)采用的配置項(xiàng)，而 media是一個(gè)數(shù)組，它的每一項(xiàng)包括代表了一個(gè)分辨率的配置情況。每一項(xiàng)包括一個(gè) query和一個(gè) option，query是對(duì)每一個(gè)分辨率采取這個(gè)配置，option是在這個(gè)分辨率下使用哪個(gè)配置項(xiàng)。query可以包括它的寬度，高度以及長(zhǎng)寬比，并且可以使用最大最小值。
ECharts解決方案——特殊平臺(tái)及特殊設(shè)備
特殊平臺(tái)的處理
判斷平臺(tái)
兼容特定方法
無(wú)障礙訪問(wèn)
根據(jù)圖表內(nèi)容生成描述
提供模板供開(kāi)發(fā)者修改
對(duì)于盲人朗讀設(shè)備使用的無(wú)障礙訪問(wèn)，W3C制定了無(wú)障礙互聯(lián)網(wǎng)應(yīng)用規(guī)范集的標(biāo)準(zhǔn)。它的目的就是使網(wǎng)頁(yè)內(nèi)容和應(yīng)用能夠被更多的殘障人士訪問(wèn)。對(duì)于 ECharts而言，希望實(shí)現(xiàn)的效果是根據(jù)一張圖，生成關(guān)于這個(gè)圖的數(shù)據(jù)，并且這個(gè)描述不是用戶(hù)寫(xiě)的，而是根據(jù)它的配置項(xiàng)來(lái)自動(dòng)生成的。它會(huì)綁定在一個(gè)屬性 aria-label 上，這個(gè)屬性會(huì)被盲人的朗讀設(shè)備識(shí)別并且進(jìn)行朗讀。但是也會(huì)遇到很多難點(diǎn)：不同圖表類(lèi)型的描述方式不同、不同數(shù)量、不同形式數(shù)據(jù)的描述、生成的描述需符合語(yǔ)法規(guī)范、需要簡(jiǎn)明扼要地表達(dá)圖表內(nèi)容以及需要支持不同語(yǔ)言。那最終是怎么實(shí)現(xiàn)的呢？ECharts實(shí)現(xiàn)了一套基于模板塊的方法，對(duì)于不同的圖表類(lèi)型、數(shù)據(jù)量、數(shù)據(jù)形式使用不同的模板，不同的語(yǔ)言也可以由用戶(hù)自定義模板。
3 ECharts教你如何選擇和設(shè)計(jì)你的圖表
基于可視化理論以及 ECharts的數(shù)據(jù)可視化設(shè)計(jì)規(guī)范和項(xiàng)目經(jīng)驗(yàn)，百度高級(jí)前端研發(fā)工程師王俊婷為大家詳細(xì)的闡述了如何根據(jù)不同需求及目的來(lái)選擇正確的可視化圖表類(lèi)型，以及如何正確合理的使用圖表來(lái)展現(xiàn)數(shù)據(jù)。結(jié)合實(shí)際行業(yè)案例總結(jié)了數(shù)據(jù)可視化作品設(shè)計(jì)的方法和原則，從而幫助大家獲得更好的數(shù)據(jù)展現(xiàn)效果。
選擇合適的圖表
圖表是為數(shù)據(jù)服務(wù)的，數(shù)據(jù)類(lèi)型決定了可選擇的圖表類(lèi)型。我們首先要從數(shù)據(jù)本身入手，選擇可滿(mǎn)足其展示需求的圖表類(lèi)型。按照每個(gè)圖表類(lèi)型的功能及適合的數(shù)據(jù)類(lèi)型，將圖表分為比較、關(guān)系、占比、分布、趨勢(shì)五大類(lèi)，并且對(duì)每個(gè)功能類(lèi)型所對(duì)應(yīng)的圖表做了總結(jié)展示。
聚焦重點(diǎn)
利用一些技術(shù)和設(shè)計(jì)手段，讓用戶(hù)的注意力集中在可視化作品中最重要的區(qū)域，可以利用使用對(duì)比色、使用不同的形狀、位置的變化、添加動(dòng)效等手段來(lái)集中強(qiáng)調(diào)關(guān)鍵數(shù)據(jù)。
合理適度
要盡量避免在可視化圖表內(nèi)注入太多雜亂沒(méi)有意義的東西。例如避免過(guò)多的圖形元素，避免多度的設(shè)計(jì)，并且要避免使用不恰當(dāng)?shù)姆绞秸故具^(guò)多的數(shù)據(jù)造成的數(shù)據(jù)無(wú)法清晰地解讀。
保證可視化作品的空間平衡
考慮數(shù)據(jù)是以一個(gè)怎樣的形式呈現(xiàn)在圖表上的，要盡量注意可視化的設(shè)計(jì)空間被有效平衡地利用，盡量保證重要的元素在中心區(qū)域，保證圖表內(nèi)元素尺寸大小合理，圖表元素的間隔適當(dāng)。
例如，柱狀圖柱子間的合理的寬度和間隙應(yīng)該是單個(gè)柱子的寬度不小于柱間間隙的兩倍。
遵循習(xí)慣與常識(shí)
在使用圖標(biāo)展示數(shù)據(jù)時(shí)，要遵循一些視覺(jué)習(xí)慣來(lái)擺放或排列數(shù)據(jù)，進(jìn)而讓用戶(hù)可以更正確迅速的解讀數(shù)據(jù)，并且要避免一些違背常識(shí)的數(shù)據(jù)展示方式。
利用情感共鳴和語(yǔ)義共鳴
顏色是可以用來(lái)傳達(dá)不同情感的，所以在可視化中針對(duì)不同的數(shù)據(jù)主題選擇其匹配的顏色，例如甜品的售量占比，使用吻合甜品及甜品用戶(hù)群體的的顏色，可以恰當(dāng)喚起用戶(hù)的情感共鳴。
而顏色的語(yǔ)音共鳴則是基于“斯魯普效應(yīng)”研究，給有固定顏色的事物匹配具有語(yǔ)義共鳴的顏色，能有效地提升閱讀效率及準(zhǔn)確度。例如展示獼猴桃、香蕉、橙子、草莓四種水果的銷(xiāo)量，我們分別選擇綠色、黃色、橙色、紅色四個(gè)與我們對(duì)水果顏色的認(rèn)知一致的顏色。來(lái)展現(xiàn)四種水果的銷(xiāo)量，我們只需要根據(jù)顏色就能快速定位閱讀數(shù)據(jù)。
注意圖表會(huì)“騙人”
在制作和閱讀可視化作品時(shí)，要注意避免不當(dāng)?shù)臄?shù)據(jù)展示方式誤導(dǎo)了用戶(hù)對(duì)數(shù)據(jù)錯(cuò)誤的解讀。
總結(jié):
以上內(nèi)容依次從指導(dǎo)如何選擇合適的圖表，如何獲取更好的數(shù)據(jù)展示的方法，怎樣利用用戶(hù)的心理和用戶(hù)習(xí)慣，總結(jié)的一些更好的數(shù)據(jù)展示，更好的提升用戶(hù)體驗(yàn)進(jìn)而更好地解讀數(shù)據(jù)的方法和建議。這些建議和技巧對(duì)于日后正確的選擇及設(shè)計(jì)可視化作品有很多指導(dǎo)意義。
主題配色
除此之外，王俊婷還分享了 ECharts 在設(shè)計(jì)主題配色時(shí)的寶貴經(jīng)驗(yàn)。一般的數(shù)據(jù)系列需要用到五到六種顏色的，而為了滿(mǎn)足絕大多數(shù)的使用場(chǎng)景，ECharts顏色需要要提供到八到十二種顏色，滿(mǎn)足大多數(shù)的需求。并且考慮到不同的數(shù)據(jù)系列數(shù)量，為了獲得更好的展示方式，在與配色方案一致的基礎(chǔ)上，建議依次提供相應(yīng)的九色方案、六色配色方案。并且還要提供冷色調(diào)，暖色調(diào)。以及用來(lái)表示數(shù)據(jù)的增量變化的漸變色。
需要特別注意的一點(diǎn)是視覺(jué)障礙的用戶(hù)群體需求，我們要保證可視化方案以及可視化作品，讓這一部分有視覺(jué)障礙的群體能夠準(zhǔn)確無(wú)誤的去閱讀。
另外，王俊婷還展示了顏色過(guò)于接近的一些不合理案例。例如第一種數(shù)據(jù)系列的顏色過(guò)于接近，導(dǎo)致無(wú)法辨識(shí)某一個(gè)單獨(dú)的數(shù)據(jù)系列。第二種數(shù)據(jù)的系列和背景色過(guò)于接近，數(shù)據(jù)本身不容易突出。第三種是坐標(biāo)軸、表現(xiàn)標(biāo)題、軸線(xiàn)和背景色過(guò)于接近，不好識(shí)別具體的數(shù)據(jù)的大小。
因此，建議可視化的顏色的選擇時(shí)明度跨度要大。明度與色調(diào)跨度越大，就能承載越多的數(shù)據(jù)。
而針對(duì)某些特殊行業(yè)、民族、宗教的數(shù)據(jù)展示，例如股票數(shù)據(jù)的展示，紅色和綠的都是有特殊含義的。因此在顏色等元素的使用上，要保證嚴(yán)格遵循其行業(yè)、民族或宗教等特點(diǎn)，恰當(dāng)合理的展示數(shù)據(jù)。
4 WebGL給 ECharts 帶來(lái)了什么
這幾年 WebGL 已經(jīng)越來(lái)越普及，百度資深前端研發(fā)工程師沈毅分享在 ECharts GL 中 WebGL 的嘗試，其中重點(diǎn)介紹 ECharts GL 的底層 WebGL 框架 ClayGL，以及對(duì)未來(lái)的一些規(guī)劃。
ClayGL
ClayGL是 ECharts GL的底層圖形引擎，是一個(gè)漸進(jìn)式的高性能 WebGL開(kāi)發(fā)框架。ClayGL易于使用，提供了非常豐富的功能能夠讓大家用最少的代碼去快速的打造 3D的應(yīng)用，基于微內(nèi)核機(jī)制可以保證最小的打包體積足夠小，可擴(kuò)展至高質(zhì)量的渲染。
易于使用
這段代碼加上空行和注釋總共只有 19 行，就加載了一個(gè)有跳舞的機(jī)器人模型，創(chuàng)建了一個(gè)帶燈光，陰影和動(dòng)畫(huà)的 3D應(yīng)用
ClayGL核心模塊的抽象
作為一個(gè)通用框架，ClayGL 需要面向各種場(chǎng)景的需求，比如實(shí)現(xiàn)一個(gè)像 ECharts GL 這樣的可視化庫(kù)，但是不同場(chǎng)景之間可能用到的功能完全不一樣，比如可視化可能就不需要那些三維模型加載的模塊。
ClayGL 中對(duì)核心模塊做了抽象，并把這些核心模塊與那些更面向場(chǎng)景的模塊做了解耦。
ClayGL 中的核心功能包括：
Shader, Attribute Buffer 等 GPU 資源管理
渲染管理
保證繪制的高效
數(shù)學(xué)庫(kù)
可以做矩陣、向量、包圍盒的計(jì)算
WebGL 是一個(gè)狀態(tài)機(jī)的接口，大部分 WebGL 的接口都是在創(chuàng)建和提交上述 GPU 資源，管理繪制的狀態(tài)等等，這種狀態(tài)機(jī)的接口非常復(fù)雜，啰嗦，繪制效果一復(fù)雜就會(huì)很難管理狀態(tài)。經(jīng)常我們寫(xiě)完一大段代碼之后瀏覽器刷新一看就什么東西都沒(méi)有，還沒(méi)有報(bào)錯(cuò)，于是只能一行一行去過(guò)代碼看哪里出了問(wèn)題。
ClayGL最首要的任務(wù)就是解決這些資源和狀態(tài)管理的問(wèn)題。例如下 main代碼繪制了一個(gè)三角形，最上面一行是通過(guò) ES6 語(yǔ)法引入一些必要的模塊，比如像渲染器。然后是創(chuàng)建一個(gè)渲染器，這個(gè)渲染器主要負(fù)責(zé)整個(gè)渲染的管理。接下來(lái)的 Geometry 負(fù)責(zé)所有頂點(diǎn)數(shù)據(jù)的管理，比如說(shuō)頂點(diǎn)的位置等。再下面的 Material 和 Shader 管理了頂點(diǎn)著色器和像素著色器的代碼，以及提供給外面的一些 uniform。最后一行就是把這些東西都提交給整個(gè)渲染器，讓渲染器去負(fù)責(zé)各種瑣碎的事情，把圖形畫(huà)出來(lái)。
最后通過(guò) Webpack 4 打包的代碼 gzip 之后只有 22k，對(duì)比 THREE.js 打包后有上百 K 的體積。
最常見(jiàn)場(chǎng)景的整合 - App3D
對(duì)于很多想要開(kāi)箱即用的 3D 應(yīng)用來(lái)說(shuō)，只有上述的核心模塊是遠(yuǎn)遠(yuǎn)不夠的，ClayGL 提供了很對(duì)功能模塊去快速解決場(chǎng)景中的具體問(wèn)題，比如模型加載，陰影，攝像機(jī)控制，內(nèi)置材質(zhì)，骨骼動(dòng)畫(huà)等等，其中 App3D 是針對(duì)我們常見(jiàn)場(chǎng)景對(duì)這些模塊做的一個(gè)整合。上面機(jī)器人模型的加載就使用到了 App3D 模塊。它提供了下面這些
管理整個(gè)應(yīng)用的循環(huán)
GPU 資源的自動(dòng)回收
鼠標(biāo)事件的檢測(cè)和管理
更方便的創(chuàng)建場(chǎng)景物體，燈光，攝像機(jī)
Promisify 的紋理，模型加載接口
內(nèi)置 PBR 材質(zhì)
Cubemap Prefilter
等等的功能區(qū)幫助開(kāi)發(fā)者更爽的去開(kāi)發(fā)一個(gè) 3D 應(yīng)用。
ClayGL Advanced Renderer
為了讓渲染出的畫(huà)面可以有更豐富的光影、更豐富的材質(zhì)、更養(yǎng)眼的顏色、更真實(shí)的鏡頭以及更平滑的畫(huà)面。ClayGL 提供了 Advanced Renderer。下面是使用 Advanced Renderer 渲染的展示各種材質(zhì)的材質(zhì)球的畫(huà)面。
5 VisualDL — ECharts 與深度學(xué)習(xí)
VisualDL 是百度發(fā)布的深度學(xué)習(xí)可視化工具，它可以通過(guò)可視化的方法將模型訓(xùn)練過(guò)程中的各個(gè)參數(shù)以及計(jì)算的數(shù)據(jù)流圖（computation graph）實(shí)時(shí)地展現(xiàn)出來(lái)，以幫助模型訓(xùn)練者更好地理解、調(diào)試、優(yōu)化模型。百度高級(jí)前端研發(fā)工程師李德清結(jié)合 VisualDL 項(xiàng)目的實(shí)踐經(jīng)驗(yàn)，介紹深度學(xué)習(xí)領(lǐng)域是如何使用可視化來(lái)解決問(wèn)題的。
VisualDL
VisualDL 主要解決深度學(xué)習(xí)訓(xùn)練過(guò)程的“黑盒化”這一特性，它使用可視化的方式幫助模型訓(xùn)練者理解、調(diào)試模型結(jié)構(gòu)，并且可視化模型訓(xùn)練過(guò)程中各種超參數(shù)的變化。
VisualDL的四大功能
Scalar
在模型訓(xùn)練的時(shí)候，可將訓(xùn)練過(guò)程中產(chǎn)生的各種數(shù)值信息以折線(xiàn)圖的形式展現(xiàn)出來(lái)，方便觀察參數(shù)的整體變化趨勢(shì)，并且能在同一個(gè)可視化視圖中呈現(xiàn)多條折線(xiàn)，方便用戶(hù)對(duì)比分析多個(gè)參數(shù)。
如下圖是一個(gè) Scalar 界面，上面包含了一個(gè)篩選的功能，因?yàn)橐粋€(gè)大的模型可能會(huì)有一千多層，所以涉及到的參數(shù)會(huì)非常多，用戶(hù)可能會(huì)只想看錯(cuò)誤率或者準(zhǔn)確率，VisualDL因此提供了一個(gè)篩選的功能。另外還有平滑（smooth）功能，將訓(xùn)練初期的噪聲參數(shù)值過(guò)濾掉。
Graph
幫助用戶(hù)理解、調(diào)試深度學(xué)習(xí)模型的網(wǎng)絡(luò)結(jié)構(gòu)。Graph 支持 ONNX，也就間接支持不同深度學(xué)習(xí)框架的模型結(jié)構(gòu)可視化功能，便于用戶(hù)排查網(wǎng)絡(luò)結(jié)構(gòu)配置錯(cuò)誤，幫助理解網(wǎng)絡(luò)結(jié)構(gòu)。
Image
用戶(hù)可輕松查看輸入圖片數(shù)據(jù)樣本的質(zhì)量，也可以方便地查看訓(xùn)練的中間結(jié)果，例如卷積層的結(jié)果或者 GAN生成的圖片等。
Histogram
Histogram 主要用來(lái)可視化參數(shù)隨時(shí)間和訓(xùn)練次數(shù)變化的分布情況，如下圖所示。
VisualDL的未來(lái)
在未來(lái)，VisualDL 會(huì)實(shí)現(xiàn) Interactive Graph，還會(huì)加上模型的可解釋性，音頻可視化，文本可視化等。同時(shí)，ECharts 和 PaddlePaddle 的合作，將在深度學(xué)習(xí)開(kāi)源領(lǐng)域持續(xù)發(fā)力，打造更豐富的可視化工具生態(tài)，為開(kāi)發(fā)者提供真真切切的實(shí)用幫助。
聯(lián)系客服
