Echarts如何突出显示2个折线图之间的区域

Question

我想开发一个电子图表，其中两个折线图之间的区域以一种颜色突出显示。为此，我使用了堆积面积图。我将上部区域的颜色设置为高亮颜色，将下部区域的颜色设置为白色，以达到我的效果。然而，较大区域的颜色与较低区域合并并产生差异颜色。如何设置2个区域的颜色互不干扰？有没有办法为此区域提供 z-index？

这是我的代码：

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

我的收获：

Answer 1

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

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

以上答案仅在系列不穿过 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'
    }]
});

Echarts如何突出显示2个折线图之间的区域

Echarts how to highlight area between 2 line charts

charts

highcharts

vue.js

echarts

vuejs2