echarts折線圖刻度設置?導讀：柱狀圖主要用于表示離散數據的頻數，也是一種基礎可視化圖，下面我們就來聊聊關于echarts折線圖刻度設置?接下來我們就一起去了解一下吧!
導讀：柱狀圖主要用于表示離散數據的頻數，也是一種基礎可視化圖。
作者：王大偉
來源：華章科技
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數據可視化》
推薦語：ECharts官方推薦，系統全面、由淺入深、注重實操，帶領讀者快速從新人到高手。
更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!
zpostcode 
Recruit 
weather 
mreligion 
Yellowpages 
sport 
constellation 
shopping 
name 
game 
directory 
literature 
Word 
tour 
furnish 
Lottery 
tftnews 
lyrics 
News 
digital 
car 
dir 
Edu 
Finance 
