Echarts 功能十分强大，可以实现多种图表效果，下面简单介绍下最近使用 Eharts 实现的一个项目进度甘特图。

下面是实现的效果：

目录

一.概览 Echarts 基本内容

1.官网文档

2.查看示例

二.需求分析

1.数据系列（series）

2.标线 （markLine）

3.数据对象结构

4.“超时”、“按时”划分

三.引入并配置 Echarts

1.坑

2.具体操作

四.说明

首先基本的前端搭建必须的，然后应该大致浏览一下 Echarts 官网 文档 专题下的 教程 和 配置项手册，如果不是要实现特别复杂的效果和功能，这些内容基本就足够了。

只看文字内容比较抽象，因为要做甘特图，可以先去 实例 中找一个甘特图研究下，看看别人是怎么实现的。你会发现Echarts官网好像只能在 实例 下找到官方示例图，别急，操作一番就可以看其他无私的贡献者发布的图表了。

点击官网页面右上角 “EN”，切换为英文版，

在 Get Started 下 点击 Gallery，

这样就能看到其他开发者贡献的 Demo 了，

点击 展开筛选，筛选你要找的图表类型。

下面这个图表（点击这里查看该图表Demo）和我们要实现的效果还是有几分类似的：

当然细节还得自己研究修改一下。

从文章开头的图表效果来看，横坐标刻度值为时间，纵坐标为 “方案”、“纲要”、“成果” 三个项目阶段类目，每个阶段类目中包含按时完成（蓝色柱状图）和超时完成（红色柱状图）两种系列的数据，另外还有垂直于 x 时间坐标轴的 “计划开始时间”和“有效期”两条时间标线。结合查阅官网文档和demo，应该有以下初步结论：

每个阶段类目中实际应该有三种系列（series）的数据的，即应该有 开始时间、按时完成时间和超时完成时间三种系列，且三种系列的柱状图是堆叠在一起的。

“计划开始时间” markLine 可以放在在 开始时间series 中，“有效期”markLine可以在 按时完成 或 超时完成 series 中。

这里比较容易理解的传值结构，应该是传入 三个时间段 和 两个刻度值，类似下面这种结构：

这里要求三个阶段实际时间段的首尾可以不连续，即三个阶段之间没有影响，所以，是否超时就取决于 有效期 与 阶段实际时间段 之间的关系了。比如，有效期在阶段实际时间段开始和结束时间之间，那么该阶段是超时的，但是该阶段的柱状图应该是蓝色红色共存的；有效期在阶段实际时间段结束时间之后，那么该阶段按时完成，应该都是蓝色的；有效期在阶段实际时间段开始时间之前，那么该阶段超时完成，应该都是红色的。

其实主要是第四点需要计算一下，其他 参考一下 配置项手册基本没有太大问题。

用新不用旧，但是经过我的测试，Echarets4.x 透明堆叠不起效果，即设置了 series 为 bar ，且 开始时间、按时完成时间、按时完成时间 三个 series 设置了 相同的 stack 后，开始时间 柱状图并不能起到遮盖其他系列柱状图的效果，于是尝试使用3.x 版本，是可以起到柱条堆叠辅助隐藏的效果的。（请同学们注意！！！评论区的seuedu同学指出，在4.x版本中，series里配置z属性可以覆盖，但本人未进行验证，请大家自行验证下！！！）

若果需要兼容 IE8 的话，那么你需要定制下载  Echarts（我在实际测试中发现，这个定制下载即使选中 兼容IE8 ，下载下来的js仍让无法兼容 IE8,真的是让人脑壳痛）。

在你的页面中，放置一个 div，作为放置图表的容器，需要为它指定宽高。

控制图表的 js 代码基本结构如下：

下面是实现本文开头图表效果的 js，方法说明和需要注意的点基本都写在注释里了：

最近需求有修改，需要在 “方案”、“纲要”和“成果” 三个阶段的每个阶段都显示两个柱条，来显示对应阶段的实际用时和计划用时，在每个阶段中，实际用时柱条在上，计划用时柱条在下，突出对比效果，并且实际用时的柱条要可以显示蓝色（计划内用时）和红色（超时用时）两种颜色柱条的堆叠，同时移除之前的贯穿三个阶段的 “计划开始时间”和“有效期” markLine，最后修改成这个效果

这里需要修改的地方主要有：