[Bug] Too many split lines on time axis even though provided explicit number limit in splitnumber option in x-axis options
- Dominant language
- TypeScript
- Stars
- 67.3k
- Forks
- 19.8k
- Avg merge
- 11d 14h
- Merged PRs (30d)
- 8
Description
### Version
5.4.2
### Link to Minimal Reproduction
https://codepen.io/fahidarif/pen/BaEjYLN
### Steps to Reproduce
I tested it with an older version of echart v4 in that version with the same data it's visualizing the x-axis splits correctly but in the newer version of echart which is v5, it's adding extra garbage splits lines in the charts even though we are setting the split lines limit but still it's adding extra split lines in the grid
Also, we tried the solution using the minInterval which is suggested in issue [17023](https://github.com/apache/echarts/issues/17023) that solution is applicable when we want to show the lines yearly or monthly but in our case, we want the specified number of lines irrelevant of year, month etc and that was working fine in echart v4.
The configuration that I'm using:
`option = {
tooltip: {
show: true,
confine: true,
trigger: 'axis',
backgroundColor: '#0E1117',
padding: 10,
extraCssText: 'opacity: 90%'
},
grid: {
left: 30,
bottom: 45,
top: 10,
right: 40,
containLabel: true,
tooltip: {
axisPointer: {
type: 'line',
axis: 'x'
}
}
},
toolbox: {
show: false,
orient: 'vertical',
showTitle: false,
itemGap: 3,
top: '2%',
right: '0%',
padding: [0, 0, 0, 0],
feature: {
dataZoom: {
yAxisIndex: 'none',
title: {
zoom: 'Zoom',
back: ''
},
icon: {
zoom: 'image://assets/svgs/magnifier.svg',
back: 'ds'
}
},
restore: {
title: 'Reset zoom',
icon: 'image://assets/svgs/reset.svg'
}
},
tooltip: {
show: true,
backgroundColor: '#222',
textStyle: {
fontSize: 14
}
}
},
dataZoom: [
{
type: 'inside',
realtime: true,
start: 0,
end: 100
}
],
xAxis: {
type: 'time',
triggerEvent: true,
axisLabel: {
color: ''
},
name: 'Date',
nameLocation: 'middle',
nameGap: 27,
splitNumber:3,
splitLine: {
show: true,
lineStyle: {
color: ' #3b4957',
type: 'dotted'
}
},
axisLine: {
show: true,
lineStyle: {
color: ' #818f99',
width: 2
},
onZero: false
},
nameTextStyle: {
color: ''
},
minorTick: {
show: false,
splitNumber: null
},
minorSplitLine: {
show: false,
lineStyle: {
color: ' #2b3847'
}
},
interval: null
},
yAxis: [
{
id: '(STM3 / DAY)',
show: true,
type: 'value',
triggerEvent: true,
meta: {
unit: '(STM3 / DAY)',
nature: 'OIL',
initIndex: 0
},
splitLine: {
show: true,
lineStyle: {
color: ' #3b4957',
type: 'dotted'
}
},
splitNumber: 3,
alignTicks: true,
axisLabel: {
color: ''
},
nameTextStyle: {
color: ' #818f99',
fontSize: 10,
align: 'center',
verticalAlign: 'bottom'
},
nameGap: 45,
interval: null,
name: '(STM3 / DAY)',
axisLine: {
show: true,
lineStyle: {
color: ' #818f99',
width: 2
},
onZero: false
},
nameLocation: 'center',
silent: true,
position: 'left',
minorTick: {
show: false,
splitNumber: null
},
minorSplitLine: {
show: false,
lineStyle: {
color: ' #2b3847'
}
}
}
],
legend: {
type: 'scroll',
pageIconInactiveColor: ' #2b3847',
pageIconColor: ' #818f99',
pageTextStyle: {
color: ' #818f99'
},
pageButtonItemGap: 1,
pageButtonGap: 2,
show: true,
textStyle: {
color: ' #e8eced',
fontSize: 9
},
orient: 'horizontal',
bottom: 0
},
series: [
{
type: 'line',
triggerLineEvent: true,
yAxisIndex: 0,
lineStyle: {
type: 'dashed'
},
showSymbol: false,
name: 'RES_3 > QOP',
id: '65e0964a0e3f920a536b6513_10014',
data: [
[1136073600000, 11700],
[1136073600000, 11700],
[1136073600000, 11700],
[1136160000000, 11700],
[1136332800000, 11700],
[1136592000000, 11700],
[1137110400000, 11700],
[1137888000000, 11700],
[1138752000000, 11700],
[1139961600000, 11700],
[1141171200000, 11700],
[1143849600000, 11700],
[1146441600000, 11700],
[1149120000000, 11700],
[1151712000000, 11700],
[1154390400000, 11700],
[1157068800000, 11700],
[1159660800000, 11700],
[1162339200000, 11700],
[1164931200000, 11700],
[1167609600000, 11700],
[1170288000000, 11700],
[1172707200000, 11700],
[1175385600000, 11700],
[1177977600000, 11700],
[1180656000000, 11700],
[1183248000000, 11700],
[1185926400000, 11700],
[1188604800000, 11700],
[1191196800000, 11700],
[1193875200000, 11700],
[1196467200000, 11700],
[1199145600000, 11700],
[1201824000000, 11700],
[1204329600000, 11700],
[1207008000000, 11700],
[1209600000000, 11700],
[1210896000000, 11700],
[1212278400000, 11700],
[1214870400000, 11700],
[1217548800000, 11700],
[1220227200000, 11700],
[1222819200000, 11700],
[1225497600000, 11700],
[1228089600000, 11700],
[1230768000000, 11700],
[1233446400000, 11700],
[1235865600000, 11700],
[1238544000000, 11700],
[1241136000000, 11700],
[1243814400000, 11700],
[1246406400000, 11700],
[1249084800000, 11700],
[1251763200000, 11700],
[1254355200000, 11700],
[1257033600000, 11700],
[1259625600000, 11700],
[1262304000000, 11700],
[1264982400000, 11700],
[1267401600000, 11700],
[1270080000000, 11700],
[1272672000000, 11700],
[1275350400000, 11700],
[1277942400000, 11700],
[1280620800000, 11700],
[1283299200000, 11700],
[1285891200000, 11700],
[1288569600000, 11679.86],
[1291161600000, 11664.95],
[1293840000000, 11649.48]
],
meta: {
class: 'FIELD',
item: 'RES_3',
case: 'multires_original_copy',
unit: '(STM3 / DAY)',
prop: 'QOP',
caseId: '65e0964a0e3f920a536b6513'
},
symbol: 'circle',
symbolSize: '7',
color: '#e0a352'
},
{
type: 'line',
triggerLineEvent: true,
yAxisIndex: 0,
lineStyle: {
type: 'dashed'
},
showSymbol: false,
name: 'RES_2 > QOP',
id: '65e0964a0e3f920a536b6513_9944',
data: [
[1136073600000, 13200],
[1136073600000, 13200],
[1136073600000, 13200],
[1136160000000, 13200],
[1136332800000, 13200],
[1136592000000, 13200],
[1137110400000, 13200],
[1137888000000, 13200],
[1138752000000, 13200],
[1139961600000, 13200],
[1141171200000, 13200],
[1143849600000, 13200],
[1146441600000, 13200],
[1149120000000, 13200],
[1151712000000, 13148.78],
[1154390400000, 12934.68],
[1157068800000, 12664.95],
[1159660800000, 12389.07],
[1162339200000, 12088.1],
[1164931200000, 11813.25],
[1167609600000, 11548.24],
[1170288000000, 11324.31],
[1172707200000, 11125.12],
[1175385600000, 10900.37],
[1177977600000, 10683.04],
[1180656000000, 10466.92],
[1183248000000, 10257.32],
[1185926400000, 10042.91],
[1188604800000, 9834.03],
[1191196800000, 9649.45],
[1193875200000, 9510.32],
[1196467200000, 9391.89],
[1199145600000, 9283.05],
[1201824000000, 9180.66],
[1204329600000, 9095.24],
[1207008000000, 9009.25],
[1209600000000, 8929.46],
[1210896000000, 8888.85],
[1212278400000, 8850.63],
[1214870400000, 8777.8],
[1217548800000, 8707.01],
[1220227200000, 8635.38],
[1222819200000, 8567.19],
[1225497600000, 8498.51],
[1228089600000, 8429.93],
[1230768000000, 8359.13],
[1233446400000, 8284.78],
[1235865600000, 8204.89],
[1238544000000, 8123.97],
[1241136000000, 8040.89],
[1243814400000, 7955.27],
[1246406400000, 7871.06],
[1249084800000, 7786],
[1251763200000, 7698.1],
[1254355200000, 7605.2],
[1257033600000, 7509.18],
[1259625600000, 7424.81],
[1262304000000, 7340.74],
[1264982400000, 7254.55],
[1267401600000, 7173.62],
[1270080000000, 7087.25],
[1272672000000, 7005.94],
[1275350400000, 6914.91],
[1277942400000, 6835.62],
[1280620800000, 6750.77],
[1283299200000, 6666.5],
[1285891200000, 6583.88],
[1288569600000, 6497.8],
[1291161600000, 6417.59],
[1293840000000, 6331.9]
],
meta: {
class: 'FIELD',
item: 'RES_2',
case: 'multires_original_copy',
unit: '(STM3 / DAY)',
prop: 'QOP',
caseId: '65e0964a0e3f920a536b6513'
},
symbol: 'circle',
symbolSize: '7',
color: '#526ce0'
},
{
type: 'line',
triggerLineEvent: true,
yAxisIndex: 0,
lineStyle: {
type: 'solid'
},
showSymbol: true,
name: 'FIELD > QOP',
id: '65e0964a0e3f920a536b6513_9734',
data: [
[1136073600000, 33900],
[1136073600000, 33900],
[1136073600000, 33900],
[1136160000000, 33900],
[1136332800000, 33900],
[1136592000000, 33900],
[1137110400000, 33900],
[1137888000000, 33900],
[1138752000000, 33900],
[1139961600000, 33900],
[1141171200000, 33900],
[1143849600000, 33900],
[1146441600000, 33900],
[1149120000000, 33900],
[1151712000000, 33848.79],
[1154390400000, 33634.68],
[1157068800000, 33364.95],
[1159660800000, 33089.07],
[1162339200000, 32788.1],
[1164931200000, 32513.25],
[1167609600000, 32111.75],
[1170288000000, 31771.81],
[1172707200000, 31453.04],
[1175385600000, 31143.43],
[1177977600000, 30878.89],
[1180656000000, 30605.75],
[1183248000000, 30365.63],
[1185926400000, 30122.85],
[1188604800000, 29887.23],
[1191196800000, 29678.76],
[1193875200000, 29516.62],
[1196467200000, 29377.17],
[1199145600000, 29247.4],
[1201824000000, 29125.01],
[1204329600000, 29021.46],
[1207008000000, 28916.14],
[1209600000000, 28817.86],
[1210896000000, 28767.7],
[1212278400000, 28719.34],
[1214870400000, 28627.75],
[1217548800000, 28536.25],
[1220227200000, 28444.61],
[1222819200000, 28356.85],
[1225497600000, 28267.35],
[1228089600000, 28177.73],
[1230768000000, 28085.55],
[1233446400000, 27989.26],
[1235865600000, 27889.98],
[1238544000000, 27787.6],
[1241136000000, 27682.91],
[1243814400000, 27575.58],
[1246406400000, 27470.24],
[1249084800000, 27363.87],
[1251763200000, 27254.68],
[1254355200000, 27140.4],
[1257033600000, 27021.75],
[1259625600000, 26916.39],
[1262304000000, 26808.45],
[1264982400000, 26699.74],
[1267401600000, 26599.51],
[1270080000000, 26489.42],
[1272672000000, 26300.36],
[1275350400000, 26187.41],
[1277942400000, 26088.73],
[1280620800000, 25984.53],
[1283299200000, 25881.36],
[1285891200000, 25781.32],
[1288569600000, 25658.54],
[1291161600000, 25538.87],
[1293840000000, 25415.92]
],
meta: {
class: 'FIELD',
item: 'FIELD',
case: 'multires_original_copy',
unit: '(STM3 / DAY)',
prop: 'QOP',
caseId: '65e0964a0e3f920a536b6513'
},
symbol: 'circle',
symbolSize: '7',
color: '#006600'
},
{
type: 'line',
triggerLineEvent: true,
yAxisIndex: 0,
lineStyle: {
type: 'dashed'
},
showSymbol: false,
name: 'RES_1 > QOP',
id: '65e0964a0e3f920a536b6513_9874',
data: [
[1136073600000, 9000],
[1136073600000, 9000],
[1136073600000, 9000],
[1136160000000, 9000],
[1136332800000, 9000],
[1136592000000, 9000],
[1137110400000, 9000],
[1137888000000, 9000],
[1138752000000, 9000],
[1139961600000, 9000],
[1141171200000, 9000],
[1143849600000, 9000],
[1146441600000, 9000],
[1149120000000, 9000],
[1151712000000, 9000],
[1154390400000, 9000],
[1157068800000, 9000],
[1159660800000, 9000],
[1162339200000, 9000],
[1164931200000, 9000],
[1167609600000, 8863.51],
[1170288000000, 8747.5],
[1172707200000, 8627.92],
[1175385600000, 8543.06],
[1177977600000, 8495.85],
[1180656000000, 8438.83],
[1183248000000, 8408.32],
[1185926400000, 8379.95],
[1188604800000, 8353.2],
[1191196800000, 8329.32],
[1193875200000, 8306.29],
[1196467200000, 8285.28],
[1199145600000, 8264.35],
[1201824000000, 8244.35],
[1204329600000, 8226.22],
[1207008000000, 8206.89],
[1209600000000, 8188.4],
[1210896000000, 8178.85],
[1212278400000, 8168.71],
[1214870400000, 8149.95],
[1217548800000, 8129.23],
[1220227200000, 8109.24],
[1222819200000, 8089.67],
[1225497600000, 8068.85],
[1228089600000, 8047.8],
[1230768000000, 8026.43],
[1233446400000, 8004.47],
[1235865600000, 7985.09],
[1238544000000, 7963.64],
[1241136000000, 7942.02],
[1243814400000, 7920.31],
[1246406400000, 7899.18],
[1249084800000, 7877.87],
[1251763200000, 7856.58],
[1254355200000, 7835.21],
[1257033600000, 7812.57],
[1259625600000, 7791.59],
[1262304000000, 7767.71],
[1264982400000, 7745.19],
[1267401600000, 7725.88],
[1270080000000, 7702.17],
[1272672000000, 7594.42],
[1275350400000, 7572.5],
[1277942400000, 7553.11],
[1280620800000, 7533.76],
[1283299200000, 7514.85],
[1285891200000, 7497.44],
[1288569600000, 7480.87],
[1291161600000, 7456.33],
[1293840000000, 7434.54]
],
meta: {
class: 'FIELD',
item: 'RES_1',
case: 'multires_original_copy',
unit: '(STM3 / DAY)',
prop: 'QOP',
caseId: '65e0964a0e3f920a536b6513'
},
symbol: 'circle',
symbolSize: '7',
color: '#e05275'
}
],
meta: {}
};`
### Current Behavior
Shows extra garbage split lines on the x-axis even though specified the number of slips in the x-axis configs
### Expected Behavior
Should show the specified number of split lines on x-axis the
### Environment
```markdown
- OS: win10/macOS
- Browser: chrome
- Framework:
```
### Any additional comments?
_No response_
Contributor guide
Assessment
This issue has not been assessed yet.