在项目进度管理中天视图是最常用的时间维度之一——它能够精确展示任务在每一天的起止位置甚至细化到小时和分钟。vxe-gantt 提供了强大的天视图day view 渲染能力支持 默认模式 和 精确模式 两种粒度满足从日常任务跟踪到精细化排期的各种需求。说明vxe-gantt 通过 taskViewConfig.scales 配置项控制时间轴的层级结构。天视图通常配置为 [‘month’, ‘date’]即时间轴分为“月”和“日”两级刻度每个单元格代表一天。配置项值说明taskViewConfig.scales[‘month’, ‘date’]以月-日为层级渲染时间轴每个单元格对应一天。taskViewConfig.viewStyle.cellWidth数值如 120每个日期单元格的宽度单位px。taskConfig.dateFormat日期格式字符串控制日期解析精度决定甘特条在单元格内的精确位置。适用场景短期项目数天至数月、任务排期、日常工作计划、敏捷迭代跟踪等。默认模式在默认模式下甘特图将日期解析到 天yyyy-MM-dd每个单元格对应一天。甘特条以天为单位在时间轴上定位不区分具体的时间点如小时、分钟。特点说明✅ 直观清晰任务按天定位一眼看出哪些天有任务。✅ 数据兼容性强即使日期包含时分秒也会自动截取到天。⚠️ 精度有限无法区分同一天内的不同时间段。 适用场景日常任务跟踪、周计划、月度排期。templatedivvxe-ganttv-bindganttOptions/vxe-gantt/div/templatescriptsetupimport{reactive}fromvueconstganttOptionsreactive({border:true,showOverflow:true,cellConfig:{height:80},taskBarConfig:{showProgress:true,showContent:true,barStyle:{round:true,bgColor:#f56565,completedBgColor:#65c16f}},taskViewConfig:{scales:[month,date],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-03-01 08:00:00,end:2024-03-04 12:30:00,progress:3},{id:10002,title:城市道路修理进度,start:2024-03-03 09:30:00,end:2024-03-08 14:00:00,progress:10},{id:10003,title:B大工程,start:2024-03-03 06:30:20,end:2024-03-11 09:30:40,progress:90},{id:10004,title:超级大工程,start:2024-03-05 12:30:00,end:2024-03-11 18:30:00,progress:15}]})/script精确模式精确到时分秒通过设置 taskConfig.dateFormat可以指定日期解析的精度如 yyyy-MM-dd HH:mm:ss让甘特条在单元格内精确反映任务的起止时刻。即使是天视图也能在单日内展示任务在不同时段的分布。注意精确模式下任务的 start 和 end 字段必须与 dateFormat 格式完全一致。特点说明✅ 精度极高可精确到秒甘特条在单元格内的偏移量与实际时间对应。✅ 视觉细腻单日内的多个任务可以清晰区分先后顺序。⚠️ 数据格式严格日期字符串必须完全符合 dateFormat否则解析失败。 适用场景精细排期、工时管理、生产线调度等需要精确到时刻的场景。templatedivvxe-ganttv-bindganttOptions/vxe-gantt/div/templatescriptsetupimport{reactive}fromvueconstganttOptionsreactive({border:true,showOverflow:true,cellConfig:{height:80},taskConfig:{dateFormat:yyyy-MM-dd HH:mm:ss},taskBarConfig:{showProgress:true,showContent:true,barStyle:{round:true,bgColor:#f56565,completedBgColor:#65c16f}},taskViewConfig:{scales:[month,date],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-03-01 08:00:00,end:2024-03-04 12:30:00,progress:3},{id:10002,title:城市道路修理进度,start:2024-03-03 09:30:00,end:2024-03-08 14:00:00,progress:10},{id:10003,title:B大工程,start:2024-03-03 06:30:20,end:2024-03-11 09:30:40,progress:90},{id:10004,title:超级大工程,start:2024-03-05 12:30:00,end:2024-03-11 18:30:00,progress:15}]})/script两种模式对比对比维度默认模式精确模式日期解析仅解析到天yyyy-MM-dd按 dateFormat 解析如 yyyy-MM-dd HH:mm:ss甘特条定位占据整个日期单元格左对齐或居中根据实际时刻在单元格内偏移显示精确起止数据字段要求start/end 至少包含日期必须包含完整的时间信息时分秒视觉表现任务条填满整个单元格宽度任务条按时间比例缩放在单元格内性能开销较低稍高需进行更精细的时间计算典型场景日计划、里程碑概览工时统计、精确到小时的排期vxe-gantt 的天视图提供了两种使用模式默认模式以天为粒度简单直观适合日常任务跟踪和计划展示。精确模式通过 taskConfig.dateFormat 指定时间精度在单元格内精确定位任务的起止时刻适合需要细粒度时间管理的场景。https://gantt.vxeui.com