vue甘特图组件

<template>
  <div>
    <gantt-chart :tasks="tasks" />
  </div>
</template>

<script>
import GanttChart from 'vue-gantt-chart'; // 引入甘特图组件

export default {
  components: {
    GanttChart
  },
  data() {
    return {
      tasks: [
        {
          id: 1,
          name: '任务一',
          start: '2023-10-01',
          end: '2023-10-05',
          progress: 80
        },
        {
          id: 2,
          name: '任务二',
          start: '2023-10-06',
          end: '2023-10-10',
          progress: 50
        }
      ]
    };
  }
};
</script>

<style scoped>
/* 自定义样式 */
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用了一个自定义的 gantt-chart 组件，并通过 v-bind 指令 (:) 将 tasks 数据传递给该组件。

2. 脚本部分 (<script>):

   • 引入了 vue-gantt-chart 组件库。
   • 注册了 GanttChart 组件。
   • 定义了 tasks 数据，包含任务的 ID、名称、开始时间、结束时间和进度。

3. 样式部分 (<style scoped>):

   • 可以根据需要添加自定义样式，这里暂时为空。

这个示例展示了如何在 Vue 中使用甘特图组件，并传递任务数据来生成甘特图。