使用Vue3绘制甘特图

1.导入Dhtmlx-gantt库

npm install dhtmlx-gantt

附官网地址：Gantt Docs (dhtmlx.com)
网站不是国内的，全英文的，有时候网络连接不好会导致使用它的api导出png、pdf功能失效，甘特图绘制库是导入本地的，不受影响。

我下面讲的都是免费功能，付费功能我没去了解。

2.在vue文件中导入gantt

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

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

3.具体配置，放在vue的mounted周期里

下面我列几个常用的：

      //gantt图任务悬浮窗位置,自己调一个合适的
      gantt.config.tooltip_offset_x = 0;
      gantt.config.tooltip_offset_y = 0;

      //激活列表展开、折叠功能
      gantt.config.open_split_tasks = true;

      //创建新事件通过点击”+“打开灯箱，灯箱就是输入框和修改框
      gantt.config.details_on_create = true;

      //甘特图图表宽度自适应
      gantt.config.autofit = true;

      //用户可以通过拖拽调整行高
      gantt.config.resize_rows = true;

      //允许重新排序任务，同时保存它们的树级位置。例如，子任务永远不会成为父任务
      gantt.config.order_branch = true;

      //新增空白列后新增项目
      //gantt.config.placeholder_task = true;

      //图标刷新后位置不变
      gantt.config.preserve_scroll = true;

      //启用将任务的开始和结束日期四舍五入到最接近的刻度
      gantt.config.round_dnd_dates = true;

      //开启只读模式
      gantt.config.readonly = true;

      //设置甘特图表头高度
      gantt.config.scale_height = 100;

      //是否显示依赖连线(取消)
      gantt.config.show_links = true;

      //点击表头可排序
      gantt.config.sort = true;

      //初始化甘特图
      gantt.init(this.$refs.gantt);

4.修改列表展示的成员，也放在mounted里

name是变量名，label是在页面展示的内容

gantt.config.columns = [
    {name:"text",       label:"Task name",  width:"*", tree:true },
    {name:"start_date", label:"Start time", align:"center" },
    {name:"duration",   label:"Duration",   align:"center" },
    {name:"add",        label:"",           width:44 }
];

5.自定义灯箱，任务输入框，也放在mounted里

gantt.config.lightbox.sections = [
    {name:"description", height:38, map_to:"text", type:"textarea",focus:true},                                                                  
    {name:"time", height:72, type:"duration", map_to:"auto"}
];

map_to与columns里的name对应

name - (string)节的名称(根据该名称，dhtmlxGantt将从区域设置中获取节的标签)。标签集合)。例如，对于时间部分，dhtmlxGantt将获取存储为gantt.locale.labels.section_time的标签。
Map_to - (string)将映射到节的数据属性的名称。
Type -(字符串)节控件(编辑器)的类型。
height-(数字)部分的高度。不用于复选框和单选部分。
Focus -(布尔值)如果设置为true，则该部分将聚焦于打开灯箱

设置灯箱的中文展示

gantt.locale.labels.section_start_date = "计划开始时间";

section_后面跟light的name 名称

6.导入数据

gantt.parse(JSON.stringify(project);

7.导出，官方的接口偶然会抽风

1.开启服务，放mounted里

    gantt.plugins({
        export_api: true
    });

2.弄个按钮调用一下接口 

gantt.exportToPNG({data:project.value});