echarts3 graph java_记录使用echarts的graph类型绘制流程图全过程（一）-x，y位置的计算...

先说下本次案例业务需求，输入2个节点，获取数据后绘制出2个节点间的路径，之前使用的是网状图，但是网状图的效果不佳，需要转换成流程图的模式：

那么如何在不修改数据的情况下，实现类似效果尼？

看了下echarts的graph类型，可以实现类似的，下面是官方的实例

从实例中可以看出，难点在于节点的显示位置x,y和曲线的设置。业务数据中：

1、节点的数量不定，关系的数量不定，

2、后台返回的数据只有单独的节点信息和关系信息

实现思路：

1、分析数据，获取前后节点关系，获得行数位置(节点的xIndex信息)

在节点数组中找到开始节点并设置xIndex 为1，然后从它开始找第二层的节点

// 获取节点的x轴顺序

setNodeOrder () {

this.entityList.forEach(item => {

if (item.id === this.startNode) {

item.xIndex = 1;

}

// 设置一个对象，记录节点信息，用于后面查询信息，比数组查询来的快

this.nodesObj[item.id] = item;

});

this.findNodeOrder(2, this.startNode);

}

// 广度遍历--按顺序找到第index层的数据，并设置对应的参数，再层层递进

findNodeOrder (xIndex, sId){

}

想一下，如果是第二层的节点，那么应该是关系中，源是startNode或者目的节点是startNode，如此类推，层层递进，

这里需要使用广度遍历而不是深度遍历，设定2个数组，currentQueue记录当前层的节点，afterQueue记录下一层的节点，当currentQueue层遍历完后，将afterQueue变成currentQueue，继续遍历，直至结束，核心代码如下：

......

let nextIds =