[Raman-Katiyar]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

Fixes category axis labels being dropped by the auto interval calculation even when they are wrapped or truncated into a fixed axisLabel.width (with overflow: 'break' or 'truncate'), so they would not overlap.

Fixed issues

• [Bug] 柱状图在图表宽度有限时，轴label部分缺失 #21194: [Bug] 柱状图在图表宽度有限时，轴label部分缺失 (bar chart axis labels partially missing when chart width is limited)

Details

Before: What was the problem?

With the option from #21194 (bar chart, grid.width: 300 with containLabel, and xAxis.axisLabel: {width: 50, overflow: 'break', hideOverlap: false}), only two of the three category labels are displayed: the middle label ("YY当日发电量") is missing, although every label is wrapped into the configured 50px width and the wrapped labels do not overlap (see the screenshot in #21194). The labels only all appear when axisLabel.interval: 0 is set explicitly.

The auto category interval in calculateCategoryInterval (src/coord/axisTickLabelBuilder.ts) measures the unwrapped content bounding rect of each label and derives the interval from that width. It never takes axisLabel.width into account, so for a label that is wrapped or truncated into a fixed width it overestimates the space the label occupies along the axis (here about 100px estimated vs. an about 86px category band), computes interval 1, and drops every second label even though the rendered labels would fit.

After: How does it behave after the fixing?

All three labels from #21194 are displayed, wrapped into the configured width, and the behaviour matches what axisLabel.interval: 0 already produced for this case.

The interval calculation now respects the effective label width: fetchAutoCategoryIntervalCalculationParams exposes the numeric axisLabel.width when overflow is 'break' or 'truncate' (exactly the cases in which the width is applied to the label layout in createTextStyle), and calculateCategoryInterval caps the per-label width estimate at that width. The cap is skipped for (nearly) vertical label rotation, where the occupied width is governed by the content height instead. Nothing changes when no effective width is set: labels that genuinely overlap at their natural width are still thinned out by the auto interval as before.

Validation performed locally:

• New unit tests in test/ut/spec/component/axis/axisLabel.test.ts (4 cases). Note: the Jest environment measures text with jest-canvas-mock at 1px per character, which cannot reproduce this layout bug, so the test installs a deterministic, browser-like measureText through zrender's setPlatformAPI before creating the charts.
  • With the fix reverted, the two regression cases fail exactly as reported: the visible labels are ["XX当日发电量", "ZZ当日发电量"] — the middle label is dropped.
  • With the fix, all 4 cases pass: overflow: 'break' and overflow: 'truncate' with width: 50 show all labels, while width without an effective overflow — and no width at all — still thin out the overlapping labels via the auto interval.
• Full unit test suite (npx jest --config test/ut/jest.config.cjs): 27 suites, 198 tests, all pass.
• npm run checktype: pass.
• ESLint on the changed files: pass.
• npm run build: pass (the regenerated dist/ output was reverted and is not part of this PR).

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

New unit test file test/ut/spec/component/axis/axisLabel.test.ts; the minimal reproduction option in #21194 can also be used to verify manually (all three category labels are shown, wrapped into two lines each).

Merging options

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

Other information

This is a single commit on a fresh branch from master, touching only src/coord/axisTickLabelBuilder.ts and the new unit test file.

Could a maintainer please approve the CI workflow run for this PR? Thank you!

[echarts-bot]

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

Please DO NOT commit the files in dist, i18n, and ssr/client/dist folders in a non-release pull request. These folders are for release use only.