Vue甘特图vxe-gantt使用（一）年视图渲染

在项目管理场景中，甘特图的时间跨度往往长达数年甚至十年以上。vxe-gantt 提供了年视图（year），让你可以清晰展示长期任务的规划和进度。本文介绍年视图的两种使用方式：默认模式和精确模式，并通过示例对比它们的区别与应用场景。

概述

vxe-gantt 通过 taskViewConfig.scales 配置项控制时间轴的展示粒度。当设置为 ['year'] 时，甘特图以“年”为最小时间单位进行渲染。

适用场景：跨年度的大型工程规划、产品路线图、长期战略项目等。

默认模式：以年为粒度渲染

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

<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'],
    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 格式保持一致。

<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'],
    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: 10003, title: '超级大工程', start: '2028-08-11', end: '2032-11-18', progress: 80 }
  ]
})
script>

两种模式对比

• vxe-gantt 的年视图提供了两种使用模式：
• 默认模式：简单直观，以年为粒度展示任务，适合宏观规划场景。
• 精确模式：通过 taskConfig.dateFormat 指定日期精度，在年视图内精确定位任务起止，适合需要细粒度展示的跟踪场景。

可根据实际业务需求，在“简洁性”与“精确性”之间选择合适的模式。