给tooltip设置confine、appendToBody属性,鼠标放在图表最右侧的时候tooltip还是有一部分显示不完整。
看了官网的position属性设置,也可以解决tooltip被遮挡的问题。官网中下面这段代码乍一看有点不解,obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]]这里解释一下:obj中第一个数组[left, right]是属性名的集合,第二个数组中的计算结果作为第一个数组的索引值,如pos[0] < size.viewSize[0] / 2为true的时候通过+转换为数字1,即obj[['left', 'right'][1]] = obj['right']。
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;
}
将上面的计算方式改造一下,给tooltip设置合适的position即可解决被遮挡的问题:
var option = {
tooltip : {
trigger : 'axis',
// 当前鼠标位置
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];
// 提示框大小
var boxWidth = size.contentSize[0];
var boxHeight = size.contentSize[1];
// boxWidth > pointX 说明鼠标左边放不下提示框
if (boxWidth > pointX) {
x = 10;
} else { // 左边放的下
x = pointX - boxWidth;
}
// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight > pointY) {
y = 10;
} else { // 上边放得下
y = pointY - boxHeight;
}
return [x, y];
},
},
......
}