基本面积图

在实际使用过程中，基本折线图有时会无法满足我们的需求，如：为了使数据更加易于区别等，我们需要填充折线图的区域。这时，我们就需要使用基本面积图。
基本面积图是在基本折线图上发展出来的一种图表，故我们只需对上述基本折线图进行进一步设置即可将其变形为基本面积图。

设置方法

在上述代码的series中加入如下代码：

  areaStyle: {}

效果图：

series-line. areaStyle

该属性用来设置区域填充样式。
为了简单起见，在这里我们省略对其子属性的详细设置，采用默认设置。

图表美化

两边的留白太丑了，为了美化图表
我们再在xAxis中添加如下代码：

boundaryGap: false,

xAxis. boundaryGap

用于设置坐标轴两边留白策略，类目轴和非类目轴的设置和表现不一样。
在类目轴中 boundaryGap 可以配置为 true 和 false。默认为 true，这时候刻度只是作为分隔线，标签和数据点都会在两个刻度之间的带(band)中间。

设置完成后，效果如下图所示：

完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
          title:{
           text:'树懒课堂研发费用折线图',
           subtext:'数据纯属虚构',
          },
       xAxis: {
           type: 'category',
           boundaryGap: false,
           data: ['一月', '二月', '三月', '四月', '五月', '六月']
       },
       yAxis: {
           type: 'value'
       },
       series: [{
           data: [920, 801, 964, 1390, 1530, 1620],
           type: 'line',
           areaStyle: {}
       }]
   };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

基本折线图平滑折线图