用vue3写一个甘特图

以下是一个用Vue3写的简单甘特图示例：

<template>
  <div class="gantt-chart">
    <div class="gantt-header">
      <div v-for="task in tasks" :key="task.id" class="gantt-task">{{ task.name }}</div>
    </div>
    <div class="gantt-body">
      <div v-for="task in tasks" :key="task.id" class="gantt-row">
        <div
          v-for="bar in task.bars"
          :key="bar.id"
          class="gantt-bar"
          :style="{ left: bar.start + 'px', width: bar.duration + 'px' }"
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const tasks = ref([
      {
        id: 1,
        name: 'Task 1',
        bars: [
          { id: 1, start: 0, duration: 100 },
          { id: 2, start: 200, duration: 150 },
        ],
      },
      {
        id: 2,
        name: 'Task 2',
        bars: [
          { id: 3, start: 50, duration: 200 },
        ],
      },
      {
        id: 3,
        name: 'Task 3',
        bars: [
          { id: 4, start: 100, duration: 100 },
          { id: 5, start: 300, duration: 150 },
        ],
      },
    ]);

    return { tasks };
  },
};
</script>

<style scoped>
.gantt-chart {
  width: 100%;
  height: 300px;
  border: 1px solid #ccc;
  overflow-x: scroll;
}

.gantt-header {
  display: flex;
  height: 30px;
  background-color: #f2f2f2;
}

.gantt-task {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #ccc;
}

.gantt-body {
  height: calc(100% - 30px);
  overflow-y: scroll;
}

.gantt-row {
  display: flex;
  height: 30px;
  border-bottom: 1px solid #ccc;
}

.gantt-bar {
  position: absolute;
  height: 100%;
  background-color: #007bff;
}
</style>

此示例中，我们使用了Vue3的Composition API，将任务数据存储在ref中，并在模板中使用v-for指令渲染任务和任务条。任务数据包含一个id和名称，并包含一个bars数组，表示任务的时间段。每个任务条都有一个id、开始和持续时间，通过计算样式将其绘制在甘特图中。

请注意，此示例只是一个简单的示例，没有包含完整的甘特图功能。您可以根据自己的需求进行扩展和修改