mayur9210 opened a new pull request, #21447:
URL: https://github.com/apache/echarts/pull/21447
## Brief Information
This pull request is in the type of:
- [x] 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
- #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.
- [x] 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
- [x] 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
- [x] Please squash the commits into a single one when merging.
--
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]
