fix(legend): Fix legend text overflow and improve layout handling #20967
Conversation
|
Thanks for your contribution! |
|
The changes brought by this PR can be previewed at: https://echarts.apache.org/examples/editor?version=PR-20967@ed9013d |
|
Congratulations! Your PR has been merged. Thanks for your contribution! 👍 |
Ovilia
changed the title
| @@ -469,7 +473,8 @@ class LegendView extends ComponentView { | |||
| y: itemHeight / 2, | |||
| fill: textColor, | |||
| align: textAlign, | |||
| verticalAlign: 'middle' | |||
| verticalAlign: 'middle', | |||
| width: maxSize.width - textX, | |||
There was a problem hiding this comment.
If legend is layout horizontally, the "break" effect would be wrong.
And if the text has textStyle.backgroundColor, the effect would be broken by this change, since textStyle.width is shared by backgroundColor and overflow currently.
I think this feature currently can only serve for vertical layout.
And set width only if overflow: 'truncate' | 'break' | 'breakAll', for textStyle.backgroundColor` compromise.
And zrender need upgrade to support a more wise setting about text width, like maxWidth.
There was a problem hiding this comment.
OK. Let's leave this to the next version.
Brief Information
This pull request is in the type of:
What does this PR do?
Improve the overall user experience by ensuring legends are displayed properly, avoiding overflow issues with lengthy item labels or limited space.
Additionally, a new test has been provided to demonstrate and verify the changes by comparing the behavior before and after applying the changes.
Fixed issues
Details
Before: What was the problem?
The legend has a width of 128px and the overflow is configured to break words, but it doesn't do anything.
After: How does it behave after the fixing?
The legend item text overflow is working correctly.
Document Info
One of the following should be checked.
Misc
ZRender Changes
Related test cases or examples to use the new APIs
Others
Merging options
Other information