[Bug] : Inconsistent Zoom Functionality with ECharts

Abhijay007 commented 6 months ago

Version

3.0.2

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?c=graph-force&code=LYTwwgFghgTgLgOgM4QPYHcAyqoBMCWAdgOYAUAlANwBQAJAsQKZykBKA8uwCoD6ACgEEuACQAEAalEByAPS4ocKDKhIkzOQqUAbRkgC0wfGphQARjqQIAVklSEpAGlEAzAK6EAxnHx3RpYiYADhDkogDe1KKioJCwiBD4uIzYeERkVJGiAVDBCISoSZbOqDAAolAeEKRunt6-pPlJoRFRUY2MyCDApqhaAMr4AF6MogC8ogCsNFEAvhlRqIF1hGPhmVHecDoAXGutrXCMAB5wu1KYuqIAskaMJua6juutSK6mhydnACKMzlCuWjgoi0UBAqFccCe-w2izOPTgcFQwCh0J0zlO0hg-GIEEhzxmDmeiN63kCuzCBOeRwERyM5KJIECjDOADcoFpXIwpPjCfsQDS6XtoXBGczpGyOVzea1KftiVoekd6dCXIwFK4YGKWirRPJFAAtVBI8kzZ6zHnPPVQQ3GoVy0VnIhIRJci37HRMQi4XYAbTNduhMhkojUOi8jFwVwKYqkzpIOhRKqtu2yuQ8CkYxBK-F0CGAOWq7i8PhWpCgzX9-01cA1KygeSgwEY0x1c39pv2AF1pVFjDmkL7_dqVYRGzGLkhrrd7hZE8KHdJUxA5-7QeCMVJijAPFLK7rNCmghA8tGkD3UUQANYDrJHhBaK9nvfpw5ZrG6Q85Y8vzPZ3TnqscGAXY4BgTkANaEFTEYLRlR1KJAlQZ1ljOLEcTxeDZR1Lcdzg-DNUCAFnTsXYAEYAAZyL3DtoRoqJO0yGYWxiaB4GQZh2CWEtSEWZYMjmSggA

Steps to Reproduce

My Use case is pretty much similar to the example I shared above :

Utilize a simple graph (as seen in the provided example).
Apply the toolbox property and incorporate dataZoom to enable zoom-in and zoom-out functionality.
Upon attempting the functionality, it fails to operate. Suspicions arise that it may not function with 3D graphs.

Note : I am using Echarts-for-react package : (https://www.npmjs.com/package/echarts-for-react)

Current Behavior

After applying the toolbox property and incorporating dataZoom for zooming functionality, the expected behavior fails to manifest. Although options are selected, functionality does not execute as intended. Notably, zooming into the selected portion does not occur. However, on mouse scroll functionality works adequately. This issue persists both in the Echarts-for-react package and the Echarts playground.

more info :

https://github.com/apache/echarts/assets/64387054/1757ac72-bb4a-4017-96b3-262803788a03

Expected Behavior

The main issue is currently the graph allows the user to zoom in and out on the generated graph using the scroll wheel of the mouse (this was a feature already enabled in the EChart library we use).

However, it's not apparent to users that they can zoom in and out. We want to support mouse wheel zooming, but also have visible buttons (suggested to use + and -) to control the zooming visibly.

Environment

- OS: Windows
- Browser: Chrome
- Framework: electron

Any additional comments?

I seek guidance on whether there's an alternative approach to achieve this functionality. Specifically, can the mouse scroll property be accessed and controlled via buttons? If affirmative, I would appreciate guidance on implementing this solution.

helgasoft commented 6 months ago

Graph type 'force' has no coordinate system and therefore toolbox area-zoom will not work. However graphic buttons can be used for zoom in/out - Demo Code

Abhijay007 commented 6 months ago

Graph type 'force' has no coordinate system and therefore toolbox area-zoom will not work. However graphic buttons can be used for zoom in/out - Demo Code

Thanks @helgasoft, I was able to resolve it, but yea this example will help to refine the code

apache / echarts