fix(axisLabel): fix axisLabel rotating with grid.containLabel #12259

[quillblue]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

Update function of calculating updated height & width for rotated axis labels
Fix issue #12259

Fixed issues

Close #12259

Details

In previous rotateTextRect() in axisHelper.js, take cos value of negative rotate will got negative result, which causes calculated width/height of rotated axis label is smaller than actual size. In grid, it will cause axis labels be cut.

After: How is it fixed in this PR?

As physically we need cos/sin of rotate angle to be positive (or 0), add Math.abs here to solve this issue,

Usage

Are there any API changes?

• The API has been changed.

Related test cases or examples to use the new APIs

NA.

Others

Merging options

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

Other information

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

[susiwen8]

Please don't submit any dist file

[quillblue]

@susiwen8 Thanks for kind reminder. Revert changes in dist back to previous version in new commit. Accordingly please squash to one during merging.

[susiwen8]

@quillblue Could you add a test case for this PR?

[quillblue]

@susiwen8 Sure. In latest commit I added a test case using same option as original issue using
and below are before&after comparision
Before:

After:

[Ovilia]

Source code changes look good to me.
I think the test case could be included in the current test case axisLabel.html.

[quillblue]

@Ovilia combined to axisLabel.html case 2 per your idea. The existing case has animation to show the rotate of labels, which has greater idea than my demo.
Though rotate: 330 is same as rotate: -30, I set xAxis rotate from -180 to 180 (instead of 0-360) as users are more used to use negative value to represent clockwise rotation.

[echarts-bot]

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