[Bug] Legend click not responding when setOption is called at high frequency (≥30fps)

[channingkuo]

Version

6.0.0

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?c=dynamic-data2

Steps to Reproduce

Using the official https://echarts.apache.org/examples/zh/editor.html?c=dynamic-data2 example, change the update interval to 60fps:

setInterval(function () {
  for (var i = 0; i < 5; i++) {
    data.shift();
    data.push(randomData());
  }
  myChart.setOption({
    series: [{ data: data }]
  });
}, 1000 / 60);  // <-- changed from 1000 to 1000/60

// Add a legend:
option = {
  legend: { data: ['Fake Data'] },
  // ... rest unchanged
};

Steps to reproduce:

1. Open the above config in ECharts playground
2. Try clicking the legend item "Fake Data"
3. Click multiple times — the legend rarely or never responds

Current Behavior

When setOption is called at high frequency (≥30fps, e.g. real-time WebSocket data),
clicking legend items becomes unreliable or completely unresponsive.

Expected Behavior

Legend items should be clickable regardless of how frequently setOption is called.

Environment

- OS: macOS 26.3.1、Windows 10
- Browser: Chrome Version 146.0.7680.165 (Official Build) (arm64)
- Framework: Vue3、Chrome officel example

Any additional comments?

Root Cause (suspected)

zrender's click detection saves _downEl on mousedown and compares it to the
element found at mouseup. When setOption triggers a scene graph update between
mousedown and mouseup, the legend elements may be recreated or marked dirty,
causing the reference comparison to fail and the click event to never fire.

This does not happen with mousemove (cursor change works correctly), only with
the mousedown → mouseup sequence.

Temporary solution

Replace ECharts' built-in legend with HTML elements positioned over the canvas,
and use dispatchAction({ type: 'legendToggleSelect', name }) to control
series visibility programmatically.