echarts 调整x类目轴axisLabel间距

 场景

产品认为x轴的刻度太密集，需要稀一点。

调研

关于这个需求，想到的有

• xAxis.interval 指定的是所有横坐标的间隔，需要自行计算间隔多少。
• xAxis.splitNumber 对类目轴不生效。
• xAxis.axisLabel.formatter 

方案1

xAxis.axisLabel.formatter 

formatter(v,index) 其中的index是xAxis.data中的下标。因此也不能通过 index % 2 的方式控制。

当时可以在外部定义一个变量，因为仅可以显示的axisLabel会调用formatter。

let i = 0;


option = {
    xAxis: {
        axisLabel: {
            formatter(v){
                i++;
                return i % 2 ? v : ''; 
            }
        }
    }
}

 这样表示空一个展示一个。

此方案可能导致坐标轴两端的标签被隐藏。且在dataZoom变化时坐标轴会闪烁。

下面方案2相对好一些。

方案2

xAxis: {
    axisLabel: {
        width: 100,
        overflow: 'truncate',
        formatter(v){
            return ' '.repeat(4)+v+' '.repeat(4);
        }
    }
}

由于直接设置axisLabel.width 不生效。因此需要配合overflow来使用。

使用formatter加空格为了使内容撑满设置的width，这样echart计算时会使用width的大小，否则echarts仍然使用文字的长度进行计算。

formatter前后加空格是为了使axisLabel居中对齐。

此方法在横坐标label展示字数不同时就不大好。

效果

下划线替换为空格