tooltip: {
trigger: "axis",
position: function (point, params, dom, rect, size) {
let divData= document.getElementById('myChart2Scroll')
// 鼠标坐标和提示框位置的参考坐标系是:以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 = 5;
} else { // 左边放的下
x = pointX - boxWidth;
}
// boxHeight > pointY 说明鼠标上边放不下提示框
if (viewHeight - pointY < boxHeight) {
y = viewHeight - boxHeight;
} else if(pointY-divData.scrollTop>50) { // 上边放得下
y = pointY-boxHeight;
}else{
y =pointY
}
return [x, y];
},
axisPointer: {
type: 'shadow'
},
backgroundColor: 'rgba(0,0,0,0.7)',
borderColor: '#415265',
borderWidth: 1,
textStyle: {
color: '#fff',
fontWeight:'bold',
},
borderRadius:6,
},
echarts中鼠标划过tooltip提示不超出上下左右显示范围的设置
最新推荐文章于 2024-02-19 14:14:04 发布