如何获取Echarts实例的真实的splitNumber和轴间隔

Question

xAxis 或 yAxis 等轴的默认 splitNumber 是 5。正如 Echarts 文档中提到的，这个数字可能会根据可读性进行调整。但是，当我使用chart.getOption()时，不会给出调整后的数字。调整后如何得到真实的分割数和间隔？

我没有定义间隔或分割数来控制轴。我只是定义了轴的最大值和最小值，然后让 echarts 自动调整它。

提前致谢。

我用Google搜索并没有找到类似的内容。

Answer 1

如果您不想要

splitNumber

的值，这是一个可以检索的选项 通过

myChart.getOption()

，并且其值永远不会改变用户设置的值， 但您尝试以编程方式查找刻度之间的间隔数（这是松散的基础） 关于

splitNumber

选项的值）：

据我所知，（尚）没有记录的方法来访问轴的属性。 如果确实需要获取该信息，它是可用的，但不在选项对象中， 但在图表实例本身中。通过探索该物体（例如，

console.log(myChart)

） 可能会找到一种计算刻度数的方法，然后间隔应该是负 1。

这是一个可能的解决方案：

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;
    }
}

尽管不能保证这种数据的内部表示在未来版本中仍然有效 echarts 的，这是一个好兆头，它可以从 3.6.0 版本运行到当前的 5.4.3 版本

这是一个基于 echarts 标准示例的测试片段：

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>