用完百度開源的可視化神器，我總結了一下可視化經驗

1

如何選擇合適的可視化類型

可視化是藉助圖形化的方法，清晰有效地將數據展現出來。當有可視化需求時，咱們應該先了解需求是什麼。

例如需求是查看「近六個月的銷量狀況」，首先咱們能夠肯定這裏會涉及兩個維度展現，一個維度是時間序列（在這裏是「近六個月」），另外一個維度是每月的銷量。

展現兩個維度的可視化方法不少，例如散點圖、折線圖、柱狀圖等，在這裏很顯然選擇折線圖較爲合適，爲何呢？由於折線圖適合展現連續的時間序列數據，如圖1所示。經過折線圖，能夠清晰觀察出銷量隨時間的變化狀況。

該折線圖對應的具體代碼以下：

   
   
   
    
    
             
    
    

    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
    
    
    
     
     
              
     
   
   
   
    
    
             
    
    
option = { title: { text: '近六個月銷量狀況', left: 'center' }, xAxis: { type: 'category', data: ['2020-3', '2020-4', '2020-5', '2020-6', '2020-7', '2020-8'] }, yAxis: { type: 'value' }, series: [{ data: [820, 932, 901, 934, 1290, 1330], type: 'line' }]};

圖1　某商品近六個月銷量狀況

每種可視化都有其適合的應用場合，須要在明確要展現的信息以後合理選擇可視化類型。這裏簡單總結下：

• 若是須要展現數據的分佈狀況，能夠考慮散點圖、箱線圖、柱狀圖、直方圖；

• 若是須要展現數據的變化趨勢，能夠考慮折線圖和雙軸圖；

• 若是須要展現對比效果，能夠考慮柱狀圖、餅圖、雷達圖；

• 若是須要展現數據的部分與總體關係，能夠考慮面積圖、餅圖、旭日圖、堆積柱狀圖、矩形樹圖；

• 若是須要展現數據之間的關係，能夠考慮散點圖、氣泡圖、桑基圖。

• 若是須要展現文本信息的重點，能夠考慮詞雲圖；

• 若是須要展現流程中每一步的轉化狀況，能夠考慮漏斗圖。

2

可視化配色需注意什麼

 

若是想要本身搭配色彩，其實有不少能夠優化和注意的點，總結以下。

若是是新手，建議直接使用色彩主題，由於色彩主題是專業人士設置搭配的，不只美觀並且使用方便，無須本身花大量時間搭配。

若是本身搭配，極可能搭配好久也得不到想要的效果，因此，若是你以爲某套色彩主題合適就大膽使用吧。ECharts提供了13種可選的色彩主題方案，如圖2所示，點擊左上角的下載主題便可下載使用。

圖2ECharts的色彩主題

若是須要展現的內容有着符合人類感知的顏色，建議直接使用該顏色。例如紅色常常和熱力圖的熱量大小搭配使用，藍色和降水量搭配使用。

例如，圖3表明某設備在一週的不一樣時間的內部溫度熱力值，溫度越高，熱力值越大。從圖3中能夠一目瞭然地觀察出溫度最高的時間是週日的上午九點（9a）。

圖3　某設備在一週的不一樣時間的內部溫度熱力值

通常來講，標準的可視化看板至少須要6種顏色，若是配色不充分，在不一樣可視化類型中會影響表達效果。

色彩三要素包括色相、明度和飽和度。色相就是咱們平時說的顏色，例如紅色的花朵、綠色的樹葉，這裏的花朵和樹葉就具備不一樣的色相；明度指色彩的明暗程度，也是咱們平時說的顏色深淺度；而飽和度指的是色彩的鮮豔程度。

當有較多數據類別須要展示時，若是隻是明度的變化，例如只有明度變化的漸變色，在表示和展示不一樣元素單元時不可以明顯區分，因此須要同時兼具色相和明度的變化，讓用戶經過視覺感覺更好的定位元素和數據，如圖4所示。

當只須要展現某個單一指標數值大小比較和變化時，建議使用單一顏色的漸變效果，也就是顏色明度的變化表示數值大小，通常明度越大，表示的數值越小。

固然，你沒必要徹底遵循以上的內容，只是做爲參考和建議，由於不一樣場景的可視化要求不一樣，受衆不一樣，具體到某個場景和某個問題，有不少細節須要在實踐中反覆嘗試並不斷積累經驗，搭配出更合適的色彩效果。

圖4　同時兼具色相和明度變化的圖

 

3

追求動態和酷炫效果有錯嗎

作可視化時，總但願製做的內容能讓人眼前一亮，因而不少人將「眼前一亮」理解爲動態和色彩豔麗的酷炫效果。

首先，追求動態和酷炫的效果，自己並無什麼問題，可是人們每每會由於可視化內容是動態而將注意力更多花費在動態內容上，例如某地區人口遷徙的圖中有多條曲線鏈接遷入和遷出的地區，並加入箭頭表明人們的遷入與遷出方向，可是爲了酷炫，在曲線上加入某些圖標（例如飛機圖標）表明人口的流動方向。

首先，這幅圖確實十分酷炫，可是冷靜下來會發現各個地區的人口流向曲線已經交叉，會影響人們看圖的直觀判斷，若是此時你再加上動態圖標，會干擾人們的觀察和判斷，而將圖標改成光束的傳播效果是否是更好呢？因此善用圖標可以對一幅可視化圖的表現力錦上添花，濫用也會使結果拔苗助長。

除了動態，酷炫的色彩也是人們經常使用的，目的是爲了讓可視化再也不平淡無奇。例如在一個柱狀圖，對每個柱子填充一種顏色。你可能會問，爲何不能用多種顏色填充呢？一種顏色太平淡了，多種顏色才能凸顯這幅可視化！

若是你是這樣想的，那麼請思考一下柱狀圖的目的是什麼？柱狀圖是爲了表達數據的分佈狀況，因此它的關注點應該是柱子的高度，而不是柱子的顏色。固然，你能夠用漸變色來增強柱子高度的展現，例如柱子越高顏色越深，這是合理的。

以上只是兩個常見的例子，在咱們製做可視化時，對於動態和色彩的選擇須要謹慎，你首先要明確爲何使用這些？使用後比使用前有什麼好處？若是能回答這些問題，再去使用。

除此以外，當數據量很大時，大量動態酷炫效果可能對前端渲染提出了挑戰，因此須要根據實際狀況測試和使用這些特效。

做者簡介：

王大偉，畢業於華東理工大學，碩士學歷，目前就任於平安金融壹帳通，從事數據挖掘算法工做，擅長ECharts、Python、天然語言處理、數據分析挖掘、機器學習。曾獲微軟最有價值專家（MVP）榮譽稱號。屢次與微軟Reactor合做開展線上線下公開課，曾爲中國電信、海通證券等企業提供技術培訓，線上線下課程累計學員超3萬名。「數據科學雜談」微信公衆號創始人。

本文摘編於《ECharts數據可視化：入門、實戰與進階》

凹凸福利

老規矩， 限時400幣帶回家！

點擊閱讀原文直接兌換！

本文分享自微信公衆號 - 凹凸數據（alltodata）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。