使用vue实现一个甘特图

好的，下面是一个简单的例子，使用 Vue 和 Element UI 实现一个甘特图：

1. 首先安装 Element UI：

npm install element-ui --save

2. 创建一个 Gantt 组件：

<template>
  <div class="gantt">
    <el-timeline :reverse="true">
      <el-timeline-item
        v-for="(item, index) in data"
        :key="index"
        :timestamp="item.time"
      >
        {{ item.label }}
      </el-timeline-item>
    </el-timeline>
  </div>
</template>

<script>
export default {
  name: "Gantt",
  props: {
    data: Array,
  },
};
</script>

<style>
.gantt {
  height: 300px;
  overflow-y: auto;
}
</style>

3. 在父组件中传递数据给 Gantt 组件，并渲染：

<template>
  <div class="app">
    <Gantt :data="data" />
  </div>
</template>

<script>
import Gantt from "./Gantt.vue";

export default {
  name: "App",
  components: {
    Gantt,
  },
  data() {
    return {
      data: [
        { label: "任务1", time: "2021-08-01" },
        { label: "任务2", time: "2021-08-05" },
        { label: "任务3", time: "2021-08-10" },
        { label: "任务4", time: "2021-08-15" },
      ],
    };
  },
};
</script>

<style>
.app {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-timeline-item__content {
  padding: 0;
  line-height: 40px;
}
</style>

4. 运行代码，即可看到一个简单的甘特图。

注意：这只是一个简单的例子，实际项目中需要考虑更多的情况和复杂度。