Echarts提示框（tooltip）浮層位置，不設定時，預設位置會跟隨滑鼠的位置。

但是，當提示框位置超出圖表所在區域時，就可能出現提示框顯示不全的問題，如下所示：

這就需要我們去設定提示框位置

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 = 5;
  } else { // 左邊放的下
    x = pointX - boxWidth;
  }

  // boxHeight > pointY 說明滑鼠上邊放不下提示框
  if (boxHeight > pointY) {
    y = 5;
  } else { // 上邊放得下
    y = pointY - boxHeight;
  }

  return [x, y];
}