vue 引入qunee_(原创) 工作流程图的树形展示-使用qunee插件实现

实际工作中遇到一个问题，在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

}

完整的html代码，每一部分都有较详细的注释。

Qunee Treelayout Demo 20160801 update

style="width: 1000px; height: 600px; margin: auto; border: solid 1px #2898E0;">

//指定一个div元素，初始化qunee画布

var graph = new Q.Graph("root_box");

//graph.originAtCenter为false时表示设置左上角为坐标原点

graph.originAtCenter = false;

//创建一个数组存放所有的子孙节点

var allChildren = [];

//用来记录最