fix: xAxis label overflow fixed when containLabel=true

[jiawulin001]

Brief Information

This pull request is in the type of:

• [x] bug fixing
• [ ] new feature
• [ ] others

What does this PR do?

Fix the problem of xAxis label overflow when grid.contailLabel is true.

Fixed issues

• fix #16875

Details

Before: What was the problem?

As is described in https://github.com/apache/echarts/issues/16875#issuecomment-1097508437, overflow of x-axis label is not considered when applying grid.containLabel.

After: How is it fixed in this PR?

Judgements whether the label will exceed boundary are added and grid will be adjusted accordingly.

Misc

• [ ] The API has been changed (apache/echarts-doc#xxx).
• [ ] This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

Attached

Merging options

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

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

[jiawulin001]

However the getTicksCoord will have a different result when user-set axisTick.interval and axisLabel.interval are different.

That's a good point. I rewrite the method with getViewsLabel and use their bounding rect to find the left and right exceeds. Please check it out.

[jiawulin001]

Just updated the code and delete the "simple optimization" of step. When step is larger than 1, It changes the number of label rects returned from function estimateLabelRect so getViewsLabel().tickvalue would not be able to catch the right label rect. Worse still, the number is usually cut by half so tickvalue will exceed the extent of the rect array and result in render error.

[jiawulin001]

Just update another fix to check the axis type before using tickValue to find the corresponding label rect. If axis type is value, tickValue would be the exact value at the tick so it would almost always exceed the extent of array of label rects. In that case, the index of the tick is used instead because axisLabel.interval is no longer active so index of tick and label would be sync.

[MrSquaare]

Hello, what's the state of this PR? Thanks :slightly_smiling_face:

[tracyfarah]

any updates on this?