堆疊柱狀圖詳解

一、堆疊柱狀圖怎麼做

堆疊柱狀圖是一種數據可視化方法，可以將多個數據堆疊在一起，以形成一個整體，同時又能夠展示出各個部分的構成比例。相較於一般柱狀圖，堆疊柱狀圖更能夠比較直觀地顯示出各個類別之間的差異。

具體實現方法如下：

// JavaScript代碼
var data = [
  {name:'類別A',value:[10,20,30,40]},
  {name:'類別B',value:[30,40,50,60]},
  {name:'類別C',value:[50,60,70,80]},
]
var mychart = echarts.init(document.getElementById('mychart'))
var option = {
  tooltip:{},
  xAxis:{data:['1月','2月','3月','4月']},
  yAxis:{},
  series:data.map(item=>{
    return {name:item.name,type:'bar',stack:'總量',data:item.value}
  })
}
mychart.setOption(option)

二、繪製堆疊的水平柱狀圖

水平的堆疊柱狀圖可以更加直觀地比較不同類別之間的數量差異。實現方法與豎直柱狀圖相似，只需要將xAxis和yAxis交換即可。

具體實現方法如下：

// JavaScript代碼
var data = [
  {name:'類別A',value:[10,20,30,40]},
  {name:'類別B',value:[30,40,50,60]},
  {name:'類別C',value:[50,60,70,80]},
]
var mychart = echarts.init(document.getElementById('mychart'))
var option = {
  tooltip:{},
  yAxis:{data:['1月','2月','3月','4月']},
  xAxis:{},
  series:data.map(item=>{
    return {name:item.name,type:'bar',stack:'總量',data:item.value}
  })
}
mychart.setOption(option)

三、堆疊柱狀圖示例

下面是一個簡單的堆疊柱狀圖示例，展示了三個類別在不同時間段內的銷售情況。