apache / apache/echarts

[Bug] dataZoom showDataShadow ignores xAxis.breaks on time axis, causing severe visual desynchronization

Open
#21,567 1 comment 0 reactions 0 assignees View on GitHub
bug en pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### 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):

Image

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.