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

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

 

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

可選：string, Array, Function

 

一、解決方法：

 

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

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

 

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

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

 

 

二、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'的時候有效。