[每日记录]使用dhtmlxGantt实现甘特图!

什么是甘特图?

甘特图（Gantt chart）又称为横道图、条状图(Bar chart)。其通过条状图来显示项目、进度和其他时间相关的系统进展的内在关系随着时间进展的情况。

具体实现

前期准备

安装依赖--dhtmlxGantt:

npm install dhtmlx-gantt

用vue实现甘特图组件:

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

<script>
import 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'; // 引入样式
import { gantt } from 'dhtmlx-gantt';

export default {
    name: 'gantt',
    props: {
        tasks: {
            type: Object,
            default () {
                return {data: [], lists: []}
            }
        },
        columns:{
            type:Array,
        }
    },
    mounted: function() {
        // gantt.config.drag_progress = false; // 允许用户推拽条形图上用来调整进度百分比的小按钮
        // gantt.config.drag_resize = false; // 允许用户通过拖拽任务的条形图的两端来改变工期
        // gantt.config.drag_move = false; // 允许用户拖动条形图来改变位置

        gantt.config.readonly = true; // 只读
        gantt.config.columns = this.$props.columns

        // 配置右侧头部
        // gantt.config.subscales = [
        // {
        // unit: 'day',
        // step: 4,
        // date: '%Y/%m/%d'
        // }
        // ]

        gantt.config.autoscroll = true
        // gantt.config.autosize = 'xy'

        // 设置表头的高度
        gantt.config.scale_height = 66
        // gantt.config.duration_unit = 'hour'
        // gantt.config.duration_step = 6
        // gantt.config.date_scale = '%H: %i'

        // 是否显示依赖连线
        gantt.config.show_links = true

        // 隐藏所有标记
        gantt.config.show_markers = true
        gantt.config.xml_date = '%Y-%m-%d'

        // 表头设置
        gantt.config.scales = [
        { unit: 'day', step: 1, format: '%Y/%m/%d' },
        { unit: 'hour', step: 6, format: '%H:%i' }
        ]

        gantt.init(this.$refs.gantt)
        gantt.parse(this.$props.tasks)
        }
    };
</script>

<style lang="scss" scoped>
    @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
    .box-div{
        height: 100%;
        width: 100%;
    }
</style>

具体使用

使用组件

在父组件中的调用:

<Gantt :tasks="gantt.tasks" :columns="gantt.columns"></Gantt>

data中准备的数据(测试用例):

data() {
    return {
        // 甘特图数据
        gantt:{
            tasks:{
            data: [
                {
                    id: 1
                    text: 'Task1'
                    start_date: '2020-12-15'
                    personName: '张'
                    duration: 3
                    progress: 0.6
                    color: '#ggsstt'
                },
                {
                    id: 2
                    text: 'Task2'
                    start_date: '2020-12-16'
                    personName: '李'
                    duration: 6
                    progress: 0.4
                    color: '#1890dd'
                },
                {
                    id: 3
                    text: 'Task3'
                    start_date: '2020-12-18'
                    personName: '赵'
                    duration: 4,
                    progress: 0.2,
                    color: '#1470FF '
                },
                {
                    id: 4,
                    text: 'Task4',
                    start_date: '2020-12-16',
                    personName: '赵',
                    duration: 3,
                    progress: 0,
                    color: '#6850FF ',
                },
                {
                    id: 5,
                    text: 'Task5',
                    start_date: '2020-12-18',
                    personName: '李',
                    duration: 6,
                    progress: 0.4,
                    color: '#1890dd '
                },
                {
                    id: 6,
                    text: 'Task6',
                    start_date: '2020-12-14',
                    personName: '赵',
                    duration: 4,
                    progress: 0.2,
                    color: '#1470FF '
                    },
                {
                    id: 7,
                    text: 'Task7',
                    start_date: '2020-11-21',
                    personName: '赵',
                    duration: 6,
                    progress: 0,
                    color: '#6850FF ',
                    parent: 3
                }
            ],
            links: [{ id: 1, source: 1, target: 2, type: '0' }]
        },
        columns:[
            {
                name: 'text',
                label: '标题1',
                width: 222,
                tree: true,
                align: 'center',
                template: function (obj) {
                return `${obj.text}` // 通过 template 回调可以指定返回内容值
            }
            },
            {
                name: 'text',
                label: '标题2',
                width: 222,
                tree: true, // 如果有子元素是否遍历
                align: 'center',
                template: function (obj) {
                return `${obj.text}` // 通过 template 回调可以指定返回内容值
                }
            }
        ]
        }
    };
},

生成效果