前言:项目要求用甘特图展示计划的实施过程。之前用过dhtmlx,用着不是很舒服。又在网上看了jQueryGantt-master,wl-gantt-mater,gantt-elastic的大概源码,最后选定gantt-elastic(源码相对简单,易扩展开发,没选用他的进阶版本gantt-schedule-timeline-calendar-master的原因是这个要收费)

gan 

gan 

npm 下载下来的gantt.vue属于官方的一个demo了

最终实现效果如下

1348e1e8c7164b21b99999804bcd44b8.jpg

1.内网开发,直接去github上npm install就好,我是内网开发,在github上install下来,然后把下下来的node_module里面的dayjs  gantt-elastic  gantt-elastic-header  resize-observe-polyfill  vue-slider-component  vue-switches这6个包放到项目的node_module里面。

2.引入node_module

942055bf050c466fa9b1f984bc0e66fe.jpg

 3.页面引入

a97eef8943644e5cbec7e20a85fbc1bb.jpg

 options是甘特图配置数据,ganttData是实际数据,key是刷新甘特图时修改一下就好(取Math.random(),我这一版本代码会报错,去源码GanttElastic.vue的beforeDestroy的this.state.resizeObserver.unobserve方法注释掉)

4.options参数(官方和源码都有demo,我把参数放在了一个js文件里面)

72c4ecb067394640be21c1a8956d3d71.jpg

 5eb4ab2377534d168c734da895d59f2a.jpg

 16f11a2edc674bd3acade94f030318cf.jpg

 489125baa27b480da957765762935463.jpg

e24d029aa7d64f28bf787b631f539cb8.jpg

5.ganttData的数据和options里面的taskList.columns.value对应起来就行了,不过需要注意的一点是甘特图的开始和结束字段用得start和end,格式为“xxxx-xx-xx xx:xx:xx”

6.扩展

①怎么修改柱子样式:

在ganttData里面通过参数type修改,目前我知道的有3种样式task(两边都是方角),project(底部带小勾),milestone(两边带尖角)

②怎么在左侧table自定义html样式

在options.taskList.columns里面写3b1af08869174754b601c5563a46276c.jpg

 然后在数据里面写check:"你的html代码"

③甘特图可选事件

27cb7225470b45cbb4905f5d435e2b7a.jpg

 配置写的地方在options的events里面

e5387586887b46e3816b54409529f341.jpg

 ④甘特图双击事件(目前没提供,需要自己写)

我是用的type:task,所以在源码的Task.vue文件里面自己加,具体位置是

a64de1888fa44679a288c7eb7bf2d63a.jpg

 这个点击事件通过设置store里面的一个值,让外面页面去watch,当watch到值变化后,进行具体的操作就可以了

⑤如何在甘特图里面加上一些图片/其他自定义的样式

还是在Task.vue文件里面

f0f32ffe7de2461e89c369920bb31c3d.jpg

 这里需要加svg支持的标签才能加进去,比如line.polygon.rect等,给好定位后就可以绘制出来了,图片的点击事件等也是通过设置store的值,然后用watch监听。

⑥柱状图上自定义右键点击事件

在源码的Chart.vue文件里面设置

455666a3c3544c53bc3cf716d958108d.jpg

 通过这里把当前鼠标的x.y值,以及你需要的数据放到store里面,然后在外面监听和取值。我这里给弹出框定位fixed,直接可以用这个x.y值

Logo

前往低代码交流专区

更多推荐