echarts切换折线图变大_这个月,我就和折线图杠上了...
作者 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切换折线图变大_这个月,我就和折线图杠上了...的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 再见了老同学是哪首歌啊?
- 下一篇: 1命名规则 sentinel_Sprin