在实际项目中，甘特图的任务时间跨度往往千差万别——有的任务横跨数月甚至数年，有的却只有短短几天。如果时间轴默认逐日显示，长跨度任务就会让单元格密密麻麻、视觉上拥挤不堪；反过来，如果逐月显示，短周期任务的细节又可能被淹没。vxe-gantt 提供了一个很实用的配置项：scales 中的 step 属性，它能让你自定义日期轴的显示跨度，灵活控制时间轴的密度，让甘特图既紧凑又清晰。
配置：step 参数
step 参数作用于 scales 数组中的每个时间层级，含义很简单：跳过 N 个单位来显示刻度。比如在月层级设置 step: 2，就意味着每隔一个月显示一个刻度。
| 层级类型 | step 含义 | 示例 |
|---|---|---|
| year（年） | 每隔 N 年显示一个刻度 | step: 2 → 2020, 2022, 2024... |
| month（月） | 每隔 N 个月显示一个刻度 | step: 3 → 1月, 4月, 7月, 10月... |
| week（周） | 每隔 N 周显示一个刻度 | step: 2 → 第1周, 第3周, 第5周... |
| date（天） | 每隔 N 天显示一个刻度 | step: 5 → 1日, 6日, 11日, 16日... |
月视图间隔
当任务时间跨度较长（数月至数年）时，逐月显示往往会让轴标签密密麻麻排成一行，看起来非常拥挤。通过设置 step: 2，就能让刻度每隔一个月出现一次，瞬间提升可读性。
复制代码
配置说明
| 配置 | 效果 |
|---|---|
| scales: ['year', 'month'] | 时间轴分为“年”和“月”两层 |
| month: { step: 2 } | 底层只显示 1月、3月、5月...（隔月显示） |
| cellWidth 未设置 | 使用默认宽度，配合 step 使单元格变宽，显示更疏朗 |
- 适用场景
- 任务跨度 6 个月以上的项目
- 产品路线图、年度规划
- 希望减少轴标签数量，突出宏观趋势
天视图间隔
当任务时间跨度较短（数天至数周）且任务密集时，逐日显示可能导致单元格过窄，任务条相互重叠，想看清每个细节都费劲。通过设置 step: 3，每隔 3 天显示一个刻度，就能让画面清爽很多。
复制代码
step 与 cellWidth 的协同关系
| 配置 | 作用 | 推荐组合 |
|---|---|---|
| step 增大 | 刻度变稀，每格代表的时间跨度变大 | 配合适中的 cellWidth（如 80-120px） |
| step 减小（或默认 1） | 刻度变密，每格代表的时间跨度变小 | 配合较大的 cellWidth（如 120-200px）避免拥挤 |
| cellWidth 固定 | 每个单元格宽度固定，step 决定单元格代表的实际时间量 | 适用于时间跨度固定的场景 |
常用配置
| 视图类型 | 时间跨度 | 推荐 scales 配置 | 说明 |
|---|---|---|---|
| 年视图 | 5-10 年 | [{ type: 'year', step: 1 }] | 每年一个刻度 |
| 年视图（稀疏） | 10+ 年 | [{ type: 'year', step: 2 }] | 每2年一个刻度 |
| 月视图 | 1-3 年 | ['year', { type: 'month', step: 1 }] | 每月一个刻度 |
| 月视图（季度） | 2-5 年 | ['year', { type: 'month', step: 3 }] | 每季度一个刻度 |
| 月视图（半年） | 5+ 年 | ['year', { type: 'month', step: 6 }] | 每半年一个刻度 |
| 天视图 | 1-3 个月 | ['month', { type: 'date', step: 1 }] | 每日一个刻度 |
| 天视图（稀疏） | 3-12 个月 | ['month', { type: 'date', step: 5 }] | 每5天一个刻度 |
| 周视图 | 3-12 个月 | ['month', { type: 'week', step: 1 }] | 每周一个刻度 |
| 周视图（双周） | 6-24 个月 | ['month', { type: 'week', step: 2 }] | 每两周一个刻度 |
- vxe-gantt 的 step 参数为时间轴的密度控制提供了极高的灵活性。通过合理设置 scales 中各层级的 step 值，你可以：
- 让时间轴显示更紧凑，避免视觉拥挤
- 突出重点时间段，弱化无关间隙
- 适配不同时间跨度的任务数据，提升可读性
- 结合 offset 实现更精细的刻度起始控制
核心配置口诀：跨度大则 step 大，跨度小则 step 小；顶层管宏观，底层管细节。
