一种结合ECharts创建关系图谱的方法与流程

本发明涉及计算机技术领域，具体提供一种结合echarts创建关联图谱的方法。

背景技术：

echarts即enterprisecharts的缩写，为商业级数据图表，是一个使用javascript实现的开源可视化库，可以流畅的运行在pc和移动设备上，兼容当前绝大部分浏览器(ie8/9/10/11，chrome，firefox，safari等)，底层依赖轻量级的适量图形库zrender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。echarts的graph图可用来构建图谱，默认有环状布局、力引导布局两种布局方式，但是这两种布局方式无法直观的展现出数据间的层次关系，需要进一步改进。

技术实现要素：

本发明的技术任务是针对上述存在的问题，提供一种能够将纷繁复杂的数据清晰的展示出来，同时对节点进行自由拖拽，增加展示效果灵活性的结合echarts创建关联图谱的方法。

为实现上述目的，本发明提供了如下技术方案：

一种结合echarts创建关联图谱的方法，该方法具体包括以下步骤：

s1、根据查询条件，查出第一个节点和所有要显示的数据；

s2、从第一个节点开始，查出所有与第一个节点有关联的数据；

s3、对所有要显示的数据进行循环，分别查找有关联的节点；

s4、获取各层级的节点信息，对节点进行计算，获取节点坐标；

s5、从所有要显示的数据中获取节点的所有关联关系；

s6、根据节点的关联关系进行连线，创建关联图谱。

根据查询条件，查出第一个节点l1和所有要显示的数据listdata。

从第一个节点l1开始，查出所有和l1有关联的数据，分别记为l1.1、l1.2、l1.3……l1.n。

对l1.1、l1.2、l1.3……l1.n进行循环，分别查找有关联的节点，比如第m个，则找出l1.m.1……l1.m.n，并且从中去掉前面出现过的节点。

获取各层级的节点信息，对节点进行计算，获取节点坐标(x，y)。

获取节点坐标分为从左到右分布和从上到下分布。

从左到右分布的过程为：

1)获取要展示数据的页面的高和宽，分别记为height和width。

2)通过所有要显示的数据listdata，得出节点的总层级lc，获取到层与层之间的距离：lcl＝width/lc,如果lcl<100,则我们赋值lcl＝100，从而让我们保证了数据在横向上显示的不会太拥挤，并且当数据层数较少时能均匀分布；然后各个节点的横坐标x＝节点层级*lcl。

3)通过所有要显示的数据listdata，对各个层级节点分层级处理，得出本层节点的总数cs，获取同级相邻节点间的距离csl＝height/cs，如果csl<60，则我们赋值csl＝60，从而让我们保证了数据在纵向上显示的不会太拥挤，并且当数据层数较少时能均匀分布；然后各个节点的纵坐标y＝节点顺序*csl。

4)获取各个节点的坐标(x,y)。

从上到下分布过程为：

1)获取要展示数据的页面的高和宽，分别记为height和width。

2)通过所有要显示的数据listdata，对各个层级节点分层级处理，得出本层节点的总数cs，从而获取同级相邻节点之间的距离csl＝width/cs，如果csl<100，则我们赋值csl＝100，从而让我们保证了数据在横向上显示的不会太拥挤，并且当数据层数较少时能均匀分布；然后各个节点的横坐标x＝节点顺序*csl。

3)通过所有要显示的数据listdata，得出节点的总层级lc，获取层与层之间的距离lcl＝height/lc,如果lcl<60,则我们赋值lcl＝60，从而让我们保证了数据在纵向上显示的不会太拥挤，并且当数据层数较少时能均匀分布；然后各个节点的纵坐标y＝节点层级*lcl。

4)获取各个节点的坐标(x,y)。

从listdata中获取节点的所有关联关系，记为(ln，lm，value)，表示节点ln到节点lm的value关系。

根据节点的关联关系进行连线，创建关联图谱。若节点之间有多条线，则设置连线为弧线，每条弧线的弧度不同，保证节点之间连线不重复。若节点在不同的层级，且层级差大于1，则连线使用弧线，保证连线与节点不重合。若节点在同层级，且中间隔着其他节点，则连线使用弧线，保证连线与节点不重合。

该结合echarts创建关联图谱的方法减少了echarts在节点摆放时需要大量计算和平衡节点所需的时间，解决了echarts的图原有展示方式不能体现数据的层次结构的问题，并且使节点可以拖拽，从而将纷繁复杂的数据以清晰的树状结构展示出来，使数据间关系一目了然，增加了展示的灵活性。

作为优选，步骤s3中，查找有关联的节点，并从中去掉前面出现过的节点。

作为优选，步骤s4中，对节点进行计算，获取节点坐标分为从左到右分布和从上到下分布。

作为优选，从左到右分布的过程为：

1)获取要展示数据的页面的高和宽；

2)通过所有要显示的数据，得出节点的总层级，获取到层与层之间的距离，得出各个节点的横坐标；

3)通过所有要显示的数据，对各个层级节点分层级处理，得出本层节点的总数，获取同级相邻节点间的距离，得出各个节点的纵坐标；

4)获取各个节点的坐标。

作为优选，从上到下分布的过程为：

1)获取要展示数据的页面的高和宽；

2)通过所有要显示的数据，对各个层级节点分层级处理，得出本层节点的总数，从而获取同级相邻节点之间的距离，得出各个节点的横坐标；

3)通过所有要显示的数据，得出节点的总层级，获取层与层之间的距离，得出各个节点的纵坐标；

4)获取各个节点的坐标。

作为优选，步骤s6中，根据节点关联关系进行连线创建关联图谱过程中，若节点之间有多条线，则设置连线为弧线，每条弧线的弧度不同，保证节点之间连线不重复。

作为优选，步骤s6中，根据节点关联关系进行连线创建关联图谱过程中，若节点在不同的层级，且层级差大于1，则连线使用弧线，保证连线与节点不重合。

作为优选，步骤s6中，根据节点关联关系进行连线创建关联图谱过程中，若节点在同层级，且中间隔着其他节点，则连线使用弧线，保证连线与节点不重合。

与现有技术相比，本发明的结合echarts创建关联图谱的方法具有以下突出的有益效果：所述结合echarts创建关联图谱的方法减少了echarts在节点摆放时需要大量计算和平衡节点所需的时间，解决了echarts的图原有展示方式不能体现数据的层次结构的问题，并且使节点可以拖拽，从而将纷繁复杂的数据以清晰的树状结构展示出来，使数据间关系一目了然，增加了展示的灵活性，具有良好的推广应用价值。

附图说明

图1是本发明所述结合echarts创建关联图谱的方法的过程示意图。

具体实施方式

下面将结合附图和实施例，对本发明的结合echarts创建关联图谱的方法作进一步详细说明。

实施例

如图1所示，本发明的结合echarts创建关联图谱的方法主要包括以下步骤：

s1、根据查询条件，查出第一个节点和所有要显示的数据。

根据查询条件，查出第一个节点l1和所有要显示的数据listdata。

s2、从第一个节点开始，查出所有与第一个节点有关联的数据。

从第一个节点l1开始，查出所有和l1有关联的数据，分别记为l1.1、l1.2、l1.3……l1.n。

s3、对所有要显示的数据进行循环，分别查找有关联的节点。

对l1.1、l1.2、l1.3……l1.n进行循环，分别查找有关联的节点，比如第m个，则找出l1.m.1……l1.m.n，并且从中去掉前面出现过的节点。

s4、获取各层级的节点信息，对节点进行计算，获取节点坐标。

对节点进行计算，获取节点坐标分为从左到右分布和从上到下分布。

从左到右分布的过程为：

1)获取要展示数据的页面的高和宽，分别记为height和width。

2)通过所有要显示的数据listdata，得出节点的总层级lc，获取到层与层之间的距离：lcl＝width/lc,如果lcl<100,则我们赋值lcl＝100，从而让我们保证了数据在横向上显示的不会太拥挤，并且当数据层数较少时能均匀分布；然后各个节点的横坐标x＝节点层级*lcl。

3)通过所有要显示的数据listdata，对各个层级节点分层级处理，得出本层节点的总数cs，获取同级相邻节点间的距离csl＝height/cs，如果csl<60，则我们赋值csl＝60，从而让我们保证了数据在纵向上显示的不会太拥挤，并且当数据层数较少时能均匀分布；然后各个节点的纵坐标y＝节点顺序*csl。

4)获取各个节点的坐标(x,y)。

从上到下分布过程为：

1)获取要展示数据的页面的高和宽，分别记为height和width。

2)通过所有要显示的数据listdata，对各个层级节点分层级处理，得出本层节点的总数cs，从而获取同级相邻节点之间的距离csl＝width/cs，如果csl<100，则我们赋值csl＝100，从而让我们保证了数据在横向上显示的不会太拥挤，并且当数据层数较少时能均匀分布；然后各个节点的横坐标x＝节点顺序*csl。

3)通过所有要显示的数据listdata，得出节点的总层级lc，获取层与层之间的距离lcl＝height/lc,如果lcl<60,则我们赋值lcl＝60，从而让我们保证了数据在纵向上显示的不会太拥挤，并且当数据层数较少时能均匀分布；然后各个节点的纵坐标y＝节点层级*lcl。

4)获取各个节点的坐标(x,y)。

s5、从所有要显示的数据中获取节点的所有关联关系，记为(ln，lm，value)，表示节点ln到节点lm的value关系。

s6、根据节点的关联关系(ln，lm，value)进行连线，创建关联图谱。

若节点之间有多条线，则设置连线为弧线，每条弧线的弧度不同，保证节点之间连线不重复。若节点在不同的层级，且层级差大于1，则连线使用弧线，保证连线与节点不重合。若节点在同层级，且中间隔着其他节点，则连线使用弧线，保证连线与节点不重合。除上述情况外，其余均用直线连线。

以上所述的实施例，只是本发明较优选的具体实施方式，本领域的技术人员在本发明技术方案范围内进行的通常变化和替换都应包含在本发明的保护范围内。

网址：一种结合ECharts创建关系图谱的方法与流程 http://c.mxgxt.com/news/view/1171234

相关内容

react前端关系图谱实现
可视化图表：关系图，一图分清父子兄弟关系
知识图谱的核心概念、应用场景与构建方法解析
NRD Studio绘制同学关系图谱的基础流程 – NRD Studio
探讨构建十亿用户的Web3 社交图谱两种方法：链上图和链式图
知识图谱
遗传系谱图的一般判断方法
遗传系谱图判断方法ok课件
一种STEDF的可视图环境建模方法
Neo4j实战应用构建明星关系图谱

随便看看