ECharts splitLine not showing on interval function

Question

What I'm trying to do is set a splitLine under the label when the label it's not an empty string:

When there's more than one value different from empty string it has the desired behavior: both splitLines are under the label

But when there's only one value not empty, the splitLine is not showing, it appears to be aligning to the left side of the chart only one not empty value

This is my code:

option = {
  xAxis: {
    type: 'category',
    position: 'top',
    data: ['', '', '', 'aaa', 'bbb'],
    splitLine: {
      show: true,
      interval: function(index, value) {
        return value != '';
      }
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 147, 260],
      type: 'line'
    }
  ]
}

https://echarts.apache.org/examples/en/editor.html?c=line-simple&theme=dark&code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMmurGAJ4gCmRA5AMYCGYVA5sAE7m0A0J6IYHgiQYdMKF79YAE2aMiAbVq9YKnmtW1GOrQCMDtALp9SsPCAA2IgDIRoNYmfR4AFsADuRMBwCuVU2d7Fg4AN0ZLIgAzX2h6UWgACnsZKgwNcMt_AEonZ3QOKjBfDjhM_1gAQkQVAG5pdABfaWamwPIcfCJUMwpqOnKqWhJGwLwqDggqQlhFaR7nOTAFWYBGAFYABg0AJgBmbdgdnYAWDVWTgHZdgDZNkwaySkdaawdhs1bYIxRG2qA

Im expecting to have a splitLine under the label always

UPDATE: This is a bug see here

Answer 1

Seems to be a bug. You could do something like this to force that there is always 2 splitlines if it fits your use case:

const AxisData = ['', 'b', '', '', ''];

option = {
  xAxis: {
    type: 'category',
    position: 'top',
    data: AxisData,
    splitLine: {
      show: true,
      interval: function(index, value) {                                //   relevant
        return AxisData[index] !== '' || AxisData[index - 1] !== '';    //     part
      }
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 147, 260],
      type: 'line',
    }
  ]
};