echarts解决浮窗被遮挡

ppylox
·3/9/2021·0 阅读
AI 摘要模型根据正文自动生成,仅供参考

ECharts 渲染完成时,若图表 DOM 固定宽高且靠近屏幕边缘,默认 tooltip 会被截断并超出 DOM 区域。解决方法是在 tooltip 配置中添加 `confine: true`,使 tooltip 自动限制在图表区域内并自动调整方向,始终显示在 DOM 内。该配置适用于外层 DOM 设置 `overflow: hidden` 或移动端窄屏导致 tooltip 被截断的场景。

\n

当echarts渲染完成时,如果显示echart的dom设置了固定的宽高,如果dom区域非常靠近显示器的边缘,默认情况下,echart的tooltip会被截断,且会超时当前domw的区域,这个时候可以在tooltip里面加上confine配置,就可以让tooltip自动显示在dom区域内,而且会自动调节方向,始终显示dom里面。

let dom = document.getElementById("deviceType")\n  const myChart = echarts.init(dom);\n  myChart.setOption({\n    title: {\n      text: "设备型号",\n    },\n    tooltip: { confine: true },\n    series: [\n      {\n        name: "设备型号",\n        type: "pie",\n        data: state.deviceTypeY,\n      },\n    ],\n  });

echart官方文档是这么解释这个功能的:

\n\n\n\n

confine:是否将 tooltip 框限制在图表的区域内。

\n\n\n\n

当图表外层的 dom 被设置为 'overflow: hidden',或者移动端窄屏,导致 tooltip 超出外界被截断时,此配置比较有用

\n

相关文章

评论 (0)

暂无评论,来写第一条吧