Echarts提示框(tooltip)位置设置
Echarts提示框(tooltip)浮层位置,不设置时,默认位置会跟随鼠标的位置。
但是,当提示框位置超出图表所在区域时,就可能出现提示框显示不全的问题,如下所示:
这就需要我们去设置提示框位置
1、设置提示框位置的方法
方法一:通过数组设置提示框位置
数组第一个元素设置距离父元素左边的距离,数组第二个元素设置距离父元素上边的距离
这种方法设置的提示框位置固定不变,不会随鼠标移动而位置变化
(1)数字设置绝对位置 position: [20, 20]
tooltip: { trigger: axis, position: [20, 20] // 等价于 // position: [20px, 20px] },
(2)百分比设置相对位置 position: [50%, 50%]
tooltip: { trigger: axis, // 相对位置 position: [50%, 30%] },
方法二、直接设置position的值为:inside|top|bottom|left|right
这种方法只在设置 trigger: item, 的时候才有效
-
inside 鼠标所在图形的内部中心位置 top 鼠标所在图形上侧 left 鼠标所在图形左侧 right 鼠标所在图形右侧 bottom 鼠标所在图形底侧
tooltip: { trigger: item, position: top },
方法三、通过回调函数设置提示框位置
回调函数中有:
五个参数
point:鼠标位置,是一个数组,如 [20, 50]
params:Object|Array.<Object> 是需要的数据集
dom:tooltip 的 dom 对象。
rect:一个对象,只有鼠标在图形上时有效,是一个用 x, y, width, height 四个属性表达的图形包围盒。
size:一个对象,包括 dom 的尺寸和 echarts 容器的当前尺寸,例如:{contentSize: [width, height], viewSize: [width, height]}。
size中有两个属性:viewSize为外层div的大小,contentSize为tooltip提示框的大小
一个返回值: (1)返回值可以是一个表示 tooltip 位置的数组,数组值可以是绝对像素值,也可以是相对百分比。
tooltip: { trigger: axis, position: function (point, params, dom, rect, size) { return [40%, 30]; } },
(2)返回值也可以是一个对象
对象的属性有:top、bottom、left、right
position: function (point, params, dom, rect, size) { return {left: 40%, bottom: 20}; }
2、设置提示框位置随鼠标移动,并解决提示框显示不全的问题
position: function (point, params, dom, rect, size) { // 鼠标坐标和提示框位置的参考坐标系是:以外层div的左上角那一点为原点,x轴向右,y轴向下 // 提示框位置 var x = 0; // x坐标位置 var y = 0; // y坐标位置 // 当前鼠标位置 var pointX = point[0]; var pointY = point[1]; // 外层div大小 // var viewWidth = size.viewSize[0]; // var viewHeight = size.viewSize[1]; // 提示框大小 var boxWidth = size.contentSize[0]; var boxHeight = size.contentSize[1]; // boxWidth > pointX 说明鼠标左边放不下提示框 if (boxWidth > pointX) { x = 5; } else { // 左边放的下 x = pointX - boxWidth; } // boxHeight > pointY 说明鼠标上边放不下提示框 if (boxHeight > pointY) { y = 5; } else { // 上边放得下 y = pointY - boxHeight; } return [x, y]; }