[Bug] Slider dataZoom xAxis is invalid when 1 single data is represented on line echart #21404
Description
Version
6.0.0
Link to Minimal Reproduction
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);
<div _ngcontent-ng-c2609950121="" echarts="" id="k" stopwheelscroll="" class="canvasGlobalChart ng-star-inserted" ng-reflect-options="[object Object]" ng-reflect-auto-resize="true" ng-reflect-init-opts="[object Object]" style="user-select: none; position: relative;" _echarts_instance_="ec_1764757330584" ng-reflect-merge="[object Object]"><div style="position: relative; width: 654px; height: 366px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas style="position: absolute; left: 0px; top: 0px; width: 654px; height: 366px; user-select: none; padding: 0px; margin: 0px; border-width: 0px;" data-zr-dom-id="zr_0" width="654" height="366"></canvas></div><div class=""></div></div>
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);
<div _ngcontent-ng-c2609950121="" echarts="" id="k" stopwheelscroll="" class="canvasGlobalChart ng-star-inserted" ng-reflect-options="[object Object]" ng-reflect-auto-resize="true" ng-reflect-init-opts="[object Object]" style="user-select: none; position: relative;" _echarts_instance_="ec_1764757330584" ng-reflect-merge="[object Object]"><div style="position: relative; width: 654px; height: 366px; padding: 0px; margin: 0px; border-width: 0px; cursor: grab;"><canvas style="position: absolute; left: 0px; top: 0px; width: 654px; height: 366px; user-select: none; padding: 0px; margin: 0px; border-width: 0px;" data-zr-dom-id="zr_0" width="654" height="366"></canvas></div><div class=""></div></div>
654 366
Environment
- OS: Windows 11
- Browser: Firefox
- Framework: Angular18.1.2
"echarts": "6.0.0",
"ngx-echarts": "18.0.0",Any additional comments?
No response