作者 hustcc 螞蟻金服·數據體驗技術團隊

TL;DR G2Plot 是一個注重于細節體驗的通用統計圖表庫。

背景

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

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

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

在業務上，通常使用折線圖來展現一個指標在時間上的趨勢情況。譬如：

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

體驗細琢

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

數據標簽的碰撞躲避

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

echarts

?直接遮擋顯示highcharts

?部分情況出現遮擋G2Plot

?自動躲避、隱藏

?超過三條折線，優先顯示最大、最小數據的標簽

坐標軸標題和 tick 重疊

echarts

?軸標題和軸標簽遮擋G2Plot

?不會出現信息遮擋

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

縮略軸標簽顯示不全

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

echarts

?縮略軸標簽被裁剪，無法看清數據范圍G2Plot

?不會出現信息遮擋
?縮略軸移動到邊緣，自動將標簽顯示到內部

圖例翻頁優化

在拆分數據較多的情況下，會出現圖例項非常多的情況。

echarts

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

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

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

軸標簽遮擋問題

在 x 軸標簽過多的情況下，會出現標簽遮擋，不僅不美觀，也會導致信息無效。（點擊看大圖）

原始autoHideLabel: trueautoRotateLabel: true

體驗增強

增強一：時間軸優化

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

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

增強二：跟隨圖例

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

增強三：海量數據的交互增強

使用縮略軸的方式去縮放和顯示數據，并且縮略軸的標簽文本在邊緣處會自動切換到內部顯示，防止被遮擋。

?使用縮略軸組件

?使用滾動條組件

增強四：特殊數據區間，數據點標記

敬請期待：可以標記出特殊的時間區間，比如周末，節假日等，另外也可以對一些數據點進行數據標簽標記說明。

增強五：數據標記點、線、區間

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

增強六：預警線、預警區間

敬請期待：對于實時監控類的數據，通過預警線、預警區間的輔助元素，讓超閾值數據明顯的標記出來。

增強七：面積圖 AreaLabel

將數據的分類，直接標記在 Area 面積中間，并且文字大小直接適配面積大小，讓用戶更加直觀的看到不同區塊對應的數據類型。

最后

上述對于折線圖的優化點，都沉淀在 G2Plot 中，并且完全開源。G2Plot 是基于 G2 圖形語法基礎上，形成的一套注重圖表細節體驗、易用性的上統計圖表庫，從中提煉的 AntV 設計原則是基于 Ant Design 設計體系衍生的，具有數據可視化特性的指導原則。它遵循 Ant Design 設計價值觀的同時，對數據可視化領域的進一步解讀，如色彩、字體的指引。

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。