ECharts中鼠标移入tooltip抖动问题解决办法

echarts yekong

数据可视化大屏项目 开发中,客户反馈echarts图表里的tooltip会出现抖动问题

不使用tooltip

没有tooltip就没有抖动的问题了。

tooltip: {show: false},

将transitionDuration设置为0,让tooltip紧跟鼠标

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

transitionDuration参数介绍

在 ECharts 中,transitionDuration 是一个选项,用于设置 tooltip 组件在鼠标悬停时切换时的过渡动画持续时间。其值以毫秒为单位,定义了 tooltip 在更改内容和位置时的过渡动画时间。

例如,如果你设置了 transitionDuration: 500,当你的鼠标从一个数据点移动到另一个数据点时,tooltip 的内容和位置的更改将在 500 毫秒内平滑过渡。

下面是一个简单的使用示例:

option = {
  tooltip: {
    trigger: 'axis',
    transitionDuration: 500 // 设置过渡动画的持续时间为 500 毫秒
  },
  // 其他图表选项...
};

通过调整 transitionDuration 的值,你可以控制 tooltip 过渡的速度,从而使视觉效果更加平滑或者反应更快。

喜欢