echarts分割线间距

### 动态设置ECharts坐标轴分割间隔

为了使ECharts图表中的坐标轴分割线间距能够适应不断变化的数据量，在配置`splitLine`属性时可以采用函数形式来动态计算合适的间隔。具体来说，可以在初始化图表实例之前先分析数据集的最大最小值以及分布情况，从而决定最适宜的刻度间隔。

对于数值型X轴或Y轴而言，主要通过修改`axisTick`和`interval`参数实现自定义化控制[^1]：

- `axisTick.interval`: 控制坐标轴刻度标签显示间隔，默认会自动根据界面上可容纳的数量做优化处理；当设为0时表示不隐藏任何标签，而指定正整数N则表示每隔N个元素取一次作为可见标记。

- 更灵活的方式是在`dataZoom`组件内利用`startValue`, `endValue`配合`value`类型的inSide内部滚动条完成交互式的缩放效果的同时也间接影响到了实际渲染出来的分隔密度。

另外一种方法是基于JavaScript编写一段逻辑代码用于实时评估当前展示范围内所有系列里最大最小值得差额范围，并据此比例调整`interval`的具体数值。下面给出一个简单的例子说明如何依据数据长度来自行设定yAxis上的split line频率:

// 假设有如下一组随机生成的高度数组heights代表柱状图高度
let heights = Array.from({ length: 50 }, () => Math.floor(Math.random() * 100));

option = {
    yAxis: {
        type: 'value',
        splitNumber: calculateSplitNumber(heights), // 自动计算最佳分割数量
        interval: null,                             // 让echarts自行判断合理区间
        boundaryGap: [0, '100%']
    },
    series: [{
        data: heights,
        type: 'bar'
    }]
};

function calculateSplitNumber(data){
    let maxVal = Math.max(...data);
    let minVal = Math.min(...data);
    const diff = (maxVal - minVal);

    if(diff >= 80 && diff < 200) return 4;
    else if(diff >= 200 && diff < 500) return 6;
    else if(diff >= 500 )return 8;
    else return 3;    
}

此段脚本展示了怎样根据不同规模的数据集合去适配不同的纵坐标划分标准，使得最终呈现既美观又实用的效果。