echarts 的tooltip定位到当前图，避免溢出和遮挡

最新推荐文章于 2025-06-07 10:15:08 发布

漂亮得皮皮

最新推荐文章于 2025-06-07 10:15:08 发布

阅读量5.2k

点赞数

CC 4.0 BY-SA版权

文章标签： echarts

本文链接：https://blog.youkuaiyun.com/weixin_36706903/article/details/90448720

本文解决了ECharts中tooltip因内容过多导致的遮挡和溢出屏幕问题。通过设置tooltip的enterable属性为true，允许鼠标进入以查看完整内容，并利用position参数结合自定义DOM实现个性化样式。同时，针对小屏适配，调整了不同宽度数据的间距以防止tooltip溢出。

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

问题：tooltip初始是跟着鼠标移动，当内容过多（宽度高度过大），会被其他遮挡或者会溢出屏幕外

解决：

思路：根据官方文档，鼠标在左侧时，tip在右侧，鼠标在右侧时，tip在左侧，这样不会溢出，太高或太宽可以设置滚动条，这样也不会被遮挡

改进：

1、因为内容过多，展示不完全有滚动条，所以需要鼠标能实时移到tip上进行详细查看，所以运用了 enterable:true,属性，能够定住tip,

2、position参数dom是当前得tip容器，若想要其他样式得tip，给dom添加css即可

3、屏幕适配问题，小屏溢出屏幕（这里可能tooltip里的数据内容有宽有窄，不同的宽度与左右的间距不一样）

//图得tips位置
handleEchartTipOption(){
    let _this = this;
    this.data.data.tooltip = {
        trigger: 'axis',
        enterable:true,
        position: function(point, params, dom, rect, size){ // point: 鼠标位置
            //因为enterable:true,属性，造成的其他图得tip不消失问题
            let cell = $(dom).parent().parent().parent().siblings().find('.cell-chart');
            cell.each((index,item)=>{
                 let children = $(item).children();
                if(children[1]){
                    $(children[1]).hide()
                }
            })

            //解决tip被遮挡或者溢出屏幕外问题
            let css = {};
            let  obj = {};
            if($(dom).height()>220){
                css['height'] ='220px';
                if ($(dom).width()>703) {
                    css[ 'width']='703px'
                }
            }
            else if ($(dom).width()>703) {
                css[ 'width']='703px';
                if ($(dom).height()>220) {
                    css['height']='220px';
                }
            }

            //适配
            if (window.innerWidth>1360){
                obj[['left', 'right'][+(point[0] < size.viewSize[0] / 2)]] = 180;
                if(point[0]<110||point[0]>900){//鼠标在left
                    obj[['left', 'right'][+(point[0] < size.viewSize[0] / 2)]] = 280;
                }
            }
            else {//小屏
                console.log('小屏')
                console.log('point',point)
                obj[['left', 'right'][+(point[0] < size.viewSize[0] / 2)]] = 150;
            }

            $(dom).css(css)
            return obj
        },
    }
},