先上示意图：

代码：

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value',
        // 分隔线
        splitLine: {
            show: true 
        },
        // 坐标轴轴线
        axisLine: {
            show: false
        },
        // 坐标轴刻度
        axisTick: {
            show: false
        },
        // 刻度标签
        axisLabel: {
            show: false
        }
    },
    tooltip:{
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        },
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        // 线条样式
        itemStyle: {
            color: '#3A84FF'
        },
        // 区域填充样式
        areaStyle: {
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0, color: 'rgba(58,132,255, 0.5)' // 0% 处的颜色
                }, {
                    offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
            }
        },
    }]
};

填充颜色属性值：

颜色可以使用 RGB 表示，比如 ‘rgb(128, 128, 128)’，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 ‘rgba(128, 128, 128, 0.5)’，也可以使用十六进制格式，比如 ‘#ccc’。除了纯色之外颜色也支持渐变色和纹理填充

// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 true，则该四个值是绝对的像素位置

areaStyle: {
  color: {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [{
      offset: 0, color: 'rgba(58,132,255, 0.5)'    // 0% 处的颜色
    }, {
      offset: 1, color: 'rgba(58,132,255, 0)' //   100% 处的颜色
    }],
    global: false // 缺省为 false
  }
}

对于x,y,x2,y2和offset这里再上一张示意图：

这六个值改变了会发生什么变化，请自行去体会。

如果本文对你有帮助，请点个赞吧！