如何用Vue写一个甘特图

首先，需要安装 Vue 和一个甘特图库，如 gantt-elastic 或 vue-gantt。

然后，可以按照以下步骤来编写一个基本的甘特图：

1. 创建一个 Vue 组件，命名为 GanttChart。
2. 在该组件中定义数据，包括任务列表、时间轴、视图等。
3. 使用 gantt-elastic 或 vue-gantt 中提供的方法来渲染甘特图。
4. 在组件中实现交互，如添加、删除、编辑任务等操作。
5. 可以使用 Vuex 管理状态，实现更复杂的交互和数据共享。

下面是一个简单的示例代码：

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

<script>
import GanttElastic from 'gantt-elastic'

export default {
  name: 'GanttChart',
  components: {
    GanttElastic
  },
  data() {
    return {
      tasks: [
        {
          id: 1,
          name: 'Task 1',
          start: new Date(2021, 5, 1),
          end: new Date(2021, 5, 5)
        },
        {
          id: 2,
          name: 'Task 2',
          start: new Date(2021, 5, 2),
          end: new Date(2021, 5, 7)
        }
      ],
      dates: {
        start: new Date(2021, 4, 30),
        end: new Date(2021, 5, 10)
      },
      view: {
        scale: 'day',
        columnWidth: 30
      }
    }
  }
}
</script>

在该示例中，我们使用了 gantt-elastic 库，并将任务列表、时间轴和视图作为数据传递给了组件。在实际开发中，还需要实现更复杂的交互和状态管理。