apache / apache/echarts

[Bug] Slider dataZoom xAxis is invalid when 1 single data is represented on line echart

Open
#21,404 2 comments 2 reactions 0 assignees View on GitHub
bug en pending
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.

Image

```
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.

Image

```
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.