echarts设置提示框自适应

### ECharts Tooltip 自适应设置方法 在 ECharts 中实现 `tooltip` 的自适应功能，可以通过动态调整其位置以及样式来确保提示框不会超出容器范围并保持良好的用户体验。以下是详细的配置方式和示例。 #### 动态调整 Tooltip 位置 通过 `position` 函数可以灵活控制提示框的位置，使其能够根据鼠标当前位置、提示框大小以及图表容器的边界自动调整[^1]。以下是一个完整的函数逻辑： ```javascript function adaptiveTooltipPosition(pointer, params, dom, rect, size) { const boxWidth = size.contentSize[0]; const boxHeight = size.contentSize[1]; const viewWidth = size.viewSize[0]; const viewHeight = size.viewSize[1]; let posX = pointer[0]; let posY = pointer[1]; // 如果提示框超出了右侧边界，则将其放置到左侧 if (pointer[0] + boxWidth > viewWidth) { posX -= boxWidth; } // 如果提示框超出了底部边界，则将其放置到上方 if (pointer[1] + boxHeight > viewHeight) { posY -= boxHeight; } return [posX, posY]; } ``` 此函数会基于鼠标的实时位置计算最佳的提示框显示区域，并防止溢出容器边缘[^4]。 --- #### 自定义 Tooltip 样式 为了进一步提升体验，还可以通过 `extraCssText` 和 `formatter` 属性来自定义提示框的内容与外观[^3]。例如： ```javascript const tooltipConfig = { trigger: 'axis', renderMode: 'html', textStyle: { color: '#fff' }, extraCssText: ` max-width: calc(50%); /* 控制最大宽度 */ background-color: rgba(0, 0, 0, 0.7); border-radius: 8px; padding: 10px; font-size: 14px; `, position: adaptiveTooltipPosition, formatter: function (params) { let resultHtml = `<strong>${params[0].name}</strong><br/>`; for (let param of params) { resultHtml += ` <span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${param.color};"></span> ${param.seriesName}: ${param.value}<br/> `; } return resultHtml; } }; ``` 在此配置中： - 使用了 CSS 来限制提示框的最大宽度 (`max-width`) 并优化视觉效果。 - 结合 HTML 片段生成更丰富的提示内容。 --- #### 完整实例代码 将以上两部分结合起来形成最终的配置方案如下所示： ```javascript option = { tooltip: { trigger: 'axis', renderMode: 'html', textStyle: { color: '#fff' }, extraCssText: ` max-width: calc(50%); background-color: rgba(0, 0, 0, 0.7); border-radius: 8px; padding: 10px; font-size: 14px; `, position: function (pointer, params, dom, rect, size) { const boxWidth = size.contentSize[0]; const boxHeight = size.contentSize[1]; const viewWidth = size.viewSize[0]; const viewHeight = size.viewSize[1]; let posX = pointer[0]; let posY = pointer[1]; if (pointer[0] + boxWidth > viewWidth) { posX -= boxWidth; } if (pointer[1] + boxHeight > viewHeight) { posY -= boxHeight; } return [posX, posY]; }, formatter: function (params) { let resultHtml = `<strong>${params[0].name}</strong><br/>`; for (let param of params) { resultHtml += ` <span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${param.color};"></span> ${param.seriesName}: ${param.value}<br/> `; } return resultHtml; } }, xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ name: 'Series A', data: [120, 200, 150, 80, 70, 110, 130], type: 'bar' }] }; ``` 该示例展示了如何综合运用 `position` 和 `formatter` 实现高度可定制化的提示框行为。 ---