[Bug] Graph Line Distortion When Zooming: Unexpected Connections Between Remaining Points

[treisebast]

Version

5.5.1

Link to Minimal Reproduction

Steps to Reproduce

option = {
xAxis: {
type: 'category',
boundaryGap: false
},
yAxis: {
type: 'value',
boundaryGap: [0, '30%']
},
dataZoom: [
{
type: 'inside'
},
{
type: 'slider',
showDataShadow: false,
handleIcon:
'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%'
},
{
type: 'inside',
orient: 'vertical'
},
{
type: 'slider',
orient: 'vertical',
showDataShadow: false,
handleIcon:
'path://M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
handleSize: '80%'
}
],
visualMap: {
type: 'piecewise',
show: false,
dimension: 0,
seriesIndex: 0,
pieces: [
{
gt: 1,
lt: 3,
color: 'rgba(0, 0, 180, 0.4)'
},
{
gt: 5,
lt: 7,
color: 'rgba(0, 0, 180, 0.4)'
}
]
},
series: [
{
type: 'line',
smooth: 0.6,
symbol: 'none',
lineStyle: {
color: '#5470C6',
width: 5
},
markLine: {
symbol: ['none', 'none'],
label: { show: false },
data: [{ xAxis: 1 }, { xAxis: 3 }, { xAxis: 5 }, { xAxis: 7 }]
},
areaStyle: {},
data: [
['2019-10-10', 200],
['2019-10-11', 560],
['2019-10-12', 750],
['2019-10-13', 580],
['2019-10-14', 250],
['2019-10-15', 300],
['2019-10-16', 450],
['2019-10-17', 300],
['2019-10-18', 100]
]
}
]
};

Current Behavior

This is what the chat looks like after initialization:

When zooming into the chart, the curve of the chart changes in a way that it no longer displays the desired shape or behavior:

Expected Behavior

The actual curve of the graph should remain approximately the same:

When zooming into the chart and some points end up outside the visible area, the remaining points are automatically reconnected, creating new connections. This, however, alters the curve of the graph. My expectation is that the graph's line should exit the chart at the x-axis (zero line) and re-enter later without changing the original curve.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[helgasoft]

confirmed - Demo