首页 > 网页制作 >Vue甘特图vxe-gantt小时视图：日期轴3小时间隔设置

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

来源：互联网 2026-07-14 08:14:00

任务时间跨度一旦压缩到小时甚至分钟级别，默认的日视图或周视图便难以清晰呈现细节。此时，vxe-gantt 提供的小时视图（hour）结合 step 参数，能够精准调整时间轴密度，使短期任务的进度展示紧凑且直观。核心配置解析实现小时视图精细化的关键在于 taskViewConfig.scales

任务时间跨度一旦压缩到小时甚至分钟级别，默认的日视图或周视图便难以清晰呈现细节。此时，vxe-gantt 提供的小时视图（hour）结合 step 参数，能够精准调整时间轴密度，使短期任务的进度展示紧凑且直观。

核心配置解析

实现小时视图精细化的关键在于 taskViewConfig.scales 的双层配置：顶层使用 date 显示日期，底层使用 hour 并设置 step: 3，时间轴将每隔3小时显示一个刻度。示例配置如下：

长期稳定更新的攒劲资源： >>>点此立即查看<<<

 复制代码taskViewConfig: {
  scales: [
    { type: 'date' },        // 顶层：以天为刻度单位
    { type: 'hour', step: 3 } // 底层：每3小时一个刻度
  ]
}

完整代码示例

Vue甘特图vxe-gantt小时视图：日期轴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>

配置项详解

配置项	值	说明
scales 第一层	{ type: 'date' }	顶层以天为刻度单位，显示日期（如 2024-03-01）
scales 第二层	{ type: 'hour', step: 3 }	底层以小时为单位，每 3 小时显示一个刻度
taskConfig.dateFormat	不设置	默认解析到秒，精确匹配数据中的时间格式

效果：时间轴上会显示 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 顶层，既能宏观查看日期分布，又能微观观察小时级别的任务细节，非常适合短期密集任务的排期展示与进度管理。

侠游戏发布此文仅为了传递信息，不代表侠游戏网站认同其观点或证实其描述