unitrongroup-ir commented on issue #21661:
URL: https://github.com/apache/echarts/issues/21661#issuecomment-6024525435
Same problem here (6.1.0). It's not only `restore` though, calling
`setOption(option, { notMerge: true })` while drag zoom is on ends up the same
way.
I think the cause is `ToolboxView.dispose`:
```ts
dispose(ecModel: GlobalModel, api: ExtensionAPI) {
each(this._features, function (feature) {
feature
&& feature instanceof ToolboxFeature
&& feature.dispose
&& feature.dispose(ecModel, api);
});
}
```
`this._features` is created with `createHashMap()`, but `each` from zrUtil
just iterates the own keys of the object, so all it gets is the internal `data`
of the HashMap and none of the features is ever disposed. So when the toolbox
view gets replaced, the old dataZoom feature still has its BrushController
mounted (and enabled if drag zoom was on) and the new view adds another one.
After that every drag is handled by both of them, i.e. two selection rects and
two dataZoom actions, which is the strange second zoom from the original
report. In our app the rects also pile up on top of each other, so the
selection gets more and more opaque.
Repro:
```js
const chart = echarts.init(document.getElementById('chart'));
const option = {
animation: false,
toolbox: { feature: { dataZoom: { yAxisIndex: 'none' } } },
xAxis: { type: 'value', min: 0, max: 100 },
yAxis: { type: 'value' },
series: [{ type: 'line', data: Array.from({ length: 101 }, (_, x) => [x,
Math.sin(x / 10)]) }]
};
const dragZoomOn = () => chart.dispatchAction({ type: 'takeGlobalCursor',
key: 'dataZoomSelect', dataZoomSelectActive: true });
let zooms = 0;
chart.on('datazoom', () => zooms++);
chart.setOption(option);
dragZoomOn();
for (let i = 0; i < 3; i++) {
chart.setOption(option, { notMerge: true }); // same with
chart.dispatchAction({ type: 'restore' })
dragZoomOn();
}
console.log(chart.getZr().handler._$handlers.mousedown.length);
```
The mousedown handler count goes from 3 to 6, and one drag after that draws
4 rects and fires `datazoom` 4 times. With the change below it stays at 3 and a
drag gives one rect and one `datazoom` (tried both `setOption` and `restore`,
in Chromium):
```diff
dispose(ecModel: GlobalModel, api: ExtensionAPI) {
- each(this._features, function (feature) {
+ this._features && this._features.each(function (feature) {
```
Until it's fixed, switching drag zoom off before `setOption`/`restore` and
back on afterwards works around it for us:
```js
chart.dispatchAction({ type: 'takeGlobalCursor', key: 'dataZoomSelect',
dataZoomSelectActive: false });
chart.setOption(option, { notMerge: true });
dragZoomOn();
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
