问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
前端小嘿
    4511342

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

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

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

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

    前端vue.jsecharts
    阅读 573
    avatarAI 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
      ✓ 已被采纳

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

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

      mouseOverSeries 事件为自定义事件

      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题
      宣传栏