AlvaroGuGo303 opened a new issue, #21404: URL: https://github.com/apache/echarts/issues/21404
### Version 6.0.0 ### Link to Minimal Reproduction N/A ### 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. <img width="863" height="489" alt="Image" src="https://github.com/user-attachments/assets/fab26c16-4c7b-435a-a50d-1aecfff647b7"; /> ``` 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. <img width="863" height="472" alt="Image" src="https://github.com/user-attachments/assets/7e1477e7-9499-47da-928e-eeea9fcf2ad9"; /> ``` 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 ```markdown - OS: Windows 11 - Browser: Firefox - Framework: Angular18.1.2 "echarts": "6.0.0", "ngx-echarts": "18.0.0", ``` ### Any additional comments? _No response_ -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
