Echarts 鼠标移入出现滚动条及抖动

原创已于 2023-10-07 15:53:01 修改 · 1.4k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

于 2023-10-07 15:23:54 首次发布

博客指出ECharts加载页面首次移入时会出现问题，原因是tooltip过长超出容器，其属性transitionDuration默认为0.4秒，0.4秒后恢复导致抖动。还给出了解决方案，提供代码示例，作者采用第三种方案。

问题复现：这个问题是加载完页面首次移入的时候会复现

出现原因：是由于tooltip引起的，因为过长超出容器导致的，而tooltip中有这么个属性 transitionDuration，默认为0.4秒，0.4秒过后又恢复，就出现了抖动的异常现象。

解决方案：如下代码示例（第二种不推荐使用，超出的tooltip会看不到），本人用的第三种

1.关闭tooltip
 state.option= {
    tooltip: {
      show: false
    }
  }; 

2.为echarts的容器设置overflow:hidden, 设置confine:true
 state.option= {
    tooltip: {
      show: true,
      confine:true
    }
  }; 

3.将transitionDuration设置为0，让tooltip紧跟鼠标
 state.option= {
    tooltip: {
      transitionDuration: 0
    }
  };