Version
6.0.0
Link to Minimal Reproduction
Demo (provided by 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);
<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
Version
6.0.0
Link to Minimal Reproduction
Demo (provided by 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.
console.log('SIZE', el, el?.clientWidth, el?.clientHeight);
Expected Behavior
The normal and logical operation is that it functions as programmed and is placed at the bottom center.
console.log('SIZE', el, el?.clientWidth, el?.clientHeight);
Environment
Any additional comments?
No response