echarts tooltip太多會超出顯示範圍-解決

如下兩種解決方式，可以應對大部分出現此類問題項目

 

tooltip.position: 提示框浮層的位置，默認不設置時位置會跟隨鼠標的位置。

可選：string, Array, Function

 

1、解決方法：

 

一、設置x軸固定不動 y軸上下跟隨

/*設置x軸左右固定，上下跟隨。*/ position: function(point, params, dom, rect, size){ return [0,point[1]]; }

 

二、設置Y軸上下固定，x左右跟隨

/*設置Y軸上下固定，X左右跟隨。*/ position: function(point, params, dom, rect, size){ return [point[1],0]; }

 

 

2、position值的可選類型

Array示例：

// 絕對位置，相對於容器左側 10px, 上側 10 px
  position: [10, 10] // 相對位置，放置在容器正中間 position: ['50%', '50%']

 

Function示例

position: function (point, params, dom, rect, size) { // 固定在頂部 return [point[0], '10%']; }

 

//參數：
point: 鼠標位置，如 [20, 40]。 params: 同 formatter 的參數相同。 dom: tooltip 的 dom 對象。 rect: 只有鼠標在圖形上時有效，是一個用x, y, width, height四個屬性表達的圖形包圍盒。 size: 包括 dom 的尺寸和 echarts 容器的當前尺寸，例如：{contentSize: [width, height], viewSize: [width, height]}。 //返回值：
能夠是一個表示 tooltip 位置的數組，數組值能夠是絕對的像素值，也能夠是相 百分比。 也能夠是一個對象，如：{left: 10, top: 30}，或者 {right: '20%', bottom: 40}。

 

Str示例

'inside'
//鼠標所在圖形的內部中心位置，只在 trigger 爲'item'的時候有效。

'top'
//鼠標所在圖形上側，只在 trigger 爲'item'的時候有效。

'left'
//鼠標所在圖形左側，只在 trigger 爲'item'的時候有效。

'right'
//鼠標所在圖形右側，只在 trigger 爲'item'的時候有效。

'bottom'
//鼠標所在圖形底側，只在 trigger 爲'item'的時候有效。