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值
更多推荐
所有评论(0)