先说下本次案例业务需求,输入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 =