ApexCharts热力图如何去除X轴重复标签？

安全阿岳

2026-11-5

ApexCharts 热力图X轴重复标签处理方案

问题根因

内置的showDuplicates: false配置无法实现预期效果的核心原因是：该配置仅会在检测到相邻X轴分类值完全重复时，保留第一个出现的标签、隐藏后续所有同值标签，不会自动将重复值的标签定位到整组同值列的居中位置，和“一组对应4个同月份列时，仅在整组列中间显示一次月份标签”的目标存在偏差。

可落地的实现步骤

第一步：自定义X轴分类值数组
统计每一组同月份对应的列索引范围，计算该范围的居中位置索引，仅在该居中位置填写真实的月份文本，同组其余所有列的分类值全部设置为空字符串，从根源上避免重复标签出现。
计算居中索引的通用公式：居中索引 = 同组起始列索引 + Math.floor(同组列数 / 2)
举个示例：4个连续列均对应May，列索引为0、1、2、3，计算得居中索引为2，那么分类数组对应位置填写值为：
```
xaxisCategories = ["", "", "May", "", "Jun", "", "Jul", ""]
```

第二步：配套调整X轴配置项，避免手动设置的标签被内置逻辑覆盖
完整配置参考：

xaxis: {
  type: 'category',
  categories: xaxisCategories,
  labels: {
    showDuplicates: false,
    // 关闭自动重叠隐藏，避免手动设置的空值位置被重新渲染标签
    hideOverlappingLabels: false,
    // 关闭标签截断，保证居中位置的月份文本完整显示
    trim: false
  },
  // 调整刻度位置，让标签和分组列的分隔线对齐，减少位置错位
  tickPlacement: 'between'
}