1. 首页
  2. 问答
  3. [apache/echarts]如何实现两条折线之间颜色填充

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

2024-07-04 595 views
1
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

回答

6

同问！

theSouthSea

2
6770

LiTieTa

2

同问，急求解决方案！

coldJson

0

现在解决了吗，同问

guo897654050

2

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

hyfjjjj

1

同问

gugu2012

8

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

同有这个需求

hyZhang0701

2

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

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

1

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

jockiller

8

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

wzc11227

7

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

andyFang94