echarts折线图背景颜色渐变

一、效果图!

![(https://i-blog.csdnimg.cn/direct/72de8a0a6a6c4d2b911e1be5a1c27da9.png)

二、代码

{
    title: {
      text: '单位: 种',
      textStyle: {
        color: '#dbdddf',
        fontSize: 10
      }
    },
    grid: {
      top: '15%',
      // containLabel: true // 设置 grid 组件包含坐标轴的标签
      bottom: '25',
      left: '40',
      right: '15'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999'
        }
      }
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        axisTick: {
          show: false
        },
        data: ['E190', 'AJ27', 'B38M', 'B737', 'A319', 'A21N', 'A20N'],
        axisLabel: {
          fontSize: 10,
          color: '#8b9299'
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        min: 0,
        max: 1000,
        interval: 200,
        axisLabel: {
          fontSize: 10,
          color: '#8b9299'
        },
        //坐标轴内行线样式样式
        splitLine: {
          show: false
        },
        splitArea: {
            show: true,
            areaStyle: {
                color: ['#f0f0f0', '#e0e0e0'] // 设置每行间隔颜色
            }
        }
        axisLine: { show: true, lineStyle: { color: '#425769' } } //y轴线显示及颜色
      }
    ],
    series: [
      {
        data: [700, 780, 720, 600, 630, 670, 820],
        type: 'line',
        symbolSize: 4, //Number类型 设置圆点大小
        smooth: true, //true曲线; false折线
        lineStyle: {
          width: '1px' // 设置线条粗细为5
        },
        itemStyle: {
          normal: {
            color: '#1cc697', //改变折线点的颜色
            lineStyle: {
              color: '#1cc697', //改变折线颜色
              type: 'solid'
            }
          }
        },
        areaStyle: {
          //折线图颜色半透明
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(31, 218, 163, 0.4)' // 上部颜色
            },
            {
              offset: 1,
              color: 'rgba(31, 218, 163, 0)' // 下部颜色
            }
          ])
        }
      }
    ]
  }