| (window.webpackJsonp=window.webpackJsonp||[]).push([[44],{338:function(e,t,r){"use strict";r.r(t),t.default='# Area Line Chart\n\bThe area line chart is similar to the basic line chart. They both described the trend of data over time. The difference is that the fill color and texture of the area line chart created a surface that represents the data volume. For a line chart, the filling area can draw attention for users to the trend of the total value. Therefore, the area line chart is mostly used to convey the size of the trend but not single values.\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## Suggestion for Using Area Line Chart\n\n1. The area line chart uses the filling is to represent the data. While there are several layers in one chart, try to make sure that the data are not overlapping. If the overlapping is not avoidable, you define the color and opacity to an appropriate value to make the chart readable. \n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xHJ-4tL84M"></iframe>\n\n2. The area line chart is strong to display two or three categories of data. We suggest not to show more than 4 groups, or there will be too many data series to identify the data like the following chart. So, we need to avoid an area line chart that has more than three series in one chart.\n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xHyNDxOo4M"></iframe>\n\n3. You should not use the area line chart while there are no boundaries between data values. As shown below, it is familiar that there are 3 different colors at first glance.\n\n<iframe max-width="830" width="100%" height="400" \nsrc="https://gallery.echartsjs.com/view-lite.html?cid=xSkO64PIEG&v=1"></iframe>\n'}}]); |