甘特图

![](/media/202404/2024-04-29_171259_396407.png)

------------
工艺流程图

------------
```html
<template>
    <div>
      <hi-gantt v-bind="config" readonly :option="option" :tasks="option.tasks" :dataSource="deptStore"></hi-gantt>
    </div>
</template>

// ],
                columns:[
                    {
                        "name": "text",
                        "label": "Task name",
                        "tree": true,
                        "width": 100
                    },
                    {
                        "name": "id",
                        "label": "id",
                        "align": "center"
                    },
                    {
                        "name": "duration",
                        "label": "Duration",
                        "align": "center"
                    }
                ],
                // tasks: {
                //     "data": [
                //         {
                //             "id": 1,
                //             "text": "Task #1",
                //             "start_date": "2020-01-17",
                //             "end_date" : "2020-01-22",
                //             // "duration": 3,
                //             // "progress": 0.6
                //         },
                //         {
                //             "id": 2,
                //             "text": "Task #2",
                //             "start_date": "2020-01-20",
                //             "end_date" : "2020-01-22",
                //             // "duration": 3,
                //             // "progress": 0.4
                //         }
                //     ],
                //     "links": [
                //         {
                //             "id": 1,
                //             "source": 1,
                //             "target": 2,
                //             "type": "0"
                //         }
                //     ]
                // }
              },

}
        },
        methods: {
            testfn(){
                this.$refs.flow.$refs.flow.contentGroup.dirty();
            },
            afteraddnode(){

},
            nodeclick(flow,node,element){
            }
        },
        created() {
            this.deptStore = this.$dsContainer.createDataSet({modelFile:"eap5csxm.pro/229CeShi.dir/CeShi.moduledir/dataset.datadir/w_wangbinbin2ShuJuJi.bizstore|esbwgLxF.BizEntity~_extFile"});
            this.deptStore.load();
        }
    };
</script>
```

</div>

### Attributes

| 参数         | 说明     | 类型     | 可选值 | 默认值 |
|------------|--------|--------|-----|-----|
| source     | 数据集    | Object | —   | —   |
| columns    | 网格列配置  | array  | —   | —   |
| idField    | id字段   | String | —   | —   |
| nameField  | 名称字段   | String | —   | —   |
| startField | 开始时间字段 | String | —   | —   |
| endField   | 结束时间字段 | String | —   | —   |
| option     | 配置项    | String | —   | —   |

</style>