Echarts bar堆叠图显示百分比

最新推荐文章于 2025-04-15 14:41:36 发布

白黑besos

最新推荐文章于 2025-04-15 14:41:36 发布

阅读量1.4k

点赞数 2

文章标签： vue

本文链接：https://blog.youkuaiyun.com/cxc199459/article/details/108399736

版权

本文介绍了如何在Echarts的堆叠柱状图中自定义鼠标悬停时显示的数据信息，特别是如何展示每个部分占总体的百分比。通过配置Echarts的tooltip属性，可以实现对堆叠图数据的个性化展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用echarts的堆叠图时,我们鼠标悬停的浮窗里的信息可能并不是我们想要的信息,这个时候需要我们配置一下,因为堆叠图的trigger的类型是坐标轴触发的,数据是多组数据,所以我们需要遍历一下数据,进行编辑


tooltip: {
                    trigger: 'axis', //这里用的是坐标轴触发,多个数据
                    formatter: function (params) {
                        console.log(params); //这里是在同一坐标轴的数据
                        var relVal = params[0].name;
                        for (var i = 0, l = params.length; i < l; i++) {
                            if (params[i].seriesType === "bar") { 
                                let value
                                if(params[i].value){
                                    value = params[i].value          
                                }else {
                                    value = 0
                                }
                                relVal += '<br/>' + params[i].seriesName  + ' : ' + value + "%";
                            }       
                        }
                        return relVal;    
                    },
 }

在这里插入图片描述