Echarts how to highlight area between 2 line charts

Question

I want to develop an echart that has the area between 2 linecharts highlighted in a color. To achieve this, I made use of stacked area chart. I set the color of the upper area as the highlight color and color of lower area as white so as to achieve my result. However, the color of bigger area is merging with the lower area and producing a diff color. How can I set the colors of 2 areas to not interfere? Is there a way to give z-index to the areas for this?

Here is my code:

option = {
    title: {
        text: '堆叠区域图'
    },
    tooltip : {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
        }
    },
    legend: {
        data:['邮件营销','联盟广告','视频广告','直接访问','搜索引擎']
    },
    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',
        smooth: true,
            areaStyle: {color: 'red'},
            data:[170, 182, 161, 184, 160, 180, 165]
        },
        {
            name:'邮件营销',
            type:'line',
        smooth: true,
            areaStyle: {color: 'white'},
            data:[120, 132, 111, 134, 110, 130, 115]
        }
    ]
};

What I have achieved:

Answer 1

You need to increase the opacity of the below chart:

option = {
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            z: -1, // optional, makes the yAxis' splitLines appear on top
            data: [170, 182, 161, 184, 160, 180, 165],
            smooth: true,
            type: 'line',
            areaStyle: {}
        },
        {   
            z: -1, // optional, makes the yAxis' splitLines appear on top
            data: [120, 132, 111, 134, 110, 130, 115],
            smooth: true,
            type: 'line',
            areaStyle: {
                color: 'rgb(243, 243, 243)', // color of the background
                opacity: 1, // <--- solution
            },
        }
    ]
};

Answer 2

The above answer only works if the series do not cross the X axis. Here is the configuration that works if your data is both above and below 0 for both upper and lower boundaries:

data = [{
    "date": "2012-08-28",
    "l": -2.6017329022,
    "u": 0.2949717757
},
{
    "date": "2012-08-29",
    "l": 0.1166963635,
    "u": 0.4324086347
},
{
    "date": "2012-08-30",
    "l": -0.8712221305,
    "u": 0.0956413566
},
{
    "date": "2012-08-31",
    "l": -0.6541832008,
    "u": 0.0717120241
},
{
    "date": "2012-09-01",
    "l": -1.5222677907,
    "u": -0.2594188803
},
{
    "date": "2012-09-02",
    "l": -1.4434280535,
    "u": 0.0419213465
},
{
    "date": "2012-09-03",
    "l": -0.3543957712,
    "u": 0.0623761171
}];

myChart.setOption(option = {
    xAxis: {
        type: 'category',
        data: data.map(function (item) {
            return item.date;
        })
    },
    yAxis: {
    },
    series: [
        {
        z: -1,
        name: 'U',
        type: 'line',
        data: data.map(function (item) {
            return item.u;
        }),
        lineStyle: {
            opacity: 0
        },
        areaStyle: {
            color: '#ccc',
            origin: "start"
        },
        symbol: 'none'
    },
    {
        name: 'L',
        type: 'line',
        data: data.map(function (item) {
            return item.l;
        }),
        lineStyle: {
            opacity: 0
        },
        z: -1, 
        areaStyle: {
            color: "white",
            origin: "start",
          //  opacity: 1 
        },
        symbol: 'none'
    }]
});