vue实现漫游甘特图

实现漫游甘特图的关键步骤

安装依赖库
推荐使用 vue-ganttastic 或 dhtmlx-gantt 这类专为 Vue 设计的甘特图库。通过 npm 或 yarn 安装：

npm install vue-ganttastic
# 或
npm install dhtmlx-gantt

基础甘特图集成
以 vue-ganttastic 为例，在 Vue 组件中引入并配置基础甘特图：

<template>
  <GanttChart :tasks="tasks" />
</template>

<script>
import { GanttChart } from "vue-ganttastic";
export default {
  components: { GanttChart },
  data() {
    return {
      tasks: [
        { id: 1, name: "Task 1", start: "2023-01-01", end: "2023-01-05" },
        { id: 2, name: "Task 2", start: "2023-01-06", end: "2023-01-10" },
      ],
    };
  },
};
</script>

实现漫游功能
漫游通常指通过拖动或缩放交互浏览时间轴。dhtmlx-gantt 提供内置方法：

<template>
  <div ref="ganttContainer"></div>
</template>

<script>
import "dhtmlx-gantt";
export default {
  mounted() {
    gantt.init(this.$refs.ganttContainer);
    gantt.config.scale_unit = "day";
    gantt.config.date_scale = "%d %M";
    gantt.config.subscales = [{ unit: "hour", step: 6 }];
    gantt.config.drag_move = true; // 启用拖动
    gantt.config.drag_resize = true; // 启用调整
    gantt.parse(this.tasks);
  },
  data() {
    return {
      tasks: [
        { id: 1, text: "Task 1", start_date: "2023-01-01", duration: 4 },
        { id: 2, text: "Task 2", start_date: "2023-01-06", duration: 4 },
      ],
    };
  },
};
</script>

自定义时间轴缩放
通过监听事件实现动态缩放，适配不同时间粒度：

methods: {
  zoomIn() {
    const currentUnit = gantt.config.scale_unit;
    const units = ["day", "week", "month"];
    const index = units.indexOf(currentUnit);
    if (index > 0) gantt.setScale(units[index - 1]);
  },
  zoomOut() {
    const currentUnit = gantt.config.scale_unit;
    const units = ["day", "week", "month"];
    const index = units.indexOf(currentUnit);
    if (index < units.length - 1) gantt.setScale(units[index + 1]);
  }
}

添加导航控件
在模板中添加按钮控制时间轴移动：

<template>
  <div>
    <button @click="moveTimeline(-7)">← 前一周</button>
    <button @click="moveTimeline(7)">后一周 →</button>
    <div ref="ganttContainer"></div>
  </div>
</template>

<script>
methods: {
  moveTimeline(days) {
    const state = gantt.getState();
    gantt.setCurrentDate(new Date(state.date.valueOf() + days * 86400000));
  }
}
</script>

注意事项

• 时间格式需统一使用 ISO 格式（如 YYYY-MM-DD）。
• 大数据量时启用虚拟滚动优化性能，例如在 dhtmlx-gantt 中设置：

  gantt.config.virtual_scroll = true;
  gantt.config.row_height = 40;
  gantt.config.bar_height = 30;

• 跨时区项目需显式处理时区转换，推荐使用 moment-timezone 库。

扩展功能建议

• 动态加载数据：结合后端 API 实现懒加载，监听时间轴范围变化事件：

  gantt.attachEvent("onGanttReady", function() {
    gantt.attachEvent("onBeforeTaskDisplay", function(id, task) {
      // 按需加载数据
    });
  });

• 多视图切换：支持列表视图与甘特图切换，通过 v-if 控制不同组件的显示。
• 自定义样式：通过 CSS 覆盖默认样式，适配项目设计规范。

以上方案可根据实际需求选择库和功能组合，dhtmlx-gantt 功能更全面但需商业授权，vue-ganttastic 更适合轻量级应用。