美文网首页
图的鼠标悬浮窗位置

图的鼠标悬浮窗位置

作者: 木易月半 | 来源:发表于2020-09-04 16:42 被阅读0次

    通过tooltip里面的position属性设置
    默认不设置时位置会根据鼠标的位置变化
    1、Array:通过数组表示提示框浮层的位置,支持数字设置绝对位置,百分比设置相对位置
    示例:
    //绝对位置,相对于容器左侧10px,上侧10px
    position:[10,10]
    //相对位置,放置在容器正中间
    position:['50%','50%']
    2、Function:回调函数,格式如下
    (point: Array, params: Object|Array.<Object>, 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'的时候有效。

    相关文章

      网友评论

          本文标题:图的鼠标悬浮窗位置

          本文链接:https://www.haomeiwen.com/subject/ysjpxftx.html