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