[apache/echarts]如何实现两条折线之间颜色填充

One-line summary [问题简述]

如何实现两条折线之间颜色填充，目前的解决方案是第一条的数据 areaStyle 填充颜色，第二条数据 areaStyle 填充白色，透明度选项（opacity）为 1 覆盖掉，但是，负数情况无法打到想要的效果。

Expected behaviour [期望结果]

实现两条折线之间颜色填充

ECharts option [ECharts配置项]

option = {
    title: {
        text: '堆叠区域图'
    },
    tooltip : {
        trigger: 'axis'
    },
    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',
          //  stack: '总量',
            areaStyle: {normal: {}},
            data:[320, 332, 301, -40, -30, 330, 320]
        },
        {
            name:'最大值',
            type:'line',
         //   stack: '总量',
            label: {
                normal: {
                    show: true
                }
            },
            areaStyle: {normal: {
                color:'#ffffff',
                opacity:1
            }},
            data:[10, 30, 40, -60, -50, 40, 50]
        }
    ]
};

Other comments [其他信息]

hanbinggan

同问！

theSouthSea

6770

LiTieTa

确实，用opacity砍脚只能在非负数范围内用。负数就不行了。

http://gallery.echartsjs.com/editor.html?c=xSkgxEPmuf&v=1

http://gallery.echartsjs.com/editor.html?c=xSkgxEPmuf&v=2

qfan

同问，急求解决方案！

coldJson

现在解决了吗，同问

guo897654050

如果是都是正数，A在B上边填充一个颜色，B在A上边填充另一个颜色，能实现吗？? 当然肯定是要求和0轴之间没有颜色的

hyfjjjj

两年多了都没解决吗？ highChart就有的功能。。https://www.hcharts.cn/demo/highcharts/arearange

hcldadi

同问

gugu2012

两年多了都没解决吗？ highChart就有的功能.. https://www.hcharts.cn/demo/highcharts/arearange

这样子效果highchart可以实现两个legend吗？

songjinlin123

如果是都是正数，A在B上边填充一个颜色，B在A上边填充另一个颜色，能实现吗？? 当然肯定是要求和0轴之间没有颜色的

同有这个需求

hyZhang0701

如果是一条曲线固定比另一条高，我这样设置是可以的，如果是互有高低，不能动态设置相交的区域，有点难受

option = {
    title: {
        text: '堆叠区域图'
    },
    tooltip : {
        trigger: 'axis'
    },
    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',
          //  stack: '总量',
            areaStyle: {
                color:'#8DA2E4',
                opacity:1,
                origin:"start"
            },
            data:[320, 332, 301, -40, -30, 330, 320]
        },
        {
            name:'最大值',
            type:'line',
         //   stack: '总量',
            label: {
                normal: {
                    show: true
                }
            },
            areaStyle: {
                color:'#ffffff',
                opacity:1,
                origin:"start"
            },
            data:[10, 30, 40, -60, -50, 40, 50]
        }
    ]
};

zqy233

这个问题为什么关了？是解决了吗

jockiller

我强行用了个笨办法，把要填充的区域首尾相连，画一个多边形，逻辑需要自己处理

wzc11227

看样子要自己画了.....

andyFang94

[apache/echarts]如何实现两条折线之间颜色填充

回答