ECharts 提示框（tooltip）居中显示位置的设置技巧
在使用 ECharts 开发可视化图表时，默认的
tooltip会显示在鼠标右侧。这种默认行为在某些布局中可能会导致遮挡、偏移或视觉不居中。为了让用户获得更优的交互体验，我们可以通过手动设置tooltip.position函数，实现 提示框在鼠标下方居中显示 的效果。
1、 默认问题
ECharts 默认的 tooltip 会显示在鼠标右边，如果鼠标靠近图表右侧边缘时，tooltip 可能会：
-
超出图表边界
-
遮挡关键信息
-
视觉不对称、不美观
2、 设置 tooltip.position
tooltip: {trigger: 'item',formatter: '{b}: {c} ({d}%)',position: function (point, params, dom, rect, size) {const tooltipWidth = dom.offsetWidth || 100;const tooltipHeight = dom.offsetHeight || 40;const [x, y] = point;// 横向居中，纵向稍下return [x - tooltipWidth / 2, y + 10];},backgroundColor: 'rgba(0,0,0,0.7)',textStyle: {color: '#fff',fontSize: 12,},
}
| 参数 | 含义说明 |
|---|---|
point | 当前鼠标的像素坐标 [x, y] |
params | tooltip 对应的数据项信息 |
dom | tooltip 的 DOM 节点对象，可以读取其宽高 |
rect | 触发该 tooltip 的图形的边界信息 |
size | 当前图表的宽高等信息 |
3、核心定位逻辑
const [x, y] = point;
const tooltipWidth = dom.offsetWidth || 100;
return [x - tooltipWidth / 2, y + 10];
解释：
x - tooltipWidth / 2: 让 tooltip 横向居中
y + 10: 将 tooltip 垂直放在鼠标下方 10 像素位置
4、如果想显示在鼠标上方怎么办？
return [x - tooltipWidth / 2, y - tooltipHeight - 10];