Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

This pull request fixes a visual bug where the slider dataZoom component's background color does not respect the borderRadius configuration option. The fix ensures that when borderRadius is specified, the background rectangle is properly clipped to match the rounded corners.

Fixed issues

• [Bug] The slider mode dataZoom should clip the background by the borderRadius property #21231 : The slider mode dataZoom should clip the background by the borderRadius property

Details

Before: What was the problem?

When using the slider dataZoom component with both backgroundColor and borderRadius configured, the background color would extend beyond the defined border radius, creating a visual inconsistency. The rounded corners were applied to some elements but not to the background rectangle, resulting in the background "bleeding" outside the intended bounds.

The background rectangle was created without the r (radius) property in the shape configuration, causing it to ignore the borderRadius setting.

After: How does it behave after the fixing?

The background rectangle now properly respects the borderRadius configuration. The fix retrieves the borderRadius value from the dataZoomModel and applies it to the shape's r property, ensuring consistent rounded corners across all visual elements of the slider.

Implementation details:

• Added const borderRadius = dataZoomModel. get('borderRadius') to retrieve the configuration value
• Added r: borderRadius to the Rect shape properties to apply the border radius

The fix is minimal (2 lines) and follows the existing pattern used in other parts of the codebase where border radius is applied to shapes.

Document Info

One of the following should be checked.

• This PR doesn't relate to document changes
• The document should be updated later
• The document changes have been made in apache/echarts-doc#xxx

Misc

Security Checking

• This PR does not use security-sensitive Web APIs.

ZRender Changes

• This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

N/A - This is a bug fix for existing functionality. The borderRadius option already exists in the dataZoom configuration; this fix simply ensures it's applied to the background element.

Merging options

• Please squash the commits into a single one when merging.