堆叠条形图(绘制堆叠条形图)

一、什么是堆叠条形图

堆叠条形图是一种数据可视化的方式，它展示了不同组别内各个项目的比较，并且将每个项目分解成不同的组成部分，通过堆叠显示每个部分在整体中的占比关系。

堆叠条形图基于条形图，将各个组别内各个项目的数据值沿着一个共同的轴线排列，不同于简单条形图所表示的只有一种数值。

二、堆叠条形图的优点

1、方便比较：堆叠条形图可以将各个组别内各个项目的比较放在同一个图表内，直接通过不同颜色的叠加来进行比较。

2、清晰展示占比：每个项目被分解成不同的组成部分，展示了每个部分在整体中的占比关系。

3、易于分析：数据分层展示，可以方便的分析和比较每个部分对于整个数据集的贡献。

三、堆叠条形图的应用场景

1、市场营销数据分析：可以展示不同市场营销策略或产品在不同区域和市场的销售情况。

2、人口统计数据分析：可以展示不同年龄段、性别、教育水平的人口数量和比例。

3、企业经营数据分析：可以展示不同产品线、流程的收入和成本，对于企业经营决策提供支持。

四、实现堆叠条形图的代码实例

// 引入echarts库
import echarts from 'echarts';

// 数据
const data = [
  {name: 'A', 'value1': 30, 'value2': 70},
  {name: 'B', 'value1': 50, 'value2': 50},
  {name: 'C', 'value1': 40, 'value2': 60},
  {name: 'D', 'value1': 60, 'value2': 40},
]

// 初始化实例
const myChart = echarts.init(document.getElementById('chart'));

// 配置项
const option = {
  legend: {
    data: ['value1', 'value2'],
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow',
    }
  },
  xAxis: {
    type: 'value',
  },
  yAxis: {
    type: 'category',
    data: data.map(item => item.name),
  },
  series: [
    {
      name: 'value1',
      type: 'bar',
      stack: '总量', // 堆叠在一起的key
      data: data.map(item => item.value1),
    },
    {
      name: 'value2',
      type: 'bar',
      stack: '总量', // 堆叠在一起的key
      data: data.map(item => item.value2),
    },
  ]
};

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);

五、堆叠条形图的注意事项

1、数据量过多：如果数据量过多，在条形之间的空隙越来越小时，很难分辨哪个组别属于哪个类别。

2、数据总和：堆叠条形图展示的总和，对于不同的项目可能并没有意义，需要确保展示的切片或部分能够有效传达信息。

3、数据百分比：确保标记了数据的百分比或实际数值，便于读者正确理解。

六、结论

堆叠条形图对于数据层次分析和对比非常有用，可以进行多维度、多组别、多层级数据展示和比较，然而需要注意数据总和和展示的数据切片的合理性。