vue 甘特图 vxe-gantt 的使用（三）：月视图的渲染

在项目管理中，月视图是一个承上启下的时间维度------它既能提供比年视图更细的颗粒度，又比周/天视图更宏观，适合展示季度性任务、中短期项目里程碑。vxe-gantt 提供了灵活的月视图渲染能力，支持默认模式和精确模式两种粒度，满足从宏观规划到精细化跟踪的各种需求。

本文介绍月视图的两种使用方式，并通过示例对比它们的差异与应用场景。

月视图的配置参数

vxe-gantt 通过 taskViewConfig.scales 配置项控制时间轴的层级结构。月视图通常配置为 $'year', 'month'$ ，即时间轴分为"年"和"月"两级刻度，每一列代表一个月份

配置项	值	说明
taskViewConfig.scales	$'year', 'month'$	以年-月为层级渲染时间轴，每个单元格对应一个月。
taskViewConfig.viewStyle.cellWidth	数值（如 120）	每个月份单元格的宽度（单位：px）。
taskConfig.dateFormat	日期格式字符串	控制日期解析精度，决定甘特条在单元格内的精确位置。

适用场景：季度规划、中期项目（数月至一年）、产品路线图、里程碑跟踪等。

以月为粒度渲染

在默认模式下，甘特图将日期解析到月（yyyy-MM），每个单元格对应一个完整的月份。甘特条以月为单位在时间轴上定位，不区分具体的天。

html 复制代码

<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', 'month'],
    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-03-03', progress: 90 },
    { id: 10002, title: '城市道路修理进度', start: '2024-03-03', end: '2024-04-18', progress: 70 },
    { id: 10003, title: 'B大工程', start: '2024-03-28', end: '2024-05-11', progress: 90 },
    { id: 10004, title: '超级大工程', start: '2024-04-11', end: '2024-05-18', progress: 80 }
  ]
})
</script>

特点	说明
简洁清晰	任务按月份定位，适合快速把握整体进度。
数据兼容性强	即使日期包含具体天，也会自动映射到对应的月份。
精度有限	无法区分同一月份内的不同天。
适用场景	季度计划、月度里程碑概览、产品路线图。

精确模式

通过设置 taskConfig.dateFormat，可以指定日期解析的精度（如 yyyy-MM-dd），让甘特条在单元格内精确反映任务在月内的起止位置。例如，一个从某月10号开始、20号结束的任务，在月视图的单元格内会显示出明显的偏移，而不仅仅占满整月。

注意：精确模式下，任务的 start 和 end 字段必须与 dateFormat 格式完全一致。

html 复制代码

<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', 'month'],
    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-03-03', progress: 90 },
    { id: 10002, title: '城市道路修理进度', start: '2024-03-03', end: '2024-04-18', progress: 70 },
    { id: 10003, title: 'B大工程', start: '2024-03-28', end: '2024-05-11', progress: 90 },
    { id: 10004, title: '超级大工程', start: '2024-04-11', end: '2024-05-18', progress: 80 }
  ]
})
</script>

点	说明
精度更高	甘特条在月单元格内按天偏移，直观展示任务在月份中的具体分布。
视觉细腻	同一月内的多个任务可以清晰区分先后顺序。
数据格式要求	日期字符串必须完全符合 dateFormat。
适用场景	需要精确到天的月计划、任务排期跟踪。

对比

对比维度	默认模式	精确模式
日期解析	仅解析到月（yyyy-MM）	按 dateFormat 解析（如 yyyy-MM-dd）
甘特条定位	占据整个月份单元格	根据实际天在单元格内偏移
数据字段要求	start/end 至少包含年月	必须包含完整的年月日信息
视觉表现	任务条填满整个单元格宽度	任务条按天比例缩放在单元格内
典型场景	季度规划、里程碑概览	精细排期、月度任务跟踪

配置说明

配置路径	默认模式	精确模式
taskViewConfig.scales	$'year', 'month'$	$'year', 'month'$
taskViewConfig.viewStyle.cellWidth	120	120
taskConfig.dateFormat	不设置（默认 yyyy-MM）	'yyyy-MM-dd'
columns 中日期列的宽度	100	160（显示完整日期）

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

gantt.vxeui.com