vue 实现项目进度甘特图

在Vue中实现项目进度甘特图，可以使用第三方库如vue-progress-path来创建SVG的图形进度条，再配合一些数据和逻辑来展示甘特图。以下是一个简单的示例：

1. 安装vue-progress-path：

npm install vue-progress-path

2. 在Vue组件中使用：

<template>
  <div>
    <h2>项目进度甘特图</h2>
    <div v-for="(task, index) in tasks" :key="index" class="task">
      <div class="task-name">{{ task.name }}</div>
      <progress-path :path-length="100" :progress="task.progress">
        <svg viewBox="0 0 100 100" class="progress-svg">
          <path d="M 0,50 A 50,50 -1 0 0 1 100,50" stroke-width="8" stroke="#4a90e2" fill="none"/>
        </svg>
      </progress-path>
    </div>
  </div>
</template>
 
<script>
import { ProgressPath } from 'vue-progress-path'
 
export default {
  components: {
    ProgressPath
  },
  data() {
    return {
      tasks: [
        { name: '任务A', progress: 50 },
        { name: '任务B', progress: 75 },
        { name: '任务C', progress: 25 },
        // ... 更多任务
      ]
    }
  }
}
</script>
 
<style scoped>
.task {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.task-name {
  margin-right: 20px;
}
.progress-svg {
  width: 100px;
  height: 100px;
}
</style>

在这个例子中，我们定义了一个tasks数组来表示各个任务的名称和进度。ProgressPath组件接受path-length和progress属性，分别表示进度条的总长度和当前进度值。SVG的<path>元素定义了一个圆形的轮廓，ProgressPath会根据progress的值绘制实际的进度条。

请注意，这只是一个基础示例，您可能需要根据实际项目的需求进行更多的样式定制和逻辑扩展。