快捷搜索:  汽车  科技

vue做数据分析系统(基于VueGantt)

vue做数据分析系统(基于VueGantt)https://dhtmlx.com/blog/use-dhtmlxgantt-vue-js-framework-demo/ok,今天就分享到这里。感兴趣的同学可以去看看,希望对大家有所帮助!export default { name: 'app' components: {Gantt} data () { return { tasks: { data: [ { text: 'Test001-001' //任务名 start_date: '19-04-2017' //开始时间 id: 1 //任务id duration: 13 //任务时长,从start_date开始计算 progress: 0.6 //任务完成情况,进度 parent:

昨天给大家推荐了一款H5甘特图插件dhtmlxGantt。今天给大家分享如何在Vue项目中实现甘特图插件。

vue做数据分析系统(基于VueGantt)(1)

基于dhtmlx-gantt插件来实现在vue.js项目中创建甘特图。

vue做数据分析系统(基于VueGantt)(2)

安装依赖

首先需要安装 dhtmlx-gantt 模块。

$ npm i dhtmlx-gantt -S创建gantt.vue

新建gantt.vue页面,并加入以下代码。

export default { name: 'app' components: {Gantt} data () { return { tasks: { data: [ { text: 'Test001-001' //任务名 start_date: '19-04-2017' //开始时间 id: 1 //任务id duration: 13 //任务时长,从start_date开始计算 progress: 0.6 //任务完成情况,进度 parent: 2 //父任务ID user: "李四" //成员 planned_end:'19-04-2017' //计划开始时间 planned_start:'10-04-2017' //计划结束时间 show:false open: true //默认是否打开 type: 'project'// gantt.config.types.milestone为里程碑类型 // project为项目任务类型,也就是摘要任务, // task为普通任务类型 } {id: 2 text: 'Task #1' start_date: '15-04-2017' duration: 3 progress: 0.6} {id: 3 text: 'Task #2' start_date: '18-04-2017' duration: 3 progress: 0.4} ] links: [// links为任务之间连接的线 {id: 1 source: 1 target: 2 type: '0'}//source根源 target目标 也就是从id为1的指向id为2的 //type:'0'是从1任务完成到2任务开始,type:'1'是1任务开始到2任务开始, //type:'2'是从1任务完成到2任务完成,type:'3'是从1任务开始到2任务完成 ] } } } }

vue做数据分析系统(基于VueGantt)(3)

当然,大家也可以把 gantt.vue 封装为一个公共组件,只需传入tasks参数即可。

DHX官网提供了丰富的Vue组件示例。

https://dhtmlx.com/docs/products/dhtmlxGantt-for-Vuejs/

vue做数据分析系统(基于VueGantt)(4)

vue做数据分析系统(基于VueGantt)(5)

vue做数据分析系统(基于VueGantt)(6)

在vue.js中详细使用dhtmlxGantt插件创建甘特图,可参看下面的demo文档。

https://dhtmlx.com/blog/use-dhtmlxgantt-vue-js-framework-demo/

ok,今天就分享到这里。感兴趣的同学可以去看看,希望对大家有所帮助!

猜您喜欢: