图的鼠标悬浮窗位置

通过tooltip里面的position属性设置
默认不设置时位置会根据鼠标的位置变化
1、Array:通过数组表示提示框浮层的位置,支持数字设置绝对位置,百分比设置相对位置
示例:
//绝对位置,相对于容器左侧10px,上侧10px
position:[10,10]
//相对位置,放置在容器正中间
position:['50%','50%']
2、Function:回调函数,格式如下
(point: Array, params: Object|Array., dom: HTMLDomElement, rect: Object, size: Object) => Array
参数:
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}。
如下示例:
position: function (point, params, dom, rect, size) {
// 固定在顶部
return [point[0], '10%'];
}
或者:
position: function (pos, params, dom, rect, size) {
// 鼠标在左侧时 tooltip 显示到右侧,鼠标在右侧时 tooltip 显示到左侧。
var obj = {top: 60};
obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
return obj;
}

  • 'inside'
    鼠标所在图形的内部中心位置,只在 trigger 为'item'的时候有效。

  • 'top'
    鼠标所在图形上侧,只在 trigger 为'item'的时候有效。

  • 'left'
    鼠标所在图形左侧,只在 trigger 为'item'的时候有效。

  • 'right'
    鼠标所在图形右侧,只在 trigger 为'item'的时候有效。

  • 'bottom'
    鼠标所在图形底侧,只在 trigger 为'item'的时候有效。

你可能感兴趣的:(图的鼠标悬浮窗位置)