Giter Club home page Giter Club logo

Comments (6)

echarts-bot avatar echarts-bot commented on June 3, 2024

@Decadent916 It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

TITLE

[Bug] After the coordinates of labelLayout are set, the instance is destroyed and then regenerated, and the mouse-triggered event of the image in the labal rich text will be invalidated

BODY

Version

5.4.3

Link to Minimal Reproduction

https://codesandbox.io/p/sandbox/echarts-test-hmgwv8?file=%2Fsrc%2FApp.js

Steps to Reproduce

  1. After initializing the instance, the picture in the label can trigger the mouseover event.
  2. Destroy the instance
  3. Reinitialize the instance
  4. At this time, the picture in the label cannot trigger mouse-related events.

Current Behavior

After the instance is reinitialized, the picture in the label cannot trigger mouse events.

Expected Behavior

The picture in the label can trigger mouse events normally

Environment

- OS: Windows 11
- Browser: Chrome 122.0.6261.70
- Framework: React@18

Any additional comments?

No response

from echarts.

helgasoft avatar helgasoft commented on June 3, 2024

The label image does not trigger mousemove events, even before dispose, because formatter: '{tooltipIcon| }' does not display any value, just a background image. If you change to formatter:'LABEL' then mousemove will fire.
Also multiple failed setTimeout events popping up continuously from your environment ??!

from echarts.

Decadent916 avatar Decadent916 commented on June 3, 2024

In theory, if I give the width and height of the image area, it will trigger a mouse event. Now, it can be triggered after the first initialization, but it will not be triggered after dispose and initialization.

I output console in the trigger event, and the multiple failed setTimeout events you mentioned may be printed mouse events

from echarts.

helgasoft avatar helgasoft commented on June 3, 2024

apologize - image indeed triggers mousemove. Increasing image's width and height makes it obvious.
However I do not see any change after dispose/init, mousemove is still firing. Demo

from echarts.

Decadent916 avatar Decadent916 commented on June 3, 2024

Sorry, the labelLayout attribute in the demo was written incorrectly. The issue I mentioned only occurs when this attribute is set

from echarts.

helgasoft avatar helgasoft commented on June 3, 2024

I commented out labelLayout (prefix X).
So now we know that labelLayout is causing the problem.

from echarts.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.