TlTabs

angular 甘泽图组件：

DEMO

angular 开发版本 9.1.12.

安装

npm i tl-gantt@latest --save

引用

在 app.component.ts 中引入

import { TlGanttModule } from 'tl-gantt';
...
imports:[
    ...
    TlGanttModule,
]

使用

html:

<tl-gantt (barClickEvent)="onBarClick($event);" [ganttData]="ganttData"></tl-gantt>

ts:

public ganttData = [{
"name": "综合管理部 2020",
"tasks": [
    {
        "name": "任务1",
        "desc": "任务1描述",
        "values": [
            {
                "from": "2020-01-01",
                "to": "2020-01-31",
                "label": "任务1(2020-01-01----2020-01-31)",
                "status": 1
            }
        ],
        "tasks": [
            {
                "name": "任务1-1",
                "desc": "",
                "values": [
                    {
                        "from": "2020-01-01",
                        "to": "2020-01-10",
                        "label": "状态1",
                        "status": 1
                    },
                    {
                        "from": "2020-01-11",
                        "to": "2020-01-20",
                        "label": "状态2",
                        "status": 2
                    },
                    {
                        "from": "2020-01-21",
                        "to": "2020-01-31",
                        "label": "状态3",
                        "status": 3
                    }
                ]
            },
            {
                "name": "任务1-2",
                "desc": "",
                "values": [
                    {
                        "from": "2020-01-06",
                        "to": "2020-01-26",
                        "label": "状态4",
                        "status": 4
                    }
                ]
            },
            {
                "name": "任务1-3",
                "desc": "",
                "values": [
                    {
                        "from": "2020-01-01",
                        "to": "2020-01-01",
                        "label": "任务1-3"
                    }
                ]
            }
        ]
    }
]
}];