vue如何實(shí)現(xiàn)甘特圖
更新時(shí)間：2024年12月28日 09:41:25 作者：程序員阿明
文章主要內(nèi)容是關(guān)于如何在項(xiàng)目中引入依賴項(xiàng)以及編寫組件代碼的步驟和總結(jié),作者分享了個(gè)人經(jīng)驗(yàn),旨在為讀者提供參考,并鼓勵(lì)大家支持腳本之家
vue實(shí)現(xiàn)甘特圖
1、引入依賴
npm install dhtmlx-gantt@6.3.7
2、組件代碼
<template>
<div class="app-container">
<div ref="gantt" class="left-container" />
</div>
</template><script>
import gantt from 'dhtmlx-gantt' // 引入模塊
//import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
import 'dhtmlx-gantt/codebase/skins/dhtmlxgantt_terrace.css' //皮膚
import 'dhtmlx-gantt/codebase/locale/locale_cn' // 本地化
import 'dhtmlx-gantt/codebase/ext/dhtmlxgantt_tooltip.js' //任務(wù)條懸浮提示
export default {
name: 'Gantt',
data() {
return {
tasks: {
data: [],
},
}
},
mounted() {
this.initData()
/*
* 冒煙：fcca02 單元：fec0dc 回歸：62ddd4 階段：d1a6ff
* */
//設(shè)置圖表區(qū)域的日期坐標(biāo)最大值 var date = new Date(dateString.replace(/-/,"/"))
// gantt.config.start_date = new Date("2020-04-08".replace(/-/,"/")) ;
//gantt.config.end_date = new Date("2020-04-18".replace(/-/,"/")) ; //結(jié)束時(shí)間需要+1天
//自適應(yīng)甘特圖的尺寸大小, 使得在不出現(xiàn)滾動(dòng)條的情況下, 顯示全部任務(wù)
gantt.config.autosize = true
//只讀模式
gantt.config.readonly = true
//是否顯示左側(cè)樹(shù)表格
gantt.config.show_grid = false
//表格列設(shè)置
gantt.config.columns = [
{ name: 'text', label: '階段名字', tree: true, width: '120' },
{
name: 'duration',
label: '時(shí)長(zhǎng)',
align: 'center',
template: function(obj) {
return obj.duration + '天'
},
},
/*{name:"start_date", label:"開(kāi)始時(shí)間", align: "center" },
{name:"end_date", label:"結(jié)束時(shí)間", align: "center" },*/
]
//時(shí)間軸圖表中，如果不設(shè)置，只有行邊框，區(qū)分上下的任務(wù)，設(shè)置之后帶有列的邊框，整個(gè)時(shí)間軸變成格子狀。
gantt.config.show_task_cells = true
//設(shè)置x軸日期
gantt.config.scale_unit = 'day'
gantt.config.step = 1
gantt.config.date_scale = '星期' + '%D'
//當(dāng)task的長(zhǎng)度改變時(shí)，自動(dòng)調(diào)整圖表坐標(biāo)軸區(qū)間用于適配task的長(zhǎng)度
gantt.config.fit_tasks = true
// 在時(shí)間線上增加一行顯示星期
gantt.config.subscales = [
//{unit:"day", step:1, date:"星期"+"%D" },
{ unit: 'day', step: 1, date: '%M' + '%d' + '日' },
]
//時(shí)間軸圖表中，任務(wù)條形圖的高度
gantt.config.task_height = 28
//時(shí)間軸圖表中，甘特圖的高度
gantt.config.row_height = 36
//從后端過(guò)來(lái)的數(shù)據(jù)格式化
gantt.config.xml_date = '%Y-%m-%d'
//任務(wù)條顯示內(nèi)容
gantt.templates.task_text = function(start, end, task) {
return task.text + '(' + task.duration + '天)'
}
// gantt.templates.task_class = function(start, end, task){return "xx";};
//懸浮
gantt.templates.tooltip_text = function(start, end, task) {
//return "<b>任務(wù)名稱:</b> "+task.text+"<br/><b>時(shí)長(zhǎng):</b> " + task.duration+"<br/><b>說(shuō)明:</b>" +task.toolTipsTxt;
return "<span style='font-size: 14px'>" + task.toolTipsTxt + '</span>'
}
gantt.templates.scale_cell_class = function(date) {
/*if(date.getDay()== 0 || date.getDay()== 6){
return "weekend";
}*/
return 'weekend'
}
//任務(wù)欄周末亮色
/*gantt.templates.task_cell_class = function(item,date){
if(date.getDay()== 0 || date.getDay()== 6){
return "weekend";
}
};*/
//任務(wù)條上的文字大小 以及取消border自帶樣式
gantt.templates.task_class = function(start, end, item) {
return item.$level == 0 ? 'firstLevelTask' : 'secondLevelTask'
}
// 初始化
gantt.init(this.$refs.gantt)
// 數(shù)據(jù)解析
gantt.parse(this.tasks)
},
methods: {
//開(kāi)始時(shí)間-結(jié)束時(shí)間參數(shù)
DateDifference: function(strDateStart, strDateEnd) {
var begintime_ms = Date.parse(new Date(strDateStart.replace(/-/g, '/'))) //begintime 為開(kāi)始時(shí)間
var endtime_ms = Date.parse(new Date(strDateEnd.replace(/-/g, '/'))) // endtime 為結(jié)束時(shí)間
var date3 = endtime_ms - begintime_ms //時(shí)間差的毫秒數(shù)
var days = Math.floor(date3 / (24 * 3600 * 1000))
return days
},
initData: function() {
this.tasks.data = [
{
id: 1,
text: '計(jì)劃時(shí)間',
start_date: '2020-04-08',
duration: 10,
open: true, //默認(rèn)打開(kāi)，
toolTipsTxt: 'xxxxxxxxxxxxxxxxx',
},
{
toolTipsTxt: 'xxxxxxxxxxxxxxxxx父任務(wù)01-001',
text: '冒煙階段', // 任務(wù)名
start_date: '2020-04-08', // 開(kāi)始時(shí)間
id: 11, // 任務(wù)id
duration: 3, // 任務(wù)時(shí)長(zhǎng)，從start_date開(kāi)始計(jì)算
parent: 1, // 父任務(wù)ID
type: 1,
},
{
toolTipsTxt: '',
text: '單元測(cè)試', // 任務(wù)名
start_date: '2020-04-11', // 開(kāi)始時(shí)間
id: 12, // 任務(wù)id
duration: 2, // 任務(wù)時(shí)長(zhǎng)，從start_date開(kāi)始計(jì)算
parent: 1, // 父任務(wù)ID
type: 2,
},
{
toolTipsTxt: '',
text: '回歸測(cè)試', // 任務(wù)名
start_date: '2020-04-13', // 開(kāi)始時(shí)間
id: 13, // 任務(wù)id
duration: 4, // 任務(wù)時(shí)長(zhǎng)，從start_date開(kāi)始計(jì)算
parent: 1, // 父任務(wù)ID
type: 3,
},
{
toolTipsTxt: '',
text: '階段四', // 任務(wù)名
start_date: '2020-04-13', // 開(kāi)始時(shí)間
id: 14, // 任務(wù)id
duration: 4, // 任務(wù)時(shí)長(zhǎng)，從start_date開(kāi)始計(jì)算
parent: 1, // 父任務(wù)ID
type: 4,
},
//========================
{
id: 2,
text: '實(shí)際時(shí)間',
start_date: '2020-04-08',
duration: 8,
open: true, //默認(rèn)打開(kāi)，才可隱藏左側(cè)表格
toolTipsTxt: 'xxxxxxxxxxxxxxxxx',
state: 'default',
// color:"#409EFF",
//progress: 0.6
},
{
toolTipsTxt: 'xxxxxxxxxxxxxxxxx父任務(wù)01-001',
text: '冒煙階段', // 任務(wù)名
start_date: '2020-04-08', // 開(kāi)始時(shí)間
id: 21, // 任務(wù)id
duration: 2, // 任務(wù)時(shí)長(zhǎng)，從start_date開(kāi)始計(jì)算
parent: 2, // 父任務(wù)ID
type: 1,
},
{
toolTipsTxt: '',
text: '單元測(cè)試', // 任務(wù)名
start_date: '2020-04-09', // 開(kāi)始時(shí)間
id: 22, // 任務(wù)id
duration: 2, // 任務(wù)時(shí)長(zhǎng)，從start_date開(kāi)始計(jì)算
parent: 2, // 父任務(wù)ID
type: 2,
},
{
toolTipsTxt: '',
text: '回歸測(cè)試', // 任務(wù)名
start_date: '2020-04-11', // 開(kāi)始時(shí)間
id: 23, // 任務(wù)id
duration: 2, // 任務(wù)時(shí)長(zhǎng)，從start_date開(kāi)始計(jì)算
parent: 2, // 父任務(wù)ID
type: 3,
},
].map(function(current, ind, arry) {
var newObj = {}
if (current.type) {
//存在type字段 說(shuō)明非一級(jí)菜單，判斷階段的具體類型 設(shè)置不同顏色
if (current.type == 1) {
//冒煙
newObj = Object.assign({}, current, { color: '#fcca02' })
} else if (current.type == 2) {
//單元
newObj = Object.assign({}, current, { color: '#fec0dc' })
} else if (current.type == 3) {
//回歸
newObj = Object.assign({}, current, { color: '#62ddd4' })
} else if (current.type == 4) {
newObj = Object.assign({}, current, { color: '#d1a6ff' })
}
} else {
//一級(jí)菜單是藍(lán)色的
newObj = Object.assign({}, current, { color: '#5692f0' })
}
return newObj
})
},
},
}
</script><style lang="scss">
.firstLevelTask {
border: none;
.gantt_task_content {
// font-weight: bold;
font-size: 13px;
}
}
.secondLevelTask {
border: none;
}
.thirdLevelTask {
border: 2px solid #da645d;
color: #da645d;
background: #da645d;
}
.milestone-default {
border: none;
background: rgba(0, 0, 0, 0.45);
}
.milestone-unfinished {
border: none;
background: #5692f0;
}
.milestone-finished {
border: none;
background: #84bd54;
}
.milestone-canceled {
border: none;
background: #da645d;
}
html,
body {
margin: 0px;
padding: 0px;
height: 100%;
overflow: hidden;
}
.container {
height: 900px;
.left-container {
height: 100%;
}
}
.left-container {
height: 600px;
}
.gantt_scale_line {
border-top: 0;
}
.weekend {
//background:#f4f7f4!important;
color: #000000 !important;
}
.gantt_selected .weekend {
background: #f7eb91 !important;
}
.gantt_task_content {
text-align: left;
padding-left: 10px;
}
//上面任務(wù)條樣式
.gantt_task_scale {
height: 45px !important;
}
.gantt_task .gantt_task_scale .gantt_scale_cell {
line-height: 30px !important;
height: 28px !important;
}
</style>3、組件代碼2
<!--
* @Author: your name
* @Date: 2021-07-22 11:01:08
* @LastEditTime: 2022-03-16 14:42:54
* @LastEditors: Please set LastEditors
* @Description: 打開(kāi)koroFileHeader查看配置 進(jìn)行設(shè)置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \internetPlatform\src\views\iot\systemManage\test2.vue
-->
<template>
<div>
<div ref="gantt" style="height:80vh" />
</div>
</template>
<script>
import gantt from 'dhtmlx-gantt'
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
export default {
data() {
return {
// 甘特圖配置
tasks: {
data: [
{
id: 11,
text: 'Project #1',
type: gantt.config.types.project,
progress: 0.6,
open: true,
},
{
id: 12,
text: 'Task #1',
start_date: '03-04-2022',
duration: '5',
parent: '11',
progress: 1,
open: true,
},
{
id: 13,
text: 'Task #2',
start_date: '03-04-2022',
type: gantt.config.types.project,
parent: '11',
progress: 0.5,
open: true,
},
{
id: 14,
text: 'Task #3',
start_date: '02-04-2022',
duration: '6',
parent: '11',
progress: 0.8,
open: true,
},
{
id: 15,
text: 'Task #4',
type: gantt.config.types.project,
parent: '11',
progress: 0.2,
open: true,
},
{
id: 16,
text: 'Final milestone',
start_date: '15-04-2022',
type: gantt.config.types.milestone,
parent: '11',
progress: 0,
open: true,
},
{
id: 17,
text: 'Task #2.1',
start_date: '03-04-2022',
duration: '2',
parent: '13',
progress: 1,
open: true,
},
{
id: 18,
text: 'Task #2.2',
start_date: '06-04-2022',
duration: '3',
parent: '13',
progress: 0.8,
open: true,
},
{
id: 19,
text: 'Task #2.3',
start_date: '10-04-2022',
duration: '4',
parent: '13',
progress: 0.2,
open: true,
},
{
id: 20,
text: 'Task #2.4',
start_date: '10-04-2022',
duration: '4',
parent: '13',
progress: 0,
open: true,
},
{
id: 21,
text: 'Task #4.1',
start_date: '03-04-2022',
duration: '4',
parent: '15',
progress: 0.5,
open: true,
},
{
id: 22,
text: 'Task #4.2',
start_date: '03-04-2022',
duration: '4',
parent: '15',
progress: 0.1,
open: true,
},
{
id: 23,
text: 'Mediate milestone',
start_date: '14-04-2022',
type: gantt.config.types.milestone,
parent: '15',
progress: 0,
open: true,
},
],
links: [
{ id: '10', source: '11', target: '12', type: '1' },
{ id: '11', source: '11', target: '13', type: '1' },
{ id: '12', source: '11', target: '14', type: '1' },
{ id: '13', source: '11', target: '15', type: '1' },
{ id: '14', source: '23', target: '16', type: '0' },
{ id: '15', source: '13', target: '17', type: '1' },
{ id: '16', source: '17', target: '18', type: '0' },
{ id: '17', source: '18', target: '19', type: '0' },
{ id: '18', source: '19', target: '20', type: '0' },
{ id: '19', source: '15', target: '21', type: '2' },
{ id: '20', source: '15', target: '22', type: '2' },
{ id: '21', source: '15', target: '23', type: '0' },
],
},
}
},
mounted() {
this.init()
},
methods: {
// 初始化
init() {
// 自動(dòng)延長(zhǎng)時(shí)間刻度
gantt.config.fit_tasks = true
// 允許拖放
gantt.config.drag_project = true
// 定義時(shí)間格式
gantt.config.scales = [
{ unit: 'month', step: 1, date: '%F, %Y' },
{ unit: 'day', step: 1, date: '%j, %D' },
]
// 添加彈窗屬性
gantt.config.lightbox.sections = [
{
name: 'description',
height: 70,
map_to: 'text',
type: 'textarea',
focus: true,
},
{ name: 'type', type: 'typeselect', map_to: 'type' },
{ name: 'time', type: 'duration', map_to: 'auto' },
]
// 初始化
gantt.init(this.$refs.gantt)
// 數(shù)據(jù)解析
gantt.parse(this.tasks)
},
},
}
</script><style lang="scss" scoped>
.firstLevelTask {
border: none;
.gantt_task_content {
// font-weight: bold;
font-size: 13px;
}
}
.secondLevelTask {
border: none;
}
.thirdLevelTask {
border: 2px solid #da645d;
color: #da645d;
background: #da645d;
}
.milestone-default {
border: none;
background: rgba(0, 0, 0, 0.45);
}
.milestone-unfinished {
border: none;
background: #5692f0;
}
.milestone-finished {
border: none;
background: #84bd54;
}
.milestone-canceled {
border: none;
background: #da645d;
}
html,
body {
margin: 0px;
padding: 0px;
height: 100%;
overflow: hidden;
}
.container {
height: 900px;
.left-container {
height: 100%;
}
}
.left-container {
height: 600px;
}
.gantt_scale_line {
border-top: 0;
}
.weekend {
//background:#f4f7f4!important;
color: #000000 !important;
}
.gantt_selected .weekend {
background: #f7eb91 !important;
}
.gantt_task_content {
text-align: left;
padding-left: 10px;
}
//上面任務(wù)條樣式
.gantt_task_scale {
height: 45px !important;
}
.gantt_task .gantt_task_scale .gantt_scale_cell {
line-height: 30px !important;
height: 28px !important;
}
</style>總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue中抽離接口配置文件的問(wèn)題，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
Vue使用Element-UI生成并展示表頭序號(hào)的方法
序號(hào)算是在展示數(shù)據(jù)的時(shí)候，一種很普遍的屬性了，我們可以自己寫生成序號(hào)的規(guī)則，也可以借助第三方，這篇文章主要介紹了Vue使用Element-UI生成并展示表頭序號(hào)的方法,需要的朋友可以參考下2023-01-01
公共Hooks封裝報(bào)表導(dǎo)出useExportExcel實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了公共Hooks封裝報(bào)表導(dǎo)出useExportExcel實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
vue如何動(dòng)態(tài)獲取當(dāng)前時(shí)間
這篇文章主要介紹了vue如何動(dòng)態(tài)獲取當(dāng)前時(shí)間問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12
熱力圖是一種數(shù)據(jù)可視化技術(shù),它使用顏色來(lái)表示數(shù)據(jù)點(diǎn)的值,熱力圖常用于可視化分布數(shù)據(jù),例如人口密度、溫度變化或網(wǎng)站流量,本文給大家介紹了如何使用Vue3和ApexCharts創(chuàng)建交互式熱力圖,需要的朋友可以參考下2024-06-06
Vue基于el-breadcrumb實(shí)現(xiàn)面包屑功能(操作代碼)
這篇文章主要介紹了Vue基于el-breadcrumb實(shí)現(xiàn)面包屑功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09
詳解Vue2如何監(jiān)聽(tīng)數(shù)組的變化
這篇文章主要來(lái)和大家詳細(xì)探討一下Vue2中是如何監(jiān)聽(tīng)數(shù)組的變化的,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
vue-cli3項(xiàng)目在IE瀏覽器打開(kāi)兼容問(wèn)題及解決
這篇文章主要介紹了vue-cli3項(xiàng)目在IE瀏覽器打開(kāi)兼容問(wèn)題及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue刷新子組件、重置組件以及重新加載子組件項(xiàng)目實(shí)戰(zhàn)記錄
在vue開(kāi)發(fā)中出于各種目的,我們常常需要讓組件重新加載渲染,這篇文章主要給大家介紹了關(guān)于vue刷新子組件、重置組件以及重新加載子組件的相關(guān)資料,需要的朋友可以參考下2023-12-12