| (window.webpackJsonp=window.webpackJsonp||[]).push([[108],{402:function(n,t,e){"use strict";e.r(t),t.default='# 堆叠面积图\n\n堆积面积图是一种特殊的面积图，可以用来比较在一个区间内的多个变量。堆叠面积图和面积图的区别在于，堆叠面积图每个数据系列的起点都是基于前一个数据系列绘制的，也就是每度量一行就要填满行与行之间的区域。\n\n如果有多个数据系列，并想分析每个类别的部分到整体的关系，并展现部分量对于总量的贡献时，使用堆积面积图是非常合适的选择。例如下图显示某个销售员对总销售额的贡献。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xHySthj74z">\n</iframe>\n\n有两种不同的堆积面积图类型：\n\n- <b>传统的堆积面积图</b>：直接使用原始值堆叠，显示整个过程如何变化。\n- <b>百分比堆积面积图</b>：百分比堆积显示不同部分之间的关 系如何随时间而变化。其中累积的总数不重要，重要的是显示出类别分布在整体中的作用。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xSyBN2i7Vf">\n</iframe>\n\n## 堆叠面积图的使用建议\n\n1、图表有重叠的数据时，类别数量越多，重叠越多，因此可见度越低。如果使用面积图（如下示例）时会因为系列的重叠而无法阅读。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M">\n</iframe>\n\n那同样的数据，换成使用堆叠面积图展示，则相对更容易阅读。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xSyBN2i7Vf">\n</iframe>\n\n<div class="article-look-outside">\n\t<div class="article-look-inside" style="padding-bottom:50%">\n\t <iframe class="article-look-content"\n\t src="https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M">\n\t </iframe>\n\t</div>\n</div>\n\n2、虽然多数据系列时堆叠面积图比面积图有更好的展示效果，但依然不建议堆叠面积图中包含过多数据系列，最好不要多于 7 个，以免数据难以辨识。\n\n3、堆积面积图要展示部分和整体之间的关系，所以不能用于包含负值的数据的展示。\n\n4、建议堆叠面积图中把变化量较大的数据放在上方，变化量较小的数据放在下方会获得更加的展示效果。\n'}}]); |