dhtmlxGantt vue3 ts 数据展示

dhtmlxGantt 是一个功能强大的 JavaScript Gantt 图表库，支持多种框架和语言，包括 Vue 和 TypeScript。在 Vue 3 中使用 dhtmlxGantt 可以通过以下步骤实现：

1. 安装 dhtmlxGantt，可以使用 npm 或 yarn 安装：

npm install dhtmlx-gantt --save

2. 导入 dhtmlxGantt 和相关样式：

import "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";

3. 在 Vue 组件中使用 dhtmlxGantt：

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

<script>
import "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";

export default {
  mounted() {
    const ganttContainer = this.$refs.gantt;
    gantt.config.xml_date = "%Y-%m-%d %H:%i";
    gantt.init(ganttContainer);
    gantt.parse([
      {
        id: 1,
        text: "Task #1",
        start_date: "2022-02-01 00:00",
        duration: 3,
        progress: 0.6,
      },
      //... other tasks
    ]);
  },
};
</script>

4. 如果需要在 TypeScript 中使用 dhtmlxGantt，可以安装 `@types/dhtmlxgantt`，并在组件中定义 `gantt` 变量的类型：

import gantt, { GanttTask } from "dhtmlx-gantt";

export default {
  mounted(): void {
    const ganttContainer = this.$refs.gantt;
    gantt.config.xml_date = "%Y-%m-%d %H:%i";
    gantt.init(ganttContainer);
    const tasks: GanttTask[] = [
      {
        id: 1,
        text: "Task #1",
        start_date: "2022-02-01 00:00",
        duration: 3,
        progress: 0.6,
      },
      //... other tasks
    ];
    gantt.parse(tasks);
  },
};

这样就可以在 Vue 3 中使用 dhtmlxGantt 来展示数据了。