improve-gantt-elastic（vue2中甘特圖實現與引入）

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