?? 甘特圖可以管理項目進度,生產進度等信息,管理者可以更直觀的查看內容。
1. 基礎環境搭建
- 引入 dhtmlx-gantt 插件
- 引入插件樣式
dhtmlxgantt.css
- 引入必要的擴展模塊(如 markers、tooltip)
- 創建 Vue 組件并掛載 DOM 容器
- 初始化 gantt 圖表配置
2. 數據準備與處理
- 定義任務數據結構(id,
text
,start_date
,end_date
,duration
,progress
,status
等字段) - 模擬測試數據
- 根據
status
字段設置不同顏色 - 動態計算
duration
(當只有start_date
和en