vue框架下实现甘特图（dhtmlxGantt）

Posted 2023-04-30

参考技术A 项目中要用到甘特图，最开始研究了echart，实现的样式如下：

对比下面的原型图，发觉相差甚大且通过echart不好复现。

百度搜索找到了dhtmlxGantt，查看官网demo后足够实现原型效果。随即查看了官方文档，实现了如下效果：

具体的属性可以在API中查找： https://docs.dhtmlx.com/gantt/api__refs__gantt.html
开发使用说明： https://docs.dhtmlx.com/gantt/index.html
在Vue.js框架中使用步骤： https://dhtmlx.com/blog/use-dhtmlxgantt-vue-js-framework-demo/

欢迎一起交流呀~

vue项目使用Echarts制作项目工期甘特图

参考技术A

项目迭代过程中，碰上一个需求，要求用甘特图的方式显示项目的工期进度，开完会我赶紧搜索一下甘特图是啥东东，大概了解之后，做出了如下样式

Echarts版本4.5.0

vue版本2.x

HTML部分

CSS部分

data部分

由于是demo，所以用的自己的数据，首先给需要用到的变量赋值

赋值之后，根据值，定义初始参数配置

上述参数配置中，还需定义一下自定义的图形绘制方法

这些都ok，我们就可以初始化chart了

大功告成

如果看了觉得有帮助的，我是@ 鹏多多11997110103 ，欢迎 点赞 关注 评论；
END

往期文章

个人主页