fix(legend): respect scroll legend width. close #12562

[rahul37wallst-sudo]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

Respect legend.width as the maximum cross-axis size for vertical scroll legends and clip overflowing legend content.

Fixed issues

• Setting width to legend not working!! #12562: Setting width on a scroll legend did not constrain long legend item text.

Details

Before: What was the problem?

For a vertical scroll legend, legend.width was not treated as the visible maximum width of the scrollable legend content.

When legend item names were very long, the legend content and background could expand beyond the configured width, so the option below did not keep the legend within the expected width:

legend: {
    type: 'scroll',
    orient: 'vertical',
    width: 300
}

After: How does it behave after the fixing?

Vertical scroll legends now cap the visible cross-axis size by the configured width.

The fix computes the visible main rectangle using the smaller of the measured content/controller width and the configured max width. It also applies clipping when the content overflows the configured cross-axis size, even if page controls are not needed.

A regression test was added to verify that a vertical scroll legend with long item names keeps both the background and clip rectangle within the configured legend.width.

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 uses 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

test/ut/spec/component/legend/scrollableLegend.test.ts

Validation run:

npx jest --config test/ut/jest.config.cjs --coverage=false --runInBand --runTestsByPath test/ut/spec/component/legend/scrollableLegend.test.ts
npx eslint src/component/legend/ScrollableLegendView.ts test/ut/spec/component/legend/scrollableLegend.test.ts
git --no-pager diff --check
npm run checktype

Merging options

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

Other information

N.A.