vue中使用dhtmlxGantt
最近公司项目中要使用甘特图，在网上找到了有名的DHX下的gantt示例，开发环境为饿了么下的vue-element-admin后台管理系统，下面进行详细的gantt开发
1 准备dhtmlx-gantt模块
npm install dhtmlx-gantt
2 编码 【vue中使用dhtmlxGantt】新建gantt.vue文件，在文件加入以下代码
import gantt from 'dhtmlx-gantt'// 引入模块
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
import 'dhtmlx-gantt/codebase/locale/locale_cn'// 本地化
export default {
name: 'DhtmlxGantt',
data() {
return {
tasks: {
data: [
{ id: 1, text: 'Task #1', start_date: '15-04-2017', personName: '张总', duration: 3, progress: 0.6 },
{ id: 2, text: 'Task #2', start_date: '18-04-2017', personName: '李总', duration: 3, progress: 0.4 },
{ id: 3, text: 'Task #2-1', start_date: '20-04-2017', personName: '赵总', duration: 3, progress: 0.4, parent: 2 }
],
links: [
{ id: 1, source: 1, target: 2, type: '0' }
]
}
}
}
mounted() {
// 初始化
gantt.init(this.$refs.gantt)
// 数据解析
gantt.parse(this.$props.tasks)
}
}.left-container {
height: 600px;
}这样，基本的甘特图就已经搭建出来了，如下图
文章图片
甘特图.png
可以看到上图的时间轴上只有月和日，那加个年份的显示是不是更完美，说加就加
我们可在甘特图初始化之前加入配置，如下：
mounted() {
// 在时间线上增加一行年份显示
gantt.config.subscales = [
{
unit: 'year',
step: 1,
date: '%Y'
}
]
// 初始化
gantt.init(this.$refs.gantt)
}
效果如图
文章图片
image.png 如需更多效果，请在下面评论回复。
推荐阅读
- 热闹中的孤独
- Shell-Bash变量与运算符
- JS中的各种宽高度定义及其应用
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 深入理解Go之generate
- 由浅入深理解AOP
- 异地恋中，逐渐适应一个人到底意味着什么（）
- vue-cli|vue-cli 3.x vue.config.js 配置
- 【译】20个更有效地使用谷歌搜索的技巧
- 我眼中的佛系经纪人