[Bug] dataZoom bar does not have overflow: hidden property

[Sladerix]

Version

6.0.0

Link to Minimal Reproduction

Steps to Reproduce

Run any chart example, enable the dataZoom with the chart options, apply the borderRadius parameter like I did in the following example

Current Behavior

The dataZoom bar must include the overflow: hidden in its styling tags because If you set the borderRadius everything will overflow and look ugly.

        dataZoom: [
            {
                id: 'dataZoomXslider',
                type: 'slider',
                height: 35,
                bottom: 7,
                xAxisIndex: [0],
                filterMode: 'filter',
                showDataShadow: false,

                backgroundColor: 'blue',
                fillerColor: "red",
                borderColor: "var(--muted-foreground)",

                borderRadius: 10, // < -----
                handleStyle: {
                    borderWidth: 0
                }
                
            },
            {
                id: 'dataZoomXinside',
                type: 'inside',
                xAxisIndex: [0],
                filterMode: 'filter',
                zoomOnMouseWheel: true,
                moveOnMouseMove: true,
                moveOnMouseWheel: false,
            },
        ],

Expected Behavior

Just add the the overflow: hidden styling property to the parent element

Environment

- OS: MacOS
- Browser: Chrome
- Framework: React TS (https://www.npmjs.com/package/echarts-for-react)

Any additional comments?

No response

[plainheart]

Thanks for your report! I actually noticed this issue too and already fixed it in commit c369812 on the feat/datazoom/move-hanlde/border-radius branch. That said, this branch is for a new feature that’s still in progress – honestly, I almost forgot about it 😅. The draft PR is #18959. Let’s prioritize fixing your current issue first, though!

Reproduction Demo