Vue甘特图vxe-gantt小时视图设置日期轴间隔3小时

任务时间跨度一旦压缩到小时甚至分钟级别，默认的日视图或周视图就很难看清细节了。这时候，vxe-gantt 提供的小时视图（hour）配合 step 参数，就能让时间轴的密度变得恰到好处——短期任务的进度展示，紧凑又直观。

核心配置

关键在于 taskViewConfig.scales 的两层配置：顶层用 date 显示日期，底层用 hour 并指定 step: 3，时间轴就会每隔3小时显示一个刻度。举个例子：

 复制代码taskViewConfig: {
  scales: [
    { type: 'date' },        // 顶层：以天为单位
    { type: 'hour', 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: 'date' }, { type: 'hour', 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: '任务R790', start: '2024-03-01 08:30:20', end: '2024-03-01 09:30:30', progress: 100 },
    { id: 10002, title: '任务C30456572349', start: '2024-03-01 00:00:00', end: '2024-03-01 00:00:00', progress: 100 },
    { id: 10003, title: '任务E563', start: '2024-03-01 01:00:00', end: '2024-03-01 01:05:0', progress: 90 },
    { id: 10004, title: '任务P687', start: '2024-03-01 01:20:00', end: '2024-03-01 08:50:00', progress: 80 }
  ]
})
script>

配置说明

• 效果：时间轴上会显示 00:00、03:00、06:00、09:00... 等刻度，任务条根据实际起止时间在单元格内精确定位。

调整更精细的间隔

如果需要更大的间隔（如每 4 小时或 6 小时），只需修改 step 值：

 复制代码// 每4小时间隔
{ type: 'hour', step: 4 }// 每6小时间隔
{ type: 'hour', step: 6 }

通过 scales 中的 step 参数，可以轻松控制小时视图的日期轴密度。对于需要按 3 小时间隔展示任务的场景，只需配置 { type: 'hour', step: 3 } 即可。结合 date 顶层，既能宏观看到日期分布，又能微观观察小时级别的任务细节，非常适合短期密集任务的排期展示。