超多功能的免费甘特图 适用（vue）

您可以使用开源的Vue.js库Gantt-ELM，它是一个基于Vue.js和Element UI的简洁易用的甘特图组件。以下是一个简单的示例代码，展示如何在Vue应用中集成Gantt-ELM：

1. 首先，确保您的项目中已经安装了Vue和Element UI。
2. 使用npm安装Gantt-ELM：

npm install gantt-elm --save

3. 在Vue组件中引入并注册Gantt-ELM：

// 在您的Vue组件中
<template>
  <div>
    <gantt-chart :tasks="tasks" />
  </div>
</template>
 
<script>
import GanttChart from 'gantt-elm';
import 'gantt-elm/dist/gantt-chart.css';
 
export default {
  components: {
    GanttChart
  },
  data() {
    return {
      tasks: [
        {
          id: 1,
          label: '任务A',
          rowId: 0,
          section: 'sectionA',
          start: '2023-01-01',
          end: '2023-01-05'
        },
        // ... 其他任务数据
      ]
    };
  }
};
</script>
 
<style>
/* 您可以在这里添加自定义样式 */
</style>

在上述代码中，tasks数组定义了您的任务数据，这些数据将被用于渲染甘特图。您可以根据实际需求调整数据结构和样式。