在项目管理中，月视图是一个承上启下的时间维度——它既能提供比年视图更细的颗粒度，又比周/天视图更宏观，适合展示季度性任务、中短期项目里程碑。vxe-gantt 提供了灵活的月视图渲染能力，支持 默认模式 和 精确模式 两种粒度，满足从宏观规划到精细化跟踪的各种需求。
本文介绍月视图的两种使用方式，并通过示例对比它们的差异与应用场景。
月视图的配置参数
vxe-gantt 通过 taskViewConfig.scales 配置项控制时间轴的层级结构。月视图通常配置为 [‘year’, ‘month’]，即时间轴分为“年”和“月”两级刻度，每一列代表一个月份
| 配置项 | 值 | 说明 |
|---|---|---|
| taskViewConfig.scales | [‘year’, ‘month’] | 以年-月为层级渲染时间轴，每个单元格对应一个月。 |
| taskViewConfig.viewStyle.cellWidth | 数值（如 120） | 每个月份单元格的宽度（单位：px）。 |
| taskConfig.dateFormat | 日期格式字符串 | 控制日期解析精度，决定甘特条在单元格内的精确位置。 |
适用场景：季度规划、中期项目（数月至一年）、产品路线图、里程碑跟踪等。
以月为粒度渲染
在默认模式下，甘特图将日期解析到月（yyyy-MM），每个单元格对应一个完整的月份。甘特条以月为单位在时间轴上定位，不区分具体的天。
<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:['year','month'],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:90},{id:10002,title:'城市道路修理进度',start:'2024-03-03',end:'2024-04-18',progress:70},{id:10003,title:'B大工程',start:'2024-03-28',end:'2024-05-11',progress:90},{id:10004,title:'超级大工程',start:'2024-04-11',end:'2024-05-18',progress:80}]})</script>| 特点 | 说明 |
|---|---|
| 简洁清晰 | 任务按月份定位，适合快速把握整体进度。 |
| 数据兼容性强 | 即使日期包含具体天，也会自动映射到对应的月份。 |
| 精度有限 | 无法区分同一月份内的不同天。 |
| 适用场景 | 季度计划、月度里程碑概览、产品路线图。 |
精确模式
通过设置 taskConfig.dateFormat，可以指定日期解析的精度（如 yyyy-MM-dd），让甘特条在单元格内精确反映任务在月内的起止位置。例如，一个从某月10号开始、20号结束的任务，在月视图的单元格内会显示出明显的偏移，而不仅仅占满整月。
- 注意：精确模式下，任务的 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:['year','month'],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:90},{id:10002,title:'城市道路修理进度',start:'2024-03-03',end:'2024-04-18',progress:70},{id:10003,title:'B大工程',start:'2024-03-28',end:'2024-05-11',progress:90},{id:10004,title:'超级大工程',start:'2024-04-11',end:'2024-05-18',progress:80}]})</script>| 点 | 说明 |
|---|---|
| 精度更高 | 甘特条在月单元格内按天偏移，直观展示任务在月份中的具体分布。 |
| 视觉细腻 | 同一月内的多个任务可以清晰区分先后顺序。 |
| 数据格式要求 | 日期字符串必须完全符合 dateFormat。 |
| 适用场景 | 需要精确到天的月计划、任务排期跟踪。 |
对比
| 对比维度 | 默认模式 | 精确模式 |
|---|---|---|
| 日期解析 | 仅解析到月（yyyy-MM） | 按 dateFormat 解析（如 yyyy-MM-dd） |
| 甘特条定位 | 占据整个月份单元格 | 根据实际天在单元格内偏移 |
| 数据字段要求 | start/end 至少包含年月 | 必须包含完整的年月日信息 |
| 视觉表现 | 任务条填满整个单元格宽度 | 任务条按天比例缩放在单元格内 |
| 典型场景 | 季度规划、里程碑概览 | 精细排期、月度任务跟踪 |
配置说明
| 配置路径 | 默认模式 | 精确模式 |
|---|---|---|
| taskViewConfig.scales | [‘year’, ‘month’] | [‘year’, ‘month’] |
| taskViewConfig.viewStyle.cellWidth | 120 | 120 |
| taskConfig.dateFormat | 不设置（默认 yyyy-MM） | ‘yyyy-MM-dd’ |
| columns 中日期列的宽度 | 100 | 160（显示完整日期） |
两种方式可以灵活切换，只需调整 dateFormat 配置和日期列的宽度即可。开发者可根据项目实际需求，在“简洁性”与“精确性”之间做出最优选择。
https://gantt.vxeui.com
