用了type: 'line',开启了sampling: 'lttb',用了connectNulls: true,在大尺寸2560上折线图可以正常，在13寸的苹果电脑上折线连线异常

[FN-G]

Version

"echarts": "^5.0.0",

Link to Minimal Reproduction

/* * @Descripttion: * @Version: * @author: FN-G * @Date: 2020-11-12 13:43:21 * @LastEditors: FN-G * @LastEditTime: 2023-08-03 18:19:07 / import * as echarts from 'echarts' /* * 画双折线图 * @param container 容器 * @param xData x轴数据 * @param data_l0 第一条折线图数据 * @param data_0 第一根柱图数据 * @param data_1 第二根柱图数据 * @param data_2 第三根柱图数据 */ export function drawOnlyLinesChart(container, dataSource, xData, valuType = 1, lineType = 'solid', lineWidth = 0, units = []) { const doubleLine = echarts.init(document.getElementById(container), null, { renderer: 'svg' }) var series = [] const colorArr = [ '#0098EE', '#FF9600', '#00BB00', '#22C8FF', '#FFD000', '#FF3320', '#87E2CF', '#B7EB8F', '#4994EC', '#603CB1', '#FAEB60', '#9031AA', '#FFFFFF' ] for (var i = 0; i < dataSource.length; i++) { series.push({ large: true, largeThreshold: 1000, name: dataSource[i].name, type: 'line', sampling: 'lttb', // symbol: 'none', symbol:'circle', symbolSize: 0.001, // symbolSize: 6 + lineWidth, lineStyle: { type: lineType, width: 3 + lineWidth }, // showSymbol: true, // showAllSymbol: true, connectNulls: true, itemStyle:{ normal:{ label: { color: colorArr[i], show: false, position: 'top', formatter: '{@score}' } } }, labelLayout: { hideOverlap: true }, data: JSON.parse(JSON.stringify(dataSource[i].data)) }) } if (series.length === 0) { series = [{ name: '', type: 'line', symbol: 'circle', symbolSize: 6 }] } // 图表最大值和步进计算 let yMax = 0 let yMin = 0 let stepNum = 0 let hasNegative = false dataSource.map(item => { const arr = item.data hasNegative && arr.push(yMin) arr.push(yMax) yMin = Math.min(...arr) yMax = Math.max(...arr) if (Number(yMin) < 0) { hasNegative = true } }) yMax = parseInt(yMax * 1 + 10) yMax = valuType * 1 === 2 ? (yMax < 100 ? yMax : 100) : yMax stepNum = hasNegative ? Math.floor((yMax - yMin) / 5) : Math.floor(yMax / 5) const doubleLineOption = { color: colorArr, legend: { data: dataSource, icon: "rect", itemHeight: 3, itemWidth: 15, right: 20 }, grid: { top: 50, left: 35, right: 22, bottom: 80, containLabel: true }, tooltip: { extraCssText: 'width: auto', trigger: 'axis' }, dataZoom: [ { show: true, realtime: true, start: 0, end: 100, height: 16, }, { type: 'inside', realtime: true, start: 0, height: 16, end: 100 } ], xAxis: { data: xData, offset: 10, axisLabel: { formatter: (val) => { return new Date(val).format('MM-dd hh:mm:ss') } }, axisLine: { show: true, lineStyle: { type: 'solid' } } }, yAxis: { type: 'value', max: yMax, splitNumber: 4, interval: stepNum, nameLocation: 'middle', nameTextStyle: { // Y轴文字垂直居中 color: 'red', padding: 40 }, axisLabel: { formatter: '{value}' }, splitLine: { show: true, lineStyle: { type: 'dashed' } } }, series: series } doubleLine.clear() doubleLine.setOption(doubleLineOption) window.addEventListener('resize', function() { doubleLine.resize() }) }

Steps to Reproduce

只有一条折线数据是没问题的，下面是放大之后的，在大尺寸电脑2560上显示也没有线条交叉乱掉的情况

Current Behavior

用了type: 'line',开启了sampling: 'lttb',用了connectNulls: true,在大尺寸2560上折线图可以正常，在13寸的苹果电脑上折线连线异常

Expected Behavior

希望折线图不要出现连线异常的情况

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

没

[echarts-bot]

@FN-G It seems you are not using English, I've helped translate the content automatically. To make your issue understood by more people and get helped, we'd like to suggest using English next time. 🤗

TRANSLATED

TITLE

With type: 'line', sampling: 'lttb' turned on, connectNulls: true, line charts work fine on large size 2560, and line connections are abnormal on 13-inch Apple computers

BODY

Version

"echarts": "^5.0.0",

Link to Minimal Reproduction

/* * @Descripttion: * @Version: * @author: FN-G * @Date: 2020-11-12 13:43:21 * @LastEditors: FN-G * @LastEditTime: 2023-08-03 18:19 :07 / import * as echarts from 'echarts' /* * draw double line chart * @param container container * @param xData x-axis data * @param data_l0 first line chart data * @param data_0 first column Chart data* @param data_1 Second bar chart data* @param data_2 Third bar chart data*/ export function drawOnlyLinesChart(container, dataSource, xData, valueType = 1, lineType = 'solid', lineWidth = 0, units = []) { const doubleLine = echarts.init(document.getElementById(container), null, { renderer: 'svg' }) var series = [] const colorArr = [ '#0098EE', '#FF9600', '#00BB00 ', '#22C8FF', '#FFD000', '#FF3320', '#87E2CF', '#B7EB8F', '#4994EC', '#603CB1', '#FAEB60', '#9031AA', '#FFFFFF ' ] for (var i = 0; i < dataSource.length; i++) { series.push({ large: true, largeThreshold: 1000, name: dataSource[i].name, type: 'line', sampling: 'lttb ', // symbol: 'none', symbol:'circle', symbolSize: 0.001, // symbolSize: 6 + lineWidth, lineStyle: { type: lineType, width: 3 + lineWidth }, // showSymbol: true, // showAllSymbol: true, connectNulls: true, itemStyle:{ normal:{ label: { color: colorArr[i], show: false, position: 'top', formatter: '{@score}' } } }, labelLayout: { hideOverlap : true }, data: JSON.parse(JSON.stringify(dataSource[i].data)) }) } if (series.length === 0) { series = [{ name: '', type: 'line' , symbol: 'circle', symbolSize: 6 }] } // chart maximum value and step calculation let yMax = 0 let yMin = 0 let stepNum = 0 let hasNegative = false dataSource.map(item => { const arr = item .data hasNegative && arr.push(yMin) arr.push(yMax) yMin = Math.min(...arr) yMax = Math.max(...arr) if (Number(yMin) < 0) { hasNegative = true } }) yMax = parseInt(yMax * 1 + 10) yMax = valuType * 1 === 2 ? (yMax < 100 ? yMax : 100) : yMax stepNum = hasNegative ? Math. floor((yMax - yMin) / 5 ) : Math.floor(yMax / 5) const doubleLineOption = { color: colorArr, legend: { data: dataSource, icon: "rect", itemHeight: 3, itemWidth: 15, right: 20 }, grid: { top: 50 , left: 35, right: 22, bottom: 80, containLabel: true }, tooltip: { extraCssText: 'width: auto', trigger: 'axis' }, dataZoom: [ { show: true, realtime: true, start: 0, end: 100, height: 16, }, { type: 'inside', realtime: true, start: 0, height: 16, end: 100 } ], xAxis: { data: xData, offset: 10, axisLabel: { formatter: (val) => { return new Date(val).format('MM-dd hh:mm:ss') } }, axisLine: { show: true, lineStyle: { type: 'solid' } } } , yAxis: { type: 'value', max: yMax, splitNumber: 4, interval: stepNum, nameLocation: 'middle', nameTextStyle: { // Y-axis text is vertically centered color: 'red', padding: 40 }, axisLabel : { formatter: '{value}' }, splitLine: { show: true, lineStyle: { type: 'dashed' } } }, series: series } doubleLine.clear() doubleLine.setOption(doubleLineOption) window.addEventListener(' resize', function() { doubleLine. resize() }) }

Steps to Reproduce

There is no problem with only one polyline data. The following is after zooming in. It is displayed on a large-size computer 2560 and there are no lines crossing and messing up.

Current Behavior

Type: 'line' is used, sampling: 'lttb' is enabled, and connectNulls: true is used, the line chart can be normal on the large size 2560, but the line connection is abnormal on the 13-inch Apple computer

Expected Behavior

I hope that there will be no abnormal connection in the line chart

Environment

- OS:
-Browser:
- Framework:

Any additional comments?

without

[MatthiasMert]

Try to to set animation: false.

[plainheart]

I'm not sure if this is an issue related to #18942 but it looks like it is. It would be great if you can help check whether #18960 also fixes your problem.