echarts 甘特图_如何绘制一个类甘特图（附源码）

本文介绍如何从头绘制一个业务图表以及对于通用性上的一些思考。代码在最后也会给出。

效果演示

先看下组件的最后效果

要画图，当然是先找找看有没有能够直接拿来用的。我需要绘制的是一个类甘特图。主要是为了做时间基线上的任务耗时管理，并且能够与过往耗时进行对比。与传统的甘特图定义有些区别。长相上与甘特图类似。

找了AntV，echarts，和D3。AntV和echarts都没有直接的甘特图。D3上有一些甘特图，但是和我想要的功能区别还是挺大的。基于他们修改的代价应该比自己画的代价高。那么挑哪种技术绘图呢，canvas，svg和div。我的业务场景绘制的点不算多，而且canvas对于事件挺难处理的。svg毕竟有DOM元素，一些hover效果我可以直接借用antd来做。最后选择了svg。(其实之前没画过图，用啥都得学~)

功能列表

• 图表绘制
• 上下滚动
• 漫游器控制左右滚动以及缩放比例
• 节点hover显示细节

整体设计

组件结构