在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>
效果如图
原文地址:https://www.cnblogs.com/bingchenzhilu/p/12931307.html
- 传统数据库也能实现区块链存储
- Golang语言社区--Go语言基础第三节常量
- 干货 | 进化策略入门:最优化问题的另一种视角
- 【Golang语言社区】Golang语言面试题
- PHP面向对象核心(一)——序列化与魔术方法
- PHP面向对象核心(二)——继承、多态、接口
- PHP面向对象核心(三)——反射、异常处理
- 理解jquery的$.extend & $.fn.extend用法
- PHP数据结构(一)——顺序结构线性表
- PHP数据结构(二)——链式结构线性表
- 微信小程序防止重复点击,该如何处理?
- CSS常用实例,web前端开发者不知道这些就太low了
- PHP数据结构(三)——运用栈实现括号匹配
- python抓取头条文章
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- linux用户组以及权限总结
- Linux Crontab Shell脚本实现秒级定时任务的方法
- Linux配置SSH和Xshell连接服务器的教程(图解)
- 增强Linux内核中访问控制安全的方法
- 使用Samba在Linux服务器上搭建共享文件服务的方法
- CentOS Yum编译安装MySQL 5.6
- Linux中环境变量配置的步骤详解
- 详解Linux搭建DNS服务器
- 一篇文章弄懂Linux磁盘和磁盘分区
- Ubuntu 17.04系统下源码编译安装opencv的步骤详解
- 如何在Linux中自定义bash命令提示符
- 详解如何在Linux上一次性批量重命名一组文件
- 虚拟机中centos修改时间的方法
- Ubuntu 18.04 Server 设置静态IP 的方法
- 嵌入式Linux重启QT应用程序的简单办法(基于QT4.8 qws)