先说下本次案例业务需求，输入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=[];
this.relationList.forEach（item=> {
// 源
if （item.source===sId） {
if （！this.nodesObj[item.target].xIndex） {
this.nodesObj[item.target].xIndex=xIndex;
nextIds.push（item.target）;
}
}
// 目的
if （item.target===sId） {
if （！this.nodesObj[item.source].xIndex） {
this.nodesObj[item.source].xIndex=xIndex;
nextIds.push（item.source）;
}
}
}）;
let nextIdsLen=nextIds.length;
// 1、没有当前的队列，没有后续的队列，有nextIds
if （
！this.currentQueue.length &&
！this.afterQueue.length &&
nextIdsLen
） {
this.currentQueue=nextIds;
this.currentXindex=this.currentXindex + 1;
this.setNextOrder（）;
} else if （this.currentQueue.length && nextIdsLen） {
// 2、有当前的队列在遍历，排队
this.afterQueue=this.afterQueue.concat（nextIds）;
} else if （！this.currentQueue.length && this.afterQueue.length） {
// 3、没有当前的队列了，有排队的队列，则排队的进去
if （nextIdsLen） {
this.afterQueue=this.afterQueue.concat（nextIds）;
}
this.currentQueue=JSON.parse（JSON.stringify（this.afterQueue））;
this.afterQueue=[];
this.currentXindex=this.currentXindex + 1;
}
setNextOrder函数：
setNextOrder （） {
while （this.currentQueue.length） {
let id=this.currentQueue.shift（）;
this.findNodeOrder（this.currentXindex, id）;
}
}
2、根据行数信息设置列数的位置（节点的yIndex层的信息）
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery