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

fahidarif commented 8 months ago

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 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

- OS: win10/macOS
- Browser: chrome
- Framework:

Any additional comments?

No response

helgasoft commented 8 months ago

Quiz: both charts below have the same xAxis splitnumber value. Can you guess what the value is ?

Demo 4.8.0

Demo 5.5.0

Answer is 7. Now you know why "this number serves only as a recommendation" - API

fahidarif commented 8 months ago

@helgasoft But I want to use the splitNumber value 3 as in our product we have charts of different sizes and above 3 makes the small charts of small sizes x-axis labels overlap with each other so we want the strict 3 verticle split lines on the x-axis which were working fine with v4 but when we updated the version to v5 using the same splitNumber value which is 3 it's showing randomly more than 3 split lines without any proper labels and spacing... Can you please suggest any workaround so that we won't need to downgrade the echart version to v4

helgasoft commented 8 months ago

try minInterval:3, maxInterval:3, for x-axis, it may work...

fahidarif commented 8 months ago

@helgasoft it won't work I tried it, As our x-axis is of TIME type so on time-axis this minInterval and maxInterval won't work with just "3" value it will require values in time like millisecs of 1year, 2year etc but it will not limit the number of split lines it will just group the interval of the split lines in specified amount of period.

fahidarif commented 6 months ago

@helgasoft any suggestions? I'm still waiting for a solution!

AlixH commented 1 month ago

up

apache / echarts