【Echarts 实战录】常见问题 (一)

序章

Echarts 实战录, 记录了个人在使用 Echarts 期间遇到的各种疑难杂症;

同时为了控制文章篇幅, 所以将其分为多篇进行发布, 后续文章还在陆续更新中, 敬请期待!

最后如果你在使用 Echarts 期间有遇到啥奇怪需求, 欢迎在评论区进行留言、讨论……

一、Tooltip 展示位置自适应

需求内容: Tooltip 位置, 相对于屏幕来说, 鼠标 底部如果能够放下就放在底部、鼠标 右侧如果放得下就放在右侧;

其实 echarts tooltip 展示位置默认处理方式也类似、只是它是相对于 图表容器 来进行计算的, 如下图所示: 红色背景区域是 图表容器 当鼠标 hover 下移, Tooltip 会跑到鼠标上面, 因为相对于 图表容器 来说, 鼠标下方已经放不下 Tooltip 了, 但实际上对于整个屏幕来说, 鼠标下方空间还很充足

解决思路: 通过修改 tooltip.position 配置, 该配置允许设置一个函数, 从函数参数中可以获取到 Tooltip 相关信息, 通过计算、返回正确的位置坐标, 完整代码如下:

const TOOLTIP_OFFSET = 8// 提示框距离鼠标的距离
const container = document.getElementById('chart-container') // echarts 容器

// Tooltip 的位置: 底部放得下就放底部、右侧放得下就放右侧
const getTooltipPosition = (point, params, dom, rect, size) => {// 图表距离容器「左侧」「顶部」的距离const [offsetLeft, offsetTop] = point// 页面视口「宽」「高」const { clientWidth, clientHeight } = document.body// 图表组件容器距离视图「顶部」「左侧」的距离const { top: containerTop, left: containerLeft } = container.getBoundingClientRect()// 当前鼠标位置距离浏览器视口「顶部」「底部」「左侧」「右侧」的距离const top = containerTop + offsetTopconst left = containerLeft + offsetLeftconst bottom = clientHeight - topconst right = clientWidth - left// 提示框的「宽」「高」const [tooltipWidth, tooltipHeight] = size.contentSize// 如果底部可以放下提示框, 则放底部、否则放在顶部const tooltipY =tooltipHeight + TOOLTIP_OFFSET < bottom? offsetTop + TOOLTIP_OFFSET: offsetTop - tooltipHeight - TOOLTIP_OFFSET// 如果底部可以放下提示框, 就放右侧、否则放在左侧const tooltipX =tooltipWidth + TOOLTIP_OFFSET < right? offsetLeft + TOOLTIP_OFFSET: offsetLeft - tooltipWidth - TOOLTIP_OFFSETreturn [tooltipX, tooltipY]
}

option = {tooltip: {trigger: 'axis',position: getTooltipPosition,},...
} 

最终效果有: