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;
                },

不足之处,欢迎指正

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章