echarts折线图、面积图的重叠与堆叠的区别

-小C_

于 2024-03-05 14:18:10 发布

阅读量397

点赞数 8

分类专栏：可视化大屏文章标签： echarts 前端

本文链接：https://blog.csdn.net/m0_75107188/article/details/136477081

版权

可视化大屏专栏收录该内容

8 篇文章 0 订阅

订阅专栏

问题：在使用echarts折线图和面积图时，需求上要求必须重叠或者堆叠，如何进行配置
解决过程：当两条折线或者是两个部分的面积进行区分重叠或堆叠时
1.在外观上不同的是，重叠图是允许两者有交点重叠部分，起点均为零点，堆叠图则会以其中一个为底，另外一个在此基础上上进行堆叠，
2.在配置上不同的是，重叠图需要取消配置项series每个对象中的stack: 'Total'属性，堆叠图则反之，需要在配置项series每个对象中加上stack: 'Total'属性
解决结果：

//重叠
series: [
    {
        name: '图片1',
        type: 'line',
        // stack: 'Total',
        lineStyle:{width:1,color:'rgba(0, 255, 252, 1)'},
        symbolSize:0,
        areaStyle:{
            opacity:1,
            color:{
                    type:'linear',
                    x:0,
                    y:0,
                    x2:0,
                    y2:1,
                    colorStops:[
                        {offset:0,color:'rgba(0, 255, 252, 0.5)'},
                        {offset:1,color:'rgba(0, 255, 252, 0)'}
                    ]
                }
        },
        emphasis: {
            focus: 'series'
        },
        data: []
    },
    {
        name: '图片2',
        type: 'line',
        // stack: 'Total',
        lineStyle:{width:1,color:'rgba(66, 148, 255, 1)'},
        symbolSize:0,
        areaStyle:{
            opacity:1,
            color:{
                    type:'linear',
                    x:0,
                    y:0,
                    x2:0,
                    y2:1,
                    colorStops:[
                        {offset:0,color:'rgba(66, 148, 255, 0.5)'},
                        {offset:1,color:'rgba(66, 148, 255, 0)'}
                    ]
                }
        },
        emphasis: {
            focus: 'series'
        },
        data: []
    },
]