在vue中使用dhtmlx-gantt完成甘特图

在有些项目中需要使用甘特图来标注任务进度以及时间跨度。那么如何使用dhtmlx-gantt来实现甘特图呢？

1先安装dhtmlx-gantt

yarn add dhtmlx-gantt

2引入，通过以下代码即可得到甘特图

<template>
    <div style="height:600px;" ref="gantt"></div>
</template>
 
<script>
import "dhtmlx-gantt";
export default {
  name: "gantt",
  data() {
    return {
      tasks: {
        data: [
          {
            id: 1,
            text: "Task #1",
            start_date: "15-04-2020",
            personName: "阿瓦达，林岚",
            duration: 5,
            progress: 0.6
          },
          {
            id: 2,
            text: "Task #2",
            start_date: "18-04-2020",
            personName: "建军节",
            duration: 25,
            progress: 0.4
          },
          {
            id: 3,
            text: "Task #2-1",
            start_date: "20-04-2020",
            personName: "李珊珊",
            duration: 3,
            progress: 0.4,
            parent: 2
          },
          {
            id: 4,
            text: "Task #2-1",
            start_date: "20-04-2020",
            personName: "周五",
            duration: 5,
            progress: 0.4,
            parent: 2
          }
        ],
        links: [{ id: 1, source: 1, target: 2, type: "0" }]
      },
      lists: [
        {
          icon: "mdi-account",
          text: "个人中心",
          src: "/user/info"
        }
      ]
    };
  },
 
  mounted: function() {
    gantt.config.columns = [
      { name: "text", label: "项目", tree: true, width: "*" },
      { name: "personName", label: "负责人", align: "center" }
    ];--------表头数据  其中name的属性值对应展示的数据名称----------如：personName展示的就是人名，如果换成text:则展示相对应的text值。personNamegantt.config.scale_unit = "year";gantt.config.step = 1; gantt.config.date_scale = "%Y"; gantt.config.subscales = [    { unit: "day", step: 1, date: "%j" }, 　　 { unit: "month", step: 1, date: "%m" } ];当右侧不止显示年份时，可以添加展示月日，添加一个就加一行 gantt.config.scale_height = 80; 甘特图右侧表头的高度gantt.config.min_column_width = 25; //下面日期的宽度，会随时间长短宽度变化。但是设置最小宽度后，当时间跨度到达一定长度，就会展示最小宽度gantt.i18n.setLocale("cn"); //使用中文gantt.config.work_time = true; gantt.config.correct_work_time = true; 跳过节假日：比如你选择的包含周六日，他会自动延长时间或者缩短，延长或者缩短是因为包含节假日，要增加或者减少天数。gantt.config.inherit_scale_class = true; gantt.init(this.$refs.gantt);  初始化gantt.parse(this.tasks); } }; </script> <style lang='less'> @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css"; 引入甘特图的css文件</style>