ECharts时间轴x轴刻度密集时的两种处理方案

背景

近期开发数据看板项目时，由于单页面需容纳多张图表，导致每张图表的可用尺寸受到严格限制。

这种空间压缩直接导致图表x轴的刻度文字重叠堆积，视觉混乱。

对比效果可见，右侧图表x轴刻度标签因空间不足而挤在一起，左侧则为优化后的显示效果。

解决方法

实现上述左侧优化效果存在多种技术路径。

最笨的方法

若布局允许，最直接的方式是扩大包含ECharts的div容器尺寸，同时调整grid对象配置。只要展示区域宽度足够，刻度标签自然能完整显示而不发生重叠。

显然，阅读此类文章的用户通常面临空间受限的场景，无法通过简单放大容器来解决。

方法一

利用axisLabel属性下的interval参数强制设置显示间隔。

根据官方文档说明：

设置interval值可实现按指定间隔显示或隐藏标签，或通过回调函数返回布尔值控制特定索引标签的可见性。

这是网络教程中最常见的建议，但在本案例中并未生效。

官方文档明确指出该属性仅在类目轴（category）中有效，而本例中x轴数据类型设定为“time”。

因此需要寻找其他替代方案。

方法二

通过为axisLabel.formatters添加回调函数来动态修改标签文本。

formatters属性用于定义文字格式，既然可以格式化输出，便可通过逻辑判断将无需显示的标签替换为空字符串，从而达到隐藏目的。

思路明确后代码实现较为简单，首先需理解回调函数的用法。

官方文档指出该函数接收两个参数：索引（index）和值（value）。

需特别注意，此处的索引并非x轴原始数据的索引，而是图表渲染后生成的刻度索引。

举例而言，若数据集为每秒电表读数，一小时包含3600条数据，按数据索引范围应为0至3599；但实际上图表不会显示如此密集的刻度。

图表数据轴的标签数量由ECharts渲染机制自动生成，具体数量不确定，且同一图表在不同时间段可能不同，通常仅显示十余个标签。

参考以下回调函数实现：

// 通过formatter设置时间刻度间隔
function time_label_formatter(value,index) {
    // console.info(index);
    let remainder = index % 3;
    if (remainder == 0) {
        return "{HH}:{mm}";
    }
    else{
        return "";
    }
}

由于时间类型数据在赋值给配置项前已完成清洗，本身即为Date类型，故函数内部无需进行额外的数据转换。

通过打印所有标签索引发现范围是0至16，据此设定间隔为3或4即可实现规律性隐藏。

核心思路即此，读者可根据实际渲染出的索引范围调整间隔数值。

最后展示完整的series配置项中xAxis部分：

xAxis:[
	{
		type:"time",
		gridIndex:0,
		axisLabel：
			{
				rotate:-45,
				formatter:time_label_formatter
			},
	},
	{
		type:"time",
		gridIndex:1,
		axisLabel:
			{
				rotate:-45,
				formatter:time_label_formatter
			}
	}
],

总结

以上为个人实践经验总结，旨在提供参考，欢迎交流探讨。