vue实现甘特图

使用 vue-gantt-elastic 实现甘特图

vue-gantt-elastic 是一个基于 Vue.js 的甘特图组件，支持拖拽、缩放、自定义样式等功能。

安装依赖：

npm install vue-gantt-elastic

基础实现代码：

<template>
  <gantt-elastic
    :options="options"
    :tasks="tasks"
    @tasks-changed="tasksChanged"
  ></gantt-elastic>
</template>

<script>
import GanttElastic from 'vue-gantt-elastic'

export default {
  components: {
    GanttElastic
  },
  data() {
    return {
      options: {
        title: {
          label: '项目计划',
          html: false
        },
        row: {
          height: 24
        }
      },
      tasks: [
        {
          id: 1,
          label: '任务1',
          user: '张三',
          start: '2023-01-01',
          end: '2023-01-05'
        },
        {
          id: 2,
          label: '任务2',
          user: '李四',
          start: '2023-01-03',
          end: '2023-01-08'
        }
      ]
    }
  },
  methods: {
    tasksChanged(tasks) {
      this.tasks = tasks
    }
  }
}
</script>

使用 vue-draggable-gantt 实现可拖拽甘特图

vue-draggable-gantt 提供拖拽功能，适合需要交互的场景。

安装依赖：

npm install vue-draggable-gantt

基础实现代码：

<template>
  <div>
    <gantt-chart
      :tasks="tasks"
      @task-updated="handleTaskUpdated"
    />
  </div>
</template>

<script>
import { GanttChart } from 'vue-draggable-gantt'

export default {
  components: {
    GanttChart
  },
  data() {
    return {
      tasks: [
        {
          id: 1,
          name: '开发',
          start: '2023-01-01',
          end: '2023-01-10',
          progress: 50
        },
        {
          id: 2,
          name: '测试',
          start: '2023-01-08',
          end: '2023-01-15',
          progress: 20
        }
      ]
    }
  },
  methods: {
    handleTaskUpdated(task) {
      console.log('任务更新:', task)
    }
  }
}
</script>

使用原生实现简单甘特图

对于简单需求，可以使用原生HTML+CSS实现。

基础实现代码：

<template>
  <div class="gantt-container">
    <div v-for="task in tasks" :key="task.id" class="gantt-task" 
         :style="taskStyle(task)">
      {{ task.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: [
        { id: 1, name: '任务A', start: 0, duration: 5 },
        { id: 2, name: '任务B', start: 3, duration: 7 }
      ],
      dayWidth: 30
    }
  },
  methods: {
    taskStyle(task) {
      return {
        left: `${task.start * this.dayWidth}px`,
        width: `${task.duration * this.dayWidth}px`
      }
    }
  }
}
</script>

<style>
.gantt-container {
  position: relative;
  height: 300px;
  border: 1px solid #ccc;
}

.gantt-task {
  position: absolute;
  height: 30px;
  background-color: #4CAF50;
  color: white;
  padding: 5px;
  box-sizing: border-box;
  border-radius: 3px;
}
</style>

甘特图功能扩展建议

1. 时间轴缩放：添加时间轴缩放控件，支持按天/周/月查看
2. 任务依赖：使用箭头连接相关任务，显示依赖关系
3. 进度显示：在任务条上叠加进度条，显示完成百分比
4. 资源分配：为任务添加人员分配信息，支持多资源分配
5. 关键路径：高亮显示项目关键路径任务
6. 导出功能：支持导出为图片或PDF格式

性能优化建议

1. 虚拟滚动：对于大量任务，实现虚拟滚动提高性能
2. 数据分页：超大数据量时采用分页加载
3. 防抖处理：对频繁操作如拖拽进行防抖处理
4. Web Worker：复杂计算放入Web Worker执行
5. 按需渲染：只渲染可见区域的任务

以上方法可根据项目需求选择合适方案，复杂场景推荐使用现成库，简单需求可考虑原生实现。