echarts 2D地图如何区分是事件触发显示tooltip还是手动鼠标移上去显示？

Question

echarts 2D地图如何区分是事件触发显示tooltip还是手动鼠标移上去显示？

发布于
2023-10-31 广东

需求是：option.series在地图上标记点，手动移上去触发事件调用接口联动其他图形更新数据，自动播放的不触发事件

如题，自动触发显示代码如下

myChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: 0
    });

一开始想通过tooltip的formatter回调触发事件，但是这样不管手动还是自动都会触发，求大佬解惑

前端 vue.js echarts

阅读 568

AI BotBETA

根据 ECharts 的实现，无法通过 tooltip 的 formatter 回调函数来实现该需求，因为 formatter 回调函数会在无论手动还是自动触发 tooltip 显示时都会被调用。

不过，您可以使用其他方式来实现该需求。一种可行的方法是在显示 tooltip 时，通过其他方式来触发联动数据更新的操作。例如，在显示 tooltip 时，可以调用一个函数来更新其他图形的数据。

另外，您也可以考虑使用 mousemove 事件来检测鼠标是否移动到地图上的标记点上，并触发相应的操作。例如，您可以在 series 配置项中使用 itemStyle 来设置标记点的样式，并使用 emphasis 配置项来设置标记点被选中时的样式。然后，您可以使用 mousemove 事件来检测鼠标是否移动到标记点上，并触发相应的操作。

例如，您可以监听 mousemove 事件，然后使用以下代码来检测鼠标是否移动到标记点上：

myChart.on('mousemove', function (params) {
  if (params.componentType === 'series') {
    // 鼠标移动到标记点上时触发的操作
    console.log('Mouse over series item', params.seriesIndex, params.dataIndex);
  }
});

这样，只有在手动将鼠标移动到标记点上时才会触发相应的操作，而不会自动触发。

1 个回答

得票最新

前端小嘿

4511342

发布于
2023-10-31 广东

更新于
2023-10-31

✓ 已被采纳

已经找到解决方法了，不应该在formatter回调中触发事件；
正确做法：

myChart.on('mouseover', 'series', mouseOverSeries);

mouseOverSeries 事件为自定义事件

查看全部 1 个回答

推荐问题

echarts 2D地图如何区分是事件触发显示tooltip还是手动鼠标移上去显示？

不同页面之间可以通过localstorage保存响应式吗？

扁平化数组转换成树形?

省市区街道数据在哪里可以下载？

网站的不同域名互相跳转如何保持登录态？

Vue项目一个报错无法找到原因?

前端有没有办法实现页面截图？

为什么这个动画一直在抖动?