vue 甘特图 vxe-gantt 的使用（四）：周视图的渲染

在项目排期管理中，周视图是一个兼顾颗粒度与可读性的理想选择------它既能清晰展示任务在一周内的分布，又不会像天视图那样因时间轴过密而难以阅读。vxe-gantt 提供了灵活的周视图渲染能力，支持默认模式和精确模式两种粒度，满足从周计划到精细化排期的各种需求。

说明

vxe-gantt 通过 taskViewConfig.scales 配置项控制时间轴的层级结构。周视图通常配置为 $'month', 'week'$ ，即时间轴分为"月"和"周"两级刻度。每一列代表一个日历周，通常以周一作为一周的起始日。

配置项	值	说明
taskViewConfig.scales	$'month', 'week'$	以月-周为层级渲染时间轴，每个单元格对应一周。
taskViewConfig.viewStyle.cellWidth	数值（如 120）	每个周单元格的宽度（单位：px）。
taskConfig.dateFormat	日期格式字符串	控制日期解析精度，决定甘特条在单元格内的精确位置。

默认模式：以周为粒度渲染

在默认模式下，甘特图将日期解析到周（yyyy-W，即年份-周数），每个单元格对应一个完整的日历周。甘特条以周为单位在时间轴上定位，不区分具体的天。

html 复制代码

<template>
  <div>
    <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const ganttOptions = reactive({
  border: true,
  showOverflow: true,
  cellConfig: {
    height: 80
  },
  taskBarConfig: {
    showProgress: true,
    showContent: true,
    barStyle: {
      round: true,
      bgColor: '#f56565',
      completedBgColor: '#65c16f'
    }
  },
  taskViewConfig: {
    scales: ['month', 'week'],
    tableStyle: {
      width: 320
    },
    viewStyle: {
      cellWidth: 120
    }
  },
  columns: [
    { type: 'seq', field: 'seq', width: 70 },
    { field: 'title', title: '任务名称' },
    { field: 'start', title: '开始时间', width: 100 },
    { field: 'end', title: '结束时间', width: 100 }
  ],
  data: [
    { id: 10001, title: 'A项目', start: '2024-02-26', end: '2024-03-03', progress: 80 },
    { id: 10002, title: '城市道路修理进度', start: '2024-03-03', end: '2024-03-08', progress: 90 },
    { id: 10003, title: 'B大工程', start: '2024-03-06', end: '2024-03-11', progress: 90 },
    { id: 10004, title: '超级大工程', start: '2024-03-11', end: '2024-03-18', progress: 100 }
  ]
})
</script>

特点	说明
✅ 清晰简洁	任务按周定位，一眼看出任务分布在哪几周。
✅ 数据兼容性强	即使日期包含具体天，也会自动映射到对应的周。
⚠️ 精度有限	无法区分同一周内的不同天。
💡 适用场景	周计划、迭代概览、中期项目跟踪。

精确模式：精确到天

通过设置 taskConfig.dateFormat，可以指定日期解析的精度（如 yyyy-MM-dd），让甘特条在单元格内精确反映任务在周内的起止位置。例如，一个从周三开始、周五结束的任务，在周视图的单元格内会显示出明显的偏移，而不仅仅占满整周。

注意：精确模式下，任务的 start 和 end 字段必须与 dateFormat 格式完全一致。

html 复制代码

<template>
  <div>
    <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const ganttOptions = reactive({
  border: true,
  showOverflow: true,
  cellConfig: {
    height: 80
  },
  taskConfig: {
    dateFormat: 'yyyy-MM-dd'
  },
  taskBarConfig: {
    showProgress: true,
    showContent: true,
    barStyle: {
      round: true,
      bgColor: '#f56565',
      completedBgColor: '#65c16f'
    }
  },
  taskViewConfig: {
    scales: ['month', 'week'],
    tableStyle: {
      width: 320
    },
    viewStyle: {
      cellWidth: 120
    }
  },
  columns: [
    { type: 'seq', field: 'seq', width: 70 },
    { field: 'title', title: '任务名称' },
    { field: 'start', title: '开始时间', width: 160 },
    { field: 'end', title: '结束时间', width: 160 }
  ],
  data: [
    { id: 10001, title: 'A项目', start: '2024-02-26', end: '2024-03-03', progress: 80 },
    { id: 10002, title: '城市道路修理进度', start: '2024-03-03', end: '2024-03-08', progress: 90 },
    { id: 10003, title: 'B大工程', start: '2024-03-06', end: '2024-03-11', progress: 90 },
    { id: 10004, title: '超级大工程', start: '2024-03-11', end: '2024-03-18', progress: 100 }
  ]
})
</script>

特点	说明
✅ 精度更高	甘特条在周单元格内按天偏移，直观展示任务在一周中的具体分布。
✅ 视觉细腻	同一周内的多个任务可以清晰区分先后顺序。
⚠️ 数据格式要求	日期字符串必须完全符合 dateFormat。
💡 适用场景	精细化排期、需要区分周内不同天数的场景。

两种模式对比

对比维度	默认模式	精确模式
日期解析	仅解析到周（yyyy-W）	按 dateFormat 解析（如 yyyy-MM-dd）
甘特条定位	占据整个周单元格	根据实际天在单元格内偏移
数据字段要求	start/end 至少包含日期	必须包含完整的年月日信息
视觉表现	任务条填满整个单元格宽度	任务条按天比例缩放在单元格内
典型场景	周计划、迭代概览	精细排期、工时跟踪

进阶：自定义每周起始日期

默认情况下，每周的起始日取决于组件语言环境（通常周一为起始）。如需明确控制，可以将 scales 中的 'week' 改为对象形式，通过 startDay 参数指定：

javascript 复制代码

taskViewConfig: {
  scales: [
    { type: 'month' },
    { type: 'week', startDay: 0 }   // 0 = 周日，1 = 周一，以此类推
  ]
}

国内项目通常将周一作为一周的起始，默认值为 startDay: 1

vxe-gantt 的周视图提供了两种使用模式：

默认模式：以周为粒度，简洁清晰，适合周计划、迭代概览等宏观场景。
精确模式：通过 taskConfig.dateFormat 指定日期精度，在周单元格内精确定位任务的天级分布，适合需要细粒度时间管理的场景。

两种模式可以灵活切换，只需调整 dateFormat 配置和日期列的宽度即可。开发者可根据项目实际需求，在"简洁性"与"精确性"之间做出最优选择。

gantt.vxeui.com