提示框显示不全的问题
TypeScript 官方文档: www.tslang.cn/docs/handbo…
当提示框位置超出图表所在区域时，就可能出现提示框显示不全的问题.
解决问题的方法：人为设置提示框的位置
设置提示框位置随鼠标移动，并解决提示框显示不全的问题
设置提示框位置随鼠标移动的代码如下：
size: 包括 dom 的尺寸和 echarts 容器的当前尺寸，例如：
{contentSize: [width, height], viewSize: [width, height]}。
tooltip: {
show: true,
//formatter: "{b} : {c}",
padding: [10, 10, 10, 10],
axisPointer: {
// 坐标轴指示器，坐标轴触发有效
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
},
position: function (point, params, dom, rect, size) {
// 鼠标坐标和提示框位置的参考坐标系是：以echarts 容器的左上角那一点为原点，x轴向右，y轴向下
// 提示框位置
var x = 0; // x坐标位置
var y = 0; // y坐标位置
// 当前鼠标位置
var pointX = point[0];
var pointY = point[1];
// echarts 容器大小
// 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 = pointX + 5; // 此处需要判断 (pointX+5+boxWidth) < size.viewSize[0]
} else { // 左边放的下
x = pointX - boxWidth;
}
// boxHeight > pointY 说明鼠标上边放不下提示框
if (boxHeight > pointY) {
y = 5;
} else { // 上边放得下
y = pointY - boxHeight;
}
return [x, y];
},
},
最后效果
参考：
