实际工作中遇到一个问题,在html页面以树形节点的方式展示工作流程图。
echarts2的树形图可以实现,但是页面样式不够灵活。架构师从网上找来qunee插件,大致能满足客户要求。
qunee是"一套基于HTML5的网络图组件",详情可以去官网http://qunee.com查看。
这里只介绍如何用qunee来实现树形图。
在qunee的demo里找到
Treelayouter Demo (http://demo.qunee.com/#TreeLayouter Demo)
和Work Flow Demo中的
development guide (http://demo.qunee.com/#Development Guide)
本例需要将两者的效果结合。
流程图结构如下(局部放大):
流程图结构如下(完整):
节点数据是json格式,举例如下:
var test = { "children": [{ "children": [{ "children": null, "codeDescription": "2级节点", "nodeLevel": 2, "nodeName": "test1_1", "nodeOrder": 0 }], "codeDescription": "1级节点", "nodeLevel": 1, "nodeName": "test1", "nodeOrder": 0 }], "codeDescription": "根节点", "nodeLevel": 0, "nodeName": "test0", "nodeOrder": 0 }