甘特图样式：
.gantt_container { border-color: transparent !important; .gantt_right { top: 0% !important; display: flex !important; } .gantt_side_content { overflow: visible !important; } .weekend { background: #ff9e2f; color: #fff !important; } // .gantt_selected { // background: #f4f5fe !important; // } .gantt_grid_data .gantt_row.gantt_selected { background: #f4f5fe !important; } .gantt_task_row.gantt_selected { background: #f4f5fe !important; } .gantt_grid_data .gantt_row.odd:hover, .gantt_grid_data .gantt_row:hover { background: #f4f5fe !important; } .gantt_task_line.gantt_selected { box-shadow: 0 0 5px #f4f5fe; } .gantt_grid_scale .gantt_grid_head_cell { font-size: 14px; font-weight: 400; color: rgba(28, 28, 28, 0.76); } .gantt_task .gantt_task_scale .gantt_scale_cell { font-size: 12px; font-weight: 400; color: rgba(28, 28, 28, 0.76); } .gantt_side_content.gantt_right { padding-left: 5px; top: 20%; } .gantt_task_line.gantt_project { background: #656bff; border: none; } .gantt_task_line { border-radius: 5px; background: #b0bdff; border: none; } .gantt_task_content { color: #fff; } .gantt_task_progress { display: none; } .gantt_selected .weekend { background: #2f51ff; } .weekend-border-bottom { border-bottom: 1px solid rgba(217, 217, 217, 1); } .gantt_grid_scale .gantt_grid_head_cell { border-right: 1px solid #d9d9d9 !important; &:nth-last-child(1) { border-right: none !important; } } .gantt_row, .gantt_task_row { border-bottom: none; } .gantt_task_cell { border-right-color: rgba(28, 28, 28, 0.1); } .gantt_row_task { border-bottom: 1px solid rgba(217, 217, 217, 1); } .gantt_row_project { border-bottom: 1px solid rgba(217, 217, 217, 1) !important; } .gantt_cell { border-right: 1px solid rgba(217, 217, 217, 1) !important; } .gantt_last_cell { border-right: none !important; } // .day-item{ // width: 60px !important; // }、 .gantt_marker { z-index: 99; background: #ff4141; } .gantt_tree_icon { width: 21px; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: 100% auto; margin-right: 5px; } .gantt_folder_open { background-image: url('./../img/gante/gantt_folder_open.png') !important; margin-right: 4px; } .gantt_folder_closed { background-image: url('./../img/gante/gantt_folder_closed.png') !important; margin-right: 4px; } .gantt_file { background-image: url('./../img/gante/gantt_file.png') !important; margin-right: 4px; } .gantt_close { width: 12px !important; background-image: url('./../img/gante/gantt_close.png') !important; margin-right: 6px; } .gantt_open { width: 12px !important; background-image: url('./../img/gante/gantt_close.png') !important; transform: rotate(-90deg); } .dont-show { display: none; height: 0 !important; } .gantt_task_line{ min-width: 21px; } .gongxu{ background-image: url('./../img/gante/gongxu.png') !important; }}.gantt-error { display: none !important;}.shadow-right { box-shadow: 1px 0px 4px 0px rgba(0, 0, 0, 0.15);}.lag-advane { display: flex; align-items: center; position: absolute; top: -50% !important; z-index: 12; // left: -100%; .icon { width: 20px; height: 20px; background-size: 100% 100%; background-repeat: no-repeat; margin-right: 2px; } .lag { background-image: url('./../../assets/img/manage/icon_lag.png'); } .lag-value { color: #ff4141; } .advane { background-image: url('./../../assets/img/manage/icon_advance.png'); } .advane-value { color: #14cf20; }}//员工任务详情.myself-project-bar { display: flex; align-items: center; .bar-right-item { width: 90px; height: 21px; background-size: 100% 100%; background-repeat: no-repeat; position: relative; } .myself-project-progress { position: absolute; left: 6px; width: 40px; text-align: center; color: #fff; } .myself-project-overTime { position: absolute; left: 71px; text-align: center; color: #000000; } .task-lag { background-image: url('./../img/gante/task_lag.png'); } .task-finish { background-image: url('./../img/gante/task_finish.png'); }}// 项目总视图.tooltip-box { .project-name { font-size: 14px; }}.bar-right-item { display: flex; align-items: center; align-content: center;}// manage 页面 样式.finish-state-icon { width: 20px; height: 20px; background-size: 100% 100%; background-repeat: no-repeat;}.finish-progress { width: 54px; height: 21px; line-height: 24px; background-size: 100% 100%; background-repeat: no-repeat; font-size: 12px; font-weight: 600; text-align: center; color: #ffffff;}.finish-schedule { display: flex; align-items: center; margin-left: 4px;}.finish-finish { .finish-schedule { display: none; }}//任务超前右侧样式.finish-advance { .finish-state-icon { background-image: url('./../../assets/img/manage/icon_finish.png'); } .finish-progress { background-image: url('./../../assets/img/manage/back_advance.png'); } .finish-schedule { color: #14cf20; .finish-schedule-icon { background-image: url('./../../assets/img/manage/icon_advance.png'); } }}//滞后右侧样式.finish-lag { .finish-state-icon { background-image: url('./../../assets/img/manage/icon_error.png'); } .finish-progress { background-image: url('./../../assets/img/manage/back_lag.png'); } .finish-schedule { color: #ff4141; .finish-schedule-icon { background-image: url('./../../assets/img/manage/icon_lag.png'); } }}.finish-schedule-icon { width: 20px; height: 20px; background-size: 100% 100%; background-repeat: no-repeat; margin-right: 2px;}.special-item { background: rgba(203, 212, 255, 0.5); border: 1px dashed #b0bdff; border-radius: 4px; padding: 0 4px; color: rgba(51, 51, 51, 1);}.task-progress-line { position: absolute; left: 0px; bottom: 0px; width: 100%; z-index: 999; height: 6px; background: #eeeeee; .line-bar { position: absolute; left: 0; height: 6px; background: #2f51ff; } .value { position: absolute; right: 2px; bottom: 7px; font-size: 12px; font-weight: 400; color: #979797; line-height: 1; }}数据模板：
demoData: { data: [ { id: 520, projectName: '项目1', startTime: '2023-09-25', endTime: '2023-10-31', showEndTime: '2023-11-01', projectStatus: '暂无任务', projectProgress: 0, projectRatio: '', projectTotalTime: 0, projectUsedTime: 0, functionName: '', xmdj: '2', cityName: '成都', name: '1', projectMap: {}, parent: 0, start_date: '2023-09-24 16:00:00.000', end_date: '2023-10-31 16:00:00.000', progress: 0.5, duration: 37 }, { id: 517, projectName: '项目2', startTime: '2023-09-18', endTime: '2023-10-23', showEndTime: '2023-10-24', projectStatus: '暂无任务', projectProgress: 0, projectRatio: '', projectTotalTime: 0, projectUsedTime: 0, functionName: '', xmdj: '0', cityName: '深圳', name: '2', projectMap: {}, parent: 0, start_date: '2023-09-17 16:00:00.000', end_date: '2023-10-23 16:00:00.000', progress: 0.2 }, { id: 505, projectName: '项目3', startTime: '2023-09-04', endTime: '2023-09-30', showEndTime: '2023-10-01', projectStatus: '滞后', projectProgress: 0.76, projectRatio: 0.12, projectTotalTime: 3267.6, projectUsedTime: 2477.7, functionName: '现状还原', xmdj: '3', cityName: '成都', name: '3', projectMap: {}, parent: 0, start_date: '2023-09-03 16:00:00.000', end_date: '2023-09-30 16:00:00.000', progress: 0.1 }, { id: 508, projectName: '项目4', startTime: '2023-09-04', endTime: '2023-10-20', showEndTime: '2023-10-21', projectStatus: '滞后', projectProgress: 0.57, projectRatio: 0.04, projectTotalTime: 3582.5, projectUsedTime: 2033.2, functionName: '测试功能', xmdj: '1', cityName: '成都', name: '4', projectMap: {}, parent: 0, start_date: '2023-09-03 16:00:00.000', end_date: '2023-10-20 16:00:00.000', progress: 0.15 }, { id: 511, projectName: '项目5', startTime: '2023-09-01', endTime: '2023-10-31', showEndTime: '2023-11-01', projectStatus: '滞后', projectProgress: 0.07, projectRatio: 0.03, projectTotalTime: 2150.5, projectUsedTime: 140, functionName: '悬浮球', xmdj: '1', cityName: '成都', name: '5', projectMap: {}, parent: 0, start_date: '2023-07-31 16:00:00.000', end_date: '2023-10-31 16:00:00.000', progress: 0.28 }, { id: 507, projectName: '项目6', startTime: '2023-08-28', endTime: '2023-10-01', showEndTime: '2023-10-02', projectStatus: '滞后', projectProgress: 0.48, projectRatio: 0.21, projectTotalTime: 4957, projectUsedTime: 2367, functionName: '产品原型图', xmdj: '1', cityName: '三亚', name: '6', projectMap: { 部门1: 1 }, parent: 0, start_date: '2023-07-27 16:00:00.000', end_date: '2023-10-01 16:00:00.000', progress: 0.33 }, { id: 1, projectName: '项目7', startTime: '2023-08-28', endTime: '2023-10-25', showEndTime: '2023-10-26', projectStatus: '超前', projectProgress: 0.27, projectRatio: 0.15, projectTotalTime: 2027.5, projectUsedTime: 557, functionName: '测量工具', xmdj: '1', cityName: '佛山', name: '7', projectMap: {}, parent: 0, start_date: '2023-06-27 16:00:00.000', end_date: '2023-10-25 16:00:00.000', progress: 0.67 }, { id: 2, projectName: '项目7', startTime: '2023-08-28', endTime: '2023-10-25', showEndTime: '2023-10-26', projectStatus: '滞后', projectProgress: 0.27, projectRatio: 0.15, projectTotalTime: 2027.5, projectUsedTime: 557, functionName: '测量工具', xmdj: '1', cityName: '佛山', name: '7', projectMap: {}, parent: 0, start_date: '2023-06-27 16:00:00.000', end_date: '2023-10-25 16:00:00.000', progress: 0.67 }, { id: 3, projectName: '项目7', startTime: '2023-08-28', endTime: '2023-10-25', showEndTime: '2023-10-26', projectStatus: '滞后', projectProgress: 0.27, projectRatio: 0.15, projectTotalTime: 2027.5, projectUsedTime: 557, functionName: '测量工具', xmdj: '1', cityName: '佛山', name: '7', projectMap: {}, parent: 0, start_date: '2023-06-27 16:00:00.000', end_date: '2023-10-25 16:00:00.000', progress: 0.67 }, { id: 4, projectName: '项目7', startTime: '2023-08-28', endTime: '2023-10-25', showEndTime: '2023-10-26', projectStatus: '滞后', projectProgress: 0.27, projectRatio: 0.15, projectTotalTime: 2027.5, projectUsedTime: 557, functionName: '测量工具', xmdj: '1', cityName: '佛山', name: '7', projectMap: {}, parent: 0, start_date: '2023-06-27 16:00:00.000', end_date: '2023-10-25 16:00:00.000', progress: 0.67 }, { id: 5, projectName: '项目7', startTime: '2023-08-28', endTime: '2023-10-25', showEndTime: '2023-10-26', projectStatus: '滞后', projectProgress: 0.27, projectRatio: 0.15, projectTotalTime: 2027.5, projectUsedTime: 557, functionName: '测量工具', xmdj: '1', cityName: '佛山', name: '7', projectMap: {}, parent: 0, start_date: '2023-06-27 16:00:00.000', end_date: '2023-10-25 16:00:00.000', progress: 0.67 }, { id: 6, projectName: '项目7', startTime: '2023-08-28', endTime: '2023-10-25', showEndTime: '2023-10-26', projectStatus: '滞后', projectProgress: 0.27, projectRatio: 0.15, projectTotalTime: 2027.5, projectUsedTime: 557, functionName: '测量工具', xmdj: '1', cityName: '佛山', name: '7', projectMap: {}, parent: 0, start_date: '2023-06-27 16:00:00.000', end_date: '2023-10-25 16:00:00.000', progress: 0.67 }, { id: 7, projectName: '项目7', startTime: '2023-08-28', endTime: '2023-10-25', showEndTime: '2023-10-26', projectStatus: '滞后', projectProgress: 0.27, projectRatio: 0.15, projectTotalTime: 2027.5, projectUsedTime: 557, functionName: '测量工具', xmdj: '1', cityName: '佛山', name: '7', projectMap: {}, parent: 0, start_date: '2023-06-27 16:00:00.000', end_date: '2023-10-25 16:00:00.000', progress: 0.67 }, { id: 8, projectName: '项目7', startTime: '2023-08-28', endTime: '2023-10-25', showEndTime: '2023-10-26', projectStatus: '滞后', projectProgress: 0.27, projectRatio: 0.15, projectTotalTime: 2027.5, projectUsedTime: 557, functionName: '测量工具', xmdj: '1', cityName: '佛山', name: '7', projectMap: {}, parent: 0, start_date: '2023-06-27 16:00:00.000', end_date: '2023-10-25 16:00:00.000', progress: 0.67 }, { id: 9, projectName: '项目7', startTime: '2023-08-28', endTime: '2023-10-25', showEndTime: '2023-10-26', projectStatus: '滞后', projectProgress: 0.27, projectRatio: 0.15, projectTotalTime: 2027.5, projectUsedTime: 557, functionName: '测量工具', xmdj: '1', cityName: '佛山', name: '7', projectMap: {}, parent: 0, start_date: '2023-06-27 16:00:00.000', end_date: '2023-10-25 16:00:00.000', progress: 0.67 } ] }View Code时间切换数据模板：
const zoomConfig = { levels: [ { name: 'day', scale_height: 60, scales: [{ unit: 'day', step: 1, format: '%d %M' }] }, { name: 'week', scale_height: 60, scales: [ { unit: 'week', step: 1, format: function (date) { let dateToStr = gantt.date.date_to_str('%m-%d') let endDate = gantt.date.add(date, -6, 'day') let weekNum = gantt.date.date_to_str('%W')(date) //第几周 return dateToStr(endDate) + ' 至 ' + dateToStr(date) } }, { unit: 'day', step: 1, format: '%d', // + "周%D" css: function (date) { if (date.getDay() == 0 || date.getDay() == 6) { return 'day-item weekend weekend-border-bottom' } else { return 'day-item' } } } ] }, { name: 'month', scale_height: 60, min_column_width: 18, scales: [ { unit: 'month', format: '%Y-%m' }, { unit: 'day', step: 1, format: '%d', css: function (date) { if (date.getDay() == 0 || date.getDay() == 6) { return 'day-item weekend weekend-border-bottom' } else { return 'day-item' } } } ] }, { name: 'quarter', height: 60, min_column_width: 110, scales: [ { unit: 'quarter', step: 1, format: function (date) { let yearStr = new Date(date).getFullYear() + '年' let dateToStr = gantt.date.date_to_str('%M') let endDate = gantt.date.add(gantt.date.add(date, 3, 'month'), -1, 'day') return yearStr + dateToStr(date) + ' - ' + dateToStr(endDate) } }, { unit: 'week', step: 1, format: function (date) { let dateToStr = gantt.date.date_to_str('%m-%d') let endDate = gantt.date.add(date, 6, 'day') let weekNum = gantt.date.date_to_str('%W')(date) return dateToStr(date) + ' 至 ' + dateToStr(endDate) } } ] }, { name: 'year', scale_height: 50, min_column_width: 150, scales: [ { unit: 'year', step: 1, format: '%Y年' }, { unit: 'month', format: '%Y-%m' } ] } ]}View Code