甘特图的实现：从无到有的奇妙之旅

前端

2023-11-09 09:58:20

从0到1 搭建甘特图之旅

在日常项目开发中，我们经常需要一个可以展示项目集合总时间流程，以及每个环节占的时间的总览。

在项目开发初期，我们倾向于寻找那些专门为Vue所写的甘特图插件。

经过一番搜索，我们发现GitHub上排名靠前的Vue Gantt插件有三个：

vue-gantt
gantt
vue-gantt-chart

经过一番比较，我们最终选择了vue-gantt-chart作为我们的甘特图插件。

原因如下：

vue-gantt-chart的文档非常完善，非常容易上手。
vue-gantt-chart的功能非常强大，可以满足我们的所有需求。
vue-gantt-chart的性能非常出色，可以流畅地运行在我们的项目中。

甘特图构建步骤

现在，我们就来一步一步地构建一个甘特图。

安装vue-gantt-chart

npm install vue-gantt-chart

在Vue项目中引入vue-gantt-chart

import Gantt from 'vue-gantt-chart';

Vue.component('gantt', Gantt);

创建甘特图数据

甘特图数据是一个数组，每个元素代表一个任务。

const tasks = [
  {
    id: 1,
    name: '任务1',
    start: '2023-01-01',
    end: '2023-01-10',
  },
  {
    id: 2,
    name: '任务2',
    start: '2023-01-11',
    end: '2023-01-20',
  },
  {
    id: 3,
    name: '任务3',
    start: '2023-01-21',
    end: '2023-01-30',
  },
];

在Vue组件中使用甘特图

<template>
  <gantt :tasks="tasks" />
</template>

<script>
import Gantt from 'vue-gantt-chart';

export default {
  components: {
    Gantt,
  },

  data() {
    return {
      tasks: tasks,
    };
  },
};
</script>