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: ' #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
5条答案
按热度按时间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
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
y3bcpkx13#
try
minInterval:3, maxInterval:3,
for x-axis, it may work...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.
jaql4c8m5#
@helgasoft any suggestions? I'm still waiting for a solution!