極坐標系中tooltip的位置

2018-09-13 11:48 更新

本節(jié)將對 ECharts 極坐標系的 tooltip 位置進行設(shè)置,在該項設(shè)置中,我們可以通過兩種種方法來表示提示框浮層的位置,分別是:

  • Array:使用數(shù)組表示;
  • Function:通過回調(diào)函數(shù)表示;

polar.tooltip.position   |   string, Array, Function

設(shè)置 polar 提示框浮層的位置,默認不設(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'的時候有效。
以上內(nèi)容是否對您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號
微信公眾號

編程獅公眾號