echarts折線圖美化-曲線區域顏色漸變

最近做的可視化圖表有這樣的需求：曲線區域顏色漸變，

option = {

    tooltip : {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            },
        }
    },
    legend: {
        data:['郵件營銷','搜索引擎'],
        x: 'left'
    },
    color: ["#0080ff","#4cd5ce"],
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis : [
        {
            type : 'category',
            boundaryGap : false,
            data : ['週一','週二','週三','週四','週五','週六','週日']
        }
    ],
    yAxis : [
        {
            type : 'value'
        }
    ],
    series : [

        {
            name:'郵件營銷',
            type:'line',
            stack: '總量',
            itemStyle: {  
                normal: {   //顏色漸變函數 前四個參數分別表示四個位置依次爲左、下、右、上
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{
                            offset: 0, color: '#d7f4f8' // 0% 處的顏色
                        }, {
                            offset: 0.5, color: '#eefcfd' // 100% 處的顏色
                        }, {
                            offset: 1, color: '#fff' // 100% 處的顏色
                        }]
                    ),  //背景漸變色 
                    lineStyle: {        // 系列級個性化折線樣式  
                        width: 3,  
                        type: 'solid',  
                         color: "#4fd6d2"
                    }
                },  
                emphasis: {  
                    color: '#4fd6d2',  
                    lineStyle: {        // 系列級個性化折線樣式  
                        width:2,  
                        type: 'dotted',  
                        color: "#4fd6d2" //折線的顏色
                    }  
                }  
            },//線條樣式  
            symbolSize:5, //折線點的大小
            areaStyle: {normal: {}},
            data:[320, 332, 601, 134, 120, 230, 210]
        },
        {
            name:'搜索引擎',
            type:'line',
            stack: '總量',
            itemStyle: {  
                normal: { //顏色漸變函數 前四個參數分別表示四個位置依次爲左、下、右、上
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{
                            offset: 0, color: '#81befd' // 0% 處的顏色
                        }, {
                            offset: 0.4, color: '#e4f2ff' // 100% 處的顏色
                        }, {
                            offset: 1, color: '#fff' // 100% 處的顏色
                        }]
                    ), //背景漸變色    
                    lineStyle: {        // 系列級個性化折線樣式  
                        width: 3,  
                        type: 'solid',  
                        color: "#0180ff" //折線的顏色
                    }  
                },  
                emphasis: {
                    color: '#0180ff',   
                    lineStyle: {        // 系列級個性化折線樣式  
                        width: 2,  
                        type: 'dotted',  
                        color: "0180ff" 
                    }  
                }  
            },//線條樣式
            symbolSize:5, //折線點的大小
            label: {
                normal: {
                    show: true,
                    position: 'top'
                }
            },
            areaStyle: {normal: {}},
            data:[820, 932, 901, 934, 1290, 1330, 1320]
        }
    ]
};

要想要實現曲線區域顏色漸變

//折線圖區域顏色漸變
color: new echarts.graphic.LinearGradient(0, 0, 0, 1,[{
      offset: 0, color: '#81befd' // 0% 處的顏色
     }, {
         offset: 0.4, color: '#e4f2ff' // 100% 處的顏色
     }, {
         offset: 1, color: '#fff' // 100% 處的顏色
     }]
 ), //背景漸變色    

效果如下