Skip to content

[Bug] 仪表图设置数据超出0-1范围后,刻度仪表图与普通仪表图的渲染表现不一致 #3859

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
purpose233 opened this issue Mar 28, 2025 · 3 comments · Fixed by #3895
Assignees
Labels
bug Something isn't working

Comments

@purpose233
Copy link
Contributor

Version

1.13.5

Link to Minimal Reproduction

null

Steps to Reproduce

不同仪表图中设置仪表图数据大于 1

Current Behavior

Image

Image

Image

Expected Behavior

不同仪表图对齐渲染表现

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

@purpose233 purpose233 added the bug Something isn't working label Mar 28, 2025
@skie1997
Copy link
Contributor

仪表图分为两种配置方式:

  1. gauge: {type: 'circularProgress'}, 指使用环形进度系列,绘制仪表图(如果不指定type的话,默认使用环形进度系列)。
    此时,会限制轴范围:
    Image

  2. gauge: {type: 'gauge'},指使用仪表系列,绘制仪表图
    此时,不限制轴范围:
    Image

对于上述demo:
demo1: 没有任何type指定,所以走的gauge: {type: 'circularProgress'},轴范围被限制在[0,1],当数据超过1,直接绘制超出范围。
demo2: 指定了gauge: {type: 'circularProgress'},但同时设置了tickMask,有了这个配置,绘制图元时会增加clipPath,所以绘制不会超出范围。
Image
demo3: 指定了gauge: {type: 'gauge'}, 轴不会被指定范围,于是根据数据范围自动设置轴范围,所以图元绘制不会超出轴范围。

@skie1997
Copy link
Contributor

统一绘制效果的方案:
新增一个配置,超出轴范围,自动clip

@skie1997
Copy link
Contributor

Image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants