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

Create a third series with the difference between the minimum and maximum values. This data series is used only to be able to color the area between minimum and maximum values. The stackStrategy option works from version v5.3.3

let max = [10, 22, 28, 20, 23];
let min = [8, 15, 23, 18, 19];
let dif = max.map((v, i) => min[i] - v); // [-2, -7, -5, -2, -4]

option = {
      xAxis: {
        data: ['A', 'B', 'C', 'D', 'E']
      },
      yAxis: {},
      tooltip: {
            trigger: 'axis',
      },
      series: [
        {
          data: max,
          type: 'line',
          stack: 'x',                  // stack name
        },
        {
          data: dif,
          type: 'line',
          stack: 'x',                  // stack name
          stackStrategy: 'positive',   // strategy
          lineStyle: {
            opacity: 0                 // hide line
          },
          symbol: 'none',              // hide symbol
          areaStyle: {
            color: '#ccc'
          },
          tooltip: {
            show: false                // hide value on tooltip
          }
        },
        {
          data: min,
          type: 'line',
        },
      ]
    };