甘特图vue实现

使用 vue-ganttastic 库实现甘特图

安装 vue-ganttastic 库

npm install vue-ganttastic

基础用法示例

<template>
  <GanttChart :tasks="tasks" />
</template>

<script>
import { GanttChart } from 'vue-ganttastic'
export default {
  components: { GanttChart },
  data() {
    return {
      tasks: [
        {
          id: 'task1',
          name: '任务一',
          start: '2023-01-01',
          end: '2023-01-05'
        },
        {
          id: 'task2',
          name: '任务二',
          start: '2023-01-06',
          end: '2023-01-10'
        }
      ]
    }
  }
}
</script>

使用 vue-echarts 实现自定义甘特图

安装依赖

npm install echarts vue-echarts

甘特图配置示例

<template>
  <v-chart :option="option" style="height:400px"/>
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { BarChart } from 'echarts/charts'
import {
  GridComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
import VChart from 'vue-echarts'

use([
  CanvasRenderer,
  BarChart,
  GridComponent,
  TooltipComponent,
  LegendComponent
])

export default {
  components: { VChart },
  data() {
    return {
      option: {
        tooltip: {
          trigger: 'axis',
          axisPointer: { type: 'shadow' }
        },
        xAxis: {
          type: 'value',
          min: 0,
          max: 10
        },
        yAxis: {
          type: 'category',
          data: ['任务A', '任务B']
        },
        series: [
          {
            type: 'bar',
            data: [
              [3, 0, 5],
              [1, 1, 4]
            ],
            barGap: '0%'
          }
        ]
      }
    }
  }
}
</script>

使用原生SVG实现简单甘特图

基础SVG甘特图组件

<template>
  <div class="gantt-container">
    <svg width="100%" height="300">
      <g v-for="(task, index) in tasks" :key="task.id">
        <rect
          :x="calcX(task.start)"
          y="20"
          :width="calcWidth(task.start, task.end)"
          height="30"
          fill="#4CAF50"
        />
        <text
          :x="calcX(task.start) + 5"
          y="40"
          fill="white"
        >{{ task.name }}</text>
      </g>
    </svg>
  </div>
</template>

<script>
export default {
  props: {
    tasks: Array
  },
  methods: {
    calcX(date) {
      return new Date(date).getDate() * 30
    },
    calcWidth(start, end) {
      const days = (new Date(end) - new Date(start)) / (1000 * 60 * 60 * 24)
      return days * 30
    }
  }
}
</script>

甘特图功能扩展建议

添加拖拽功能

// 使用vue-draggable库实现任务条拖拽
import draggable from 'vuedraggable'

// 在组件中添加拖拽事件处理
onDragEnd(event) {
  // 更新任务位置数据
}

添加时间缩放控件

// 在图表配置中添加缩放滑块
option.dataZoom = [
  {
    type: 'slider',
    xAxisIndex: 0,
    start: 0,
    end: 100
  }
]

添加任务依赖关系

// 在任务数据中添加依赖项
tasks: [
  {
    id: 'task1',
    dependencies: ['task2']
  }
]