vue实现好看的甘特图
实现甘特图的组件选择
Vue生态中有多个成熟的甘特图组件库可供选择，例如：
- vue-ganttastic：轻量级、响应式，支持拖拽和缩放
- dhtmlx-gantt：功能丰富，支持任务依赖关系、资源分配等
- frappe-gantt：开源方案，设计简洁现代
使用vue-ganttastic基础实现
安装依赖：
npm install vue-ganttastic基础示例代码：
<template>
<GanttChart
:tasks="tasks"
:options="options"
@task-updated="handleTaskUpdate"
/>
</template>
<script>
import { GanttChart } from 'vue-ganttastic'
export default {
components: { GanttChart },
data() {
return {
tasks: [
{ id: 1, name: 'Task 1', start: '2023-01-01', end: '2023-01-05' },
{ id: 2, name: 'Task 2', start: '2023-01-06', end: '2023-01-10', dependencies: [1] }
],
options: {
viewMode: 'day',
style: {
'bar-color': '#4CAF50',
'bar-radius': '4px'
}
}
}
},
methods: {
handleTaskUpdate(updatedTask) {
console.log('Task updated:', updatedTask)
}
}
}
</script>自定义样式优化
通过CSS变量深度定制样式：
:root {
--gantt-bar-handle-color: #ff9800;
--gantt-row-height: 40px;
--gantt-font-family: 'Roboto', sans-serif;
}
.gantt-chart {
--gantt-grid-header-background: #f5f7fa;
--gantt-bar-background: linear-gradient(90deg, #64b5f6, #1976d2);
}添加交互功能
实现拖拽调整和进度更新：
options: {
movable: {
enabled: true,
dependencies: true
},
progress: {
enabled: true,
bar: true,
handle: true
}
}响应式设计技巧
在组件中添加响应式处理：
computed: {
chartWidth() {
return window.innerWidth > 768 ? '100%' : '1200px'
}
},
mounted() {
window.addEventListener('resize', this.handleResize)
},
methods: {
handleResize() {
this.$refs.ganttChart.refresh()
}
}高级功能扩展
集成时间轴缩放控制：
<template>
<div>
<div class="toolbar">
<button @click="setViewMode('day')">Day</button>
<button @click="setViewMode('week')">Week</button>
</div>
<GanttChart ref="gantt" :view-mode="currentView"/>
</div>
</template>数据动态加载
实现异步数据加载：
async created() {
try {
const response = await axios.get('/api/tasks')
this.tasks = response.data.map(task => ({
...task,
start: new Date(task.startDate),
end: new Date(task.endDate)
}))
} catch (error) {
console.error('Error loading tasks:', error)
}
}性能优化建议
对于大型数据集：
options: {
virtualScroll: {
enabled: true,
rowHeight: 40,
buffer: 20
},
lazyLoading: {
enabled: true,
batchSize: 50
}
}以上方案可根据实际项目需求进行组合调整，建议从基础功能开始逐步扩展。对于复杂场景，可以考虑专业商业组件如dhtmlxGantt，其提供更完善的企业级功能支持。
