作者 hustcc 螞蟻金服·數(shù)據(jù)體驗技術(shù)團隊

TL;DR G2Plot 是一個注重于細(xì)節(jié)體驗的通用統(tǒng)計圖表庫。

背景

折線圖用于表示連續(xù)時間跨度內(nèi)的數(shù)據(jù)，它通常用于顯示某變量隨時間的變化模式：是上升還是下降，是否存在周期性的循環(huán)？因此，相對于獨立的數(shù)據(jù)點，折線圖關(guān)注的是全局趨勢。

在折線圖中，一般水平軸（X 軸）用來表示時間的推移，并且間隔相同；而垂直軸（Y 軸）代表不同時刻的數(shù)據(jù)的大小。

折線圖適合的數(shù)據(jù)類型為一個連續(xù)字段（時間）和一個離散字段（數(shù)值）。在下面這個例子中，time為連續(xù)數(shù)據(jù)字段，value為離散數(shù)據(jù)字段。

在業(yè)務(wù)上，通常使用折線圖來展現(xiàn)一個指標(biāo)在時間上的趨勢情況。譬如：

上圖展示的是某電商平臺上，最近 30 天的訂單數(shù)量趨勢。

體驗細(xì)琢

G2Plot 對于折線圖的細(xì)節(jié)體驗打磨，以下面的幾個例子加以說明和對比：

數(shù)據(jù)標(biāo)簽的碰撞躲避

數(shù)據(jù)標(biāo)簽是對數(shù)據(jù)點的具體數(shù)據(jù)的描述，信息價值很高。在多條數(shù)據(jù)接近的時候，容易數(shù)據(jù)標(biāo)簽的互相遮擋，形成無效信息，且不美觀。

echarts

?直接遮擋顯示highcharts

?部分情況出現(xiàn)遮擋G2Plot

?自動躲避、隱藏

?超過三條折線，優(yōu)先顯示最大、最小數(shù)據(jù)的標(biāo)簽

坐標(biāo)軸標(biāo)題和 tick 重疊

echarts

?軸標(biāo)題和軸標(biāo)簽遮擋G2Plot

?不會出現(xiàn)信息遮擋

通過改造組件布局，永久解決軸標(biāo)題和軸 tick 的重疊問題。

縮略軸標(biāo)簽顯示不全

對于數(shù)據(jù)較多的情況，我們會使用縮略軸組件，即可以看到局部數(shù)據(jù)，也可以看到全局的趨勢。

echarts

?縮略軸標(biāo)簽被裁剪，無法看清數(shù)據(jù)范圍G2Plot

?不會出現(xiàn)信息遮擋
?縮略軸移動到邊緣，自動將標(biāo)簽顯示到內(nèi)部

圖例翻頁優(yōu)化

在拆分?jǐn)?shù)據(jù)較多的情況下，會出現(xiàn)圖例項非常多的情況。

echarts

?圖例和圖形遮擋，信息混雜無效G2Plot

?限制圖例的最大畫布區(qū)域，防止極限情況下，信息遮擋

?增加圖例分頁，讓圖例占用少量空間，讓用戶精力聚焦在圖形和數(shù)據(jù)上

軸標(biāo)簽遮擋問題

在 x 軸標(biāo)簽過多的情況下，會出現(xiàn)標(biāo)簽遮擋，不僅不美觀，也會導(dǎo)致信息無效。（點擊看大圖）

原始autoHideLabel: trueautoRotateLabel: true

體驗增強

增強一：時間軸優(yōu)化

折線圖主要用于做指標(biāo)趨勢，所以其 X 軸絕大多是情況都是時間類型。G2Plot 對 X 軸是時間情況下，做一個軸標(biāo)簽顯示的優(yōu)化，既可以降低冗余信息的展示，又可以節(jié)約畫布空間。

敬請期待：通過事件軸標(biāo)簽的分層，可以讓信息展示更加清晰明了。

增強二：跟隨圖例

在多折線情況下，使用跟隨圖例的形式，去標(biāo)識出折線所屬于的維值信息，直觀有效。

增強三：海量數(shù)據(jù)的交互增強

使用縮略軸的方式去縮放和顯示數(shù)據(jù)，并且縮略軸的標(biāo)簽文本在邊緣處會自動切換到內(nèi)部顯示，防止被遮擋。

?使用縮略軸組件

?使用滾動條組件

增強四：特殊數(shù)據(jù)區(qū)間，數(shù)據(jù)點標(biāo)記

敬請期待：可以標(biāo)記出特殊的時間區(qū)間，比如周末，節(jié)假日等，另外也可以對一些數(shù)據(jù)點進行數(shù)據(jù)標(biāo)簽標(biāo)記說明。

增強五：數(shù)據(jù)標(biāo)記點、線、區(qū)間

敬請期待：對一些特殊的重點事件時間進行標(biāo)記，讓用戶更加清晰的感知到數(shù)據(jù)趨勢變化的原因。

增強六：預(yù)警線、預(yù)警區(qū)間

敬請期待：對于實時監(jiān)控類的數(shù)據(jù)，通過預(yù)警線、預(yù)警區(qū)間的輔助元素，讓超閾值數(shù)據(jù)明顯的標(biāo)記出來。

增強七：面積圖 AreaLabel

將數(shù)據(jù)的分類，直接標(biāo)記在 Area 面積中間，并且文字大小直接適配面積大小，讓用戶更加直觀的看到不同區(qū)塊對應(yīng)的數(shù)據(jù)類型。

最后

上述對于折線圖的優(yōu)化點，都沉淀在 G2Plot 中，并且完全開源。G2Plot 是基于 G2 圖形語法基礎(chǔ)上，形成的一套注重圖表細(xì)節(jié)體驗、易用性的上統(tǒng)計圖表庫，從中提煉的 AntV 設(shè)計原則是基于 Ant Design 設(shè)計體系衍生的，具有數(shù)據(jù)可視化特性的指導(dǎo)原則。它遵循 Ant Design 設(shè)計價值觀的同時，對數(shù)據(jù)可視化領(lǐng)域的進一步解讀，如色彩、字體的指引。

我們經(jīng)過大量的項目實踐和經(jīng)驗總結(jié)，總結(jié)了以下四條核心原則，并以重要等級進行排序，四條原則相輔相成且呈遞進關(guān)系，希望你在設(shè)計時也可以采納：

• 準(zhǔn)確：從數(shù)據(jù)轉(zhuǎn)化到可視表達(dá)時不歪曲，不誤導(dǎo)，不遺漏，忠實反映數(shù)據(jù)里包含的信息。
• 有效：信息傳達(dá)有重點，克制不冗余，避免信息過載，用最適量的數(shù)據(jù)-油墨比（Data-ink Ratio）表達(dá)對用戶最有用的信息
• 清晰：表現(xiàn)方式清楚易讀，具條理性，可以幫助用戶快速達(dá)成目標(biāo)，在最少的時間內(nèi)獲取更多的信息。
• 美：對數(shù)據(jù)的完美表達(dá)，合理利用視覺元素進行藝術(shù)創(chuàng)作，不過度修飾，給用戶優(yōu)雅的體驗。

最后，非常歡迎參入 issue 討論或者代碼 PR：https://github.com/antvis/G2Plot。

總結(jié)

以上是生活随笔為你收集整理的echarts切换折线图变大_这个月，我就和折线图杠上了...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。