dataZoom click not working

Version

5.2.1

Reproduction link

https://jsfiddle.net/tmtron/9y0xtqs7/11/

Steps to reproduce

click on the dataZoom

What is expected?

click event should be invoked

What is actually happening?

click event is not invoked

---

The example from the documentation: echartsInstance. on is also not working:

chart.on('click', 'dataZoom', function () {...});

• Other click events work: e.g. on the series, axis-labels (when triggerEvent is set to true)
• but for dataZoom, triggerEvent does not exist
• Maybe someone knows a temporary workaround?
  • I thought about using echartsInstance.containPixel, but it seems, that this does also not support dataZoom

[pissang]

Sorry for not merging the PR from @susiwen8 . Didn’t notice it’s a mistake from the doc.

We need to think through these questions carefully before we providing such an event.

1. Which part of the dataZoom can trigger the event. The whole component or only the slider. If it’s only the slider, what about other parts of the dataZoom.
2. What event parameters we need to provide. And how developers can use them in their scenarios.
3. How should we handle the conflicts of loading action from click event handler and the default dataZoom action.
4. Is there a better way to do async loading on demand. For example, render a loading button around the slider, this button will trigger click event with necessary event parameters.

[tmtron]

We are trying to keep all exposed API are simple and consistent.

In the case of a click event for the data-zoom slider, there is anyway only very little info that you can send along:

• the click point
• optionally the selected range.
  this is maybe not required, when you can also ask the chart-instance fot he currently selected range and maybe find out if the click-point is in the selected zoom range, or outside

API that only solve one very specific case needs to be added very carefully.

A click event is something very generic and for sure not tied to a single use-case.

There are many more things that this can be used for:
e.g. we have a config mode, where the users can configure/move/resize the charts. in this mode, a click on the zoom slider could bring up a config dialog, where they can configure the slider: e.g.

• slider properties: color, handleSize, …
• a check-box if they want to show the slider at all

Another use-case that you have mentioned is the click-moves-the-zoom-window feature.
This could easily be implemented by users of the library via this click event.
Even better; we could implement our own strategy: e.g. maybe we want that clicking should not move the zoom window, but expand or shrink the window to the click-point

Well, I don’t know a better way to do this. However I am very open to suggestions.

From my side. Your first and second solution sounds more solid on the user experience. But that’s only my humble opinion. I’m just not convinced that adding click event on dataZoom can provide a good enough solution to solve cases like this.

Well, I also thought that at first. But in the meanwhile I have changed my mind and think that our users are right.
When you use the zoom slider handles to select a suitable range, then you don’t want to move the mouse away, to a button or menu - you want to immediately invoke the load-action by a simple click.