新聞中心
這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
創(chuàng)新互聯(lián)ECharts教程:EChartsgrid組件配置提示框浮層的位置
grid.tooltip.position | string, Array, Function

提示框浮層的位置,默認不設置時位置會跟隨鼠標的位置。
可選:
-
Array
通過數(shù)組表示提示框浮層的位置,支持數(shù)字設置絕對位置,百分比設置相對位置。
示例:
// 絕對位置,相對于容器左側(cè) 10px, 上側(cè) 10 px position: [10, 10] // 相對位置,放置在容器正中間 position: ['50%', '50%'] -
Function
回調(diào)函數(shù),格式如下:
(point: Array, params: 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'的時候有效。
網(wǎng)站欄目:創(chuàng)新互聯(lián)ECharts教程:EChartsgrid組件配置提示框浮層的位置
當前URL:http://www.dlmjj.cn/article/djchcho.html


咨詢
建站咨詢
