icrubla opened a new issue, #21567: URL: https://github.com/apache/echarts/issues/21567
### Version 5.5.0 ### Link to Minimal Reproduction https://echarts.apache.org/examples/en/editor.html (Please paste the code provided in the "Steps to Reproduce" section into the Official Editor). ### Steps to Reproduce 1. Open the Official ECharts Editor. 2. Paste the following minimal reproduction code, which generates a normal day of data, adds a massive 1-month empty time gap, and then generates another normal day of data: ```javascript var roundTime = echarts.time.roundTime; var formatTime = echarts.time.format; var BREAK_GAP = '1%'; var DATA_ZOOM_MIN_VALUE_SPAN = 3600 * 1000; var _data = generateData(); option = { useUTC: true, xAxis: [ { type: 'time', breaks: _data.breaks } ], yAxis: { type: 'value', min: 'dataMin' }, dataZoom: [ { type: 'inside', minValueSpan: DATA_ZOOM_MIN_VALUE_SPAN }, { type: 'slider', minValueSpan: DATA_ZOOM_MIN_VALUE_SPAN, showDataShadow: true } ], series: [{ type: 'line', symbolSize: 0, areaStyle: {}, data: _data.seriesData }] }; function generateData() { var seriesData = []; var breaks = []; var val = 1669; function generarDia(fechaStr) { var time = new Date(fechaStr + 'T09:30:00Z'); var endTime = new Date(fechaStr + 'T16:00:00Z').getTime(); while (time.getTime() <= endTime) { var delta = Math.floor((Math.random() - 0.5) * 20 * 100) / 100; val = +(val + delta).toFixed(2); seriesData.push([time.getTime(), val]); time.setMinutes(time.getMinutes() + 1); } return time.getTime(); } var finDia1 = generarDia('2024-04-09'); var inicioDia2 = new Date('2024-05-15T09:30:00Z').getTime(); seriesData.push([finDia1, NaN]); breaks.push({ start: finDia1, end: inicioDia2, gap: BREAK_GAP }); generarDia('2024-05-15'); return { seriesData: seriesData, breaks: breaks }; } ### Current Behavior The main chart correctly applies the `breaks`, cutting out the 1-month empty time gap perfectly. However, the internal preview area (`dataShadow`) of the `dataZoom` slider completely ignores the `breaks` configuration. It renders the massive time gap in a strictly linear way, drawing a huge flat line that fills up the majority of the pixel space. As a result, the data shadow completely loses synchronization with the main chart above it. The visual peaks drawn in the shadow are squashed to the sides and do not match the position of the slider handles. ### Expected Behavior The `dataZoom` data shadow should inherit or respect the `xAxis.breaks` configuration. If a time span is removed from the main axis via `breaks`, it should also be removed from the data shadow's internal calculation so both visual scales remain 1:1 synchronized. ### Environment ```markdown - OS: Any - Browser: Any - Framework: React / Vanilla ECharts ``` ### Any additional comments? Here is a screenshot of the official editor reproducing the bug (notice the massive flat gap in the dataZoom that doesn't exist in the main chart): <img width="1340" height="662" alt="Image" src="https://github.com/user-attachments/assets/0e8aeb49-b190-4259-b9c8-252e02dec4ba"; /> -- 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]
