本文针对ECharts在有限空间内展示时间轴图表时x轴标签拥挤的问题，探讨了两种解决方案。首先指出官方推荐的interval属性在type为time的坐标轴中无效；随后重点介绍通过axisLabel.formatters添加回调函数，利用刻度索引取模隐藏部分标签的具体实现方法，帮助开发者优化小尺寸看板的数据可视化效果。
背景
近期开发数据看板项目时，由于单页面需容纳多张图表，导致每张图表的可用尺寸受到严格限制。
这种空间压缩直接导致图表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
}
}
],
总结
以上为个人实践经验总结，旨在提供参考，欢迎交流探讨。