在项目管理场景中甘特图的时间跨度往往长达数年甚至十年以上。vxe-gantt 提供了年视图year让你可以清晰展示长期任务的规划和进度。本文介绍年视图的两种使用方式默认模式和精确模式并通过示例对比它们的区别与应用场景。概述vxe-gantt 通过 taskViewConfig.scales 配置项控制时间轴的展示粒度。当设置为 [‘year’] 时甘特图以“年”为最小时间单位进行渲染。配置项值说明taskViewConfig.scales[‘year’]以年为维度渲染时间轴每个单元格代表一年。taskViewConfig.viewStyle.cellWidth数值如 120每个年份单元格的宽度单位px。taskConfig.dateFormat日期格式字符串控制日期解析精度决定甘特条在单元格内的精确位置。适用场景跨年度的大型工程规划、产品路线图、长期战略项目等。默认模式以年为粒度渲染在默认模式下甘特图仅解析任务的 年份yyyy每个单元格对应一整年。任务条以年份为单位在时间轴上定位不区分具体的月份或日期。特点说明✅ 简单直观无需关心具体日期只看年份即可。✅ 性能更优按年渲染单元格数量少滚动流畅。⚠️ 精度有限无法区分同一年的不同月份或季度。 适用场景宏观规划、高层汇报、年度里程碑展示。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:[year],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:2025-05-03,progress:90},{id:10002,title:城市道路修理进度,start:2025-03-03,end:2027-08-18,progress:70},{id:10003,title:B大工程,start:2026-05-28,end:2029-10-11,progress:90},{id:10004,title:超级大工程,start:2028-08-11,end:2032-11-18,progress:80}]})/script精确模式通过设置 taskConfig.dateFormat可以指定日期解析格式让甘特条在单元格内按实际开始/结束日期精确显示进度。即使是年视图也能在单元格内呈现出任务在一年中的具体起止位置。注意精确模式下任务的 start 和 end 字段必须与 dateFormat 格式保持一致。特点说明✅ 精度高可精确到月或日甘特条位置与实际日期对应。✅ 视觉更细腻单元格内能直观看出任务在年内的分布。⚠️ 数据要求更高日期字段必须包含完整的年月日信息。 适用场景详细进度跟踪、需要区分年内时间点的场景。templatedivvxe-ganttv-bindganttOptions/vxe-gantt/div/templatescriptsetupimport{reactive}fromvueconstganttOptionsreactive({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],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:2025-05-03,progress:90},{id:10002,title:城市道路修理进度,start:2025-03-03,end:2027-08-18,progress:70},{id:10003,title:B大工程,start:2026-05-28,end:2029-10-11,progress:90},{id:10004,title:超级大工程,start:2028-08-11,end:2032-11-18,progress:80}]})/script两种模式对比对比维度默认模式精确模式日期解析仅解析年份yyyy按 dateFormat 解析如 yyyy-MM-dd甘特条精度以年为单位占据整年位置精确到月/日在单元格内按比例定位数据字段要求start/end 至少包含年份start/end 必须包含完整的月/日信息视觉表现甘特条左对齐年份起始位置甘特条根据实际日期在单元格内偏移性能开销较低稍高需要更精细的日期计算典型场景高层规划、年度概览执行跟踪、详细排期vxe-gantt 的年视图提供了两种使用模式默认模式简单直观以年为粒度展示任务适合宏观规划场景。精确模式通过 taskConfig.dateFormat 指定日期精度在年视图内精确定位任务起止适合需要细粒度展示的跟踪场景。可根据实际业务需求在“简洁性”与“精确性”之间选择合适的模式。https://gantt.vxeui.com