apache / apache/echarts

[Bug] Too many split lines on time axis even though provided explicit number limit in splitnumber option in x-axis options

Open
#19,693 7 comments 1 reaction 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.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.

Screenshot 2024-03-08 at 6 27 47 PM
Screenshot 2024-03-08 at 6 28 37 PM

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

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.