高性能 Vue 甘特图：vxe-gantt 如何秒级渲染万级任务数据

在项目管理、生产排程、资源调度等场景中，甘特图是核心可视化工具。然而，当任务数量达到数千甚至上万条时，传统 DOM 渲染方式会导致页面卡顿、滚动延迟，甚至浏览器崩溃。 vxe-gantt 组件通过内置的虚拟滚动（Virtual Scrolling）技术，完美解决了大数据量下的渲染性能问题，能够在毫秒级完成万级任务的加载与交互。

通过 virtualYConfig 配置项，让你的甘特图轻松承载 10000+ 条任务，并保持流畅的滚动体验。

性能瓶颈与虚拟滚动原理

传统甘特图的痛点

普通甘特图实现会将所有任务行（包括任务条、依赖线、时间轴标记）全部渲染为 DOM 节点。当任务数达到 10000 条时，DOM 节点数量可能超过 10 万个，导致：
- 初始化渲染耗时数秒甚至十几秒
- 滚动、缩放等交互严重卡顿
- 内存占用极高，移动端尤其明显

虚拟滚动的核心思想

只渲染可视区域内的任务行，随着滚动动态加载和销毁不可见区域的行。虚拟滚动技术将 DOM 节点数量控制在"可视行数 × (每行子节点数)"的常数范围内（通常仅几十到上百个节点），从而：
- 首屏渲染时间降低至毫秒级
- 滚动流畅度与数据量解耦
- 内存占用稳定可控

vxe-gantt 的虚拟滚动实现基于 Y 轴方向的虚拟滚动（virtualYConfig），同时也支持 X 轴方向的虚拟滚动（virtualXConfig）应对超长时间线。

配置方法

在 vxe-gantt 中，通过 virtualYConfig 对象启用垂直虚拟滚动：

属性	类型	说明
enabled	boolean	虚拟滚动总开关，设为 true 开启
gt	number	阈值：当总行数大于该值时自动启用虚拟滚动（建议设置为 0，表示任何行数都启用）

代码

使用 vxe-gantt 加载 10000 条模拟任务，并通过虚拟滚动实现流畅滚动：

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,
  showHeaderOverflow: true,
  showFooterOverflow: true,
  height: 600,
  virtualYConfig: {
    enabled: true,
    gt: 0
  },
  taskBarConfig: {
    showProgress: true,
    showContent: true
  },
  taskViewConfig: {
    tableStyle: {
      width: 480
    }
  },
  columns: [
    { type: 'seq', width: 70 },
    { field: 'title', title: '任务名称' },
    { field: 'start', title: '开始时间', width: 100 },
    { field: 'end', title: '结束时间', width: 100 }
  ],
  data: []
})

// 模拟行数据
const loadList = (size = 200) => {
  const dataList = []
  for (let i = 0; i < size; i++) {
    dataList.push({
      id: 10000 + i,
      title: `任务计划${i + 1}`,
      start: i % 3 ? '2024-03-03' : i % 2 ? '2024-03-05' : '2024-03-09',
      end: i % 3 ? '2024-03-11' : i % 2 ? '2024-03-19' : '2024-03-14',
      progress: i % 2 ? 50 : 30
    })
  }
  ganttOptions.data = dataList
}

loadList(10000)
</script>

运行效果：
- 页面打开后约 0.2～0.5 秒即可完成首屏渲染
- 滚动条顺滑无延迟，任务条实时更新
- 内存占用稳定在几十 MB 级别

vxe-gantt 基于 vxe-table 实现，内置高性能的虚拟滚动功能，使得甘特图能够轻松应对万级任务数据量，将渲染性能从"数十秒不可用"提升到"毫秒级秒开"。通过简单的 virtualYConfig 配置，即可让您的项目管理应用拥有企业级的数据承载能力。

gantt.vxeui.com