[Bug]1. background chart of dataZoom is not correct. 2. Data is not filtered in the correct order while dragging the dataZoom handler.

[da730]

Version

1.3.0

Link to Minimal Reproduction

null

Steps to Reproduce

const spec ={
"type": "bar",
"xField": [
"230822145933017",
"20001"
],
"yField": [
"10002"
],
"direction": "vertical",
"seriesField": "20001",
"data": [
{
"id": "data",
"values": [
{
"10001": "行 ID",
"10002": "13157091",
"10003": "230822145933086",
"20001": "行 ID",
"230822145933017": "中南",
"230822145933086": "13157091"
},
{
"10001": "利润",
"10002": "670885.3138181865",
"10003": "230822153117042",
"20001": "利润",
"230822145933017": "中南",
"230822153117042": "670885.3138181865"
},
{
"10001": "销售额",
"10002": "4137415.0951108932",
"10003": "230823145616016",
"20001": "销售额",
"230822145933017": "中南",
"230823145616016": "4137415.0951108932"
},
{
"10001": "行 ID",
"10002": "8296805",
"10003": "230822145933086",
"20001": "行 ID",
"230822145933017": "东北1",
"230822145933086": "8296805"
},
{
"10001": "利润",
"10002": "242191.509221375",
"10003": "230822153117042",
"20001": "利润",
"230822145933017": "东北1",
"230822153117042": "242191.509221375"
},
{
"10001": "销售额",
"10002": "2681567.4745378494",
"10003": "230823145616016",
"20001": "销售额",
"230822145933017": "东北1",
"230823145616016": "2681567.4745378494"
},
{
"10001": "行 ID",
"10002": "14550225",
"10003": "230822145933086",
"20001": "行 ID",
"230822145933017": "华东",
"230822145933086": "14550225"
},
{
"10001": "利润",
"10002": "607218.6830426604",
"10003": "230822153117042",
"20001": "利润",
"230822145933017": "华东",
"230822153117042": "607218.6830426604"
},
{
"10001": "销售额",
"10002": "4684506.442247391",
"10003": "230823145616016",
"20001": "销售额",
"230822145933017": "华东",
"230823145616016": "4684506.442247391"
},
{
"10001": "行 ID",
"10002": "6939587",
"10003": "230822145933086",
"20001": "行 ID",
"230822145933017": "华北",
"230822145933086": "6939587"
},
{
"10001": "利润",
"10002": "431053.2174924314",
"10003": "230822153117042",
"20001": "利润",
"230822145933017": "华北",
"230822153117042": "431053.2174924314"
},
{
"10001": "销售额",
"10002": "2447301.0141382217",
"10003": "230823145616016",
"20001": "销售额",
"230822145933017": "华北",
"230823145616016": "2447301.0141382217"
}
],
"fields": {
"10001": {
"alias": "指标名称 "
},
"10002": {
"alias": "指标值 "
},
"20001": {
"alias": "图例项 ",
"domain": [
"行 ID",
"利润",
"销售额"
],
"lockStatisticsByDomain": true
},
"230822145933017": {
"alias": "地区",
"domain": [
"东北1",
"华北",
"华东",
"中南"
],
"lockStatisticsByDomain": true,
"sortIndex": 0
},
"230822145933086": {
"alias": "行 ID"
},
"230822153117042": {
"alias": "利润"
},
"230823145616016": {
"alias": "销售额"
}
}
}
],
"dataZoom": [
{
"orient": "bottom",
"padding": {
"top": 15
},
"height": 28,
"backgroundColor": {
"style": {}
},
"backgroundChart": {
"area": {
"style": {}
}
},
"selectedBackground": {
"style": {}
},
"startHandler": {
"style": {}
},
"endHandler": {
"style": {}
},
"middleHandler": {
"visible": false
}
},
{
"orient": "left",
"padding": {
"right": 15
},
"width": 28,
"backgroundColor": {
"style": {}
},
"backgroundChart": {
"area": {
"style": {}
}
},
"selectedBackground": {
"style": {}
},
"startHandler": {
"style": {}
},
"endHandler": {
"style": {}
},
"middleHandler": {
"visible": false
}
}
],
"axes": [
{
"type": "band",
"tick": {
"visible": false
},
"grid": {
"visible": false,
"style": {
"stroke": "#DADCDD",
"lineWidth": 1,
"lineDash": [
4,
2
]
}
},
"orient": "bottom",
"visible": true,
"domainLine": {
"visible": true,
"style": {
"lineWidth": 1,
"stroke": "#989999"
}
},
"title": {
"visible": false,
"text": "地区",
"style": {
"fontSize": 12,
"fill": "#363839",
"fontWeight": "normal"
}
},
"sampling": false,
"label": {
"visible": true,
"style": {
"fontSize": 12,
"fill": "#6F6F6F",
"angle": 0,
"fontWeight": "normal"
},
"autoHide": true,
"autoHideMethod": "greedy",
"flush": true
},
"hover": true,
"background": {
"visible": false,
"state": {
"hover": {
"fillOpacity": 0.08,
"fill": "#141414"
}
}
},
"paddingInner": 0.15,
"paddingOuter": 0.075
},
{
"type": "linear",
"tick": {
"visible": false,
"style": {
"stroke": "rgba(255, 255, 255, 0)"
}
},
"niceType": "accurateFirst",
"grid": {
"visible": true,
"style": {
"stroke": "#DADCDD",
"lineWidth": 1,
"lineDash": [
4,
2
]
}
},
"orient": "left",
"visible": true,
"domainLine": {
"visible": true,
"style": {
"lineWidth": 1,
"stroke": "rgba(255, 255, 255, 0)"
}
},
"title": {
"visible": false,
"text": "行 ID",
"style": {
"fontSize": 12,
"fill": "#363839",
"fontWeight": "normal"
}
},
"sampling": false,
"label": {
"visible": true,
"style": {
"fontSize": 12,
"fill": "#6F6F6F",
"angle": 0,
"fontWeight": "normal"
},
"autoHide": true,
"autoHideMethod": "greedy"
},
"hover": true,
"background": {
"visible": true,
"state": {
"hover": {
"fillOpacity": 0.08,
"fill": "#141414"
}
}
},
"zero": true,
"nice": true
}
],
"color": {
"field": "20001",
"type": "ordinal",
"range": [
"#2E62F1",
"#4DC36A",
"#FF8406"
],
"specified": {},
"domain": [
"行 ID",
"利润",
"销售额"
]
},
"legends": [
{
"type": "discrete",
"id": "legend",
"orient": "right",
"position": "start",
"layoutType": "normal",
"visible": true,
"hover": false,
"maxCol": 1,
"title": {
"textStyle": {
"fontSize": 12,
"fill": "#6F6F6F"
}
},
"item": {
"spaceRow": 0,
"spaceCol": 0,
"padding": {
"top": 4,
"bottom": 4,
"left": 4,
"right": 22
},
"background": {
"style": {
"fillOpacity": 0.001
}
},
"label": {
"style": {
"fontSize": 12,
"fill": "#6F6F6F"
}
},
"shape": {
"style": {
"symbolType": "square"
}
}
},
"pager": {
"textStyle": {},
"handler": {
"style": {},
"state": {
"disable": {}
}
}
},
"padding": {
"top": 0,
"bottom": 0,
"left": 16,
"right": 0
}
}
],
"label": {
"visible": false,
"overlap": {
"hideOnHit": true,
"clampForce": true
},
"style": {
"fontSize": 12,
"fontWeight": "normal",
"fill": null,
"strokeOpacity": 1
},
"position": "inside",
"smartInvert": {
"brightColor": "#fff",
"darkColor": "#363839",
"brightStroke": null,
"brightStrokeWidth": 2,
"darkStroke": "rgba(255, 255, 255, 0.8)",
"darkStrokeWidth": 2
}
},
"tooltip": {
"handler": {}
},
"hover": {
"enable": true
},
"select": {
"enable": true
},
"bar": {
"state": {
"hover": {
"cursor": "pointer",
"fillOpacity": 0.8,
"stroke": "#58595B",
"lineWidth": 1,
"zIndex": 500
},
"selected": {
"cursor": "pointer",
"fillOpacity": 1,
"stroke": "#58595B",
"lineWidth": 1
},
"selected_reverse": {
"fillOpacity": 0.3,
"strokeWidth": 0.3
}
},
"clipByLayout": true
},
"background": "rgba(255, 255, 255, 0)",
"animation": false,
"hash": "acb8908b658c6d99a4bc0010f5f3833e"
}

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderAsync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

Current Behavior

1. background chart of datazoom is not correct:
   

2. Data is not filtered in the correct order while dragging the dataZoom handler:
   

Expected Behavior

1. background chart should be displayed correctly
2. data must be filtered in the correct order.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response