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，即年份-季度编号），每个单元格对应一个完整的季度。甘特条以季度为单位在时间轴上定位，不区分具体的月份或天。

<template>
  <div>
    <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
const ganttOptions = reactive({
  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 格式完全一致。

<template>
  <div>
    <vxe-gantt v-bind="ganttOptions"></vxe-gantt>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
const ganttOptions = 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', '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.cellWidth	120	120
taskConfig.dateFormat	不设置（默认 yyyy-Q）	'yyyy-MM-dd' 或 'yyyy-MM'
columns 中日期列的宽度	100	160（显示完整日期）

vxe-gantt 的季度视图两种方式可以灵活切换，只需调整 dateFormat 配置和日期列的宽度即可。开发者可根据项目实际需求，在“简洁性”与“精确性”之间做出最优选择。

gantt.vxeui.com