How to get the real splitNumber and interval of a axis of a Echarts instance

Question

The default splitNumber for a axis like xAxis or yAxis is 5. As mentioned in Echarts documentation, this number may be adjusted based on readability. However, the adjusted number will be not given when I use chart.getOption(). How can I get the real split number and interval after adjustment?

I did't define interval or splitnumber to control the axis. I just define the max and min of the axis and let echarts adjust it automatically.

Thanks in advance.

Here is a picture of my echart instance, where yaxis has 4 splits and xaixs has 5

When I consloe.log(chart.getOption()), the splitnumbers of two axises are both 5 as default

I search with Google and haven't found similar contents.

Answer 1

In case you are not after the value of splitNumber, which is an option that can be retrieved through myChart.getOption(), and whose value is never changed from that set by the user, but you to try find programmatically the number of intervals between ticks, (which is loosely based on the value of the splitNumber option):

As far as I can see, there is (yet) no documented way to access the properties of the axes. If one really needs to get that information, it is available, but not in the option object, but in the chart instance itself. By exploring that object (e.g., console.log(myChart)) one may find a way to the number of ticks and then the intervals should be that minus 1.

Here's a possible solution:

function getAxisSplitIntervals(chart, whichAxis, axisIndex = 0){
    //whichAxis: 'xAxis' or 'yAxis'
    if(whichAxis.length === 1){
        whichAxis += 'Axis';
    }
    try{
        return chart._model._componentsMap.get(whichAxis)[axisIndex].axis.getTicksCoords().length - 1
    }
    catch(err){
        return null;
    }
}

Although there's no guarantee that this internal representation of data will still be valid in future versions of echarts, it's a good sign that it works from version 3.6.0 to current version 5.4.3

Here's a test snippet, based on an echarts standard example:

var dom = document.getElementById('chart-container');
var myChart = echarts.init(dom, null, {
    renderer: 'canvas',
    useDirtyRect: false
});

var size1 =  10 ** (Math.random() * 3)
    size2 =  10 ** (Math.random() * 4);
var option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: [
        {
            type: 'value',
            splitNumber: 15,
        },
        {
            type: 'value',
            position: 'right',
            splitNumber: 10,
            splitLine:{
                show: false
            }
        }
    ],
    series: [
        {
            data: [150, 230, 224, 1218, 135, 147, 260].map(x=>x*size1),
            yAxisIndex: 0,
            type: 'line'
        },
        {
            data: Array.from({length: 20}, ()=>size2*Math.random()),
            yAxisIndex: 1,
            type: 'line'
        }
    ]
};

if(option && typeof option === 'object'){
    myChart.setOption(option);
}

window.addEventListener('resize', myChart.resize);

function getAxisSplitIntervals(chart, whichAxis, axisIndex = 0){
    //whichAxis: 'xAxis' or 'yAxis'
    if(whichAxis.length === 1){
        whichAxis += 'Axis';
    }
    try{
        return chart._model._componentsMap.get(whichAxis)[axisIndex].axis.getTicksCoords().length - 1
    }
    catch(err){
        return null;
    }
}

function showAxisSplitInfo(whichAxis, axisIndex = 0){
    const nIntervals = getAxisSplitIntervals(myChart, whichAxis, axisIndex);
    document.querySelector('#split_text').innerText = nIntervals === null ?
        `${whichAxis} #${axisIndex} - FAILED` :
        `${whichAxis} #${axisIndex}\n` +
        `splitNumber: ${myChart.getOption()[whichAxis][axisIndex].splitNumber}\n` +
        `number of intervals: ${getAxisSplitIntervals(myChart, whichAxis, axisIndex)}`
}

* {
    margin: 0;
    padding: 0;
}

#chart-container {
    position: relative;
    height: 100vh;
    overflow: hidden;
}

#split_text {
    display: inline-block;
}

#split_info {
    position: relative;
    top: 10px;
    left: 10px;
    z-index: 100
}

#split_info div {
    display: inline-block;
    vertical-align: top
}

<div id="split_info">
    <div>
        <button onclick="showAxisSplitInfo('xAxis')">X Axis Split Info</button>
        <br>
        <button onclick="showAxisSplitInfo('yAxis', 0)">Y Axis #0 Split Info</button>
        <br>
        <button onclick="showAxisSplitInfo('yAxis', 1)">Y Axis #1 Split Info</button>
    </div>
    <code id='split_text'></code></div>
<div id="chart-container"></div>
<script src="https://fastly.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>