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

不足之處,歡迎指正

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