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、我观察到的
当区域缩放的范围较大时，数据会被正常过滤
但当我缩放至仅剩一个类目时所有数据会被在这条类目上渲染出来，并未被正确过滤
我的需求是希望在缩放过程可以保持y轴原始的数值范围不发生变化，所以我必须要将filterMode设为‘empty’，但是我非常不幸的发现了这个bug。
3、我的期望
我希望通过设置filterMode设为‘empty’，来保证原始的y轴数值范围不会在缩放过程发生变化。这在其它情况表现正常，但line图在被缩放至仅剩一条数据时发生了这个bug，我希望该筛选方式在这种情况下依旧有效。
Current Behavior
datazoom.filterMode设为'empty'时line图在缩放至只剩一条数据时所有数据都依旧会渲然，未依照empty的规则进行筛选。
Expected Behavior
仅展示一条数据，且y轴数值范围保持不变
Environment
- OS: macOS & windows11
- Browser:Chrome 127.0.6533.120 & Edge 127.0.2651.105
- Framework: 原生js
我的需求时希望缩放过程y轴数值区间不发生变化，如果该bug不好修复，或许你可以告诉其它的方案？
比如是否有办法获取原始的默认的y轴数值范围，然后在去将其min和max设为对应值来解决该问题？
4条答案
按热度按时间ztigrdn81#
@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.
k5hmc34c2#
Can anyone help me？
41zrol4v3#
This is indeed a bug with dataZoomfilterMode "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
e37o9pze4#
This is indeed a bug with dataZoomfilterMode "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.