一：参考代码：
https://docs.dhtmlx.com/gantt/
前端之甘特图-dhtmlx-gantt - 掘金
Dhtmlx甘特图简单实现 - 掘金
二：安装：
npm install dhtmlx-gantt --save三：初始化
成果：
<template>
<div id="gantt_here" style="width: 100%; height: 100%" />
</template>
<script>
import { gantt } from "dhtmlx-gantt"; // 核心模块
import "dhtmlx-gantt/codebase/dhtmlxgantt.css"; // 样式模块
export default {
mounted() {
gantt.init("gantt_here");
gantt.parse({
data: [
{
id: 1, // 任务条的唯一id
text: "Project #2", // 任务名称
start_date: "10-04-2024", // 任务开始时间
duration: 18, // 任务时长
progress: 0.4, // 任务进度
open: true,
},
{
id: 2,
text: "Task #1",
start_date: "02-04-2018",
duration: 8,
progress: 0.6,
parent: 1,
},
{
id: 3,
text: "Task #2",
start_date: "11-04-2018",
duration: 8,
progress: 0.6,
parent: 1,
},
],
links: [
{
id: 1, //连线的唯一标识
source: 1, // 源节点
target: 2, // 目标节点
type: "1", // 连线类型（0|1|2）标识是否有箭头
},
{ id: 2, source: 2, target: 3, type: "0" },
],
});
},
data() {
return {
tasks: [
{
id: 1,
text: "Project #2",
start_date: "2023-04-01",
duration: 18,
progress: 0.4,
open: true,
},
{
id: 2,
text: "Task #1",
start_date: "2023-04-02",
duration: 8,
progress: 0.6,
parent: 1,
},
{
id: 3,
text: "Task #2",
start_date: "2023-04-11",
duration: 8,
progress: 0.6,
parent: 1,
},
],
links: [
{ id: 1, source: 1, target: 2, type: "1" },
{ id: 2, source: 2, target: 3, type: "0" },
],
};
},
};
</script>
完整效果图：
主界面：
空状态：
弹框：
完整代码：
<template>
<div style="width: 100%; height: 100%">
<div id="gantt_here" style="width: 100%; height: 100%" ref="ganttRef" />
</div>
</template>
<script>
import { gantt } from "dhtmlx-gantt"; // 核心模块
import "dhtmlx-gantt/codebase/dhtmlxgantt.css"; // 样式模块
// import Dayjs from "dayjs";
export default {
mounted() {
this.initGantt();
},
data() {
return {
ganttRef: "",
form: {},
tasks: {
data: [
{
id: 1,
text: "Project #2",
start_date: "2024-04-21",
duration: 3,
progress: 0.1,
users: "1",
open: true,
},
{
id: 2,
text: "Task #1",
start_date: "2024-04-20",
duration: 8,
progress: 0.3,
},
{
id: 3,
text: "Task #2",
start_date: "2024-04-25",
duration: 8,
progress: 0.4,
},
],
links: [
{
id: 1,
source: 1,
target: 2,
type: "1",
},
{ id: 2, source: 2, target: 3, type: "0" },
],
},
options: [
{ key: 1, label: "zs" },
{ key: 2, label: "ls" },
{ key: 3, label: "ww" },
],
opts: [
{ key: 1, label: " 0% " },
{ key: 2, label: " 20% " },
{ key: 3, label: " 50% " },
{ key: 4, label: " 70% " },
{ key: 5, label: " 90% " },
{ key: 6, label: " 100% " },
],
};
},
methods: {
initGantt() {
// 左侧数据
gantt.config.columns = [
{
name: "text",
label: "任务名称",
resize: true,
// width: 100,
align: "center",
},
{
name: "users",
label: "负责人",
resize: true,
// width: 80,
align: "center",
template: function (item) {
if (item.users == 1) {
return "zs";
}
if (item.users == 2) return "ls";
if (item.users == 3) return "ww";
return "";
},
},
{
name: "start_date",
label: "开始时间",
resize: true,
align: "center",
// width: 80,
},
{
name: "duration",
label: "持续天数",
resize: true,
align: "center",
// width: 80,
},
// {
// name: "progress",
// label: "进度",
// resize: true,
// align: "center",
// // width: 80,
// template: function (obj) {
// return `${obj.progress.toFixed(2) * 100}%`;
// },
// },
{ name: "add", label: "" },
];
// 自动调整网格的列以适应网格的宽度
gantt.config.autofit = true;
gantt.config.grid_width = 370; // 表格总体宽度 与 width: 80 二选一即可
// 汉化（部分） -- 1
// gantt.i18n.setLocale("cn");
// 汉化 -- 2
gantt.config.xml_date = "%Y-%m-%d"; // 日期格式化的匹配格式
gantt.i18n.setLocale({
date: {
// 月 全称
month_full: [
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月",
],
// 月 简称
month_short: [
"一月",
"二月",
"三月",
"四月",
"五月",
"六月",
"七月",
"八月",
"九月",
"十月",
"十一月",
"十二月",
],
// 星期 全称
day_full: [
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六",
],
// 星期 简称
day_short: ["日", "一", "二", "三", "四", "五", "六"],
},
labels: {
new_task: "新任务",
icon_save: "保存",
icon_cancel: "取消",
icon_details: "Details",
icon_edit: "编辑",
icon_delete: "删除",
gantt_save_btn: "新任务",
gantt_cancel_btn: "新任务",
gantt_delete_btn: "新任务",
confirm_closing: "",
confirm_deleting: "任务将被永久删除，您确定吗?",
section_description: "描述",
section_time: "时间",
section_type: "类型",
/* grid columns */
// column_wbs: "WBS",
// column_text: "任务名称",
// column_start_date: "开始时间",
// column_duration: "持续时间",
// column_add: "",
/* link confirmation */
link: "关联",
confirm_link_deleting: "将被删除",
link_start: "(开始)",
link_end: "(结束)",
type_task: "任务",
type_project: "项目",
type_milestone: "里程碑",
minutes: "分",
hours: "时",
days: "天",
weeks: "周",
months: "月",
years: "年",
/* 信息框 */
message_ok: "确定",
message_cancel: "取消",
/* 限制 */
section_constraint: "限制",
constraint_type: "限制类型",
constraint_date: "限制日期",
asap: "越早越好",
alap: "越晚越好",
snet: "开始时间不早于",
snlt: "开始时间不迟于",
fnet: "完成时间不早于",
fnlt: "完成时间不迟于",
mso: "必须重新开始",
mfo: "必须完成",
/* 资源控制 */
resources_filter_placeholder: "筛选类型",
resources_filter_label: "隐藏空 empty",
},
});
// 没有数据的空状态
gantt.config.show_empty_state = true;
// 空状态的汉化
gantt.ext.emptyStateElement.renderContent = function (container) {
const placeholderTextElement = `<div class='gantt_empty_state_text'>
<div class='gantt_empty_state_text_link' data-empty-state-create-task>
点击这里</div>
<div class='gantt_empty_state_text_description'>
创建第一个项目</div>
</div>`;
const placeholderImageElement =
"<div class='gantt_empty_state_image'></div>";
const placeholderContainer = `<div class='gantt_empty_state'>
${placeholderImageElement}${placeholderTextElement}</div>`;
container.innerHTML = placeholderContainer;
};
// 右侧日期设置
gantt.config.scales = [
{ unit: "month", step: 1, format: "%Y年%F" },
{
unit: "day",
step: 1,
format: "%j号 周%D",
css: function (date) {
if (!gantt.isWorkTime(date)) {
return "week-end";
}
},
},
];
gantt.config.scale_height = 60;
// 右侧 开启文本工具
gantt.plugins({
tooltip: true,
});
// 自定义文本
gantt.templates.tooltip_text = function (start, end, task) {
return (
"<b>开始时间:</b> " +
gantt.templates.tooltip_date_format(start) +
"<br/><b>结束时间:</b> " +
gantt.templates.tooltip_date_format(end) +
"<br/><b>持续时间:</b> " +
task.duration +
"天" +
"<br><b>进度:</b> " +
(task.progress.toFixed(2) * 100 + "%")
);
};
// // 自定义右侧任务栏的格式
// gantt.templates.task_text = function (start, end, task) {
// return "<b>任务名称:</b> " + task.text + ",<b> 负责人:</b> " + task.users;
// };
// 添加今日的 Marker Line
gantt.plugins({
marker: true,
});
gantt.addMarker({
start_date: new Date(),
text: "今日",
});
// 弹出层
// 自定义弹框内容
gantt.config.lightbox.sections = [
{
name: "details",
height: 50,
map_to: "text",
type: "textarea",
},
{
name: "time",
map_to: "auto",
type: "duration",
time_format: ["%Y", "%m", "%d"],
},
{
name: "users",
map_to: "users",
type: "select",
options: this.options,
},
{
name: "template",
type: "template",
map_to: "my_template",
},
];
// 自定义弹框命名
gantt.locale.labels.section_details = "任务名称";
gantt.locale.labels.section_users = "负责人";
gantt.locale.labels.section_template = "进度";
gantt.attachEvent("onBeforeLightbox", function (id) {
var task = gantt.getTask(id);
task.my_template =
"<span id='title2'><strong>进度: </strong></span>" + task.progress.toFixed(2) * 100 + "%";
return true;
});
gantt.config.show_links = false; // 禁用连线
// gantt.config.readonly = false; //只读
// gantt.config.drag_progress = false; // 禁用拖拽进度
gantt.init("gantt_here");
gantt.parse(this.tasks);
},
},
};
</script>
