Echarts中tooltip超出外层div显示不全问题

时间:2021-06-14 16:24:33

1、问题:提示框是根据鼠标位置实时变化的,但是当echarts图标高度较小,数据较多时,就会产生提示框显示不全的问题,如下图:

Echarts中tooltip超出外层div显示不全问题

2、分析:

要想提示框不超出当前外层div,不考虑x轴显示位置的情况下,y轴显示位置必须固定,此时就需要设置tooltip的position属性。

position属性可以设置提示框浮层的位置,默认不设置时位置会跟随鼠标的位置。属性值可以设置如下:

1)Array:通过数组表示提示框浮层的位置,支持数字设置绝对位置,百分比设置相对位置(数据放在引号内,不然会报错)。

position: [10, 10]
position: ['50%', '10%']

这种方式固定在了相应位置

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}。

3、根据我自己的实际情况(图例在右侧),我选择属性值使用函数,函数返回值为数组,距离左侧距离随鼠标移动,距离上侧距离为固定值。

position: function(point, params, dom, rect, size){
//其中params为当前鼠标的位置
return [params[0]-220,'10%'];

 }

效果图:

Echarts中tooltip超出外层div显示不全问题Echarts中tooltip超出外层div显示不全问题