在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值。personName

gantt.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>

　　效果如圖