堆叠柱状图
有时,我们不仅希望分别计算系列,还希望计算总和的趋势。使用堆叠柱状图实现这一点是一个不错的选择。顾名思义,在堆叠柱状图中,同一类别的数据将堆叠在一列中。柱状图的总高度说明了总量的变化。
有一种简单的方法可以使用 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'
这样的无意义字符串可以实现相同的效果,但代码的可读性会更差。