前端vue实现甘特图

在Vue中实现甘特图可以使用第三方库，例如vue-svg-chart或dhtmlx-gantt。这里提供一个简单的示例，使用原生Vue和SVG来创建一个基本的甘特图。

<template>
  <div>
    <svg width="100%" height="400">
      <g v-for="(task, index) in tasks" :key="task.id" transform="translate(0, 0)">
        <rect :x="task.x" :y="task.y" width="100" height="20" rx="5" ry="5" :fill="task.color" />
        <text :x="task.x + 5" :y="task.y + 15" font-size="12">{{ task.label }}</text>
      </g>
    </svg>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      tasks: [
        { id: 1, label: '任务1', x: 10, y: 10, color: 'lightblue' },
        { id: 2, label: '任务2', x: 10, y: 40, color: 'lightblue' },
        // ... 更多任务
      ]
    };
  }
};
</script>
 
<style>
/* 样式调整 */
</style>

这个示例中的甘特图非常基础，只包括了任务的矩形框和标签。实际应用中需要加入更多功能，比如时间轴、任务依赖、拖拽更新等。可以使用第三方库来简化这些复杂的逻辑。