fix(marker): correct markArea on inverse category axis

[jesco-absolut]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

Fixes markArea band positioning on inverted category axes.

Fixed issues

• close MarkArea on horizontal bar chart with inverse: true doesn't work for the first bar #21652: markArea on a horizontal bar chart with yAxis.inverse: true renders one category band off.

Details

Before: What was the problem?

For a horizontal bar chart with an inverted category axis:

yAxis: { type: 'category', inverse: true }
markArea: { data: [[{ yAxis: 0 }, { yAxis: 0 }]] }

the markArea for the first category rendered on the second category, while markLine at the same { yAxis: 0 } value rendered on the correct first category.

The root cause was that fixOnBandTicksCoords expanded category tick coordinates to band boundaries using a positive bandWidth, assuming coordinates increase as tick values increase. On inverted axes, the coordinate extent is reversed, so the half-band boundary shift moved in the wrong direction.

After: How does it behave after the fixing?

markArea and markLine now cover the same category for both normal and inverted category axes.

The fix makes the on-band tick boundary step follow the axis coordinate direction:

• normal extent: use +bandWidth
• inverted extent: use -bandWidth

Blast radius note: this is unchanged for normal/ascending axis extents because coordStep === bandWidth in that case. It is also unchanged for axisTick.alignWithLabel: true because fixOnBandTicksCoords returns before this code path. Non-category axes are not affected.

A visual regression case was added to test/bar-markArea.html with normal and inverted horizontal bar charts. The test overlays a red markLine at { yAxis: 0 } so the blue markArea can be verified against the same category.

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/bar-markArea.html

Merging options

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

Other information

Validation run locally:

npm run checktype
npx eslint src/coord/Axis.ts
git diff --check

I also verified the reported repro with SVG SSR before and after the fix:

• before: the inverse-axis markArea polygon covered the second band while markLine stayed on the first band
• after: the inverse-axis markArea polygon covers the first band and aligns with markLine

[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.

[jesco-absolut]

Hi maintainers — would this inverse-category-axis markArea fix be of interest for review? The PR is ready from my side, and I’m happy to address any feedback. Thanks for your time.

[plainheart]

Hi, thanks for your contribution! The fix looks good to me! I plan to include this fix into the patch version 6.1.1. Can you rebase to the release branch?

[echarts-bot]

Congratulations! Your PR has been merged. Thanks for your contribution! 👍