针对ECharts在有限空间内x轴刻度文字拥挤的问题，本文介绍两种解决方案。方法一利用axisLabel的interval属性，但需注意其仅对类目轴有效；方法二通过自定义formatter回调函数，结合索引取模逻辑实现时间轴的精准间隔显示，适用于time类型数据轴。
背景
近期开发数据看板时，因单页需容纳多张图表，导致每张图表的可用尺寸受限。这种狭小的展示空间使得x轴的刻度文字发生重叠，视觉效果不佳。
如图所示，右侧图表中x轴刻度标签文字密集重叠，而左侧为优化后的显示效果。
解决方法
实现左侧优化效果的方法有多种。
最直观的做法是扩大包含ECharts的div容器及grid对象的尺寸，只要展示区域足够宽，刻度标签自然不再拥挤。当然，本文探讨的场景正是空间受限的情况。
方法一：利用axisLabel的interval属性设置间隔
官方文档说明如下：
通过设置interval值，可指定间隔显示或不显示标签，也可使用回调函数返回布尔值来决定特定索引的标签是否可见。这是网络上常见的解决方案，但在我的场景中未能生效。
官方文档指出该属性仅在类目轴中有效，而我的x轴数据类型为“time”，因此需要寻找其他途径。
方法二：通过axisLabel.formatters回调函数修改标签文字
formatters属性用于设置文字格式，若将无需显示的标签文字设为空字符串，即可实现隐藏效果。
思路明确后，代码实现变得简单，首先了解回调函数的用法。
官方文档指出函数接收两个参数：索引和值。需注意，此处的索引并非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:[
{
type:"time",
gridIndex:0,
axisLabel：
{
rotate:-45,
formatter:time_label_formatter
},
},
{
type:"time",
gridIndex:1,
axisLabel:
{
rotate:-45,
formatter:time_label_formatter
}
}
],
附：Echarts柱状图x轴间隔显示（显示不全）
当echarts横轴数据过多时，系统会自动隐藏部分数据。可通过属性interval进行调整。默认采用标签不重叠策略间隔显示，若需强制显示所有标签，需在xAxis属性中设置axisLabel:{interval: 0}。
xAxis.axisLabel属性：axisLabel类型为object，主要用于坐标轴刻度标签的相关设置（yAxis同样具备此属性）。
总结
至此，关于ECharts设置x轴刻度间隔的两种解决方法介绍完毕。如需了解更多相关内容，可搜索本站过往文章或继续浏览相关文章，感谢支持！