A relationship graph drawing method and device based on echarts

Abstract

The application discloses a kind of echarts-based relationship graph drawing method and device, the method includes: defining the node data structure of node in relationship graph, define canvas structure and initialize relationship graph drawing canvas according to the canvas structure, determine graph center coordinates;According to the node data structure, construct node, determine the connection relationship between the node;Based on echarts, according to the graph center coordinates, the connection relationship between the node is drawn and generated visual relationship graph;The visual relationship graph includes upper visual relationship graph and center visual relationship graph.Through the application, can make the data of only last two layers in graph, that is, there are at most two center nodes in graph, the name of each center node in complete association path is displayed in the form of text above graph, both reduce the data amount of graph rendering, and do not affect the depth relationship query of data and the presentation of complete relationship path.

Description

Technical Field

[0001] This application relates to the field of database technology, and more specifically, to a method and apparatus for drawing relational graphs based on echarts. Background Technology

[0002] With the development of the big data era, data visualization scenarios are increasingly appearing in people's lives. Relationship graphs, as a very practical graph type, are widely used to display various relationships between data, such as equity relationships, interpersonal relationships, and so on. Echarts, as a leader in the field of data visualization, provides a quick and convenient method to draw various relationship graphs, meeting most application scenarios. However, if the data volume of the relationship graph is large and the relationships between nodes are complex, drawing the graph will be more time-consuming, and the resulting graph will become intricate and complex, failing to clearly show the relationships between each node. Faced with massive amounts of data, it is very difficult for users to sort out the node relationships; too many nodes and connections make the graph difficult to understand.

[0003] Therefore, it is necessary to introduce a new method and system to solve the problems of difficulty in sorting and slow rendering speed caused by the large amount of relational graph data. A lazy loading approach can be adopted to present the graph relationships. The initial graph only displays one layer of relational data, and clicking on a node allows drilling down to query deeper levels of data. However, with lazy loading alone, the graph data becomes increasingly complex after multiple drill-down queries. To address the issue of data increasing with operations, only the last two layers of data are displayed in the graph. This means the graph has a maximum of two central nodes. The names of each central node in the complete relational path are displayed as text above the graph. This reduces the amount of data rendered in the graph without affecting the deep relational query and the presentation of the complete relational path. Summary of the Invention

[0004] To address the aforementioned technical issues, this invention provides a relational graph drawing method based on ECharts. By displaying only the data of the last two layers in the graph, meaning that there are at most two central nodes in the graph, and displaying the names of each central node in the complete association path in text form above the graph, the amount of data rendered in the graph is reduced without affecting the deep relationship query and the presentation of the complete relationship path.

[0005] The present invention provides a method for drawing relationship graphs based on echarts. The method includes:

[0006] S101, Define the node data structure of the nodes in the relationship graph, define the canvas structure and initialize the relationship graph according to the canvas structure to draw the canvas, and determine the center coordinates of the graph;

[0007] S102, Construct nodes according to the node data structure and determine the connection relationships between the nodes;

[0008] S103, Based on echarts, draw and generate a visual relationship graph according to the center coordinates of the graph and the connection relationship between the nodes;

[0009] The visualized relationship graph includes a higher-level visualized relationship graph and a central visualized relationship graph.

[0010] The node data structure includes 6 fields: node ID, node name, node coordinates, node level, current node attribute, and number of nodes. The current node attribute includes the parent root node, the center root node, and the child node. The canvas structure includes 3 fields: canvas width, canvas height, and graph radius.

[0011] Wherein, the center coordinates of the graph are (x, y), the canvas width is L, the canvas height is H, the radius of the central visualization graph is r1, the radius of the parent visualization graph is r2, and the node level is a[i].

[0012] x = L / 2;

[0013] y = H / 2;

[0014] The center coordinates of the map are (L / 2, H / 2);

[0015] a[i]={a1,a2,a3,…a i-1 ,a i} = {first-level node, second-level node, third-level node, ... (i-1) level node, i-level node}, where i is an integer greater than or equal to 1.

[0016] S101, which defines the node data structure of nodes in the relationship graph, defines the canvas structure and initializes the relationship graph according to the canvas structure to draw the canvas, and determines the center coordinates of the graph, includes the following steps:

[0017] Based on the canvas structure, initialize the node coordinates of the parent root node, set the canvas width of the relation graph drawing canvas to L, and the canvas height to H; obtain and based on the canvas width L and the canvas height H, obtain the coordinates of the graph center as (L / 2, H / 2).

[0018] Furthermore, in S102, the step of constructing nodes based on the node data structure and determining the connection relationships between nodes includes:

[0019] Obtain the node ID, node name, node level, and number of nodes for each node; determine the connection relationship between each node based on the node ID, node level, and number of nodes for each node.

[0020] Optionally, the step of determining the connection relationship between the nodes based on the node ID, node level, and number of nodes is as follows:

[0021] Based on the node level of the node, obtain and determine the node ID of the node, the node ID of the parent node corresponding to the node, the node ID of the child node corresponding to the node, and the number of nodes.

[0022] Based on the node ID of the node, the node ID of the corresponding subordinate node and the number of nodes, determine the connection relationship between the node and the corresponding subordinate node;

[0023] The connection relationships are represented by an array;

[0024] The number of subordinate nodes corresponding to the root node is n, and the connection relationship between the root node and its corresponding subordinate nodes is NJnode_Links[n].

[0025] NJnode_Links[n] = {the node ID of the root node, and the array of node IDs of the subordinate nodes Nroot[n]};

[0026] The node ID array Nroot[n] of the lower-level nodes stores the node IDs of all the lower-level nodes corresponding to the root node.

[0027] Optionally, in step S103, the step of drawing and generating a visual relationship graph based on echarts according to the center coordinates of the graph and the connection relationships between the nodes includes:

[0028] Based on echarts, the first-level node is taken as the parent root node. According to the NJnode_Links[n] corresponding to the first-level node, the node coordinates of the parent root node and the graph radius r2 of the visualization relationship graph, the node coordinates of the lower-level node corresponding to the parent root node are determined. The parent visualization relationship graph is drawn and generated in the relationship graph drawing canvas with the node coordinates of the parent root node as the center and the graph radius r2 of the visualization relationship graph as the radius.

[0029] Based on ECharts, a second-level node corresponding to the first-level node is taken as the central root node. The node coordinates of the lower-level node corresponding to the central root node are determined according to the NJnode_Links[n] of the second-level node, the node coordinates of the central root node, and the graph radius r1 of the central visualization relationship graph. The central visualization relationship graph is drawn and generated on the relationship graph drawing canvas with the node coordinates of the central root node as the center and the graph radius r1 of the central visualization relationship graph as the radius.

[0030] The step of determining the node coordinates of the lower-level nodes corresponding to the central root node based on ECharts, using a second-level node corresponding to the first-level node as the central root node, and according to the NJnode_Links[n] of the second-level node, the node coordinates of the central root node, and the graph radius r1 of the central visualization relationship graph, is as follows:

[0031] Based on echarts, one of the second-level nodes corresponding to the first-level node is taken as the central root node, and the node coordinates of the central root node are determined to be (L / 2, H / 2) according to the center coordinates of the graph (L / 2, H / 2).

[0032] Based on the node coordinates (L / 2, H / 2) of the central root node, the node number id of the second-level node, the NJnode_Links[n] corresponding to the second-level node, and the graph radius r1 of the central visualization relationship graph, the angle formed by the line connecting the root node and the lower-level node with the vertical axis in the relationship graph drawing canvas is determined to be θ, and the node coordinates of the lower-level node are (w, z).

[0033] in,

[0034] w = L / 2 + r1*sin(θ);

[0035] z = H / 2 + r1*cos(θ).

[0036] In addition, after drawing and generating a visual relationship graph in the relationship graph drawing canvas, a sibling node switching operation is also included. The steps of the sibling node switching operation are as follows:

[0037] If the sibling node being switched to is the parent root node, then

[0038] Based on ECharts, the new first-level node is taken as the parent root node. According to the NJnode_Links[n] corresponding to the new first-level node, the node coordinates of the parent root node, and the graph radius r2 of the visualization relationship graph, the node coordinates of the lower-level node corresponding to the new parent root node are determined. With the node coordinates of the parent root node as the center and the graph radius r2 of the visualization relationship graph as the radius, the parent visualization relationship graph is redrawn and generated in the relationship graph drawing canvas.

[0039] Based on echarts, the second-level node corresponding to the new first-level node is taken as the central root node. According to the NJnode_Links[n] corresponding to the second-level node, the node coordinates of the central root node, and the graph radius r1 of the central visualization relationship graph, the node coordinates of the lower-level node corresponding to the central root node are determined. The central visualization relationship graph is then redrawn and generated on the relationship graph drawing canvas with the node coordinates of the central root node as the center and the graph radius r1 of the central visualization relationship graph as the radius.

[0040] If the sibling node being switched to is the central root node, then

[0041] Based on ECharts, a new second-level node corresponding to the first-level node is taken as the central root node. According to the NJnode_Links[n] corresponding to the new second-level node, the node coordinates of the new central root node, and the graph radius r1 of the central visualization relationship graph, the node coordinates of the lower-level node corresponding to the new central root node are determined. The central visualization relationship graph is then redrawn and generated on the relationship graph drawing canvas with the node coordinates of the central root node as the center and the graph radius r1 of the central visualization relationship graph as the radius.

[0042] After drawing and generating a visual relationship graph on the relationship graph drawing canvas, the process also includes switching between different levels of nodes. The steps of the different levels of node switching operation are as follows:

[0043] Based on echarts, the new second-level node is used as the central root node. According to the NJnode_Links[n] corresponding to the new second-level node, the node coordinates of the new central root node, and the graph radius r1 of the central visualization relationship graph, the node coordinates of the lower-level node corresponding to the new central root node are determined. The central visualization relationship graph is then redrawn and generated on the relationship graph drawing canvas with the node coordinates of the central root node as the center and the graph radius r1 of the central visualization relationship graph as the radius.

[0044] Based on the new second-level node, determine the corresponding first-level node;

[0045] Based on echarts, the first-level node corresponding to the new second-level node is taken as the parent root node. According to the NJnode_Links[n] corresponding to the first-level node of the new second-level node, the node coordinates of the parent root node, and the graph radius r2 of the visualization relationship graph, the node coordinates of the lower-level node corresponding to the parent root node are determined. Then, with the node coordinates of the parent root node as the center and the graph radius r2 of the visualization relationship graph as the radius, the parent visualization relationship graph is redrawn and generated on the relationship graph drawing canvas.

[0046] After drawing and generating a visual relationship graph in the relationship graph drawing canvas, a node state rollback operation is also included, specifically:

[0047] After the node switching operation is completed, the upper-level root node, the central root node, and NJnode_Links[n] before the switch are rolled back. The upper-level visual relationship graph and the central visual relationship graph can be restored without having to query and call data from the server again.

[0048] Based on the present invention, a relational graph drawing method based on ECharts is provided. The present invention also provides an apparatus for implementing the relational graph drawing method based on ECharts. The system includes a node analysis and definition module, a node construction module, and a graph generation module.

[0049] The node analysis and definition module is used to define the node data structure of nodes in the relationship graph, define the canvas structure and initialize the relationship graph according to the canvas structure to draw the canvas, and determine the center coordinates of the graph.

[0050] The node construction module is used to construct nodes according to the node data structure and determine the connection relationships between the nodes;

[0051] The graph generation module is used to draw and generate a visual relationship graph based on echarts, according to the center coordinates of the graph and the connection relationship between the nodes.

[0052] This invention solves the problems of difficulty in organizing and slow rendering speed caused by excessively large amounts of relational graph data by applying the above technical solutions. It also addresses the issue that when using lazy loading to present graph relationships, the graph data becomes increasingly complex after multiple drill-down queries, with the amount of data increasing with each operation. This invention displays only the data from the last two layers in the graph—meaning there are at most two central nodes—and shows the names of each central node in the complete relational path as text above the graph. This reduces the amount of data rendered in the graph without affecting deep relational queries and the presentation of complete relational paths. Attached Figure Description

[0053] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0054] Figure 1 A flowchart illustrating a relation graph drawing method based on echarts proposed in an embodiment of the present invention is shown.

[0055] Figure 2 This illustration shows a schematic diagram of a visualization relationship graph based on an echarts-based relationship graph drawing method proposed in an embodiment of the present invention;

[0056] Figure 3 A schematic diagram of a relation graph drawing device based on echarts, as proposed in an embodiment of the present invention, is shown. Detailed Implementation

[0057] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0058] This invention provides a method for drawing relationship graphs based on echarts, such as... Figure 1 As shown, the method includes the following steps:

[0059] S101, Define the node data structure of the nodes in the relationship graph, define the canvas structure and initialize the relationship graph according to the canvas structure to draw the canvas, and determine the center coordinates of the graph.

[0060] S102, construct nodes according to the node data structure and determine the connection relationships between the nodes.

[0061] S103, based on echarts, draws and generates a visual relationship graph according to the center coordinates of the graph and the connection relationship between the nodes.

[0062] Echarts is a JavaScript-based data visualization library that provides intuitive, vivid, interactive, and customizable data visualization charts. It's an open-source visualization library implemented in JavaScript, running smoothly on PCs and mobile devices, compatible with most current browsers (IE8 / 9 / 10 / 11, Chrome, Firefox, Safari, etc.). It relies on the vector graphics library ZRender and provides intuitive, highly interactive, and customizable data visualization charts.

[0063] like Figure 2 As shown, the visualized relationship graph includes a higher-level visualized relationship graph and a central visualized relationship graph.

[0064] The node data structure includes 6 fields: node ID, node name, node coordinates, node level, current node attribute, and number of nodes. The current node attribute includes the parent root node, the center root node, and the child node. The canvas structure includes 3 fields: canvas width, canvas height, and graph radius.

[0065] Wherein, the center coordinates of the graph are (x, y), the canvas width is L, the canvas height is H, the radius of the central visualization graph is r1, the radius of the parent visualization graph is r2, and the node level is a[i].

[0066] x = L / 2;

[0067] y = H / 2;

[0068] The center coordinates of the map are (L / 2, H / 2);

[0069] a[i]={a1,a2,a3,…a i-1 ,a i} = {first-level node, second-level node, third-level node, ... (i-1) level node, i-level node}, where i is an integer greater than or equal to 1.

[0070] S101, which defines the node data structure of nodes in the relationship graph, defines the canvas structure and initializes the relationship graph according to the canvas structure to draw the canvas, and determines the center coordinates of the graph, includes the following steps:

[0071] Based on the canvas structure, initialize the node coordinates of the parent root node, set the canvas width of the relation graph drawing canvas to L, and the canvas height to H; obtain and based on the canvas width L and the canvas height H, obtain the coordinates of the graph center as (L / 2, H / 2).

[0072] Furthermore, in S102, the step of constructing nodes based on the node data structure and determining the connection relationships between nodes includes:

[0073] Obtain the node ID, node name, node level, and number of nodes for each node; determine the connection relationship between each node based on the node ID, node level, and number of nodes for each node.

[0074] Optionally, the step of determining the connection relationship between the nodes based on the node ID, node level, and number of nodes is as follows:

[0075] Based on the node level of the node, obtain and determine the node ID of the node, the node ID of the parent node corresponding to the node, the node ID of the child node corresponding to the node, and the number of nodes.

[0076] Based on the node ID of the node, the node ID of the corresponding subordinate node and the number of nodes, determine the connection relationship between the node and the corresponding subordinate node;

[0077] The connection relationships are represented by an array;

[0078] The number of subordinate nodes corresponding to the root node is n, and the connection relationship between the root node and its corresponding subordinate nodes is NJnode_Links[n].

[0079] NJnode_Links[n] = {the node ID of the root node, and the array of node IDs of the subordinate nodes Nroot[n]};

[0080] The node ID array Nroot[n] of the lower-level nodes stores the node IDs of all the lower-level nodes corresponding to the root node.

[0081] Optionally, in step S103, the step of drawing and generating a visual relationship graph based on echarts according to the center coordinates of the graph and the connection relationships between the nodes includes:

[0082] Based on echarts, the first-level node is taken as the parent root node. According to the NJnode_Links[n] corresponding to the first-level node, the node coordinates of the parent root node and the graph radius r2 of the visualization relationship graph, the node coordinates of the lower-level node corresponding to the parent root node are determined. The parent visualization relationship graph is drawn and generated in the relationship graph drawing canvas with the node coordinates of the parent root node as the center and the graph radius r2 of the visualization relationship graph as the radius.

[0083] Based on ECharts, a second-level node corresponding to the first-level node is taken as the central root node. The node coordinates of the lower-level node corresponding to the central root node are determined according to the NJnode_Links[n] of the second-level node, the node coordinates of the central root node, and the graph radius r1 of the central visualization relationship graph. The central visualization relationship graph is drawn and generated on the relationship graph drawing canvas with the node coordinates of the central root node as the center and the graph radius r1 of the central visualization relationship graph as the radius.

[0084] The step of determining the node coordinates of the lower-level nodes corresponding to the central root node based on ECharts, using a second-level node corresponding to the first-level node as the central root node, and according to the NJnode_Links[n] of the second-level node, the node coordinates of the central root node, and the graph radius r1 of the central visualization relationship graph, is as follows:

[0085] Based on echarts, one of the second-level nodes corresponding to the first-level node is taken as the central root node, and the node coordinates of the central root node are determined to be (L / 2, H / 2) according to the center coordinates of the graph (L / 2, H / 2).

[0086] Based on the node coordinates (L / 2, H / 2) of the central root node, the node number id of the second-level node, the NJnode_Links[n] corresponding to the second-level node, and the graph radius r1 of the central visualization relationship graph, the angle formed by the line connecting the root node and the lower-level node with the vertical axis in the relationship graph drawing canvas is determined to be θ, and the node coordinates of the lower-level node are (w, z).

[0087] in,

[0088] w = L / 2 + r1*sin(θ);

[0089] z = H / 2 + r1*cos(θ).

[0090] In addition, after drawing and generating a visual relationship graph in the relationship graph drawing canvas, a sibling node switching operation is also included. The steps of the sibling node switching operation are as follows:

[0091] If the sibling node being switched to is the parent root node, then

[0092] Based on ECharts, the new first-level node is taken as the parent root node. According to the NJnode_Links[n] corresponding to the new first-level node, the node coordinates of the parent root node, and the graph radius r2 of the visualization relationship graph, the node coordinates of the lower-level node corresponding to the new parent root node are determined. With the node coordinates of the parent root node as the center and the graph radius r2 of the visualization relationship graph as the radius, the parent visualization relationship graph is redrawn and generated in the relationship graph drawing canvas.

[0093] Based on echarts, the second-level node corresponding to the new first-level node is taken as the central root node. According to the NJnode_Links[n] corresponding to the second-level node, the node coordinates of the central root node, and the graph radius r1 of the central visualization relationship graph, the node coordinates of the lower-level node corresponding to the central root node are determined. The central visualization relationship graph is then redrawn and generated on the relationship graph drawing canvas with the node coordinates of the central root node as the center and the graph radius r1 of the central visualization relationship graph as the radius.

[0094] If the sibling node being switched to is the central root node, then

[0095] Based on ECharts, a new second-level node corresponding to the first-level node is taken as the central root node. According to the NJnode_Links[n] corresponding to the new second-level node, the node coordinates of the new central root node, and the graph radius r1 of the central visualization relationship graph, the node coordinates of the lower-level node corresponding to the new central root node are determined. The central visualization relationship graph is then redrawn and generated on the relationship graph drawing canvas with the node coordinates of the central root node as the center and the graph radius r1 of the central visualization relationship graph as the radius.

[0096] After drawing and generating a visual relationship graph on the relationship graph drawing canvas, the process also includes switching between different levels of nodes. The steps of the different levels of node switching operation are as follows:

[0097] Based on echarts, the new second-level node is used as the central root node. According to the NJnode_Links[n] corresponding to the new second-level node, the node coordinates of the new central root node, and the graph radius r1 of the central visualization relationship graph, the node coordinates of the lower-level node corresponding to the new central root node are determined. The central visualization relationship graph is then redrawn and generated on the relationship graph drawing canvas with the node coordinates of the central root node as the center and the graph radius r1 of the central visualization relationship graph as the radius.

[0098] Based on the new second-level node, determine the corresponding first-level node;

[0099] Based on echarts, the first-level node corresponding to the new second-level node is taken as the parent root node. According to the NJnode_Links[n] corresponding to the first-level node of the new second-level node, the node coordinates of the parent root node, and the graph radius r2 of the visualization relationship graph, the node coordinates of the lower-level node corresponding to the parent root node are determined. Then, with the node coordinates of the parent root node as the center and the graph radius r2 of the visualization relationship graph as the radius, the parent visualization relationship graph is redrawn and generated on the relationship graph drawing canvas.

[0100] In this embodiment, after drawing and generating a visual relationship graph on the relationship graph drawing canvas, a node state rollback operation is also included, specifically:

[0101] After the node switching operation is completed, the upper-level root node, the central root node, and NJnode_Links[n] before the switch are rolled back. The upper-level visual relationship graph and the central visual relationship graph can be restored without having to query and call data from the server again.

[0102] Based on the relationship graph drawing method based on ECharts of the present invention, the present invention also provides an apparatus for implementing the relationship graph drawing method based on ECharts, such as... Figure 3 As shown, the system includes a node analysis and definition module, a node construction module, and a graph generation module;

[0103] The node analysis and definition module is used to define the node data structure of nodes in the relationship graph, define the canvas structure and initialize the relationship graph according to the canvas structure to draw the canvas, and determine the center coordinates of the graph.

[0104] The node construction module is used to construct nodes according to the node data structure and determine the connection relationships between the nodes;

[0105] The graph generation module is used to draw and generate a visual relationship graph based on echarts, according to the center coordinates of the graph and the connection relationship between the nodes.

[0106] This invention solves the problems of difficulty in organizing and slow rendering speed caused by excessively large amounts of relational graph data by applying the above technical solutions. It also addresses the issue that when using lazy loading to present graph relationships, the graph data becomes increasingly complex after multiple drill-down queries, with the amount of data increasing with each operation. This invention displays only the data from the last two layers in the graph—meaning there are at most two central nodes—and shows the names of each central node in the complete relational path as text above the graph. This reduces the amount of data rendered in the graph without affecting deep relational queries and the presentation of complete relational paths.

[0107] The various embodiments in this specification are described in a related manner. The same or similar parts between the various embodiments can be referred to each other. Each embodiment focuses on describing the differences from other embodiments.

[0108] The above description is merely a preferred embodiment of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention are included within the scope of protection of the present invention.

Claims

1. A method for drawing relationship graphs based on ECharts, characterized in that, The method includes: S101, Define the node data structure of the nodes in the relationship graph, define the canvas structure and initialize the relationship graph according to the canvas structure to draw the canvas, and determine the center coordinates of the graph; S102, Construct nodes according to the node data structure and determine the connection relationships between the nodes; S103, Based on echarts, draw and generate a visual relationship graph according to the center coordinates of the graph and the connection relationship between the nodes; The visualized relationship graph includes a higher-level visualized relationship graph and a central visualized relationship graph. The node data structure includes 6 fields: node ID, node name, node coordinates, node level, current node attribute, and number of nodes. The current attributes of the node include the parent root node, the central root node, and the child nodes; The canvas structure includes three fields: canvas width, canvas height, and graph radius. in, The center coordinates of the graph are (x, y), the canvas width is L, the canvas height is H, the radius of the central visualization graph is r1, the radius of the parent visualization graph is r2, and the node level is a[i]. x = L / 2; y = H / 2; The center coordinates of the map are (L / 2, H / 2); a[i] ={a1, a2, a3,…a i-1 , a i } = {first-level node, second-level node, third-level node, ... (i-1) level node, i-level node}, where i is an integer greater than or equal to 1; S103, the step of drawing and generating a visual relationship graph based on ECharts according to the center coordinates of the graph and the connection relationships between the nodes, includes: Based on ECharts, the first-level node is taken as the parent root node. According to the connection relationship between the first-level node and the corresponding lower-level node, the node coordinates of the parent root node and the graph radius r2 of the visualization relationship graph, the node coordinates of the lower-level node corresponding to the parent root node are determined. The parent visualization relationship graph is drawn and generated in the relationship graph drawing canvas with the node coordinates of the parent root node as the center and the graph radius r2 of the visualization relationship graph as the radius. Based on ECharts, a second-level node corresponding to the first-level node is taken as the central root node. According to the connection relationship between the second-level node and the corresponding lower-level node, the node coordinates of the central root node and the graph radius r1 of the central visualization relationship graph, the node coordinates of the lower-level node corresponding to the central root node are determined. The central visualization relationship graph is drawn and generated in the relationship graph drawing canvas with the node coordinates of the central root node as the center and the graph radius r1 of the central visualization relationship graph as the radius. After drawing and generating a visual relationship graph in the relationship graph drawing canvas, a node switching operation is also included, which includes a same-level node switching operation and a different-level node switching operation. in, The steps for the peer node switching operation are as follows: If the sibling node being switched to is the parent root node, then Based on ECharts, the new first-level node is taken as the parent root node. According to the connection relationship between the new first-level node and the corresponding lower-level node, the node coordinates of the parent root node and the graph radius r2 of the visualization relationship graph, the node coordinates of the lower-level node corresponding to the new parent root node are determined. Then, with the node coordinates of the parent root node as the center and the graph radius r2 of the visualization relationship graph as the radius, the parent visualization relationship graph is redrawn and generated in the relationship graph drawing canvas. Based on ECharts, the second-level node corresponding to the new first-level node is taken as the central root node. According to the connection relationship between the second-level node and the corresponding lower-level node, the node coordinates of the central root node and the graph radius r1 of the central visualization relationship graph, the node coordinates of the lower-level node corresponding to the central root node are determined. Then, with the node coordinates of the central root node as the center and the graph radius r1 of the central visualization relationship graph as the radius, the central visualization relationship graph is redrawn and generated in the relationship graph drawing canvas. If the sibling node being switched to is the central root node, then Based on ECharts, a new second-level node corresponding to the first-level node is taken as the central root node. According to the connection relationship between the new second-level node and the corresponding lower-level node, the node coordinates of the new central root node, and the graph radius r1 of the central visualization relationship graph, the node coordinates of the lower-level node corresponding to the new central root node are determined. Then, with the node coordinates of the central root node as the center and the graph radius r1 of the central visualization relationship graph as the radius, the central visualization relationship graph is redrawn and generated in the relationship graph drawing canvas. The steps for switching between different levels of nodes are as follows: Based on ECharts, the new second-level node is used as the central root node. According to the connection relationship between the new second-level node and the corresponding lower-level node, the node coordinates of the new central root node and the graph radius r1 of the central visualization relationship graph, the node coordinates of the lower-level node corresponding to the new central root node are determined. Then, with the node coordinates of the central root node as the center and the graph radius r1 of the central visualization relationship graph as the radius, the central visualization relationship graph is redrawn and generated in the relationship graph drawing canvas. Based on the new second-level node, determine the corresponding first-level node; Based on ECharts, the first-level node corresponding to the new second-level node is taken as the parent root node. According to the connection relationship between the first-level node corresponding to the new second-level node and the corresponding lower-level node, the node coordinates of the parent root node, and the graph radius r2 of the visualization relationship graph, the node coordinates of the lower-level node corresponding to the parent root node are determined. Then, with the node coordinates of the parent root node as the center and the graph radius r2 of the visualization relationship graph as the radius, the parent visualization relationship graph is redrawn and generated on the relationship graph drawing canvas.

2. The method as described in claim 1, characterized in that, S101, the steps of defining the node data structure of the nodes in the relationship graph, defining the canvas structure and initializing the relationship graph according to the canvas structure to draw the canvas, and determining the center coordinates of the graph include: Based on the canvas structure, the node coordinates of the parent root node are initialized, the canvas width of the relation graph drawing canvas is L, and the canvas height is H; The coordinates of the center of the map are obtained as (L / 2, H / 2) based on the canvas width L and the canvas height H.

3. The method as described in claim 2, characterized in that, S102, the step of constructing nodes according to the node data structure and determining the connection relationships between nodes, includes: Obtain the node ID, node name, node level, and number of nodes for each node; The connection relationships between the nodes are determined based on the node ID, node level, and number of nodes.

4. The method as described in claim 3, characterized in that, The step of determining the connection relationship between the nodes based on the node ID, node level, and number of nodes is as follows: Based on the node level of the node, obtain and determine the node ID of the node, the node ID of the parent root node corresponding to the node, the node ID of the child node corresponding to the node, and the number of nodes. Based on the node ID of the node, the node ID of the corresponding subordinate node and the number of nodes, determine the connection relationship between the node and the corresponding subordinate node; in, The connection relationships are an array; The number of subordinate nodes corresponding to the root node is n, and the connection relationship between the root node and its corresponding subordinate nodes is NJnode_Links[n]. NJnode_Links[n] = {the node ID of the root node, and an array of node IDs of the child nodes, Nroot[n]}; The node ID array Nroot[n] of the lower-level nodes stores the node IDs (ids) of all the lower-level nodes corresponding to the root node.

5. The method as described in claim 1, characterized in that, The step of determining the node coordinates of the subordinate nodes corresponding to the central root node based on ECharts, taking one of the secondary nodes corresponding to the primary node as the central root node, and determining the node coordinates of the subordinate nodes corresponding to the central root node according to the connection relationship between the secondary node and the corresponding subordinate node, the node coordinates of the central root node, and the graph radius r1 of the central visualization relationship graph, is as follows: Based on echarts, one of the second-level nodes corresponding to the first-level node is taken as the central root node, and the node coordinates of the central root node are determined to be (L / 2, H / 2) according to the center coordinates of the graph (L / 2, H / 2). Based on the node coordinates (L / 2, H / 2) of the central root node, the node number id of the second-level node, the connection relationship between the second-level node and the corresponding lower-level node, and the graph radius r1 of the central visualization relationship graph, the angle formed by the line connecting the root node and the lower-level node with the vertical axis in the relationship graph drawing canvas is determined to be θ, and the node coordinates of the lower-level node are (w, z). in, w = L / 2 + r1 * sin(θ); z = H / 2 + r1 * cos(θ).

6. The method as described in claim 1, characterized in that, After drawing and generating a visual relationship graph in the relationship graph drawing canvas, a node state rollback operation is also included, specifically: After completing the node switching operation, a rollback is performed based on the previous parent root node, the central root node, and the connection relationships between the parent root node and the corresponding lower-level node, as well as the connection relationships between the central root node and the corresponding lower-level node, to restore the parent visualization relationship graph and the central visualization relationship graph.

7. An apparatus for implementing the relational graph drawing method based on ECharts as described in claim 1, characterized in that, The device includes a node analysis and definition module, a node construction module, and a graph generation module; in, The node analysis and definition module is used to define the node data structure of nodes in the relationship graph, define the canvas structure and initialize the relationship graph according to the canvas structure to draw the canvas, and determine the center coordinates of the graph. The node construction module is used to construct nodes according to the node data structure and determine the connection relationships between the nodes; The graph generation module is used to draw and generate a visual relationship graph based on echarts, according to the center coordinates of the graph and the connection relationship between the nodes.

Images