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

igetnqfo  于 5个月前  发布在  Echarts
关注(0)|答案(5)|浏览(121)

Version

5.4.2

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: ' #6600 '
},
{
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

xe55xuns

xe55xuns1#

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

4uqofj5v

4uqofj5v2#

@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

y3bcpkx1

y3bcpkx13#

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

m1m5dgzv

m1m5dgzv4#

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

jaql4c8m

jaql4c8m5#

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

相关问题