uni-app 官网演示demo中鼠标横向移动时tooltip问题:鼠标向右移,tooltip移到另一图表上,原图表tooltip未消失。

uni-app 官网演示demo中鼠标横向移动时tooltip问题:鼠标向右移,tooltip移到另一图表上,原图表tooltip未消失。

图像

1 回复

更多关于uni-app 官网演示demo中鼠标横向移动时tooltip问题:鼠标向右移,tooltip移到另一图表上,原图表tooltip未消失。的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 官网演示的 demo 中,当鼠标横向移动时,如果 tooltip 在移动到另一个图表上时,原图表的 tooltip 没有消失,这通常是由于 tooltip 的事件处理逻辑没有正确触发或事件冒泡问题导致的。以下是一些可能的解决方案:

1. 确保 tooltipleaveDelay 设置正确

在 ECharts 中,tooltip 有一个 leaveDelay 属性,用于控制 tooltip 在鼠标离开后消失的延迟时间。如果 leaveDelay 设置过长,可能会导致 tooltip 在移动到另一个图表时仍然显示。

tooltip: {
  trigger: 'axis',
  leaveDelay: 100, // 设置合适的延迟时间
}

2. 使用 dispatchAction 手动控制 tooltip

你可以通过 dispatchAction 方法手动控制 tooltip 的显示和隐藏。在鼠标移动到另一个图表时,手动触发原图表的 tooltip 隐藏。

// 假设有两个图表实例 chart1 和 chart2
chart1.on('mouseover', function () {
  chart2.dispatchAction({
    type: 'hideTip'
  });
});

chart2.on('mouseover', function () {
  chart1.dispatchAction({
    type: 'hideTip'
  });
});

3. 确保事件冒泡正确处理

检查事件冒泡是否正确处理,确保在鼠标移动到另一个图表时,原图表的 tooltip 能够正确消失。如果事件冒泡有问题,可能会导致 tooltip 没有及时隐藏。

4. 使用 zrender 事件监听

如果上述方法仍然无法解决问题,可以尝试使用 zrender 的事件监听机制,手动控制 tooltip 的显示和隐藏。

chart.getZr().on('mouseover', function (e) {
  // 手动控制 tooltip 的显示和隐藏
});

5. 检查 tooltiptrigger 设置

确保 tooltiptrigger 设置正确。如果 trigger 设置为 item,则 tooltip 会在鼠标移动到具体数据项时显示。如果 trigger 设置为 axis,则 tooltip 会在鼠标移动到坐标轴上时显示。根据你的需求选择合适的 trigger 设置。

tooltip: {
  trigger: 'axis', // 或 'item'
}

6. 使用 hideTip 方法

在鼠标移动到另一个图表时,手动调用 hideTip 方法隐藏原图表的 tooltip

chart1.on('mouseout', function () {
  chart1.dispatchAction({
    type: 'hideTip'
  });
});
回到顶部