數(shù)據(jù)可視化，是一種用來將復(fù)雜信息數(shù)據(jù)清晰表述出來的強(qiáng)大有力的工具。

通過可視化信息,我們的大腦可以更有效地合成和保留信息內(nèi)容,增強(qiáng)對(duì)信息的理解。但是如果不正確數(shù)據(jù)可視化，它可能弊大于利。錯(cuò)誤的圖表可以減少數(shù)據(jù)的信息,或者更糟的是,完全背道而馳！

這就是完美的數(shù)據(jù)可視化極其依賴設(shè)計(jì)的原因。

而我們作為前端工程師，再使用echarts時(shí)，不僅僅是選擇合適的圖表類型，更要以一種容易理解的方式來呈現(xiàn)信息，設(shè)計(jì)出更直觀的導(dǎo)航系統(tǒng),讓用戶做盡可能減少理解方面的麻煩，做到一目了然。

當(dāng)然，并不是所有的前端工程師都是數(shù)據(jù)可視化專家，這就是為什么大部分的圖表看上去眼花繚亂，重點(diǎn)不夠突出，簡(jiǎn)直糟糕透了！

這里有10個(gè)關(guān)于 Echarts 的數(shù)據(jù)可視化的案例，包括你可能犯的錯(cuò)誤和快速修復(fù)補(bǔ)救的方法。

錯(cuò)誤1.混亂的餅圖分割

餅圖，是最簡(jiǎn)單的圖表之一。不過偏偏有人喜歡把它搞得很復(fù)雜。

餅圖的設(shè)計(jì)應(yīng)該直觀而清晰，理論上，一個(gè)餅圖不應(yīng)該分割超過5塊。下面就是兩種可以讓用戶的注意力瞬間集中到你要表述的重點(diǎn)的方法。

方法二：最大一塊12點(diǎn)鐘開始,順時(shí)針方向旋轉(zhuǎn)。剩余部分在降序排列,順時(shí)針。

錯(cuò)誤2.在折線圖中使用不連貫的線條

虛線,虛線容易分散注意力。相反,使用實(shí)線和顏色,反而容易區(qū)分彼此的區(qū)別。

錯(cuò)誤3.數(shù)據(jù)排序混亂

你的內(nèi)容應(yīng)該以一種合乎邏輯的和直觀的方式來引導(dǎo)用戶了解數(shù)據(jù)。所以，記得將數(shù)據(jù)類別按字母順序,大小順序,或價(jià)值進(jìn)行排序。

錯(cuò)誤4.數(shù)據(jù)模糊不清

確保沒有數(shù)據(jù)丟失或被設(shè)計(jì)。例如,使用標(biāo)準(zhǔn)的面積圖時(shí)，可以添加透明度,確保用戶可以看到所有數(shù)據(jù)。

錯(cuò)誤5.讓讀者自己解讀

前端工程師應(yīng)該使 Eacharts 圖表盡可能輕松地幫助用戶理解數(shù)據(jù)。例如,在散點(diǎn)圖中添加趨勢(shì)線來強(qiáng)調(diào)的趨勢(shì)。

錯(cuò)誤6.扭曲數(shù)據(jù)

確保所有可視化方式是準(zhǔn)確的。例如,氣泡圖大小應(yīng)該根據(jù)區(qū)域擴(kuò)展,而不是直徑。

錯(cuò)誤7.在一張熱力圖上使用不同的顏色

顏色用得太花，會(huì)給數(shù)據(jù)增加不可承受之重，相反，前端工程師應(yīng)該采用同一色系，或者類比色。

錯(cuò)誤8.條狀圖太胖或太瘦

或許你的報(bào)告很有創(chuàng)意，非常精彩，但是記得圖表設(shè)計(jì)水平也要跟上。條形圖之間的間隔應(yīng)該是1/2欄寬度.

錯(cuò)誤9.很難比較數(shù)據(jù)

比較是展示數(shù)據(jù)差異的好法子，但是如果你的用戶不容易看出差別的話，那么你的比較就毫無意義。確保所有的數(shù)據(jù)都是呈現(xiàn)在用戶面前,選擇最合適的比較方法。

錯(cuò)誤10：用3D圖表

雖然它們看起來很酷，但是3d形狀可以扭曲感知,因此扭曲數(shù)據(jù)。堅(jiān)持2次元，確保數(shù)據(jù)準(zhǔn)確。

怎么樣，上述10條，你中槍了沒有？

愿我們都可以設(shè)計(jì)出重點(diǎn)突出 高逼格的圖表