echarts折線圖刻度設置?導讀：柱狀圖主要用于表示離散數據的頻數，也是一種基礎可視化圖，下面我們就來聊聊關于echarts折線圖刻度設置?接下來我們就一起去了解一下吧!

echarts折線圖刻度設置

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

作者：王大偉

來源：華章科技

在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

除了簡單的柱狀圖，在實際場景中也會經常用到聚合柱狀圖，以更直觀地比較各維度信息。例如，在原來的代碼中加入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 水平聚合柱狀圖

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

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數據可視化》

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

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!