echarts
echarts copied to clipboard
apache
[Bug] Slider dataZoom xAxis is invalid when 1 single data is represented on line echart
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
Yes, but my question is how can I fix it? Is it a problem with the Echarts and there's nothing I can do? Or can I fix it? Is it a problem with my configuration?
I know this happens, my question is how to fix it.
Thx also for be able to reproduce in a demo <3 to help others to see it