ECharts中使用tooltip时鼠标移入抖动问题-CFANZ编程社区

ECharts中使用tooltip时鼠标移入抖动问题

当我们为echarts图表设置tooltip为true时，鼠标移入的时候肯可能会出现页面抖动的情况，出现这种情况是因为echarts所在容器的外部一定存在设置了类似overflow:auto这种滚动条，而tooltip中有这么个属性transitionDuration，默认为0.4秒，当我们鼠标移入的时候，因为有0.4秒的延迟，本身tooltip就占有一定的宽高，所以在这0.4秒的时间dom超出容器导致滚动条的产生，0.4秒过后又恢复，就出现了抖动的异常现象

解决方案

1. 不使用tooltip

tooltip: {
  show: false
},

2. 将 transitionDuration设置为0，让tooltip紧跟鼠标

tooltip: {
  show: true,
  transitionDuration: 0  // 让toolltip紧跟鼠标
},

3. 为echarts的上层div设置overflow:hidden, 并设置confine:true

<div style="width: 100%;height: 100%;overflow: hidden;">
  // 这里面是echarts图表
</div>

tooltip: {
  show: true,
  confine:true  // 将 tooltip 框限制在图表的区域内
},

如果不是项目必须，干脆不使用tooltip这个就可以了

必须使用的话，我是采用上面方式2（transitionDuration设置为0）就解决了

方式3也是我看别人说的一种方式，但我还没用过，应该也是可以解决的

0 条评论