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

一、什么是堆叠条形图

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

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

二、堆叠条形图的优点

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