在项目排期管理中，周视图是一个兼顾颗粒度与可读性的理想选择——它既能清晰展示任务在一周内的分布，又不会像天视图那样因时间轴过密而难以阅读。vxe-gantt 提供了灵活的周视图渲染能力，支持 默认模式 和 精确模式 两种粒度，满足从周计划到精细化排期的各种需求。
说明
vxe-gantt 通过 taskViewConfig.scales 配置项控制时间轴的层级结构。周视图通常配置为 [‘month’, ‘week’]，即时间轴分为“月”和“周”两级刻度。每一列代表一个日历周，通常以周一作为一周的起始日。
| 配置项 | 值 | 说明 |
|---|---|---|
| taskViewConfig.scales | [‘month’, ‘week’] | 以月-周为层级渲染时间轴，每个单元格对应一周。 |
| taskViewConfig.viewStyle.cellWidth | 数值（如 120） | 每个周单元格的宽度（单位：px）。 |
| taskConfig.dateFormat | 日期格式字符串 | 控制日期解析精度，决定甘特条在单元格内的精确位置。 |
默认模式：以周为粒度渲染
在默认模式下，甘特图将日期解析到周（yyyy-W，即年份-周数），每个单元格对应一个完整的日历周。甘特条以周为单位在时间轴上定位，不区分具体的天。
<template><div><vxe-ganttv-bind="ganttOptions"></vxe-gantt></div></template><scriptsetup>import{reactive}from'vue'constganttOptions=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 格式完全一致。
<template><div><vxe-ganttv-bind="ganttOptions"></vxe-gantt></div></template><scriptsetup>import{reactive}from'vue'constganttOptions=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 参数指定：
taskViewConfig:{scales:[{type:'month'},{type:'week',startDay:0}// 0 = 周日，1 = 周一，以此类推]}- 国内项目通常将周一作为一周的起始，默认值为 startDay: 1
vxe-gantt 的周视图提供了两种使用模式：
- 默认模式：以周为粒度，简洁清晰，适合周计划、迭代概览等宏观场景。
- 精确模式：通过 taskConfig.dateFormat 指定日期精度，在周单元格内精确定位任务的天级分布，适合需要细粒度时间管理的场景。
两种模式可以灵活切换，只需调整 dateFormat 配置和日期列的宽度即可。开发者可根据项目实际需求，在“简洁性”与“精确性”之间做出最优选择。
https://gantt.vxeui.com
