apache / apache/echarts

[Bug] How to synchronize two or more graphics with convertFromPixel in same echarts.instance?

Open
#20,628 3 comments 0 reactions 0 assignees View on GitHub
bug en pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

5.5.0

### Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor?code=MYewdgzgLgBMAWBDATlAygT2gUwLYwF4YAKASkID4YBvAKBjnGhgBMAzASTAEtYizKNeg0aRYAc2QgArgAcIhGAG0A5JJmyAjCoA0MNVLkAmXfvVyAzCoC6AblrCGoMa0RREipXYciYbEMgkADbYsNyKAAy2MOEAPDAWUTEA1MnkdL4MLG6IAHSy0hDwxEqOmcQAsm7wuciIYCwguAIAVDCaEZrkAD4wETplvpXVtfWNzeRtHV0wvf2DIubySsNQNXUNTa0wSxC5IWDiaz191gvWpPa-AL5lyKHSyGCu7lcw1_bC91CPzxkiEBkyGA2AAXEJMn5uMhoOD2FxeGQyrcGB9aGjaAB6TEwCDYBq0EKwApBIIAERyeL4ym8tGczAQKHQ-JYigEBCo_3psGoUJhsGuikZqEwOAmuUBjxBnwYJPJlNC-UKxX-DElwLBylUAA9tHoVNqTPrdjY9LlzWxodAzqjLujPsLmQ0yJ82NIwMAoNxwHAkKgAGJ1XDYNAAd14CAiAi5TFgXqgIQinjKqpEUGw2qg4JUzgAbtgA1JcAAFbja7BBGLPCCIYNV6D1EEkXAYADCfqgpF0CxCbCz-hBYHTyG7kPTmbQUAwIXBqd8_iHaG4AC9NYkBpCnCAggFswBiIwAFiMAA4LCYFiiRFfaVuXFAQNuvbIk0RU1BkNxxOIC9nENruAgUcRH_QDixAbgh1_CFMiCSCQynGcYMhUAd2QfcIkwlRL2RYQMTvZhJG4FhX2UFMe2wPtswAVgAUmA3wH1kbNNCMeiN0ycMWDWbNDwidiFngbAv3gfsVAsOjsJuDiGDnGBP3EUSaIEscQGY_RWJUzjiJ4_Q-K03whJEsSJPo3CGFvURmG1ABBACIFI0pfDkqdZE1FRc0QIJpGwBjFk_FguBYDNwQiZEZOQtMMDc7NPO83yIoYIjAoaEL2nMmBLO5GAMDswDHPIsdovcuKfL8pKAqCtKwukwrMlckqvLKxKdkq1LtXBTQMqy2NcQLbhsAc5NnIWBrswgYA3GHcqXkQKkqo6voWts-yFtClrctW9r1oWfFQGC2cFgYRb5k3HLOpw2qRqKmL9AmqaCxm7J3Hm7aloWFbALW9oNryiBvs0Fq9pAA7It8E6WoYDALshK9UWEHqXDUr0fTfMp4yQjHsFOtNHyCZ9wQfJ9uBfCLkvBZKcayBV-yUOUKRe0IlAiaxrAiz6IHBDmqZyv7wU2_KIrxT9BvBYWBocvCZRgFt2yZCVQgAeVkFGwGIZHvTAO1bjpDtA1rENwygSMXQcbEYDl1AFAgDAPXgKQeFXWhZY7XIfygAAtZAyFycBiBUXAZDxQP81MN0PVVkhZBQWsIHSYRzdbNwEBloO8BAfMYGwfMh2EIkYFkCChy4ABxALPGjoM9hANg2CpAANPRK9j33a6pABNSzzfFwa-irYdEE9TXhG4Ngo5j3A9h7_72sIAgiAiePfHzyDgu1RQXflvMCygQMmlLcsgmIXlp--pNribouoFLgLSGZyyGEToTgAAawUUeYDWbAqzXmIFCN-AkFP5CVmvJeoP4ygf2IKvDMMAKALxgAAMkQT_WB8R6Y03vhKIEIJ9j4iOPAJemRN6oFyCwQC0djbwBskPP2ckGBjTuvAEAoYAAqJMZpqn6oNAGkNZrfRgdqS8dobh4R8DAbu3CFCaH7gWQeqthAVjxDEMexBm6TwViLGev955EBmKmFes8iAkKgLkbehZ95lgrMfPqWiAbvEvpBa-YAy7ETvizaWj8cTtmwK_d-Y8v6oPXoBGAACgGBOeh4DYEDfBQMEXAhByCgkwHQdIUkDM5pMxZtgqU2A8GHGOGDGWbZXbkIgJQhANDVbHyOp_Yq41mFsI4Xw0-b0ea-EiQI9qwi3jw3htcS4QA

### Steps to Reproduce

I have two dot graphics (scatter) and I need to move the mouse (`mousemove`) over one of them and pass the `tooltip` effect to the other. That is, when I move the mouse over `series[0]`, the `tooltip` must also appear in `series[1]` and vice versa. I tried synchronizing the charts with `myChart.getZr().on(...)` but I couldn't get it to work. Also, **it wouldn't be interesting to use echarts.connect to do this, as I need the charts to be in the same instance**.

### Current Behavior

The tooltip is not transferred to the other charts as it naturally is with `echarts.connect`.

### Expected Behavior

The `tooltip` needs to work on all the graphics programmed for the `tooltip` action to take place, so if I hover over the first graphic, the `tooltip` should appear at the same point (axis) as the second and vice versa. Note that all graphs must have the same scale axis.

Another alternative would be to use the component type `axisPointer`, but how do you make each tooltip appear in its corresponding graphic instead of being aggregated? Example:

https://echarts.apache.org/examples/en/editor?code=MYewdgzgLgBMAWBDATlAygT2gUwLYwF4YAKASkID4YBvAKBjnGhgBMAzASTAEtYizKNeg0aRYAc2QgArgAcIhGAG0A5JJmyAjCoA0MNVLkAmXfvVyAzCoC6AblrCGoMa0RREipXYciYbEMgkADbYsNyKAAy2MOEAPDAWUTEA1MnkdL4MLG6IAHSy0hDwxEqOmcQAsm7wuciIYCwguAIAVDCaEZrkAD4wETplvpXVtfWNzeRtHV0wvf2DIubySsNQNXUNTa0wSxC5IWDiaz191gvWpPa-AL5lyKHSyGCu7lcw1_bC91CPzxkiEBkyGA2AAXEJMn5uMhoOD2FxeGQyrcGB9aGjaAB6TEwCDYBq0EKwApBIIAERyeL4ym8tGczAQKHQ-JYigEBCo_3psGoUJhsGuikZqEwOAmuUBjxBnwYJPJlNC-UKxX-DElwLBylUAA9tHoVNqTPrdjY9LlzWxodAzqjLujPsLmQ0yDKGGxpGBgFBuOA4EhUAAxOq4bBoADuvAQEQEqpE3Jg3qgIQingWDFjkKg2G1UHBACJnAA3bCBqS4AAK3G12CCMWeEEQIbr0HqIJIjoAqnjSHmBpDfCE2LmYAX8VnkL20yIszm0FAMCFwRn-_4wOhuAAvTWJPv93ygIIBfMAYiMABYjAAOCxGSd71G7yHXR8iM4LeNQEAgILe2QpojLgwUDINw4jiCW-aINq3AQHe_ZQTB5YgNwa4QRC_ZBIgABGNZLlOarwCAYbgsB0jYFOKJPgstzvkwsAIRASEoeO_7oZmGCyJqKhFIgjRhroU7AaB4HIAAKl-P7cLIJHIGRL6-C2PwQOCKjwNwLDYAJe5CWBJYAKK4LISAQDB4JsIgQR4vJIhBChobzoubH9geR4jseEQeXBT7WQwmE4UEeH3rihHEQmsnYD5IhYYgwAANbmA0ADC36uSox5sB5KgUZFtlgLF4KlEFgGZNqACC0EQFwGnagV_TtDa96UZC1jWTRkLxpI6msYV_bFb52BDvmACsACkXn9p-0kjpoRhjZFDARiwaz5meERzfhMDwNgoHwMOeYWKN403JFfUwCB4i7cN61BZN-Yzdd96LctI6rQ9e5bTte0HW9mTPucPiZPGZUVd1U6nfOnH5oWFlkUdmSdSwVXZuC8x7n9e7gxxmp5tDQSw_NOwgYjDTI-0kXo5kb7tXRMAYOVMGgxjG0Q9juP4xtCNIzVfTkydzNY1DMPYHDvicyT3OaLz_20S4eIgdgECM71_OQyOEDAG444iyI2TuFSXMowTwMwQbPMbXTFWm6j974qAGmBUFMDc9bQUYOCksbRT3lgyr2Pq5rJba1kCpQFbRv05V4vuwTFsm1HZMbbbID205e7OwTDBuwnQVe791lU4DNMgLI3q-gBgm8I5ibJpFn7fr-JESb-LuZAxTGocg4Jt8hHct6LRPggjfc6yHBVyhSeuhEoETWC1U7G8pTsR8PmcR-CseK5FcvcAr4Lbwrw9tZkuAYIl_pQBKoQAPIlz6YDEMXpdgKQyIA0459Bo2oYRlAUYukAA

### Environment

```markdown
- OS:
- Browser:
- Framework:
```

### Any additional comments?

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.