echarts tooltip提示框内容过多 溢出边界问题

如下图所示:
图片暂不可看
由于tooltip内容过多,导致内容溢出边界

解决方法:

通过回调函数设置提示框位置
 

position: function (pos, params, dom, rect, size) {
                    //父级
                    var domP = $(dom).parent();
                    var domC = $(dom).children();
                    var bottomP = domP.css('bottom');
                    var rightP = domP.css('right');
                    var leftP = domP.css('left');
                    var heightP = domP.height();
                    var widthP = domP.width();
                    //子级
                    var widthC = domC.width();
                    var heightC = domC.height();
                    //鼠标悬停位置
                    var x = pos[0];
                    var y = pos[1];
                    var obj = {};
                    //竖直方向
                    //如果提示框高度超出边界,则让悬浮窗的top设为当前鼠标位置y
                    if (parseFloat(heightP) - parseFloat(y) + parseFloat(bottomP) >= heightC) {
                        obj = {top: pos[1]};
                    } else {
                        obj = {top: pos[1] + parseFloat(heightP) - parseFloat(y) + parseFloat(bottomP) - heightC - 40};
                    }
                    //水平方向
                    // 如果提示框高度超出边界,则让悬浮窗的left(right)设为外层边界
                    if (widthC - widthP > parseFloat(leftP)) {
                        obj['left'] = 0;
                    } else if (widthC - widthP < parseFloat(rightP)) {
                        obj['right'] = 0;
                    } else {
                        obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = '10%';
                    }
                    return obj;
                },

不足之处,欢迎指正

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值