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

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

配置：step 参数

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

月视图间隔

当任务时间跨度较长（数月至数年）时，逐月显示可能导致轴标签过多、视觉拥挤。通过设置 step: 2，可以每隔一个月显示一个刻度，提升可读性。

 复制代码<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>

配置说明

• 适用场景
  • 任务跨度 6 个月以上的项目
  • 产品路线图、年度规划
  • 希望减少轴标签数量，突出宏观趋势

天视图间隔

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

 复制代码<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 的协同关系

常用配置

• vxe-gantt 的 step 参数为时间轴的密度控制提供了极高的灵活性。通过合理设置 scales 中各层级的 step 值，你可以：
  • 让时间轴显示更紧凑，避免视觉拥挤
  • 突出重点时间段，弱化无关间隙
  • 适配不同时间跨度的任务数据，提升可读性
  • 结合 offset 实现更精细的刻度起始控制

核心配置口诀：跨度大则 step 大，跨度小则 step 小；顶层管宏观，底层管细节。

gantt.vxeui.com