如何讓你的Echarts數(shù)據(jù)可視化

數(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條毒费,你中槍了沒有?

愿我們都可以設計出重點突出 高逼格的圖表

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末愈魏,一起剝皮案震驚了整個濱河市觅玻,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌培漏,老刑警劉巖溪厘,帶你破解...
    沈念sama閱讀 221,695評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異牌柄,居然都是意外死亡畸悬,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,569評論 3 399
  • 文/潘曉璐 我一進店門珊佣,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蹋宦,“玉大人,你說我怎么就攤上這事咒锻±淙撸” “怎么了?”我有些...
    開封第一講書人閱讀 168,130評論 0 360
  • 文/不壞的土叔 我叫張陵惑艇,是天一觀的道長蒿辙。 經常有香客問我,道長滨巴,這世上最難降的妖魔是什么思灌? 我笑而不...
    開封第一講書人閱讀 59,648評論 1 297
  • 正文 為了忘掉前任,我火速辦了婚禮恭取,結果婚禮上泰偿,老公的妹妹穿的比我還像新娘。我一直安慰自己秽荤,他們只是感情好甜奄,可當我...
    茶點故事閱讀 68,655評論 6 397
  • 文/花漫 我一把揭開白布柠横。 她就那樣靜靜地躺著,像睡著了一般课兄。 火紅的嫁衣襯著肌膚如雪牍氛。 梳的紋絲不亂的頭發(fā)上嫌褪,一...
    開封第一講書人閱讀 52,268評論 1 309
  • 那天乘客,我揣著相機與錄音纵势,去河邊找鬼晚胡。 笑死,一個胖子當著我的面吹牛蚊丐,可吹牛的內容都是我干的想帅。 我是一名探鬼主播输玷,決...
    沈念sama閱讀 40,835評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼檀葛,長吁一口氣:“原來是場噩夢啊……” “哼玩祟!你這毒婦竟也來了?” 一聲冷哼從身側響起屿聋,我...
    開封第一講書人閱讀 39,740評論 0 276
  • 序言:老撾萬榮一對情侶失蹤空扎,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后润讥,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體转锈,經...
    沈念sama閱讀 46,286評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,375評論 3 340
  • 正文 我和宋清朗相戀三年楚殿,在試婚紗的時候發(fā)現(xiàn)自己被綠了撮慨。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,505評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡脆粥,死狀恐怖砌溺,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情冠绢,我是刑警寧澤抚吠,帶...
    沈念sama閱讀 36,185評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站弟胀,受9級特大地震影響,放射性物質發(fā)生泄漏喊式。R本人自食惡果不足惜孵户,卻給世界環(huán)境...
    茶點故事閱讀 41,873評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望岔留。 院中可真熱鬧夏哭,春花似錦、人聲如沸献联。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,357評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至进胯,卻和暖如春用爪,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背胁镐。 一陣腳步聲響...
    開封第一講書人閱讀 33,466評論 1 272
  • 我被黑心中介騙來泰國打工偎血, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人盯漂。 一個月前我還...
    沈念sama閱讀 48,921評論 3 376
  • 正文 我出身青樓颇玷,卻偏偏與公主長得像,于是被迫代替她去往敵國和親就缆。 傳聞我的和親對象是個殘疾皇子帖渠,可洞房花燭夜當晚...
    茶點故事閱讀 45,515評論 2 359

推薦閱讀更多精彩內容