堆叠柱状图

有时,我们希望不仅分别了解每个系列的数据,还希望了解总和的趋势。 使用堆叠柱状图来实现这是一个不错的选择。 顾名思义,在堆叠柱状图中,同一类别中的数据将堆叠在一列中。 柱子的总高度解释了总量的变化。

使用 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 个系列的图表,统计了男性和女性的数量。“成年男性”和“男孩”需要堆叠在一起,而“成年女性”和“女孩”需要堆叠在一起。 在这种情况下,stack 的提示性值是 'male''female'。 虽然像 'a''b' 这样的无意义字符串可以达到相同的效果,但代码的可读性会更差。

贡献者 在 GitHub 上编辑此页面

pissang pissang