echarts画工作流（流程图）

一、流程图介绍

老规矩，先来一张效果图压压惊，流程来源于某宝，某鱼，某电商平台的货物流转流程，自己稍微修改了一下。仅供学习参考使用。

使用echarts等开源框架开发可以减少自己的开发时间，提高工作效率。

 一般流程图如果仅仅是作为静态页面，不需要考虑交互还是很容易画出来的，但是如果需要考虑到交互效果，那就需要自己在基于对开源框架集成使用中多加思考了，毕竟现在很多开源框架的基本思想都是组合优于继承，所以在使用中可以很灵活的融入自己的想法。

二、流程图实现

上面所展示的流程图中很明显的可以看到三种颜色。

灰色：代表不可用，点击无效。

蓝色：代表可用，但是当前并不处于这个节点

黄色：代表当前处于这个点，或者节点被点击

 在渲染流程图时要考虑通用和可扩展，可插拔，所以在渲染时，使用配置来进行渲染，也是比较符合当前主流思想。

核心代码，代码里面注释写的很详细。仔细研读。