问题:
在散点图中设置了tooltip后,不设置position,使用默认的配置,toolt的显示位置是跟随鼠标移动的,但是会出现显示不全的情况,如下图。
这产品肯定不能忍啦,必须改!!!于是我去看了echarts的文档,看到tooltip的position属性,可以把位置设置大概分成两部分,一部分是固定位置,一部分是跟随鼠标移动。
1.固定位置
(1)使用px设置绝对位置
// 绝对位置,相对于容器左侧 10px, 上侧 10 px
position: [10, 10]
(2)使用百分比设置相对位置
// 相对位置,放置在容器正中间
position: ['50%', '50%']
2.跟随鼠标移动
使用function回调函数的方法,带5个参数,分别是:
- 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}
。
以上部分来自Echarts配置文档,详见Ecahrts
以下代码改编自sleepwalker_1992的一篇文章,针对这些代码进行简单的修改,防止数据点被tooltip覆盖。主要思路是:把显示不下分成两种情况,上边放不下,和左边放不下,在分别针对这两种情况,自己设定一个x或y坐标值,防止出屏问题。代码如下:
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; // 自己定个x坐标值,以防出屏
y -= 15; // 防止点被覆盖住,可根据情况自行调节
} else { // 左边放的下
x = pointX - boxWidth - 15;
}
// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight + 20 > pointY) {
y = pointY + 15;
} else if (boxHeight > pointY) {
y = 5;
} else { // 上边放得下
y += pointY - boxHeight;
}
return [x, y];
}