在 Vue 3 中使用 DHTMLX 甘特图组件

安装

npm install dhtmlx-gantt

模块导入

import gantt from "dhtmlx-gantt"; // 引入模块
import "dhtmlx-gantt/codebase/dhtmlxgantt.css"; // 引入甘特图样式

使用示例

<template>
  <div class="gantt-container">
    <div ref="gantt" class="gantt-content"></div>
  </div>
</template>

<script>
import gantt from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
import { parseTime } from '@/utils'; // 自定义时间格式化方法

export default {
  name: 'GanttTask',
  data() {
    return {
      tasks: {
        data: [
          { id: 11, text: '任务1', start_date: '18-04-2018', end_date: '19-04-2018', progress: 1 },
          { id: 12, text: '任务2', start_date: '19-04-2018', end_date: '22-04-2018', progress: 0.6 },
          // 更多任务...
        ]
      }
    };
  },
  mounted() {
    this.initGantt();
  },
  methods: {
    initGantt() {
      gantt.config.fit_tasks = true;
      gantt.config.drag_project = true;
      gantt.config.scale_height = 80;
      gantt.config.row_height = 60;
      gantt.config.bar_height = 40;
      gantt.i18n.setLocale('cn');
      gantt.config.autosize = true;
      gantt.config.readonly = true;
      gantt.config.show_grid = true;
      gantt.plugins({ tooltip: true });
      gantt.templates.tooltip_text = (start, end, task) => `
        <div>
          <div>任务：${task.text}</div>
          <div>开始时间：${parseTime(task.start_date, '{y}-{m}-{d}')}</div>
          <div>结束时间：${parseTime(task.end_date, '{y}-{m}-{d}')}</div>
          <div>进度：${task.progress * 100}%</div>
        </div>`;
      gantt.config.scales = [
        { unit: 'month', step: 1, date: '%F, %Y' },
        { unit: 'day', step: 1, date: '%j, %D' }
      ];
      gantt.config.columns = [
        { name: 'text', label: '任务内容', width: '120', align: 'center' }
      ];
      gantt.init(this.$refs.gantt);
      gantt.parse(this.tasks);
    }
  }
};
</script>

<style lang="scss">
.gantt_task {
  background: #79bbff;
}
.gantt_task_progress {
  background: #53a8ff;
}
.gantt_grid_data .gantt_row.gantt_selected {
  background: #f0f3f9;
}
</style>

效果图