vue 甘特图 vxe-gantt 实现日期轴跨度间隔：让时间轴密度更合理

作者：袖梨 2026-07-16

在甘特图的实际应用中，任务数据的时间跨度往往差异很大——有些任务跨数月，有些仅数天。默认的时间轴可能会因为单元格过密（如逐日显示）导致视觉拥挤，或过疏（如逐月显示）导致细节丢失。vxe-gantt 通过 scales 配置项中的 step 属性，允许你自定义日期轴的单位跨度，从而灵活控制时间轴的显示密度，让甘特图更紧凑、更直观。

配置：step 参数

step 参数作用于 scales 数组中的每个时间层级，表示跳过 N 个单位进行显示。

层级类型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，可以每隔一个月显示一个刻度，提升可读性。

img_6a582b5eba05a30.webp

 复制代码<template>
  <div>
    <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
  </div>
</template><script setup>
import { reactive } from 'vue'const ganttOptions = reactive({
  showOverflow: true,
  cellConfig: {
    height: 80
  },
  taskBarConfig: {
    showProgress: true,
    showContent: true,
    barStyle: {
      round: true,
      bgColor: '#f56565',
      completedBgColor: '#65c16f'
    }
  },
  taskViewConfig: {
    scales: [
      { type: 'year' },
      { type: 'month', step: 2 }
    ],
    tableStyle: {
      width: 320
    }
  },
  columns: [
    { type: 'seq', field: 'seq', width: 70 },
    { field: 'title', title: '任务名称', minWidth: 140 },
    { field: 'start', title: '开始时间', width: 100 },
    { field: 'end', title: '结束时间', width: 100 }
  ],
  data: [
    { id: 10001, title: 'A项目', start: '2023-05-26', end: '2024-03-03', progress: 90 },
    { id: 10002, title: '城市道路修理进度', start: '2024-03-03', end: '2024-11-18', progress: 70 },
    { id: 10003, title: 'B大工程', start: '2024-03-28', end: '2025-05-11', progress: 90 },
    { id: 10004, title: '超级大工程', start: '2025-04-11', end: '2026-05-18', progress: 80 }
  ]
})
</script>

配置说明

配置效果
scales: ['year', 'month']时间轴分为“年”和“月”两层
month: { step: 2 }底层只显示 1月、3月、5月...（隔月显示）
cellWidth 未设置使用默认宽度，配合 step 使单元格变宽，显示更疏朗
  • 适用场景
    • 任务跨度 6 个月以上的项目
    • 产品路线图、年度规划
    • 希望减少轴标签数量，突出宏观趋势

天视图间隔

当任务时间跨度较短（数天至数周）且任务密集时，逐日显示可能导致单元格过窄、内容重叠。通过设置 step: 3，可以每隔 3 天显示一个刻度，提升可读性。

img_6a582b5eba05f31.webp

 复制代码<template>
  <div>
    <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
  </div>
</template><script setup>
import { reactive } from 'vue'const ganttOptions = reactive({
  showOverflow: true,
  cellConfig: {
    height: 80
  },
  taskBarConfig: {
    showProgress: true,
    showContent: true,
    barStyle: {
      round: true,
      bgColor: '#f56565',
      completedBgColor: '#65c16f'
    }
  },
  taskViewConfig: {
    scales: [
      { type: 'month' },
      { type: 'date', step: 3 }
    ],
    tableStyle: {
      width: 320
    }
  },
  columns: [
    { type: 'seq', field: 'seq', width: 70 },
    { field: 'title', title: '任务名称', minWidth: 140 },
    { field: 'start', title: '开始时间', width: 160 },
    { field: 'end', title: '结束时间', width: 160 }
  ],
  data: [
    { id: 10001, title: 'A项目', start: '2024-03-01 08:00:00', end: '2024-03-04 12:30:00', progress: 3 },
    { id: 10002, title: '城市道路修理进度', start: '2024-03-03 09:30:00', end: '2024-03-08 14:00:00', progress: 10 },
    { id: 10003, title: 'B大工程', start: '2024-03-03 06:30:20', end: '2024-03-11 09:30:40', progress: 90 },
    { id: 10004, title: '超级大工程', start: '2024-03-05 12:30:00', end: '2024-03-11 18:30:00', progress: 15 }
  ]
})
</script>

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 小；顶层管宏观，底层管细节。

gantt.vxeui.com

相关文章

精彩推荐