尧图网络 高端网站定制 · 原创设计
免费咨询热线
400-888-6620
免费获取方案
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
RELATED

相关推荐

深度学习驱动的DFU风险评分系统:从算法到.zip落地实践

深度学习驱动的DFU风险评分系统:从算法到.zip落地实践

简介:糖尿病足溃疡(DFU)风险预测是慢病管理中的关键临床问题,其本质是对早期微循环障碍与组织代偿失衡的识别。传统统计模型受限于人工特征工程与静态指标,难以捕捉红外热图、皮肤纹理、步态时序等多模态隐性信号&…

📅 2026/11/13 20:01:46
Vivado 自定义 IP 封装 + Block Design 调用完整流程

Vivado 自定义 IP 封装 + Block Design 调用完整流程

目录1. 第一步:将你的工程封装为IP核2. 第二步:在Block Design中使用自定义IP核1. **将IP添加到Vivado IP仓库**:2. 在Block Design中例化IP:3. 连线、验证与生成:3. 如何给新建ip核分配地基地址4.Vivado BD 删除模块&…

📅 2026/10/13 7:23:11
Java常见异常

Java常见异常

Java中的异常共分2大类: 1)、Error 2)、Exception 1、Error Error继承自Throwable类,代表编译或系统的错误。不建议捕获。 2、Exception Exception代表的Java标准库方法抛出的异常,它有两个直接的子类:Ru…

📅 2026/11/10 17:45:58
MORE NEWS

更多资讯

📰

泉州考电工证很难吗良心建议:工地太忙根本没时间复习考试

泉州考电工证很难吗良心建议:工地太忙根本没时间复习考试 工地太忙根本没时间复习考试,这是很多一线电工的真实写照。你不是不想考证,而是真的没时间、没精力。但你知道吗,泉州考电工证真的很难吗?其实,只要你掌握方法,找到靠谱的培训机构,完全可以在…

📰

安检网站查电工证怎么查?学历不高怕报不上名怎么解决?

安检网站查电工证怎么查?学历不高怕报不上名怎么解决? 你是不是也担心自己学历不高,连最基本的上岗必备资格都拿不到?别急,咱们今天就来聊聊关于【安检网站查电工证】的那些事儿,尤其是像你这样的在职建筑工人,怎么才能顺利拿到电工证,别让学历成为你…

📰

复审过的电工证式样行业前景与薪资待遇

电工证过期了不知道怎么复审延期?上岗必备的电工证式样全解析 证书过期了不知道怎么复审延期?很多电工朋友在工作中遇到这个问题时,往往手忙脚乱,不知道该如何处理。特别是对于南阳卧龙区的建筑工人来说,电工证不仅是上岗必备的“通行证”,更是保障自身…

📰

常山哪里能报考电工证 电子证书怎么领才靠谱

常山哪里能报考电工证 电子证书怎么领才靠谱 你还在为找不到电工证发愁?找工作被卡在门口,就是因为没这张证。常山哪里能报考电工证?别急,今天我就来给你讲讲,怎么在常山拿到合法有效的电子证书,还能顺利上岗。…

📰

隆安县电工证过期了不知道怎么复审千万别踩坑

隆安县电工证过期了不知道怎么复审千万别踩坑 证书过期了不知道怎么复审延期,这事儿真不是闹着玩的,特别是像 隆安县电工证 这种关系到安全和职业发展的特种作业操作证。一旦过期,不仅不能上岗,还可能面临法律责任,甚至影响你后续的职业发展。所以,别…

📰

电工证双认证如何办理,电子证书怎么领?怕考不过白交培训费的看这篇

电工证双认证如何办理,电子证书怎么领?怕考不过白交培训费的看这篇 怕考不过白交培训费?你不是一个人。很多人在办理电工证双认证时,最担心的就是花钱了,考试又挂掉,结果一无所获。别急,这篇文章就告诉你怎么稳妥办理电工证双认证,还能拿到国家认可的…

TODAY

今日更新

THIS WEEK

本周精选

THIS MONTH

本月热门

读完文章,想聊聊您的网站?

告诉我们您的行业与需求,资深顾问一对一梳理方案与报价,全程免费。

📞 💬