vue甘特图(内网引入gantt-elastic以及源码扩展)

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

gan 

gan 

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

最终实现效果如下

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

 3.页面引入

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

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

 

 

 

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里面写

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

③甘特图可选事件

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

 ④甘特图双击事件（目前没提供，需要自己写）

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

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

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

还是在Task.vue文件里面

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

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

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

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