ECharts折线图堆叠和不堆叠的问题

最新推荐文章于 2024-12-31 11:46:39 发布

原创最新推荐文章于 2024-12-31 11:46:39 发布 · 3.6k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#echarts #前端 #javascript

收录于

在ECharts中，折线图的堆叠模式会导致数据为0时不显示在Y轴0点。文章提到，折线图堆叠是通过累加前一条线的数值来计算当前线的值。若要取消堆叠，只需移除或设置不同的stack属性。示例展示了数据为0时，取消堆叠的效果。

今天配合后台联调数据的时候遇到一种情况

第三条数据为0时候并没有在y轴为0上，而是跟上一条线重合了

ECharts折线图是堆叠的，折线图堆叠的意思就是：第二条线的数值=本身的数值+第一条线的数值，第三条的数值=第二条线图上的数值+本身的数值，以此类推......

设置折线图不堆叠只需要将每一个stack的值设置为不一样的名称或者将stack属性删除即可。

series: [
            {
                name:'2021',
                type:'line',
                //stack: '总量',
                data:[120, 132, 101, 134, 90, 230, 210]
             },
            {
                name:'2022',
                type:'line',
                //stack: '总量',
                data:[220, 182, 191, 234, 290, 330, 310]
            },
            {
                name:'2023',
                type:'line',
                //stack: '总量',
                data:[150, 232, 201, 154, 0,0, 0]
            },
        ]

删掉或者注释掉stack属性的时候效果图如下图所示: