ECharts grid組件配置 提示框浮層的位置

grid.tooltip.position   |   string, Array, Function

提示框浮層的位置，默認不設(shè)置時位置會跟隨鼠標的位置。

可選：

• Array

  通過數(shù)組表示提示框浮層的位置，支持數(shù)字設(shè)置絕對位置，百分比設(shè)置相對位置。

  示例:

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

• Function

  回調(diào)函數(shù)，格式如下：

  (point: Array, params: Object|Array.<Object>, dom: HTMLDomElement, rect: Object, size: Object) => Array

  參數(shù)：

  point: 鼠標位置，如 [20, 40]。

  params: 同 formatter 的參數(shù)相同。

  dom: tooltip 的 dom 對象。

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

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

  返回值：

  可以是一個表示 tooltip 位置的數(shù)組，數(shù)組值可以是絕對的像素值，也可以是相 百分比。

  也可以是一個對象，如：{left: 10, top: 30}，或者 {right: '20%', bottom: 40}。

  如下示例：

  position: function (point, params, dom, rect, size) {
       // 固定在頂部
       return [point[0], '10%'];
   }
  或者：
   position: function (pos, params, dom, rect, size) {
        // 鼠標在左側(cè)時 tooltip 顯示到右側(cè)，鼠標在右側(cè)時 tooltip 顯示到左側(cè)。
        var obj = {top: 60};
        obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
        return obj;
   }

• 'inside'：鼠標所在圖形的內(nèi)部中心位置，只在 trigger 為'item'的時候有效。
• 'top'：鼠標所在圖形上側(cè)，只在 trigger 為'item'的時候有效。
• 'left'：鼠標所在圖形左側(cè)，只在 trigger 為'item'的時候有效。
• 'right'：鼠標所在圖形右側(cè)，只在 trigger 為'item'的時候有效。
• 'bottom'：鼠標所在圖形底側(cè)，只在 trigger 為'item'的時候有效。