堆叠柱状图

有时候,我们不仅希望看到各个系列的数据,还希望看到它们总和的变化趋势。在这种情况下,使用堆叠柱状图是一个很好的选择。顾名思义,在堆叠柱状图中,同一类目下的数据会堆叠在同一个柱子上。柱子的总体高度表达了总量的变化。

在 ECharts 中实现堆叠柱状图非常简单。你只需要为一组系列设置相同的 stack 字符串值。具有相同 stack 值的系列会被堆叠在一起。

option = {
  xAxis: {
    data: ['A', 'B', 'C', 'D', 'E']
  },
  yAxis: {},
  series: [
    {
      data: [10, 22, 28, 43, 49],
      type: 'bar',
      stack: 'x'
    },
    {
      data: [5, 4, 3, 5, 10],
      type: 'bar',
      stack: 'x'
    }
  ]
};
在线示例

在这种情况下,第二个系列的位置是基于第一个系列的位置的,它在第一个系列的高度之上进行累加。因此,从第二个系列的位置,你可以看出两者之和的变化趋势。

stack 的值决定了哪些系列会被堆叠在一起。理论上,'stack' 的具体取值并没有实际意义。然而,为了方便阅读,我们更倾向于使用一些具有暗示性的字符串。

例如,假设有一个包含 4 个系列的图表,用于统计男性和女性的人数。“成年男性(adult male)”和“男孩(boy)”需要堆叠,而“成年女性(adult female)”和“女孩(girl)”需要堆叠。在这种情况下,推荐将 stack 的值分别设为 'male''female'。虽然使用诸如 'a''b' 这样无意义的字符串也能达到相同的效果,但代码的可读性会变差。

贡献者 在 GitHub 上编辑此页

pissang pissang