數(shù)據(jù)可視化浊竟,是一種用來將復雜信息數(shù)據(jù)清晰表述出來的強大有力的工具。
通過可視化信息,我們的大腦可以更有效地合成和保留信息內容,增強對信息的理解笨触。但是如果不正確數(shù)據(jù)可視化孝情,它可能弊大于利。錯誤的圖表可以減少數(shù)據(jù)的信息,或者更糟的是,完全背道而馳著恩!
這就是完美的數(shù)據(jù)可視化極其依賴設計的原因院尔。
而我們作為前端工程師蜻展,再使用echarts時,不僅僅是選擇合適的圖表類型邀摆,更要以一種容易理解的方式來呈現(xiàn)信息纵顾,設計出更直觀的導航系統(tǒng),讓用戶做盡可能減少理解方面的麻煩,做到一目了然栋盹。
當然施逾,并不是所有的前端工程師都是數(shù)據(jù)可視化專家,這就是為什么大部分的圖表看上去眼花繚亂例获,重點不夠突出汉额,簡直糟糕透了!
這里有10個關于 Echarts 的數(shù)據(jù)可視化的案例榨汤,包括你可能犯的錯誤和快速修復補救的方法蠕搜。
錯誤1.混亂的餅圖分割
餅圖,是最簡單的圖表之一收壕。不過偏偏有人喜歡把它搞得很復雜妓灌。
餅圖的設計應該直觀而清晰,理論上蜜宪,一個餅圖不應該分割超過5塊虫埂。下面就是兩種可以讓用戶的注意力瞬間集中到你要表述的重點的方法。
方法二:最大一塊12點鐘開始,順時針方向旋轉端壳。剩余部分在降序排列,順時針告丢。
錯誤2.在折線圖中使用不連貫的線條
虛線,虛線容易分散注意力枪蘑。相反,使用實線和顏色,反而容易區(qū)分彼此的區(qū)別损谦。
錯誤3.數(shù)據(jù)排序混亂
你的內容應該以一種合乎邏輯的和直觀的方式來引導用戶了解數(shù)據(jù)。所以岳颇,記得將數(shù)據(jù)類別按字母順序,大小順序,或價值進行排序照捡。
錯誤4.數(shù)據(jù)模糊不清
確保沒有數(shù)據(jù)丟失或被設計。例如,使用標準的面積圖時话侧,可以添加透明度,確保用戶可以看到所有數(shù)據(jù)栗精。
錯誤5.讓讀者自己解讀
前端工程師應該使 Eacharts 圖表盡可能輕松地幫助用戶理解數(shù)據(jù)。例如,在散點圖中添加趨勢線來強調的趨勢瞻鹏。
錯誤6.扭曲數(shù)據(jù)
確保所有可視化方式是準確的悲立。例如,氣泡圖大小應該根據(jù)區(qū)域擴展,而不是直徑。
錯誤7.在一張熱力圖上使用不同的顏色
顏色用得太花新博,會給數(shù)據(jù)增加不可承受之重薪夕,相反,前端工程師應該采用同一色系赫悄,或者類比色原献。
錯誤8.條狀圖太胖或太瘦
或許你的報告很有創(chuàng)意馏慨,非常精彩,但是記得圖表設計水平也要跟上姑隅。條形圖之間的間隔應該是1/2欄寬度.
錯誤9.很難比較數(shù)據(jù)
比較是展示數(shù)據(jù)差異的好法子写隶,但是如果你的用戶不容易看出差別的話,那么你的比較就毫無意義讲仰。確保所有的數(shù)據(jù)都是呈現(xiàn)在用戶面前,選擇最合適的比較方法慕趴。
錯誤10:用3D圖表
雖然它們看起來很酷,但是3d形狀可以扭曲感知,因此扭曲數(shù)據(jù)鄙陡。堅持2次元秩贰,確保數(shù)據(jù)準確。
怎么樣柔吼,上述10條毒费,你中槍了沒有?
愿我們都可以設計出重點突出 高逼格的圖表