折线区域图echarts 折线配置项内容和展示

      option = {
    backgroundColor:'#000E1A',
    grid: {
      top: '5%',
      bottom: '10%', // 也可设置left和right设置距离来控制图表的大小
      left: '10%',
      right: '0%'
    },
    // backgroundColor: '#1c2431', // 地图背景色
    color: ['#ff6b75', '#27b6ff'],
    tooltip: {
      trigger: 'axis',
      axisPointer: { // 坐标轴指示器，坐标轴触发有效
        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
      }
    },
    legend: {
      data: ['支出情况', '收入情况'],

      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        fontSize: 14,
        color: 'fff',
        padding: [3, 8, 0, 2]
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['2020-10',
        '2020-11',
        '2020-12',
        '2021-01',
        '2021-02',
        '2021-03',
        '2021-04',
        '2021-05'],
      axisLabel: {
        textStyle: {
          fontSize: '12',
          color: '#fff'
        }
      }
    },
    yAxis: {
      type: 'value',
      max: 520,
      axisLabel: {
        textStyle: {
          fontSize: '12',
          color: '#9babb3'
        }
      },
      'splitLine': {
        'lineStyle': {
          'type': 'dashed',
          color: 'rgba(255,225,225,0.2)'
        }
      }
    },
    // 因结构不同 vue版echarts请查看https://blog.csdn.net/qq_42221334/article/details/96315748
    series: [{
      name: '支出情况',
      data: [0, 180, 400, 300, 130, 150, 400, 100],
      type: 'line',
      symbol: 'none', // 取消折点圆圈
      areaStyle: {}
    },
    {
      name: '收入情况',
      data: [0, 500, 280, 180, 150, 300, 200, 0],
      type: 'line',
      symbol: 'none', // 取消折点圆圈
      areaStyle: {}
    }
    ]

  
};