Skip to content
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

[Bug] datazoom.filterMode设为'empty'时line图在缩放至只剩一条数据时所有数据都依旧会渲然,未依照empty的规则进行筛选。 #20265

Open
linlang171 opened this issue Aug 18, 2024 · 5 comments
Labels
bug pending We are not sure about whether this is a bug/new feature.

Comments

@linlang171
Copy link

linlang171 commented Aug 18, 2024

Version

5.5.1

Link to Minimal Reproduction

https://codesandbox.io/p/sandbox/mystifying-panna-cnsctr?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clzz298bd00063j6ia36z1lal%2522%252C%2522sizes%2522%253A%255B100%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clzz298bd00023j6ibevxpehd%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clzz298bd00033j6ifopxt4dw%2522%257D%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clzz298bd00053j6igh24siiw%2522%257D%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clzz298bd00023j6ibevxpehd%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clzz298bc00013j6izi2gkt0f%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.js%2522%252C%2522state%2522%253A%2522IDLE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A12%252C%2522startColumn%2522%253A18%252C%2522endLineNumber%2522%253A12%252C%2522endColumn%2522%253A18%257D%255D%257D%255D%252C%2522id%2522%253A%2522clzz298bd00023j6ibevxpehd%2522%252C%2522activeTabId%2522%253A%2522clzz298bc00013j6izi2gkt0f%2522%257D%252C%2522clzz298bd00053j6igh24siiw%2522%253A%257B%2522id%2522%253A%2522clzz298bd00053j6igh24siiw%2522%252C%2522activeTabId%2522%253A%2522clzz2fexz00123j6i21dd24eq%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clzz298bd00043j6ivi6ysown%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A0%257D%252C%257B%2522type%2522%253A%2522DOCS%2522%252C%2522id%2522%253A%2522clzz2fexz00123j6i21dd24eq%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522clzz298bd00033j6ifopxt4dw%2522%253A%257B%2522tabs%2522%253A%255B%255D%252C%2522id%2522%253A%2522clzz298bd00033j6ifopxt4dw%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Steps to Reproduce

1、我的echarts配置如下
chart.setOption({
xAxis: {
type: "category",
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
},
yAxis: {
type: "value",
},
dataZoom: {
show: "true",
filterMode: "empty",
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: "line",
showBackground: true,
backgroundStyle: {
color: "rgba(180, 180, 180, 0.2)",
},
},
],
});
2、我观察到的
当区域缩放的范围较大时,数据会被正常过滤
image
但当我缩放至仅剩一个类目时所有数据会被在这条类目上渲染出来,并未被正确过滤
image
我的需求是希望在缩放过程可以保持y轴原始的数值范围不发生变化,所以我必须要将filterMode设为‘empty’,但是我非常不幸的发现了这个bug。
3、我的期望
我希望通过设置filterMode设为‘empty’,来保证原始的y轴数值范围不会在缩放过程发生变化。这在其它情况表现正常,但line图在被缩放至仅剩一条数据时发生了这个bug,我希望该筛选方式在这种情况下依旧有效。

Current Behavior

datazoom.filterMode设为'empty'时line图在缩放至只剩一条数据时所有数据都依旧会渲然,未依照empty的规则进行筛选。
image

Expected Behavior

仅展示一条数据,且y轴数值范围保持不变

Environment

- OS: macOS & windows11
- Browser:Chrome  127.0.6533.120 & Edge 127.0.2651.105
- Framework: 原生js

Any additional comments?

我的需求时希望缩放过程y轴数值区间不发生变化,如果该bug不好修复,或许你可以告诉其它的方案?
比如是否有办法获取原始的默认的y轴数值范围,然后在去将其min和max设为对应值来解决该问题?

@linlang171 linlang171 added the bug label Aug 18, 2024
@echarts-bot echarts-bot bot added the pending We are not sure about whether this is a bug/new feature. label Aug 18, 2024
Copy link

echarts-bot bot commented Aug 18, 2024

@linlang171 It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

TITLE

[Bug] When datazoom.filterMode is set to 'empty', all data in the line graph will still be rendered when zoomed to only one data left, and the filter is not based on the empty rule.

@linlang171
Copy link
Author

Can anyone help me?

@helgasoft
Copy link

This is indeed a bug with dataZoom filterMode "empty" and "none".

is there a way to get the original default y-axis value range, and then set its min and max to corresponding values ​​to solve the problem?

yes - Demo

@linlang171
Copy link
Author

This is indeed a bug with dataZoom filterMode "empty" and "none".

is there a way to get the original default y-axis value range, and then set its min and max to corresponding values ​​to solve the problem?

yes - Demo

I don't think this may be a good solution. The maximum value of the coordinate axis value range often needs to be slightly larger than the maximum value of the data in order to have a good visual effect. Otherwise, when the maximum value is not in whole tens or hundreds and is scaled out, the graph will be tightly attached to the upper part of the coordinate axis, and the scale division will be uneven.

@linlang171
Copy link
Author

I want to make a PR to Resolve this issue. #20495 @Ovilia

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug pending We are not sure about whether this is a bug/new feature.
Projects
None yet
Development

No branches or pull requests

2 participants