fix(gauge): fix progress bar may become unexpectedly circle when value is 0 and progress.roundCap is enabled.

[plainheart]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

1. Fix progress bar may become unexpectedly circle when value is 0 and progress.roundCap is enabled.
2. Fix ticks don't follow the axis direction when the chart is anticlockwise.

Fixed issues

• [Bug] 仪表盘设置value为0时出现满圆覆盖图形 #16640

Details

Before: What was the problem?

After: How is it fixed in this PR?

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

Please refer to test/gauge-case.html.

Others

Merging options

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

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.

The pull request is marked to be PR: author is committer because you are a committer of this project.

[plainheart]

It seems the clock test case in gauge-pointer.html doesn't work perfectly. There will be an unexpected rotation when the second becomes 0 from 59.

[pissang]

@plainheart

Sorry for the late reply. Seems when the pointer switching from 59 to 60. The startAngle and endAngle will be switched and the angleRangeSpan will be negative after normalizeArcAngles

Seems it's bacause in the case the clockwise is set to false when from 59 to 60. Similar case on the example https://echarts.apache.org/examples/zh/editor.html?c=gauge-clock&lang=js didn't have this issue.

[pissang]

It also fixes the issue when startAngle is set smaller than endAngle.

Before:

After:

There is another undefined behavior when the angle span is larger than 360. The old logic will mod the angles and current will treat it as a circle.

Before:

After:

From my side the new behavior is more expected.

[plainheart]

Seems it's bacause in the case the clockwise is set to false when from 59 to 60. Similar case on the example https://echarts.apache.org/examples/zh/editor.html?c=gauge-clock&lang=js didn't have this issue.

@pissang The example on the website looks well since it disables the animation when the pointer is 60. And we can see the switch from 59 to 60 has no animation.

[pissang]

LGTM

[echarts-bot]

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