| (window.webpackJsonp=window.webpackJsonp||[]).push([[106],{400:function(t,e,h){"use strict";h.r(e),e.default='# 区域面积折线图\n\n\b 面积图又叫区域图，与折线图很相近，都可以用来展示随着连续时间的推移数据的变化趋势。区别在于，面积图在折线与类别数据的水平轴（X 轴）之间填充颜色或者纹理，形成一个面表示数据体积。相对于折线而言，被填充的区域可以更好的引起人们对总值趋势的注意，所以面积图主要用于传达趋势的大小，而不是确切的单个数据值。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=area-simple"></iframe>\n\n## 面积图的使用建议\n\n1、面积图要用填充区域来展示数据，当图表上有多个图层时，要尽量确保数据不要重叠。如果无法避免重叠，可以通过将颜色和透明度设置为适当的值，使重叠的数据图可以变得可读。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xHJ-4tL84M"></iframe>\n\n2、面积图适合用来展示二到三组数据，建议最多不要展示超过四组数据系列，否则就如下方错误示例，数据系列过多而导致无法辨识数据，因此要避免在需要比较多个类别和确切的数据值的情况下使用面积图。超过三个系列的非堆叠面积图表是很难阅读的。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M"></iframe>\n\n3、当数据值相距很远时，区域是模糊不清的，此时 \b 不太适合使用面积图展示。如下方错误示例虽然仔细分析能确定只展示了两个类别，乍一看，很可能会误以为图表上显示三种不同的颜色。\n\n<iframe max-width="830" width="100%" height="400"\nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xSkO64PIEG&v=1"></iframe>\n'}}]); |