介紹
在一些任務計劃、日程進度等場景中我們會使用到甘特圖，Dhtmlx Gantt 對于甘特圖的實現(xiàn)支持很友好，文檔API介紹全面，雖然增強版的收費，但免費版的足以夠用。
官網(wǎng)：https://docs.dhtmlx.com/gantt/
安裝dhtml gannt插件

npm install dhtmlx-gantt

引入插件

//頁面引入，如果多個頁面使用可以全局引入
import { gantt } from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';

頁面代碼

<template>
    <div class="gantt-box" ref="ganttRef"></div>
</template>

<script setup>
import { gantt } from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
import { onMounted, ref } from 'vue';
const ganttRef = ref(null);
const data = {
    data: [
        {
            id: 1,
            text: 'projectName',
            start_date: '01-04-2023',
            end_date: '05-12-2023',
            duration: 248,
            progress: 0.3,
            open: true,
            color: '#b38989'
        },
        {
            id: 2,
            text: '任務1',
            start_date: '02-04-2023',
            end_date: '11-07-2023',
            duration: 100,
            progress: 0.6,
            parent: 1
        },
        {
            id: 3,
            text: '任務2',
            start_date: '12-07-2023',
            end_date: '09-09-2023',
            duration: 59,
            progress: 0,
            parent: 1
        }
    ],
    links: [
        { id: 1, source: 1, target: 2, type: '1' },
        { id: 2, source: 2, target: 3, type: '0' }
    ]
};
const columns = [
    { name: 'text', label: '項目名稱', tree: true, min_width: 140 },
    { name: 'start_date', label: '開始時間', min_width: 100 },
    { name: 'end_date', label: '結(jié)束時間', min_width: 100 },
    { name: 'duration', label: '計劃工期' },
    { name: 'add', label: '' }
];
const initGantt = () => {
    // 清空之前的配置
    gantt.clearAll();

    gantt.i18n.setLocale('cn'); // 設置中文
    gantt.config.readonly = true; // 設置為只讀

    gantt.plugins({
        tooltip: true,
        quick_info: true // 快速信息框
        // multiselect: true,// 激活多任務選擇
    });
    gantt.config.show_quick_info = true;

    gantt.config.tooltip_offset_x = 10;
    gantt.config.tooltip_offset_y = 30;

    // gantt.config.open_split_tasks = false;
    gantt.config.details_on_create = true; // 創(chuàng)建新事件通過點擊“+”按鈕打開燈箱
    gantt.config.autofit = true; // 甘特圖圖表寬度自適應
    // gantt.config.resize_rows = true; // 用戶可以通過拖拽調(diào)整行高

    // 圖表項目欄可以任意拖拽（任意節(jié)點下)
    gantt.config.order_branch = false;
    gantt.config.order_branch_free = false;

    gantt.config.placeholder_task = false; // 新增空白列后新增項目

    gantt.config.scale_height = 50;

    gantt.config.show_links = true; //是否顯示依賴連線

    gantt.config.sort = false; // 點擊表頭可排序

    gantt.config.row_height = 40; //設置行高

    gantt.config.drag_project = true;

    gantt.config.scales = [
        // 設置時間刻度相關屬性

        // 顯示月日用這個
        // { unit: 'month', step: 1, format: '%Y-%m' },
        // { unit: 'day', step: 1, format: '%Y-%m-%d' }

        // 顯示年月用這個
        { unit: 'year', step: 1, format: '%Y' },
        { unit: 'month', step: 1, format: '%M' }
    ];
    // gantt.config.start_date = new Date(
    //     `${new Date().getFullYear() - 1},${new Date().getMonth()},${new Date().getDay()}`
    // );
    // gantt.config.end_date = new Date(`${new Date().getFullYear() + 1},${new Date().getMonth()},${new Date().getDay()}`);
    // gantt.config.show_tasks_outside_timescale = true;

    gantt.config.auto_scheduling = true;

    // 配置Gantt內(nèi)置彈出框內(nèi)容
    gantt.templates.lightbox_header = function (start_date, end_date, task) {
        return `<b>${task.text}</b>`;
    };
    gantt.config.lightbox.sections = [
        {
            name: 'description',
            height: 36,
            map_to: 'text',
            type: 'textarea',
            focus: true
        },
        { name: 'time', type: 'duration', map_to: 'auto' },
        {
            name: 'Participants',
            height: 36,
            map_to: 'Participants',
            type: 'ParticipantsPlan',
            focus: true
        },
        {
            name: 'BgColor',
            height: 36,
            map_to: 'color',
            type: 'ParticipantsPlanColor',
            focus: true
        }
    ];

    gantt.templates.tooltip_text = function (start, end, task) {
        return (
            task.text +
            '<br/><span>開始:</span> ' +
            gantt.templates.tooltip_date_format(start) +
            '<br/><span>結(jié)束:</span> ' +
            gantt.templates.tooltip_date_format(end) +
            '<br/><span>進度:</span> ' +
            Math.round(task.progress * 100) +
            '%'
        );
    };
    gantt.config.bar_height = 30;
    // 自定義信息彈窗class
    gantt.templates.quick_info_class = function () {
        return 'default-quick-info';
    };
    // 自定義信息彈窗頭部class
    gantt.templates.grid_header_class = function () {
        return 'progress-header';
    };
    gantt.templates.quick_info_content = function (start, end, task) {
        return `
                    <div>
                        ${task.text}<br/>
                        計劃開始 : ${gantt.templates.tooltip_date_format(start)}<br/>
                        計劃結(jié)束:${gantt.templates.tooltip_date_format(end)}<br/>
                        進度 : ${Math.round(task.progress * 100) + '%'}<br/>
                        狀態(tài) :
                    </div>
                `;
    };
    // 設置樹形列的父項圖標
    gantt.templates.grid_folder = function () {
        return '';
    };
    // 設置樹形列的子項圖標
    gantt.templates.grid_file = function () {
        return '';
    };

    // 自定義進度條上的文本
    gantt.templates.task_text = function (start, end, task) {
        return `
            <span style="margin-left:10px;color:white;">${task.progress * 100}%</span>
          `;
    };

    // 自定義progress_text內(nèi)容
    gantt.templates.progress_text = function () {
        // return "<span style='text-align:left;'>" + Math.round(task.progress * 100) + '% </span>';
        return '';
    };

    gantt.config.columns = columns;
    // 初始化甘特圖
    gantt.init(ganttRef.value);
    // 渲染數(shù)據(jù)
    gantt.parse(data);
};

onMounted(() => {
    initGantt();
});
</script>

<style lang="less" scoped>
.gantt-box {
    width: 1000px;
    height: 400px;
}
// /deep/.default-quick-info {
//     background-color: aqua;
// }
</style>

效果
文章來源地址http://www.zghlxwxcb.cn/news/detail-612868.html

到了這里，關于甘特圖 Dhtmlx Gantt的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！