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

Question

我想开发一个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]
        }
    ]
};

我取得的成就：

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

创建第三个系列，其中最小值和最大值之间存在差异。该数据系列仅用于为最小值和最大值之间的区域着色。 stackStrategy 选项从 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',
        },
      ]
    };

Answer 3

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

Answer 4

非常感谢!!!!!!!!!!!!