echarts-bot[bot]
commented
1 year ago @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
MatthiasMert
plainheart
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
Any additional comments?
没