当前位置：首页 > VUE

甘特图vue实现

2026-02-10 07:17:11VUE

使用Vue.js实现甘特图的方法

在Vue.js中实现甘特图可以通过多种方式完成，包括使用现有的开源库或手动构建。以下是几种常见的方法：

使用vue-ganttastic库 vue-ganttastic是一个专为Vue.js设计的甘特图库，支持拖拽、缩放和自定义样式。安装方法如下：

npm install vue-ganttastic

基本用法示例：

<template>
  <ganttastic :tasks="tasks" :options="options"/>
</template>

<script>
import { Ganttastic } from 'vue-ganttastic'
export default {
  components: { Ganttastic },
  data() {
    return {
      tasks: [
        { id: 1, name: '任务1', start: '2023-01-01', end: '2023-01-05' },
        { id: 2, name: '任务2', start: '2023-01-06', end: '2023-01-10' }
      ],
      options: {
        viewMode: 'day',
        style: {
          'bar-color': '#4CAF50'
        }
      }
    }
  }
}
</script>

使用dhtmlx-gantt库 dhtmlx-gantt是一个功能丰富的甘特图库，支持Vue集成。安装方法：

甘特图vue实现

npm install dhtmlx-gantt

基本集成示例：

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

<script>
import 'dhtmlx-gantt'
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'

export default {
  mounted() {
    gantt.init(this.$refs.gantt)
    gantt.parse({
      data: [
        { id: 1, text: '任务1', start_date: '2023-01-01', duration: 5 },
        { id: 2, text: '任务2', start_date: '2023-01-06', duration: 4 }
      ]
    })
  }
}
</script>

手动实现基础甘特图 对于简单需求，可以手动实现基本甘特图功能。以下是一个基本实现思路：

甘特图vue实现

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

<script>
export default {
  data() {
    return {
      tasks: [
        { id: 1, name: '任务1', start: new Date('2023-01-01'), end: new Date('2023-01-05') },
        { id: 2, name: '任务2', start: new Date('2023-01-06'), end: new Date('2023-01-10') }
      ],
      scale: 50 // 每单位代表50像素
    }
  },
  methods: {
    barStyle(task) {
      const startOffset = (task.start - new Date('2023-01-01')) / (1000*60*60*24)
      const duration = (task.end - task.start) / (1000*60*60*24)
      return {
        left: `${startOffset * this.scale}px`,
        width: `${duration * this.scale}px`,
        backgroundColor: '#4CAF50'
      }
    }
  }
}
</script>

<style>
.gantt-container {
  position: relative;
  height: 500px;
  border: 1px solid #ccc;
}
.gantt-bar {
  position: absolute;
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  color: white;
  border-radius: 3px;
}
</style>