Echart遇到的问题:tooltip提示框大小异常

时间:2023-03-08 23:08:49
Echart遇到的问题:tooltip提示框大小异常

将Echart图表放到项目中,发现当鼠标放到柱状图上时,提示框显示大小超出了div的大小。

Echart遇到的问题:tooltip提示框大小异常

官方的文档对于tooltip的说明也没有指出:如何修改大小。

那么tooltip是什么呢?

fn+f12打开控制台发现:

Echart遇到的问题:tooltip提示框大小异常

tooltip并非是canvas绘制,而是一个div。

到这,想到既然是一个div,单独的大小内置合适。但放到项目中大小突然就变大很多。第一反应就是:

CSS样式之间存在冲突。

问题找到了,也就有办法解决了!

查找html代码中对div标签设置的样式,将div设置的样式单独写到下面的标签中,问题就解决了。

总结:

  1. tooltip是一个div。
  2. tooltip样式问题,首先考虑样式冲突。
  3. 多用控制台查找问题,修改代码。
  4. 推荐使用Echarts实现数据可视化。