[Bug] Inconsistent xAxis axisTick

[zemmyang]

Version

5.6.0

Link to Minimal Reproduction

https://jsfiddle.net/mk3dzp49/

Steps to Reproduce

Chart is a simple line plot with a grid, with the x-axis defined as follows:

      xAxis: {
        "type": "value",
        "minorTick": {
            "show": "true",
            "splitNumber": 5
        },
        "minorSplitLine": {
            "show": "true"
        },
        "axisLabel": {
            "show": "true"
        },
        "axisTick": {
            "customValues": vTickData
        },
        "splitLine": {
            "show": "true",
            "lineStyle": {
                "color": '#ff0000',
                "type": 'solid',
                "width": 1
            }
        },
      },

Current Behavior

The thin red vertical lines appear to be randomly placed.

Expected Behavior

I want to have one thick red line for every 5 thin red lines, for example. But that doesn't appear to be what's going on here. Instead I get several thick lines and thin lines placed at random.

y-axis lines don't appear to have the same issue.

Environment

- OS: Win 11
- Browser: Chrome
- Framework: None?

Any additional comments?

No response

[MatthiasMert]

As per documentation minorTick.splitNumber revers to the number of intervals, not the number of minorTicks / splitLines. The documentation does not specify what exactly is split tho. It seems to be the interval between two labels (which is not neccessarily equal to the interval between two ticks).

If you align ticks and axisLabel it should work as expected: Example

If you need specific tick intervals you can control them with interval, minInterval and maxInterval: Example

[zemmyang]

Thanks, @MatthiasMert !

However, something else seems to be wrong in the examples and in the documentation: I can't see them at all.

[MatthiasMert]

There seems to be an issue with the echarts website currently. Here is the code from the example:

const len = 100;
const xData = Array.from({ length: len }, () =>
  Math.floor(Math.random() * len)
);
const yData = Array.from({ length: len }, (v, k) => k + 1);
const data = yData.map((left, idx) => [left, xData[idx]]);

option = {
  xAxis: {
    type: 'value',
    //interval: 5,
    axisTick: {
      alignWithLabel: true,
    },
    splitLine: {
      show: true,
      lineStyle: { color: 'red' }
    },
    minorTick: {
      show: true,
      splitNumber: 6
    },
    minorSplitLine: {
      show: true,
      lineStyle: { color: 'green' }
    },
  },
  yAxis: {},
  series: [
    {
      type: 'line',
      symbol: 'none',
      data: data
    }
  ]
};

[zemmyang]

Works now. Thanks!