Vue.js Echarts如何突出显示两个折线图之间的区域

我想开发一个echart，它用一种颜色突出显示两个线形图之间的区域。为了实现这一点，我使用了堆叠面积图。我将上部区域的颜色设置为高光颜色，下部区域的颜色设置为白色，以达到我的效果。然而，较大区域的颜色正在与较低区域合并，并产生一种不同的颜色。如何将两个区域的颜色设置为不相互干扰？有没有一种方法可以为这些区域提供z指数

这是我的密码：

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

我所取得的成就：

---

您需要增加下图的不透明度：

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

选项={
xAxis：{
类型：'类别'，
边界间隙：false，
数据：[周一、周二、周三、周四、周五、周六、周日]
},
亚克斯：{
类型：“值”
},
系列：[
{
z:-1，//可选，使yAxis的拆分线显示在顶部
数据：[170182161184160180165]，
平滑：是的，
键入：“行”，
区域样式：{}
},
{   
z:-1，//可选，使yAxis的拆分线显示在顶部
数据：[120132111134110130115]，
平滑：是的，
键入：“行”，
区域样式：{
颜色：“rgb（243243243243）”，//背景颜色
不透明度：1，//上述答案仅在序列未穿过X轴时有效。以下是在上下边界的数据均高于或低于0时有效的配置：

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

奇妙的解决方案Alexander。谢谢！但是，将“不透明度”设置为1也会隐藏y轴的分割线。我们有什么办法可以防止这种情况发生吗？@VishalGulati不客气。用
z:-1
s更新了答案。根据您的需要，可以完全删除这些线。您太棒了@Alex！干杯！