网站欢迎框代码中国教师教育培训网
1.前言
项目开发中需要使用甘特图展示项目实施进度，左侧为表格计划，右侧为图表进度展示。wl-gantt-mater，dhtmlx尝试使用过可拓展性受到限制。gantt-elastic相对简单，可操作性强，基础版本免费。
甘特图（Gantt chart）又称为横道图、条状图（Bar chart），通过条状图来显示项目、进度和其他时间相关的系统进展的内在关系随着时间进展的情况。以提出者亨利·劳伦斯·甘特（Henry Laurence Gantt）先生的名字命名。
2. gantt-elastic（vue2中甘特图实现与引入）
2.1 gantt-elastic
官方demo
gantt-elastic官网gantt-elastic | Gantt Chart [ javascript gantt chart, gantt component, vue gantt, vue gantt chart, responsive gantt, project manager , vue projects ]
https://neuronetio.github.io/gantt-elastic/
2.2 npm install引入
不受网络限制直接npm install在项目中
npm install --save gantt-elastic
npm install --save gantt-elastic-header # 可选，根据需求安装将对应的demo组件引入对应的项目。
2.3内网引入
(1)拉取github上的gantt-elastic项目
将对应需要的依赖进行复制到需要开发的项目依赖中node_module。
需要复制的依赖包，相关依赖包已上传到博客资源中，可自行下载使用。
dayjs
gantt-elastic
gantt-elastic-header
resize-observe-polyfill
vue-slider-component
vue-switches(2) package.json版本锁定
"dependencies": {"dayjs": "^1.8.14","gantt-elastic": "^1.0.12","gantt-elastic-header": "^0.1.11",
}(3) demo引入
<template><gantt-elastic:options="options":tasks="tasks"@tasks-changed="tasksUpdate"@options-changed="optionsUpdate"@dynamic-style-changed="styleUpdate"><gantt-header slot="header"></gantt-header></gantt-elastic>
</template><script>
import GanttElastic from "gantt-elastic";
import GanttHeader from "gantt-elastic-header";
import dayjs from "dayjs";// just helper to get current dates
function getDate(hours) {const currentDate = new Date();const currentYear = currentDate.getFullYear();const currentMonth = currentDate.getMonth();const currentDay = currentDate.getDate();const timeStamp = new Date(currentYear,currentMonth,currentDay,0,0,0).getTime();return new Date(timeStamp + hours * 60 * 60 * 1000).getTime();
}let tasks = [{id: 1,label: "Make some noise",user:'<a href="https://www.google.com/search?q=John+Doe" target="_blank" style="color:#0077c0;">John Doe</a>',start: getDate(-24 * 5),duration: 15 * 24 * 60 * 60 * 1000,percent: 85,type: "project",collapsed: true,},{id: 2,label: "With great power comes great responsibility",user:'<a href="https://www.google.com/search?q=Peter+Parker" target="_blank" style="color:#0077c0;">Peter Parker</a>',parentId: 1,start: getDate(-24 * 4),duration: 4 * 24 * 60 * 60 * 1000,percent: 50,type: "milestone",collapsed: true,style: {base: {fill: "#1EBC61",stroke: "#0EAC51"}}},{id: 3,label: "Courage is being scared to death, but saddling up anyway.",user:'<a href="https://www.google.com/search?q=John+Wayne" target="_blank" style="color:#0077c0;">John Wayne</a>',parentId: 2,start: getDate(-24 * 3),duration: 2 * 24 * 60 * 60 * 1000,percent: 100,type: "task"},{id: 4,label: "Put that toy AWAY!",user:'<a href="https://www.google.com/search?q=Clark+Kent" target="_blank" style="color:#0077c0;">Clark Kent</a>',start: getDate(-24 * 2),duration: 2 * 24 * 60 * 60 * 1000,percent: 50,type: "task",dependentOn: [3]},{id: 5,label:"One billion, gajillion, fafillion... shabadylu...mil...shabady......uh, Yen.",user:'<a href="https://www.google.com/search?q=Austin+Powers" target="_blank" style="color:#0077c0;">Austin Powers</a>',parentId: 4,start: getDate(0),duration: 2 * 24 * 60 * 60 * 1000,percent: 10,type: "milestone",style: {base: {fill: "#0287D0",stroke: "#0077C0"}}},{id: 6,label: "Butch Mario and the Luigi Kid",user:'<a href="https://www.google.com/search?q=Mario+Bros" target="_blank" style="color:#0077c0;">Mario Bros</a>',parentId: 5,start: getDate(24),duration: 1 * 24 * 60 * 60 * 1000,percent: 50,type: "task",collapsed: true,style: {base: {fill: "#8E44AD",stroke: "#7E349D"}}},{id: 7,label: "Devon, the old man wanted me, it was his dying request",user:'<a href="https://www.google.com/search?q=Knight+Rider" target="_blank" style="color:#0077c0;">Knight Rider</a>',parentId: 2,dependentOn: [6],start: getDate(24 * 2),duration: 4 * 60 * 60 * 1000,percent: 20,type: "task",collapsed: true},{id: 8,label: "Hey, Baby! Anybody ever tell you I have beautiful eyes?",user:'<a href="https://www.google.com/search?q=Johhny+Bravo" target="_blank" style="color:#0077c0;">Johhny Bravo</a>',parentId: 7,dependentOn: [7],start: getDate(24 * 3),duration: 1 * 24 * 60 * 60 * 1000,percent: 0,type: "task"},{id: 9,label:"This better be important, woman. You are interrupting my very delicate calculations.",user:'<a href="https://www.google.com/search?q=Dexter\'s+Laboratory" target="_blank" style="color:#0077c0;">Dexter\'s Laboratory</a>',parentId: 8,dependentOn: [8, 7],start: getDate(24 * 4),duration: 4 * 60 * 60 * 1000,percent: 20,type: "task",style: {base: {fill: "#8E44AD",stroke: "#7E349D"}}},{id: 10,label: "current task",user:'<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',start: getDate(24 * 5),duration: 24 * 60 * 60 * 1000,percent: 0,type: "task"},{id: 11,label:"test task",user:'<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',start: getDate(24 * 6),duration: 24 * 60 * 60 * 1000,percent: 0,type: "task"},{id: 12,label: "test task",user:'<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',start: getDate(24 * 7),duration: 24 * 60 * 60 * 1000,percent: 0,type: "task",parentId: 11},{id: 13,label:"test task",user:'<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',start: getDate(24 * 8),duration: 24 * 60 * 60 * 1000,percent: 0,type: "task"},{id: 14,label: "test task",user:'<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',start: getDate(24 * 9),duration: 24 * 60 * 60 * 1000,percent: 0,type: "task"},{id: 15,label: "test task",user:'<a href="https://www.google.com/search?q=Johnattan+Owens" target="_blank" style="color:#0077c0;">Johnattan Owens</a>',start: getDate(24 * 16),duration: 24 * 60 * 60 * 1000,percent: 0,type: "task"}];let options = {taskMapping: {progress: "percent"},maxRows: 100,maxHeight: 500,title: {label: "Your project title as html (link or whatever...)",html: false},row: {height: 24},calendar: {hour: {display: true}},chart: {progress: {bar: false},expander: {display: true}},taskList: {expander: {straight: false},columns: [{id: 1,label: "ID",value: "id",width: 40},{id: 2,label: "Description",value: "label",width: 200,expander: true,html: true,events: {click({ data, column }) {alert("description clicked!\n" + data.label);}}},{id: 3,label: "Assigned to",value: "user",width: 130,html: true},{id: 3,label: "Start",value: task => dayjs(task.start).format("YYYY-MM-DD"),width: 78}, {id: 4,label: "Type",value: "type",width: 68},{id: 5,label: "%",value: "progress",width: 35,style: {"task-list-header-label": {"text-align": "center",width: "100%"},"task-list-item-value-container": {"text-align": "center",width: "100%"}}}]},locale: {name: "en",Now: "Now","X-Scale": "Zoom-X","Y-Scale": "Zoom-Y","Task list width": "Task list","Before/After": "Expand","Display task list": "Task list"}};export default {name: "Gantt",components: {GanttElastic,GanttHeader},data() {return {tasks,options,dynamicStyle: {},lastId: 16};},methods: {tasksUpdate(tasks) {this.tasks = tasks;},optionsUpdate(options) {this.options = options;},styleUpdate(style) {this.dynamicStyle = style;}}
};
</script><style>
</style>
3.gantt-elastic-h
基于 gantt-elastic的拓展封装，基本功能相较gantt-elastic完善。在使用gantt-elastic可参考gantt-elastic-h的Api文档。也可选择使用gantt-elastic-h来实现参考使用文档自行完成。
使用文档 | gantt-elastic-h | 使用文档https://jianguoht.github.io/gantt-elastic-h/doc.html#options-tasklist-columns
4.参考博客
vue甘特图(内网引入gantt-elastic以及源码扩展)_vue wl-gantt-CSDN博客文章浏览阅读3.2k次，点赞2次，收藏18次。前言：项目要求用甘特图展示计划的实施过程。之前用过dhtmlx，用着不是很舒服。又在网上看了jQueryGantt-master，wl-gantt-mater，gantt-elastic的大概源码，最后选定gantt-elastic(源码相对简单，易扩展开发，没选用他的进阶版本gantt-schedule-timeline-calendar-master的原因是这个要收费)1.外网开发，直接去github上npm install就好，我是内网开发，在github上install下来，然后把下下来的nod_vue wl-gantthttps://blog.csdn.net/qq_36566924/article/details/125293765?fromshare=blogdetail&sharetype=blogdetail&sharerId=125293765&sharerefer=PC&sharesource=2301_76671906&sharefrom=from_link