highcharts 如何突出显示两个折线图之间的区域

ds97pgxw 于 2022-11-10 发布在 Highcharts

关注(0)|答案(3)|浏览(194)

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

我取得的成就：

highcharts

来源：https://stackoverflow.com/questions/57225860/echarts-how-to-highlight-area-between-2-line-charts

3条答案

按热度按时间

9jyewag01#

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

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

赞(0）回复(0）举报 2022-11-10

pbossiut2#

上述答案仅适用于序列不与X轴相交的情况。如果数据的上边界和下边界均大于0和小于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'
    }]
});

赞(0）回复(0）举报 2022-11-10

qaxu7uf23#

使用最小值和最大值之间的差值创建第三个序列。此数据序列仅用于能够为最小值和最大值之间的区域着色。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',
        },
      ]
    };

赞(0）回复(0）举报 2022-11-10

我来回答

highcharts 如何突出显示两个折线图之间的区域

3条答案

相关问题

热门标签

最新问答