[Bug] Slider dataZoom xAxis is invalid when 1 single data is represented on line echart
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 11d 14h
- Merged PRs (30d)
- 8
Description
### Version
6.0.0
### Link to Minimal Reproduction
[Demo](https://echarts.apache.org/examples/en/editor.html?c=line-simple&code=VVHLasMwELz7K-amFowfeTk4pNBLbzm1UGjIQY3VRDSRgi0TG-N_765VQ3zR7uyOVprZOEYhnfyy9orqogtV4rs-4X5WBpU2p4sa-rhZbRysgdNXBdnoKmiO2KILANfeVA5xlE6dbNmKkGp8Kcde7KwRIcRHrTh8qmJA55rDW6k5vEs3hNqIQ9BvgsZN5_KLjzMpA9JstZjPs8ViliRJOMLlFK6mMJvCtYeP43yJKsNHBuFb7NNZctggjkNQl64v6VhzljFK-Zh7Bl7Sf6futvytgsDenCbTvJ7mlWzL0bgQzCX_PAtofafDVTY5dtKdI8qeoijiPzyjH-Xznpj3oy9OlTtbsEHGGiU8p1KlVjRp343uVbQWopLDg5yelf0B&enc=deflate) (provided by [helgasoft](https://github.com/helgasoft))
### Steps to Reproduce
I've attached the entire EChartsOption object and el element and sizes for both cases: the bug/invalid with 1 element on series, and the normal case that have more than only one element on series and works perfectly as expected
### Current Behavior
I don't know why, but when there's only one element in my chart, the zoom on the x-axis breaks and goes into an invalid position fallback (top right). However, if there's more than one element, then mysteriously it works correctly as it should and centers at the bottom.
```
EChartsOption = {
"animation": false,
"grid": {
"top": 30,
"left": 50,
"bottom": 91,
"right": 26
},
"legend": {
"top": 0,
"left": "center",
"type": "scroll",
"textStyle": {
"color": "#666"
},
"padding": [
10,
50,
10,
0
]
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "cross"
}
},
"toolbox": {
"show": true,
"padding": [
30,
60,
0,
0
],
"feature": {
"saveAsImage": {
"show": false
},
"dataView": {
"show": true,
"readOnly": true
}
}
},
"brush": {
"toolbox": [
"clear"
],
"brushMode": "single",
"brushType": "lineX",
"xAxisIndex": 0,
"transformable": false,
"brushStyle": {
"color": "#cccccc",
"borderWidth": 0
}
},
"series": [
{
"id": "DATA_x",
"type": "line",
"name": "x",
"data": [
[
1764337442000,
0.07
]
],
"showSymbol": true,
"symbolSize": 5,
"symbol": "none",
"lineStyle": {
"width": 2,
"color": "rgba(255, 99, 132, 1)"
},
"itemStyle": {
"color": "rgba(255, 99, 132, 1)"
},
"connectNulls": true,
"yAxisIndex": 0
},
{
"id": "DATA_y",
"type": "line",
"name": "y",
"data": [
[
1764337442000,
0.1
]
],
"showSymbol": true,
"symbolSize": 5,
"symbol": "none",
"lineStyle": {
"width": 2,
"color": "rgba(54, 162, 235, 1)"
},
"itemStyle": {
"color": "rgba(54, 162, 235, 1)"
},
"connectNulls": true,
"yAxisIndex": 0
},
{
"id": "DATA_z",
"type": "line",
"name": "z",
"data": [
[
1764337442000,
0.08
]
],
"showSymbol": true,
"symbolSize": 5,
"symbol": "none",
"lineStyle": {
"width": 2,
"color": "rgba(75, 192, 192, 1)"
},
"itemStyle": {
"color": "rgba(75, 192, 192, 1)"
},
"connectNulls": true,
"yAxisIndex": 0
}
],
"xAxis": [
{
"type": "time",
"name": "Time",
"nameLocation": "middle",
"nameGap": 35,
"nameTextStyle": {
"verticalAlign": "top",
"align": "center",
"color": "grey"
},
"axisLabel": {
"margin": 10,
"showMinLabel": true,
"showMaxLabel": true,
"rotate": 45,
"color": "#999",
"hideOverlap": false
},
"id": "x-main",
"scale": false,
"boundaryGap": false,
"max": 1764342600000,
"min": 1764328140000,
"minInterval": null,
"maxInterval": null,
"axisLine": {
"show": true,
"lineStyle": {
"color": "grey"
}
},
"splitLine": {
"show": true,
"lineStyle": {}
},
"minorTick": {
"show": true,
"lineStyle": {
"color": "grey"
}
},
"minorSplitLine": {
"show": false,
"lineStyle": {
"color": "grey"
}
},
"axisTick": {
"show": true,
"length": 10,
"lineStyle": {
"color": "grey"
}
},
"axisPointer": {
"show": true,
"snap": true,
"label": {
"show": true
}
},
"show": true
}
],
"yAxis": [
{
"type": "value",
"position": "left",
"name": "vRMS (mm/s)",
"nameLocation": "middle",
"nameGap": 10,
"nameRotate": 90,
"nameTextStyle": {
"color": "grey"
},
"axisLabel": {
"color": "grey"
},
"axisLine": {
"show": true,
"lineStyle": {
"color": "grey"
}
},
"yAxisIndex": 0,
"offset": 0
}
],
"dataZoom": [
{
"type": "inside",
"xAxisIndex": [
0
],
"filterMode": "none",
"zoomOnMouseWheel": "shift",
"moveOnMouseWheel": false,
"moveOnMouseMove": true
},
{
"type": "inside",
"yAxisIndex": [
0
],
"filterMode": "none",
"zoomOnMouseWheel": "shift",
"moveOnMouseWheel": false,
"moveOnMouseMove": true
},
{
"type": "slider",
"xAxisIndex": [
0
],
"filterMode": "none",
"moveOnMouseWheel": false,
"height": 18,
"bottom": 12,
"left": 40,
"right": 22,
"showDataShadow": true
},
{
"type": "slider",
"yAxisIndex": [
0
],
"filterMode": "none",
"moveOnMouseWheel": false,
"width": 18,
"right": 2,
"top": 12,
"bottom": 22,
"showDataShadow": true
}
]
}
```
----------------------
console.log('SIZE', el, el?.clientWidth, el?.clientHeight);
```
654 366
```
### Expected Behavior
The normal and logical operation is that it functions as programmed and is placed at the bottom center.
```
EChartsOption = {
"animation": false,
"grid": {
"top": 30,
"left": 50,
"bottom": 91,
"right": 26
},
"legend": {
"top": 0,
"left": "center",
"type": "scroll",
"textStyle": {
"color": "#666"
},
"padding": [
10,
50,
10,
0
]
},
"tooltip": {
"trigger": "axis",
"axisPointer": {
"type": "cross"
}
},
"toolbox": {
"show": true,
"padding": [
30,
60,
0,
0
],
"feature": {
"saveAsImage": {
"show": false
},
"dataView": {
"show": true,
"readOnly": true
}
}
},
"brush": {
"toolbox": [
"clear"
],
"brushMode": "single",
"brushType": "lineX",
"xAxisIndex": 0,
"transformable": false,
"brushStyle": {
"color": "#cccccc",
"borderWidth": 0
}
},
"series": [
{
"id": "DATA_x",
"type": "line",
"name": "x",
"data": [
[
1764671618000,
0.04
],
[
1764671680000,
0.03
],
[
1764671743000,
0.07
],
[
1764671805000,
0.06
],
[
1764671866000,
0.04
],
[
1764671928000,
0.05
],
[
1764671990000,
0.03
],
[
1764672053000,
0.04
],
[
1764672115000,
0.06
],
[
1764672178000,
0.03
]
],
"showSymbol": true,
"symbolSize": 5,
"symbol": "none",
"lineStyle": {
"width": 2,
"color": "rgba(255, 99, 132, 1)"
},
"itemStyle": {
"color": "rgba(255, 99, 132, 1)"
},
"connectNulls": true,
"yAxisIndex": 0
},
{
"id": "DATA_y",
"type": "line",
"name": "y",
"data": [
[
1764671618000,
0.03
],
[
1764671680000,
0.03
],
[
1764671743000,
0.03
],
[
1764671805000,
0.04
],
[
1764671866000,
0.05
],
[
1764671928000,
0.04
],
[
1764671990000,
0.04
],
[
1764672053000,
0.03
],
[
1764672115000,
0.05
],
[
1764672178000,
0.04
]
],
"showSymbol": true,
"symbolSize": 5,
"symbol": "none",
"lineStyle": {
"width": 2,
"color": "rgba(54, 162, 235, 1)"
},
"itemStyle": {
"color": "rgba(54, 162, 235, 1)"
},
"connectNulls": true,
"yAxisIndex": 0
},
{
"id": "DATA_z",
"type": "line",
"name": "z",
"data": [
[
1764671618000,
0.04
],
[
1764671680000,
0.04
],
[
1764671743000,
0.03
],
[
1764671805000,
0.04
],
[
1764671866000,
0.03
],
[
1764671928000,
0.06
],
[
1764671990000,
0.06
],
[
1764672053000,
0.03
],
[
1764672115000,
0.05
],
[
1764672178000,
0.03
]
],
"showSymbol": true,
"symbolSize": 5,
"symbol": "none",
"lineStyle": {
"width": 2,
"color": "rgba(75, 192, 192, 1)"
},
"itemStyle": {
"color": "rgba(75, 192, 192, 1)"
},
"connectNulls": true,
"yAxisIndex": 0
}
],
"xAxis": [
{
"type": "time",
"name": "Time",
"nameLocation": "middle",
"nameGap": 35,
"nameTextStyle": {
"verticalAlign": "top",
"align": "center",
"color": "grey"
},
"axisLabel": {
"margin": 10,
"showMinLabel": true,
"showMaxLabel": true,
"rotate": 45,
"color": "#999",
"hideOverlap": false
},
"id": "x-main",
"scale": false,
"boundaryGap": false,
"max": 1764676920000,
"min": 1764662460000,
"minInterval": null,
"maxInterval": null,
"axisLine": {
"show": true,
"lineStyle": {
"color": "grey"
}
},
"splitLine": {
"show": true,
"lineStyle": {}
},
"minorTick": {
"show": true,
"lineStyle": {
"color": "grey"
}
},
"minorSplitLine": {
"show": false,
"lineStyle": {
"color": "grey"
}
},
"axisTick": {
"show": true,
"length": 10,
"lineStyle": {
"color": "grey"
}
},
"axisPointer": {
"show": true,
"snap": true,
"label": {
"show": true
}
},
"show": true
}
],
"yAxis": [
{
"type": "value",
"position": "left",
"name": "vRMS (mm/s)",
"nameLocation": "middle",
"nameGap": 10,
"nameRotate": 90,
"nameTextStyle": {
"color": "grey"
},
"axisLabel": {
"color": "grey"
},
"axisLine": {
"show": true,
"lineStyle": {
"color": "grey"
}
},
"yAxisIndex": 0,
"offset": 0
}
],
"dataZoom": [
{
"type": "inside",
"xAxisIndex": [
0
],
"filterMode": "none",
"zoomOnMouseWheel": "shift",
"moveOnMouseWheel": false,
"moveOnMouseMove": true
},
{
"type": "inside",
"yAxisIndex": [
0
],
"filterMode": "none",
"zoomOnMouseWheel": "shift",
"moveOnMouseWheel": false,
"moveOnMouseMove": true
},
{
"type": "slider",
"xAxisIndex": [
0
],
"filterMode": "none",
"moveOnMouseWheel": false,
"height": 18,
"bottom": 12,
"left": 40,
"right": 22,
"showDataShadow": true
},
{
"type": "slider",
"yAxisIndex": [
0
],
"filterMode": "none",
"moveOnMouseWheel": false,
"width": 18,
"right": 2,
"top": 12,
"bottom": 22,
"showDataShadow": true
}
]
}
```
----------------------
console.log('SIZE', el, el?.clientWidth, el?.clientHeight);
```
654 366
```
### Environment
```markdown
- OS: Windows 11
- Browser: Firefox
- Framework: Angular18.1.2
"echarts": "6.0.0",
"ngx-echarts": "18.0.0",
```
### Any additional comments?
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.