生成时间线为一天的vue甘特图
时间: 2023-08-12 22:28:32 浏览: 52
您可以使用现有的 Vue.js 组件库来实现生成时间线为一天的甘特图。以下是一个使用 `vue-gantt` 组件的示例:
1. 安装 `vue-gantt` 组件库
```
npm install vue-gantt --save
```
2. 导入 `vue-gantt` 组件
在需要使用甘特图的组件中导入 `vue-gantt` 组件:
```javascript
import Gantt from 'vue-gantt'
```
3. 创建甘特图数据
创建一个包含任务列表的数组,每个任务都包含以下属性:
- `id`:唯一标识符
- `name`:任务名称
- `start`:任务开始时间
- `end`:任务结束时间
- `color`:任务颜色
```javascript
const tasks = [
{
id: 1,
name: 'Task 1',
start: '2022-03-01T00:00:00.000Z',
end: '2022-03-01T01:00:00.000Z',
color: '#f0ad4e'
},
{
id: 2,
name: 'Task 2',
start: '2022-03-01T02:00:00.000Z',
end: '2022-03-01T04:00:00.000Z',
color: '#5cb85c'
},
{
id: 3,
name: 'Task 3',
start: '2022-03-01T05:00:00.000Z',
end: '2022-03-01T08:00:00.000Z',
color: '#d9534f'
}
]
```
4. 在模板中使用 `vue-gantt` 组件
在模板中使用 `vue-gantt` 组件,并将上一步创建的任务数组传递给它:
```html
<template>
<div>
<gantt :tasks="tasks" :day-width="100" />
</div>
</template>
```
其中,`day-width` 属性定义了每个日期格子的宽度,这里设置为 100。
完整代码如下所示:
```javascript
<template>
<div>
<gantt :tasks="tasks" :day-width="100" />
</div>
</template>
<script>
import Gantt from 'vue-gantt'
export default {
components: {
Gantt
},
data() {
return {
tasks: [
{
id: 1,
name: 'Task 1',
start: '2022-03-01T00:00:00.000Z',
end: '2022-03-01T01:00:00.000Z',
color: '#f0ad4e'
},
{
id: 2,
name: 'Task 2',
start: '2022-03-01T02:00:00.000Z',
end: '2022-03-01T04:00:00.000Z',
color: '#5cb85c'
},
{
id: 3,
name: 'Task 3',
start: '2022-03-01T05:00:00.000Z',
end: '2022-03-01T08:00:00.000Z',
color: '#d9534f'
}
]
}
}
}
</script>
```
这样就可以在页面上生成一个时间线为一天的甘特图了。