echarts 提示框（tooltip）位置設置

提示框（tooltip）位置設置

像Echarts里的柱狀圖和折線題，鼠標懸浮上去都會有彈窗信息顯示出來，但是如果你給定的顯示區域比較小的話，就會導致彈窗顯示不全的問題。

情況如下：

 

 

 下面會有幾種方式解決這個問題，看大家的需要；

1、設置提示框位置的方法

方法一：通過數組設置提示框位置

數組第一個元素設置距離父元素左邊的距離，數組第二個元素設置距離父元素上邊的距離

這種方法設置的提示框位置固定不變，不會隨鼠標移動而位置變化

（1）數字設置絕對位置 position: [20, 20]

tooltip: {

trigger: 'axis',

position: [20, 20]

// 等價於

// position: ['20px', '20px']

},

（2）百分比設置相對位置 position: ['50%', '50%']

tooltip: {

　　trigger: 'axis',

　　// 相對位置

　　position: ['50%', '30%']

},

方法二、直接設置position的值為：'inside'|'top'|'bottom'|'left'|'right'

這種方法只在設置   trigger: 'item',   的時候才有效

• 'inside'  鼠標所在圖形的內部中心位置

• 'top'  鼠標所在圖形上側

• 'left'  鼠標所在圖形左側

• 'right'  鼠標所在圖形右側

• 'bottom'  鼠標所在圖形底側

tooltip: {

　　trigger: 'item',

　　position: 'top'

},

方法三、通過回調函數設置提示框位置

回調函數中有：

五個參數

point：鼠標位置，是一個數組，如 [20, 50]

params：Object|Array.<Object>  是需要的數據集

dom：tooltip 的 dom 對象。

rect：一個對象，只有鼠標在圖形上時有效，是一個用  x, y, width, height   四個屬性表達的圖形包圍盒。

size：一個對象，包括 dom 的尺寸和 echarts 容器的當前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}。

size中有兩個屬性：viewSize為外層div的大小，contentSize為tooltip提示框的大小

一個返回值：
（1）返回值可以是一個表示 tooltip 位置的數組，數組值可以是絕對像素值，也可以是相對百分比。

tooltip: {

　　trigger: 'axis',

　　position: function (point, params, dom, rect, size) {

　　　　return ['40%', 30];

　　}

},

（2）返回值也可以是一個對象

對象的屬性有：top、bottom、left、right

position: function (point, params, dom, rect, size) {

　　return {left: '40%', bottom: 20};

}

2、設置提示框位置隨鼠標移動，並解決提示框顯示不全的問題

position: function (point, params, dom, rect, size) {

　　// 鼠標坐標和提示框位置的參考坐標系是：以外層div的左上角那一點為原點，x軸向右，y軸向下

　　// 提示框位置

　　var x = 0; // x坐標位置

　　var y = 0; // y坐標位置

 

　　// 當前鼠標位置

　　var pointX = point[0];

　　var pointY = point[1];

 

　　// 外層div大小

　　// var viewWidth = size.viewSize[0];

　　// var viewHeight = size.viewSize[1];

 

　　// 提示框大小

　　var boxWidth = size.contentSize[0];

　　var boxHeight = size.contentSize[1];

 

　　// boxWidth > pointX 說明鼠標左邊放不下提示框

　　if (boxWidth > pointX) {

　　　　x = pointX + 10;

　　} else { // 左邊放的下

　　　　x = pointX - boxWidth-10;

　　}

 

　　// boxHeight > pointY 說明鼠標上邊放不下提示框

　　if (boxHeight > pointY) {

　　　　y = 5;

　　} else { // 上邊放得下

　　　　y = pointY - boxHeight;

　　}

 

　　return [x, y];

 

},