vue-tasks-gantt-chart

效果预览

插件安装

yarn add vue-tasks-gantt-chart

# or

npm install vue-tasks-gantt-chart --save

插件使用

目前只支持传入日期的格式年份/月份/日期

• 在项目的入口文件main.js中加入下述代码

import vueTasksGanttChart from "vue-tasks-gantt-chart";

Vue.use(vueTasksGanttChart);

• 在你的业务代码中，进行试验，然后传对应的参数即可.如果数据加载时间比较长，在自己代码中配合loading 效果去渲染更合适

<template>
  <div>
    <vueTasksGanttChart :gantObject="ganttObject" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      ganttObject: {
        startDate: "2022/1/1", //定义的头部时间范围
        endDate: "2022/3/16", //定义的头部时间范围
        taskArrayData: [
          {
            taskMessage: {
              title: "项目制作任务1"
            },
            taskStartTime: "2022/1/2",
            taskEndTime: "2022/1/15",
            taskBackground: "",
            process: "2022/1/12",
            precentNumer: "80%",
            precentBackground: "",
            children: [
              {
                parent: 1,
                taskMessage: {
                  title: "项目制作1子任务"
                },
                taskBackground: "",
                process: "2022/1/6",
                precentNumer: "60%",
                precentBackground: "",
                taskStartTime: "2022/1/4",
                taskEndTime: "2022/1/10"
              },
              {
                taskMessage: {
                  title: "项目制作1子任务"
                },
                taskBackground: "",
                process: "2022/1/8",
                precentNumer: "",
                precentBackground: "",
                taskStartTime: "2022/1/6",
                taskEndTime: "2022/1/10"
              },
              {
                parent: 1,
                taskMessage: {
                  title: "项目制作1子任务"
                },
                taskBackground: "",
                process: "",
                precentNumer: "",
                precentBackground: "",
                taskStartTime: "2022/1/6",
                taskEndTime: "2022/1/10"
              }
            ]
          },
          {
            taskMessage: {
              title: "项目制作任务2"
            },
            taskStartTime: "2022/1/5",
            taskEndTime: "2022/1/15",
            taskBackground: "#409eff",
            children: [
              {
                taskMessage: {
                  title: "项目制作2子任务"
                },
                taskBackground: "",
                process: "",
                precentNumer: "",
                precentBackground: "",
                taskStartTime: "2022/1/12",
                taskEndTime: "2022/1/13"
              }
            ]
          },
          {
            taskMessage: {
              title: "项目制作任务3"
            },
            taskStartTime: "2022/1/2",
            taskEndTime: "2022/3/16",
            taskBackground: "",
            children: [
              {
                parent: 1,
                taskMessage: {
                  title: "项目制作3子任务"
                },
                taskBackground: "",
                process: "",
                precentNumer: "",
                precentBackground: "",
                taskStartTime: "2022/1/12",
                taskEndTime: "2022/3/13"
              }
            ]
          }
        ]
      }
    };
  }
};
</script>

参数说明

如示例代码所示， 在 template 中使用后，配置一个对象 ganttObject

• startDate 定义的头部时间范围
• endDate 定义的头部时间范围
• taskArrayData: [ 任务数组 { taskMessage: { title: "" 主任务名称 },
• taskStartTime: "", 主任务开始的时间
• taskEndTime: "", 主任务结束的时间
• taskBackground: "", 主任务的背景色
• process: "",主任务支持进度条
• precentNumer: "80%", 主任务进度条可定义完成的数值
• precentBackground: "", 主任务进度条可定义背景色
• children: [] 支持显示子任务，内部参数同外部

写在最后

至此，插件的所有使用方法就介绍完了。