Skip to content

[Bug] When zooming in such that hoverLayerThreshold is passed, hover layer contents are not cleaned up #20971

@scmccarthy

Description

@scmccarthy

Version

5.6.0

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=heatmap-large&code=DYUwLgBAdg9glgZxBAvBA5uAcvJAJEYABxACcAKASgG4AoUSADwBEBDMV1CAbQF06GEAJ5sOXPnViIQAOiQgAJuQCy7ABYzSrKApgBbKjVoAzAK5QAxmDgwoGEFDLsQo1uTBrwrADQQ9cKF89VkZKCABvWggIQQV2TjQJKIhjGFIIckE4LgAGaghsgB40ACYcvIKAakqwyOjo1PTM8AgAK1z89uKIAEZyzura5PqIAHpRmJbGLnJg6YBaPwCwgCoCsYgynIhKpag6EejxycghGbmIRf8oVbaNvu3d64PDuI4ZIlMENXJuOF9Wr4pEgPmRgAESuRshMACw5AEbMphXY5GQAVl4RkOYwmb1YHy-Pz-AKBaWCwGYiDA7k8HF8oQga1gpHJlIQ1I8Xl8QkomJe0QAvsMICx4gTvlCsRAhQ00hlBO00BUur1-m1BhFhSIxZ8Ja0pTKIKRwKZSHY8XQhbF4lxMI4tGAXPFyCVfPM0b40UYYERrLYuHUIGAYDBgNYiAAuCIC7zJRgAQUYiCjgeiYCEJCjAHILM50GkhFnYyM8VHRRxkjHkkJE8nNSN05mIDm8wWi8LS8JXJXixAAG6IUysYCqSP1-rXKPw4VzKM9XvRXPACymYCsABGoCjYFIphAC6NIGH1j0ICjxmHSAPAQAStpMCnhYvQ2ko9wn_UswBiADMPR_ABsACcaLtti0TfjCaIAOxouuMJgeB37QTCrAKAoPSIdi34bgoQEgEBWGHN-IA5MYP7GAAHERIzfsY9HGOuxg0Z-X7GCApFATkLEQWxcQgABmEHrRbEwgBCgwj-PHNl-CjQT-OQlNB0k4Wi5QlABWYfrwwqGlW0R4gAWiGeiPtijZns2AQIHACggIh-kQEgpBwCACBvsKqb1FArCntmADirBfDZ2gsRZ2aeOwwRECxnZ4sJEAgHoRBqKwNnueO2JwI6egAMrplumXgeuaR2aQADCL6kNmv4_lJCUjCVpBlQA6rZHhzh-gofo5IxEKQMDoMaCA2X2lkPNO2LaHAwR-lA56XiAunJDpAp0OMG2bVt207bte37Qd-20McJCkOCdjAsgnjEGQKQDXoEBqGAYBEO54zoNlaimOuMgWPooytDASApegoyXa0CDHYd0Mw7DcObSY5hWDYdiYGAODSAQN0UEMi5riNED-VoChFX9UDsruVhpOQjDcr4ABeuOHB4iAyNMaCMPy9QswgMhnGgQhc2mais_TXD01zhoGTAYCQrTwhMyMxpgKadg82zjIijsQYi7zZxrILy0ljLP403TECM0V0TK6rOus9MazTLs6v68I2vq2LawS0b0rJGT7IYMTP7iMKjgAO6E8T5Dzr0vg5JQB7h5HaHkPMMcx_HicgBHRMpzHadxwnofZ8nSgF5cGdFyMSe50oGe-D0VfeSXtep_XvRN9ENdR-3aed9ALdR-X8IV_33cpyP6dj4PE9ulPWc51Hk9z9Pi-zxXK8rS8_uQEQIcjD0aLpwBk8_tBvhATHXENx6vR_g3P6-GUV-30BAGeo_vRATCT91b45-bBKLfHocIDyAQbjkT-ClfDAQbjCV0EBKIXyAr4M-T9QGbHTiPEon8ejXwgO_XoMIkGbBhAAnoZQDw4J_hAWCccn6ELwQAgCCDv5PzRAgkoeCn6QIbj0ABP5gExx_AgmCDdoICMfsKSiJCcHkJhCgiAaJCGUXIShHhDcgEP0YdBY-JCAIkP4bfdRvQALGPnMKf8ND_yKOIU_chAFCESLgYwtEsj76INwT0GOJQSiKIoQgk-T9vEPykSMHB2DKGqlfggmEMc0S3zEugxJ2CYTWMUnAz-aIaFmPYTA3BgkDw-J6Coke8keGKOgowkRDdVE8JIZRfxhjYGbHKA3N-D9gHQMsSU2phi0SKMoowgC6TJ45H8UBQx5TehDNQTAmhHDgkAN8YQoBk16gUOsTgz0PCEE_kMWQvhhiNLsNvpRBBlFb5cM4TkZZORCEDKfkpA8hzTGeimbUhBPRGlPxIfAp5uDKK4Ogtg_8fDFElDsb0RZmxfBpKKdkhuAFP4gqeenNEuCcjouAQBABklxGsM0RCvZEKMXtIvkgyxORDF9H_v4sFgCaE4K-dBQxly-FfJyEy756DCFAWWSUWRR9UE_2FJCr5QFP44NkbSohWz2np2gv4lh6CY6UXienKCv8rkKLgVQn8_jblwomZwkBqD07qvaYa1x5DKI0LtTw6xVS-HAK4QeNScLXV4pvtgxFd93GrJyK_KVvi-E5OWRCmh0FOH4ssXEzRhiQL_30asw-MD0WMMojkLeyRjgABUYCHj0DAMaOtkCOEUCkOUAQ7LTDDloIgRAAjoF8Lob6oAy0QFOnoUwHA5pBg3B20AUB0AeGSIIbtXAk7xlIFoIQ5Aj4lClIIIaaEAAKU6S4zrnQuihUp826wKAgKAWZICcDGqQM4-YYAk3kAoZtKQkZzV8OuXtBRIBhzSAAawQBAGAX6ZAQAAJKQAQKYRtaQwC_pKAAPRKbm3EcB6JkAcKBjiJM-zDj3LzCALUXKOicvocAIsR0QHXOAR06QkPCBgKYAelbi3Gicuh3myQzCWH7Xe8gd7FYFGMBkO9EAAB8EBtgADIxPMcrYUDuVscQQFykuZAnIpMk1o2AD8gmVhoDMRigCkthSCbQKoDwMhjDABDBQHjXNqPcfQxAGTQCAK8eiIJgAPmgQThQZOUQMyMRo8oWjZCVPkIomxlGhY1F5aIgg-xCz4xkbIknG5yeiH2LgRA_i8AgDBgT9nJNAK9PFgUiVgBIFS_2DLWWcsZDs5WoTInKJhAKwkqUIwpb1G7dVtAXXsi7Cc9ltAcWPyroUGu7rgd11_G1gN20QduDpYAKS9BKPwH2houPxxeMcL8u3dsQDXWCAI0BcDIHZKYeibGn0oxSGhEA7heM2zNEGTWkA1hvYyB99wmsAKXGhciVUBorscZu6AUgRByA-DI74MAj2TTPejn92HmtODO01uuF4hpjglGYAdo7dgMZIGB8jf0p1zpy25Lx44AAxGtEBzDZUDrZCAFhCDABZ7YDgAQH1EHgFADTIxBAAA0uAmY0OZyzNN-7RAAJqi_UGZiz1MeRc2OP5Foxo1zWFLYwM4f1SoBGcL-mA_HecBA_Z9Y7Hh2As7Z8KdmWtFhC65vzN2iwZeq4mHh1ge8VPm5AJgdIrPgBlYgDbwrAnyRg4KPzgPt1To2BJrmOw5GY87hvaYVnJNPDGkoMKEXaARctbRFzOXaA5fF89xAcqw4Vxa_Ladjn_OXKvrmr-4w91EqsAsGoP9_GVOpFNBzs0ZBIaC5aFAcoc2psi92F1mXvBeAyF0LLM2CsuaCEnz0afY3uCz67WQPQ3A5e7B6Iv5fMsKdu47hviffQd_jf39vufh_j_n5X3LP7McVfCk394h_e-2sz-B-LIx-QB7-l-NMX-3IX-bW8mlUyUvaymngt2dkLOpopamGwAe4Va6QjAv-LQdGaAF4dkUuVeQGse4OoYzgnag-6Qw0q4UGwoT2dgYOEObB5Ak-I8UAsqpgCckw4OnBWKQIIS9O_BJB92PIQO1s8OdgXkd6B4ZOEIlYloQAA

Steps to Reproduce

  1. Link goes to the 'heatmap-large' official example, with the small change of adding zoom functionality.
    dataZoom: { type: 'inside', },
  2. While hovering over the chart, zoom in all the way.
  3. Move your cursor away.

Current Behavior

You will see a graphical artifact where your cursor was: a highlight of a rectangle in the chart.

See: small black rectangle, which at a prior zoom level was a border around one data point.
Image

Expected Behavior

This highlight should not linger as you keep zooming in and as your mouse cursor moves away.

Environment

- OS: Windows
- Browser: Chrome 135.0.7049.116
- Framework: N/A

Any additional comments?

This bug is triggered when the zoom level changes such that the chart element count passes from above hoverLayerThreshold to below it. The current state of the separate hover layer is not cleared as it should be when the chart is switched over to drawing directly on the main canvas layer for hover interactions.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugenThis issue is in EnglishpendingWe are not sure about whether this is a bug/new feature.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions