導讀：柱狀圖主要用于表示離散數據的頻數，也是一種基礎可視化圖。

作者：王大偉

來源：大數據DT（ID：hzdashuju）

01?簡單的柱狀圖

在ECharts中制作柱狀圖也十分簡單，通過將series中的type設置為bar即可，代碼如下：

option?=?{xAxis:?{type:?'category',data:?['Mon',?'Tue',?'Wed',?'Thu',?'Fri',?'Sat',?'Sun']},yAxis:?{type:?'value'},series:?[{data:?[100,?150,?120,?90,?50,?130,?110],type:?'bar'}] };

可視化結果如圖4-8所示。

▲圖4-8 簡單的柱狀圖

我們同樣可以在代碼中添加label以顯示具體數值，例如在每個柱子上顯示對應數值，代碼如下：

option?=?{xAxis:?{type:?'category',data:?['Mon',?'Tue',?'Wed',?'Thu',?'Fri',?'Sat',?'Sun']},yAxis:?{type:?'value'},series:?[{data:?[100,?150,?120,?90,?50,?130,?110],type:?'bar',label:?{show:?true,position:?'top'},}]? };

可視化結果如圖4-9所示。

▲圖4-9?簡單的柱狀圖加入label

02?聚合柱狀圖

除了簡單的柱狀圖，在實際場景中也會經常用到聚合柱狀圖，以更直觀地比較各維度信息。例如，在原來的代碼中加入legend，再加入一批數據，并將x軸的星期改為不同商場，代碼如下：

option?=?{title:?{text:?'產品一周銷量情況'},xAxis:?{type:?'category',data:?['A商場',?'B商場',?'C商場',?'D商場',?'E商場',?'F商場',?'G商場']},yAxis:?{type:?'value'},legend:?{data:?['A產品',?'B產品']},series:?[{name:?'A產品',data:?[100,?150,?120,?90,?50,?130,?110],type:?'bar',label:?{show:?true,position:?'top'}},{name:?'B產品',data:?[120,?130,?110,?70,?60,?110,?140],type:?'bar',label:?{show:?true,position:?'top'}}] };

可視化結果如圖4-10所示。

結合圖4-10，我們可以非常直觀地比較不同商場的不同產品的銷售情況。

▲圖4-10?聚合柱狀圖

有時也會用到水平聚合柱狀圖，具體要如何實現呢？交換xAxis和yAxis中的內容，同時將數字label中的position由top改為right即可，代碼如下：

option?=?{title:?{text:?'產品一周銷量情況'},xAxis:?{type:?'value'???},yAxis:?{type:?'category',data:?['A商場',?'B商場',?'C商場',?'D商場',?'E商場',?'F商場',?'G商場']},legend:?{data:?['A產品',?'B產品']},series:?[{name:?'A產品',data:?[100,?150,?120,?90,?50,?130,?110],type:?'bar',label:?{show:?true,position:?'right'}},{name:?'B產品',data:?[120,?130,?110,?70,?60,?110,?140],type:?'bar',label:?{show:?true,position:?'right'}}] };

可視化結果如圖4-11所示。

▲圖4-11?水平聚合柱狀圖

03 堆疊柱狀圖

除上述幾種柱狀圖，堆疊柱狀圖也是非常常用的。下面我們來制作一個不同產品在不同商場銷量的堆疊柱狀圖，代碼如下：

option?=?{tooltip:?{trigger:?'axis',axisPointer:?{???????????type:?'shadow'}},legend:?{data:?['A商場',?'B商場',?'C商場',?'D商場',?'E商場']},xAxis:?{type:?'value'},yAxis:?{type:?'category',data:?['A產品',?'B產品',?'C產品',?'D產品',?'E產品',?'F產品',?'G產品']},series:?[{name:?'A商場',type:?'bar',stack:?'總量',label:?{show:?true,position:?'inside'},data:?[320,?302,?301,?334,?390,?330,?320]},{name:?'B商場',type:?'bar',stack:?'總量',label:?{show:?true,position:?'inside'},data:?[320,?332,?301,?334,?490,?330,?310]},{name:?'C商場',type:?'bar',stack:?'總量',label:?{show:?true,position:?'inside'},data:?[220,?182,?191,?234,?290,?330,?310]},{name:?'D商場',type:?'bar',stack:?'總量',label:?{show:?true,position:?'inside'},data:?[150,?212,?201,?154,?190,?330,?410]},{name:?'E商場',type:?'bar',stack:?'總量',label:?{show:?true,position:?'inside'},data:?[420,?532,?501,?234,?290,?330,?320]}] };

可視化結果如圖4-12所示。

▲圖4-12?堆疊柱狀圖

在上述代碼中，tooltip中的type為shadow，所以當鼠標懸停在柱子上時，會顯示陰影效果。這里的堆疊效果主要是通過stack參數決定的，當我們刪除A商場的stack參數，并將B商場和C商場的stack參數改為“總量1”之后，其可視化結果如圖4-13所示。所以可以這樣理解：stack參數相同的柱子會堆疊在一起，如果沒有這個參數，則該部分不堆疊。

▲圖4-13?堆疊柱狀圖調整堆疊效果

關于作者：王大偉，畢業于華東理工大學，碩士學歷，目前就職于平安金融壹賬通，從事數據挖掘算法工作，擅長ECharts、Python、自然語言處理、數據分析挖掘、機器學習。曾獲微軟最有價值專家（MVP）榮譽稱號。

本文摘編自《ECharts數據可視化：入門、實戰與進階》，經出版方授權發布。

延伸閱讀《ECharts數據可視化》

長按上方二維碼了解及購買

轉載請聯系微信：DoctorData

推薦語：ECharts官方推薦，系統全面、由淺入深、注重實操，帶領讀者快速從新人到高手。

劃重點????

干貨直達????

• 人工智能三大關鍵能力，終于有人講明白了
  

• 數據缺失值的3種處理方式，終于有人講明白了
  

• 5G時代不可或缺的關鍵技術：詳解邊緣計算參考架構3.0
  

• 6個關鍵步驟，手把手教你構建圖模型

更多精彩????

在公眾號對話框輸入以下關鍵詞

查看更多優質內容！

PPT?|?讀書?|?書單?|?硬核?|?干貨?|?講明白?|?神操作

大數據?|?云計算?|?數據庫?|?Python?|?可視化

AI?|?人工智能?|?機器學習?|?深度學習?|?NLP

5G?|?中臺?|?用戶畫像?|?1024?|?數學?|?算法?|?數字孿生

據統計，99%的大咖都完成了這個神操作

????

總結

以上是生活随笔為你收集整理的手把手教你用ECharts画柱状图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。