ECharts时间轴刻度拥挤的两种解决方案

背景

近期开发数据看板时，因单页需容纳多张图表，导致每张图表的可用尺寸受限。这种狭小的展示空间使得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轴刻度间隔的两种解决方法介绍完毕。如需了解更多相关内容，可搜索本站过往文章或继续浏览相关文章，感谢支持！