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

时间:2020-05-22
本文章向大家介绍在vue中使用dhtmlx-gantt完成甘特图,主要包括在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>

  效果如图

 

$flag 上一页 下一页