elementui实现甘特图
时间: 2023-11-16 08:55:14 浏览: 212
ElementUI提供了一个Gantt组件,可以用于实现甘特图。使用该组件需要先安装ElementUI库,然后在代码中引入Gantt组件并传入相应的数据即可。
以下是一个简单的示例代码:
```html
<template>
<el-gantt :data="data"></el-gantt>
</template>
<script>
import { ElGantt } from 'element-ui'
export default {
components: {
ElGantt
},
data() {
return {
data: [
{
id: 1,
name: '任务1',
start: '2022-01-01',
end: '2022-01-05'
},
{
id: 2,
name: '任务2',
start: '2022-01-06',
end: '2022-01-10'
}
]
}
}
}
</script>
```
在上面的代码中,我们引入了ElementUI的ElGantt组件,并将数据传入该组件的data属性中。其中,每个任务都需要包含id、name、start和end四个属性,分别表示任务的唯一标识、名称、开始时间和结束时间。
阅读全文
相关推荐














