vue实现好看的甘特图

使用Vue-Ganttastic库

Vue-Ganttastic是一个轻量级的Vue甘特图组件，支持拖拽、缩放和自定义样式。安装后可直接在项目中引入，通过配置数据源和任务项快速生成交互式甘特图。

npm install vue-ganttastic

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

<script>
import { GanttChart } from 'vue-ganttastic';
export default {
  components: { GanttChart },
  data() {
    return {
      tasks: [
        { id: 1, name: '任务A', start: '2023-01-01', end: '2023-01-10' },
        { id: 2, name: '任务B', start: '2023-01-05', end: '2023-01-15' }
      ]
    };
  }
};
</script>

基于D3.js自定义甘特图

通过D3.js实现高度自定义的甘特图，适合需要复杂交互或独特设计的场景。结合Vue的生命周期管理数据与DOM操作。

<template>
  <div ref="ganttContainer"></div>
</template>

<script>
import * as d3 from 'd3';
export default {
  mounted() {
    this.renderGantt();
  },
  methods: {
    renderGantt() {
      const data = [
        { task: '项目启动', start: new Date(2023, 0, 1), end: new Date(2023, 0, 5) },
        { task: '开发阶段', start: new Date(2023, 0, 6), end: new Date(2023, 0, 20) }
      ];
      const svg = d3.select(this.$refs.ganttContainer)
        .append('svg')
        .attr('width', 800)
        .attr('height', 300);
      // 添加D3绘图逻辑（示例简化）
    }
  }
};
</script>

集成第三方库Vue-Gantt-Easy

Vue-Gantt-Easy提供丰富的API和主题定制，支持时间轴缩放、任务依赖关系等高级功能。

npm install vue-gantt-easy

<template>
  <vue-gantt-easy :data="ganttData" />
</template>

<script>
import VueGanttEasy from 'vue-gantt-easy';
export default {
  components: { VueGanttEasy },
  data() {
    return {
      ganttData: {
        tasks: [
          { id: 1, text: '设计', start_date: '2023-01-01', duration: 5 },
          { id: 2, text: '开发', start_date: '2023-01-06', duration: 10 }
        ]
      }
    };
  }
};
</script>

使用AntV G2Plot的Vue封装

蚂蚁金服的G2Plot提供专业级可视化方案，通过Vue封装调用其甘特图模块，适合数据密集型场景。

npm install @antv/g2plot

<template>
  <div ref="chart"></div>
</template>

<script>
import { Gantt } from '@antv/g2plot';
export default {
  mounted() {
    const data = [
      { start: '2023-01-01', end: '2023-01-10', name: '需求分析' }
    ];
    const plot = new Gantt(this.$refs.chart, {
      data,
      height: 400,
      xField: 'start',
      yField: 'name',
      xAxis: { type: 'time' }
    });
    plot.render();
  }
};
</script>

样式优化技巧

• 主题色配置：通过CSS变量或库提供的theme属性统一调整颜色。
• 响应式布局：监听窗口大小变化，动态调整甘特图容器的宽度和缩放比例。
• 动画效果：为任务条添加过渡动画，提升用户体验。

.gantt-bar {
  transition: width 0.3s ease;
}

以上方案可根据项目需求选择，轻量级场景推荐Vue-Ganttastic，复杂需求建议结合D3.js或AntV实现。