vue实现甘特图

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

安装依赖包：

npm install vue-gantt-elastic

基础实现代码：

<template>
  <div>
    <gantt-elastic
      :options="options"
      :tasks="tasks"
    ></gantt-elastic>
  </div>
</template>

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

export default {
  components: {
    GanttElastic
  },
  data() {
    return {
      options: {
        title: {
          label: '项目计划',
          html: false
        }
      },
      tasks: [
        {
          id: 'task1',
          label: '需求分析',
          user: '张三',
          start: '2023-01-01',
          end: '2023-01-07',
          percent: 100
        },
        {
          id: 'task2',
          label: 'UI设计',
          user: '李四',
          start: '2023-01-08',
          end: '2023-01-15',
          percent: 80
        }
      ]
    }
  }
}
</script>

自定义甘特图样式

通过修改 options 配置自定义样式：

options: {
  row: {
    height: 40
  },
  calendar: {
    hour: {
      display: false
    }
  },
  chart: {
    progress: {
      bar: {
        width: 20
      }
    }
  }
}

实现交互功能

添加任务点击事件：

<gantt-elastic
  :options="options"
  :tasks="tasks"
  @task-click="handleTaskClick"
></gantt-elastic>

methods: {
  handleTaskClick(task) {
    console.log('点击任务:', task)
  }
}

使用 vue-draggable-resizable 实现拖拽调整

安装依赖：

npm install vue-draggable-resizable

实现任务拖拽：

<template>
  <div>
    <gantt-elastic
      ref="gantt"
      :options="options"
      :tasks="tasks"
      @task-drag-end="handleDragEnd"
    ></gantt-elastic>
  </div>
</template>

methods: {
  handleDragEnd({ task, changes }) {
    Object.assign(task, changes)
  }
}

时间轴自定义配置

设置不同时间粒度：

options: {
  calendar: {
    month: {
      display: true
    },
    week: {
      display: true
    },
    day: {
      display: true
    }
  }
}

响应式布局处理

监听窗口变化调整甘特图：

mounted() {
  window.addEventListener('resize', this.handleResize)
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize)
},
methods: {
  handleResize() {
    this.$refs.gantt.resize()
  }
}