以vue使用为例
下载Dhtmlx-Gantt

npm install dhtmlx-gantt --save

初始化Dhtmlx-Gantt

mounted: function () {
  gantt.init(this.$refs.gantt)
  gantt.parse(this.data.tasks)
}

其中tasks数据格式为

{
    data:[
        {id:1,text:'Task#1',start_date:'15-04-2017',duration:3,progress:0.6},
        {id:2,text:'Task#2',start_date:'18-04-2017',duration:3,progress:0.4},
        {id:3,text:'Task#3',start_date:'19-04-2017',duration:3,progress:0.4}
    ],
    links:[
        {id:1,source:1,target:2,type:'0'}
    ]
}

设置样式

<style>
    @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
</style>

这里是Dhtmlx-Gantt官方demo，介绍了基本用法，Dhtmlx-Gantt功能还是比较强大的，更多的用法需要自己去阅读官方api
官方api文档

    官方api文档主要分为：方法、属性、事件、模板、其他
    
    方法 ：
        调用形式
        gantt.addCalendar(calendar);
    属性：
        设置形式
        gantt.config.autoscroll = true;
        gantt.config.autoscroll_speed = 50;
    事件：
        使用方式
        gantt.attachEvent("onGanttScroll", function (left, top){
                    // any custom logic here
        });
    模板：
                自定义甘特图中的部分组件展示效果
        如：指定树列中子项的标签之前插入的自定义内容
        gantt.templates.grid_blank=function(item){
            return "<divclass='gantt_tree_icongantt_blank'>##</div>"
        }
    其他：就是其他

推荐一个好用的二维码解析微信小程序，主要功能二维码和解析二维码