堆叠柱状图详解

一、堆叠柱状图怎么做

堆叠柱状图是一种数据可视化方法，可以将多个数据堆叠在一起，以形成一个整体，同时又能够展示出各个部分的构成比例。相较于一般柱状图，堆叠柱状图更能够比较直观地显示出各个类别之间的差异。

具体实现方法如下：

// 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)

三、堆叠柱状图示例

下面是一个简单的堆叠柱状图示例，展示了三个类别在不同时间段内的销售情况。