echarts 自定义tooltip提示 的位置

一、前言

实现tooltip 提示框 始终出现在echarts中的中间位置，不背遮挡

二、效果展示

 

三、编码实现

				position: function (point, params, dom, rect, size) {
					// 鼠标坐标和提示框位置的参考坐标系是：以echarts 容器的左上角那一点为原点，x轴向右，y轴向下
					// 提示框位置
					console.log(point,'point')
					console.log(size,'size')
					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 = 490;
					var boxHeight = 314;

// 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];
				},