Echarts how to highlight area between 2 line charts - vue.js

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'
}]
});

Answer 3

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',
},
]
};