Data link visualization method, device and equipment based on Echarts

Abstract

The invention provides an Echarts-based data link visualization method, device and equipment, and the method comprises the steps: receiving an interaction operation which acts on a display interface and is used for setting the equipment and a terminal, responding to the interaction operation, obtaining link data and first coordinate template data for the equipment and the terminal, and storing the link data and the first coordinate template data in a database; the link data comprises nodes, a node connection relation, node data processing time delay and inter-node data transmission time delay, the first coordinate template data comprises position coordinates of the nodes, assigning the positions of the nodes according to the node connection relation and the first coordinate template data based on Echarts to obtain data links corresponding to the equipment and the terminal, and sending the data links to the terminal. The node position distribution is automatically determined, the visualization processing process is simplified, in the data link, visualization display is performed according to the node data processing time delay and the inter-node data transmission time delay, the state of each node on the data link is visually monitored, the performance bottleneck and potential optimization points are rapidly identified, and the troubleshooting efficiency is improved.

Description

Technical Field

[0001] The present application relates to the technical field of Internet of Things, and in particular to a data link visualization method, device and equipment based on Echarts. Background Art

[0002] Data visualization is the process of using graphical means to represent data. By converting data into visual elements such as charts, graphs, and maps, the information hidden in the data can be presented in a more intuitive way. Data visualization can help people understand and analyze complex data sets more intuitively. Data visualization has a wide range of applications in various fields.

[0003] In the field of Internet of Things, the data link from device to terminal for data transmission and processing is relatively long. The device is used to collect data and / or perform preliminary processing on the data. The data is then processed by multiple layers of algorithms, and the terminal applies the processed data. The data link includes device nodes, terminal nodes and algorithm nodes at each level. Therefore, it is difficult to track the processing delay of each node on the entire data link and the transmission delay between nodes. Therefore, there is an urgent need for a visualization solution that can intuitively monitor the status of nodes on the data link. Summary of the invention

[0004] The present application provides a data link visualization method, device and equipment based on Echarts, so as to solve the problem that the node status on the data link cannot be intuitively monitored.

[0005] In a first aspect, the present application provides a data link visualization method based on Echarts, comprising:

[0006] Receiving interactive operations for setting devices and terminals acting on the display interface;

[0007] In response to the interactive operation, link data and first coordinate template data for the device and the terminal are obtained, the link data includes nodes, node connection relationships, node data processing delays, and inter-node data transmission delays, the nodes include device nodes, terminal nodes, and algorithm nodes, and the first coordinate template data includes the location coordinates of the nodes;

[0008] Based on Echarts, the node position is assigned according to the node connection relationship and the first coordinate template data to obtain the data link corresponding to the device and the terminal;

[0009] In the data link, visualization is performed based on the node data processing delay and the data transmission delay between nodes.

[0010] In a possible implementation, based on Echarts, the position of the node is assigned according to the node connection relationship and the first coordinate template data to obtain the data link corresponding to the device and the terminal, including: traversing each node and performing the following operations to obtain the data link corresponding to the device and the terminal: determining whether the first coordinate template data contains the position coordinates of the node; if the first coordinate template data does not contain the position coordinates of the node, displaying the node around the corresponding parent node based on the force relationship layout in Echarts; if the first coordinate template data contains the position coordinates of the node, displaying the node at a specified position in the view interface based on Echarts.

[0011] In a possible implementation, the data link visualization method based on Echarts further includes: if the first coordinate template data does not include the position coordinates of the node, the view interface of the node is enlarged and prompted in an animated form.

[0012] In a possible implementation, the data link visualization method based on Echarts further includes: responding to detecting a position drag command for a target node in a data link, updating the position of the target node displayed in the view interface following the position drag command, and updating the position coordinates after dragging to the first coordinate template data to obtain the second coordinate template data.

[0013] In a possible implementation, the data link visualization method based on Echarts further includes: performing a union process based on the first coordinate template data and the second coordinate template data to obtain third coordinate template data, and submitting the third coordinate template data to a database.

[0014] In a possible implementation, the Echarts-based data link visualization method further includes: in response to detecting that the position of the last node without position coordinates contained in the data link is solidified, resetting the view interface size of the data link.

[0015] In a possible implementation, visualization is performed based on node data processing delay and inter-node data transmission delay, including: based on a node data processing delay threshold and an inter-node data transmission delay threshold, visualization is performed that differentiates between node data processing delay and inter-node data transmission delay.

[0016] In a possible implementation, based on a node data processing delay threshold and an inter-node data transmission delay threshold, a visual display is distinguished according to the node data processing delay and the inter-node data transmission delay, including: if the node data processing delay of the node is a null value, the node is identified by a first color on the view interface; if the node data processing delay of the node is less than or equal to the node data processing delay threshold, the node is identified by a second color on the view interface, and the node data processing delay corresponding to the node is visually displayed; if the node data processing delay of the node is greater than the node data processing delay threshold, the node is identified by a third color on the view interface, and the node data processing delay corresponding to the node is visually displayed; if the inter-node data transmission delay on a data link is less than or equal to the inter-node data transmission delay threshold, the link is identified by a fourth color on the view interface, and the inter-node data processing delay is visually displayed; if the inter-node data transmission delay on a data link is greater than the inter-node data transmission delay threshold, the link is identified by a fifth color on the view interface, and the inter-node data processing delay is visually displayed.

[0017] In a possible implementation, the data link visualization method based on Echarts includes: in the view interface, highlighting abnormal nodes whose node data processing delay is greater than the node data processing delay threshold; and / or, in the view interface, highlighting abnormal links whose inter-node data transmission delay is greater than the inter-node data transmission delay threshold.

[0018] In a possible implementation, the Echarts-based data link visualization method includes: in response to detecting a query instruction for a target node in a data link on a display interface, obtaining the position coordinates of the target node, and focusing on displaying the target node on a view interface.

[0019] In a possible implementation, obtaining link data for the device and the terminal includes: obtaining link data for the device and the terminal based on the WebSocket protocol.

[0020] In a second aspect, the present application provides a data link visualization device based on Echarts, comprising:

[0021] A receiving module, used for receiving an interactive operation for setting a device and a terminal on a display interface;

[0022] An acquisition module, used to respond to interactive operations, acquire link data for devices and terminals and first coordinate template data, the link data includes nodes, node connection relationships, node data processing delays and inter-node data transmission delays, the nodes include device nodes, terminal nodes and algorithm nodes, and the first coordinate template data includes the location coordinates of the nodes;

[0023] The processing module is used to assign the position of the node based on Echarts according to the node connection relationship and the first coordinate template data, and obtain the data link corresponding to the device and the terminal;

[0024] The visualization module is used to perform visualization in the data link based on the node data processing delay and the data transmission delay between nodes.

[0025] In a third aspect, the present application provides an electronic device, comprising: a processor, and a memory communicatively connected to the processor;

[0026] Memory for storing computer-executable instructions;

[0027] A processor is used to execute computer-executable instructions stored in the memory, so that the processor executes the first aspect and / or various possible implementations of the first aspect as described above.

[0028] In a fourth aspect, the present application provides a computer-readable storage medium, in which computer-executable instructions are stored. When the computer-executable instructions are executed, they are used to implement the above first aspect and / or various possible implementations of the first aspect.

[0029] In a fifth aspect, the present application provides a computer program product, including a computer program, which, when executed, implements the above first aspect and / or various possible implementations of the first aspect.

[0030] The data link visualization method, device and equipment based on Echarts provided in the present application, by receiving the interactive operation for setting the device and the terminal acting on the display interface, responding to the interactive operation, obtaining the link data for the device and the terminal and the first coordinate template data, the link data includes nodes, node connection relationships, node data processing delays and inter-node data transmission delays, the nodes include device nodes, terminal nodes and algorithm nodes, the first coordinate template data includes the position coordinates of the nodes, based on Echarts, according to the node connection relationship and the first coordinate template data, the node position is assigned, and the data link corresponding to the device and the terminal is obtained, and in the data link, the node data processing delay and the inter-node data transmission delay are visualized. In this process, the node position is assigned according to the node connection relationship and the first coordinate template data, the node position distribution is automatically determined, and the visualization process is simplified. Through the visualization display, the processing delay of each node and the data transmission delay between nodes can be intuitively monitored, which helps to quickly identify performance bottlenecks and potential optimization points, and improve the efficiency of fault diagnosis. In addition, through the visualization display, users can clearly grasp the operating status of upstream and downstream nodes, which is convenient for troubleshooting and further improves user experience and satisfaction. BRIEF DESCRIPTION OF THE DRAWINGS

[0031] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.

[0032] Figure 1 A schematic diagram of a scenario of a data link visualization method based on Echarts provided in an embodiment of the present application;

[0033] Figure 2 A flowchart of a data link visualization method based on Echarts provided in one embodiment of the present application;

[0034] Figure 3 A visualization interface of complete location coordinates provided in an embodiment of the present application;

[0035] Figure 4 A visual view interface for highlighting abnormal nodes and abnormal links provided in an embodiment of the present application;

[0036] Figure 5 A flowchart of a data link visualization method based on Echarts provided in another embodiment of the present application;

[0037] Figure 6 A visual view interface for clearing node and sub-node coordinates provided in an embodiment of the present application;

[0038] Figure 7 A schematic diagram of the structure of a data link visualization device based on Echarts provided in one embodiment of the present application;

[0039] Figure 8 A schematic diagram of the structure of an electronic device provided in one embodiment of the present application.

[0040] The above drawings have shown clear embodiments of the present application, which will be described in more detail later. These drawings and text descriptions are not intended to limit the scope of the present application in any way, but to illustrate the concept of the present application to those skilled in the art by referring to specific embodiments. DETAILED DESCRIPTION

[0041] Exemplary embodiments will be described in detail herein, examples of which are shown in the accompanying drawings. When the following description refers to the drawings, the same numbers in different drawings represent the same or similar elements unless otherwise indicated. The implementations described in the following exemplary embodiments do not represent all implementations consistent with the present application. Instead, they are merely examples of devices and methods consistent with some aspects of the present application as detailed in the appended claims.

[0042] In order to solve the problem that the node status on the data link cannot be monitored intuitively, the present application proposes a data link visualization method, device and equipment based on Echarts. By obtaining the link data and the first coordinate template data for the device and the terminal, based on Echarts, according to the node connection relationship and the first coordinate template data, the position of the node is assigned to obtain the data link corresponding to the device and the terminal, and Echarts is used to realize the intuitive display of the nodes and the connection relationship between the nodes. The data link is visualized according to the node data processing delay and the data transmission delay between the nodes, and the node status is further intuitively displayed, which helps to quickly identify performance bottlenecks and potential optimization points, and improve the efficiency of fault diagnosis. In addition, through the visual display, the user can clearly understand the operating status of the upstream and downstream nodes, further improving the user experience and satisfaction.

[0043] The technical solution of the present application and how the technical solution of the present application solves the above-mentioned technical problems are described in detail below with specific embodiments. The following specific embodiments can be combined with each other, and the same or similar concepts or processes may not be repeated in some embodiments. The embodiments of the present application will be described below in conjunction with the accompanying drawings.

[0044] Figure 1 A schematic diagram of a scenario of a data link visualization method based on Echarts provided in an embodiment of the present application. Figure 1 As shown, the application scenario includes: device node 11, terminal node 14, cloud server node 12 and Web server node 13. The device node 11 is used to collect data and send the collected data to the cloud server node 12. Different levels and types of algorithms are deployed on the cloud server node 12, and the algorithm is used to process the data. The cloud server node 12 sends the data processed by the algorithm to the terminal node 14, and the terminal node 14 applies the data. In addition, the cloud server node 12 also stores the link data of the entire process from data collection, data processing to data sending terminal. The Web server node 13 obtains the link data from the cloud server node 12 and performs a visual display of the data link, which is convenient for relevant personnel to intuitively observe the data link status of the entire process.

[0045] It should be noted that the device node 11 refers to a hardware device for collecting data, which can be a multi-level device. The first-level device node collects data, for example, roadside equipment such as cameras and radars, smart driving vehicles, or hardware devices installed on mobile terminals such as vehicles, drones, and handheld devices. The second-level device node performs preliminary calculations on the data collected by the first-level device node, for example, an edge computing unit (edge ​​MCU). The terminal node 14 includes other mobile terminals such as vehicles. The types of device nodes 11 and terminal nodes 14 are not limited here. It should also be noted that the server is a server cluster or other computing device with a certain computing power.

[0046] Combine the following Figure 1 For application scenarios, refer to Figure 2 To illustrate the data link visualization method based on Echarts, the data link visualization method based on Echarts is Figure 1 It should be noted that the above application scenarios are only shown to facilitate understanding of the spirit and principle of the present application, and the implementation of the present application is not subject to Figure 1 Limitations of the application scenario shown.

[0047] Figure 2 A flow chart of a data link visualization method based on Echarts provided in an embodiment of the present application is shown in FIG. Figure 2 As shown, the data link visualization method includes:

[0048] S201: Receive an interactive operation on a display interface for setting a device and a terminal.

[0049] For example, a data link visualization client is deployed on a Web server, and the user operates on the display interface of the client, for example, enters or selects attribute information of devices and terminals in a search box, the attribute information includes name, code, description information and other unique identifiers, clicks confirm, and generates a search request for devices and terminals, which is received by the Web server.

[0050] S202. In response to the interactive operation, link data and first coordinate template data for the device and the terminal are obtained. The link data includes nodes, node connection relationships, node data processing delays, and data transmission delays between nodes. The nodes include device nodes, terminal nodes, and algorithm nodes. The first coordinate template data includes the location coordinates of the nodes.

[0051] For example, the Web server node 14 establishes an HTTP connection with the cloud server node 12, and obtains link data and first coordinate template data for the device and terminal from the cloud server node 12 through the HTTP connection. It can be understood that all link data on the link can be located on the cloud server 12 node based on the attribute information of the device and terminal.

[0052] Among them, device nodes and terminal nodes are physical nodes, and algorithm nodes are logical nodes. For example, one algorithm is regarded as one node, or, according to the algorithm level, one layer of algorithm is regarded as one node. Algorithm nodes include prediction algorithms, fusion algorithms, perception algorithms, etc., which are not limited here.

[0053] Optionally, the Web server node 14 establishes a TCP / IP connection with the cloud server node 12, and obtains link data and first coordinate template data for the device and the terminal from the cloud server node 12 through the TCP / IP connection.

[0054] Optionally, the Web server node 14 and the cloud server node 12 may also establish a Message Queuing Telemetry Transport (MQTT) connection, and obtain link data and first coordinate template data for devices and terminals from the cloud server 12 node by publishing / subscribing to topics.

[0055] Optionally, the Web server node 14 and the cloud server node 12 may also establish a WebSocket connection, and obtain link data and first coordinate template data for the device and the terminal from the cloud server node 12 through the WebSocket connection.

[0056] It should be noted that the embodiments of the present application do not limit the acquisition method, and the implementation methods of the present application are not limited to the methods listed above.

[0057] S203 . Based on Echarts, assign values ​​to the positions of the nodes according to the node connection relationship and the first coordinate template data, and obtain the data link corresponding to the device and the terminal.

[0058] ECharts is an open source visualization library based on JavaScript, which is used to create rich interactive data visualization charts. The force layout relationship diagram is a chart type in ECharts, which can be used to show the relationship between nodes. This application uses the force layout relationship diagram to visualize the data link.

[0059] For example, the first coordinate template data includes the position coordinates of many nodes such as node a, node b, node c, node d, etc. The position coordinates are, for example: a: (x1, y1), b: (x2, y3), c: (x3, y3), ..., the position coordinates correspond to a fixed position on the view interface, and the specific position of each node on the view interface can be determined according to the position coordinates, that is, the position of the node is assigned, and the position coordinates are processed into a data format supported by ECharts to display the node position and connection relationship on the view interface.

[0060] S204: In the data link, a visualization is performed based on the node data processing delay and the inter-node data transmission delay.

[0061] For example, the data processing delay of each node and the data transmission delay between each node are directly displayed in the view interface, or, according to preset rules, the node data processing delay and the data transmission delay between nodes are displayed separately, for example, the node data processing delay threshold is set to 10ms and the inter-node data transmission delay threshold is set to 5ms, when the node data processing delay is greater than 10ms, the node name is bolded or enlarged, when the node data processing delay is less than or equal to 10ms, the node name is displayed in normal size, when the inter-node data transmission delay is greater than 5ms, the node connection line is displayed in bold, when the inter-node data transmission delay is less than or equal to 5ms, the node connection line is displayed normally, and so on, no specific limitation is made here.

[0062] In the embodiment of the present application, Echarts is used to realize an intuitive display of nodes and the connection relationships between nodes, and the data processing delay of each node and the data transmission delay between nodes are visualized, so as to further realize an intuitive display of the node status, which helps to quickly identify performance bottlenecks and potential optimization points, and improve the efficiency of fault diagnosis. In addition, through the visual display, the user can clearly understand the operating status of the upstream and downstream nodes, and further improve the user experience and satisfaction.

[0063] In some embodiments, based on Echarts, according to the node connection relationship and the first coordinate template data, the position of the node is assigned a value to obtain the data link corresponding to the device and the terminal, including: traversing each node and performing the following operations to obtain the data link corresponding to the device and the terminal:

[0064] Step 1.1: Determine whether the first coordinate template data contains the location coordinates of the node.

[0065] For example, an algorithm is used to search whether there are position coordinates of a node in the first coordinate template data, or an interface is called to search whether there are position coordinates of a node in the first coordinate template data, and so on.

[0066] Step 1.2: If the first coordinate template data does not contain the position coordinates of the node, the node is displayed around the corresponding parent node based on the force relationship layout in Echarts.

[0067] For example, when the parent nodes of c1 node, c2 node, and c3 node are all b node, when it is determined that c1 node, c2 node, and c3 node are not in the first coordinate template data, c1 node, c2 node, and c3 node are displayed around b node according to the configuration, and the position is not fixed. A default or preset position can be used as the initial position of the node. For example, according to the default force relationship layout algorithm (child nodes are laid out around parent nodes), c1 node, c2 node, and c3 node are displayed around b node. It can also be agreed that c1 node, c2 node, and c3 node are displayed around b node at a fixed distance. Optionally, c1 node, c2 node, and c3 node can also be identified with a color different from that of b node.

[0068] Step 1.3: If the first coordinate template data contains the position coordinates of the node, the node is displayed at the specified position of the view interface based on Echarts.

[0069] For example, when the parent nodes of c1 node, c2 node and c3 node are all b node, when c1 node, c2 node and c3 node are determined in the first coordinate template data, c1 node, c2 node and c3 node are displayed at the specified position around b node with fixed position coordinates.

[0070] It should be noted that when displaying the node position on the view interface, the nodes in the data link can further be classified and displayed according to their business meanings. Different categories represent different business levels. Nodes at different levels can also be distinguished and identified to achieve the purpose of multi-level display and enhance the user's visual effect.

[0071] like Figure 3 As shown in the visualization view interface of the complete location coordinates provided in an embodiment of the present application, the nodes are displayed in multiple levels, including single perception nodes, local fusion nodes, global fusion nodes, prediction algorithm nodes and terminals. The terminals include human-machine interfaces (Human-Machine Interface, HMI), on-board units (On-Board Unit, OBU) calculation time-consuming nodes and vehicle control units (VCU, VCU) nodes. Each node has a specified location coordinate on the view interface, and the visualization view interface clearly displays the connection relationship between nodes.

[0072] In the embodiment of the present application, the force layout relationship diagram of Echarts is used to display the node positions to improve the visualization effect, and the first coordinate template data is used to automatically determine the position distribution of the nodes, simplify the visualization processing process, and improve the visualization efficiency.

[0073] In actual applications, there are often many nodes in a data link. By default, the terminal node with the largest number of nodes is hidden, and the child nodes of the selected node are displayed or hidden in conjunction with the node click event, so as to achieve node grading of the data link and hierarchical display and hiding of nodes at each level, so as to meet the visual custom layout and display of a large number of nodes at multiple levels.

[0074] In some embodiments, the data link visualization method based on Echarts further includes: if the first coordinate template data does not include the position coordinates of the node, the view interface of the node is enlarged and prompted in the form of animation.

[0075] For example, the enlarged view interface can be implemented by an algorithm with a zoom function to ensure that the node area occupies a larger part of the view interface, and the animation form can include flashing, color change, border highlighting or other visual effects to make the node more conspicuous on the view interface. In addition, the duration and frequency of the animation prompt can be adjusted according to user settings or system defaults.

[0076] In the embodiment of the present application, the view interface of the node is enlarged and an animation prompt is used to enhance the visualization effect, thereby improving the overall visual effect of the view interface. In addition, by enlarging and animating the prompt, the node is made more conspicuous on the view interface, and the user can see the area where the node is located more clearly, further improving the user experience.

[0077] Different users have different visual experiences of the view interface, and the position of the node can be dragged according to the user's habits to meet the user experience. Therefore, based on the above embodiment, in one achievable method, the data link visualization method based on Echarts also includes: responding to the detection of a position drag command for the target node in the data link, following the position drag command to update the position of the target node displayed in the view interface, and updating the dragged position coordinates to the first coordinate template data to obtain the second coordinate template data.

[0078] For example, the drag command may be issued via a mouse, a touch pad, or other input devices, and the like. Figure 1When the Web server node 13 detects the drag command issued to the target node in the data link, it immediately responds to the drag command and updates the display position of the target node in the view interface in real time, that is, the target node will move along the user's drag path to ensure that the user can intuitively see the current position of the node. After the user completes the drag operation, the Web server node 13 obtains the new position coordinates of the target node (position coordinates after dragging), which are usually expressed in the form of two-dimensional coordinates (x, y), reflecting the specific position of the target node in the view interface.

[0079] It can be understood that the target node can be a node with position coordinates (the node is displayed at a specified position in the view interface) or a node without position coordinates (the node is displayed around the corresponding parent node, the node's view interface is enlarged and prompted in animation). If a node without position coordinates is dragged, the position of the node without position coordinates can be solidified, and the position coordinates of the node can be added to the first coordinate template data; if a node with position coordinates is dragged, the position coordinates of the node already exist in the first coordinate template data, and it is only necessary to update the position coordinates corresponding to the node in the first coordinate template data to the position coordinates after dragging.

[0080] The first coordinate template data includes the position coordinates of each node in the initial state, while the second coordinate template data is the position coordinate information generated for the node of the current latest data link, reflecting the state after the node position is updated.

[0081] It should be noted that dragging a node only moves the position of the current node by default. If necessary, you can also choose to reset the child nodes of the current node so that all child nodes lose their position coordinates and are displayed as the default force relationship layout (the default force relationship layout means that the child nodes are arranged around the parent node, which requires more nodes to be laid out twice). This makes it easier for the child nodes to follow when dragging the parent node.

[0082] The embodiment of the present application, by exploring the drawing principle of Echarts, supports free dragging and real-time saving of node positions in the view interface. The force layout relationship diagram of Echarts provides technical support for the node position dragging function, realizes the dragging and saving of node positions under different operating states, and improves the user interaction experience and operation flexibility. In addition, by dragging nodes, it further satisfies the visual custom layout and display of a large number of nodes at multiple levels.

[0083] Furthermore, in some embodiments, the data link visualization method based on Echarts further includes: performing a union process based on the first coordinate template data and the second coordinate template data to obtain third coordinate template data, and submitting the third coordinate template data to a database.

[0084] Still refer to Figure 1The Web server node 13 compares the cached data of the second coordinate template data and the first coordinate template data to generate a union, obtains the third coordinate template data, and submits it to the cloud server node 12, or submits it to other database nodes, and the cloud server node 12 then obtains the third coordinate template data from other database nodes.

[0085] Based on the union processing of the first coordinate template data and the second coordinate template data, for example, for the same node in the first coordinate template data and the second coordinate template data, the position coordinates of the node in the second coordinate template data are stored in the third coordinate template data to ensure that the third coordinate template data is the latest and the uniqueness of the position coordinates of the same node is ensured; for other nodes, the position coordinates of the node in the second coordinate template data are directly added to the first coordinate template data.

[0086] Optionally, in actual applications, the cloud server node 12 can also perform a union processing operation. Specifically, the Web server node 13 sends the second coordinate template data to the cloud server node 12. After receiving the second coordinate template data, the cloud server node 12 performs a union processing on the first coordinate template data and the second coordinate template data to obtain the third coordinate template data, and stores it in the database of the cloud server node 12, or stores it in other database nodes. The cloud server node 12 then obtains the third coordinate template data from other database nodes for use in subsequent operations. The third coordinate template data can be used to save the current view layout, generate a new view interface, or perform further data processing.

[0087] In the embodiment of the present application, the position coordinates of each node in the initial state and the updated state are integrated through union processing to ensure that the position coordinate information of all nodes is completely recorded, thereby avoiding data loss or inconsistency problems, and submitting the third coordinate template data to the database for storage, which is convenient for subsequent query, analysis and processing, thereby improving the maintainability and scalability of the system.

[0088] In some embodiments, the Echarts-based data link visualization method further includes: in response to detecting that the position of the last node without position coordinates contained in the data link is solidified, resetting the view interface size of the data link.

[0089] It can be understood that when there are nodes without position coordinates on the view interface, the view interface of the node is enlarged and prompted in the form of animation. On this basis, when there are no nodes without position coordinates on the view interface, that is, after the position of the last node without position coordinates is solidified, the view interface size of the data link is reset.

[0090] For example, when the Web server node 13 detects that the user issues a position fixation instruction to the last node without position coordinates in the data link, it immediately responds to the instruction and assigns specific two-dimensional coordinates (x, y) to the last node without position coordinates according to the user's instruction or preset rules. The coordinates can be determined based on user input, automatic calculation, dragging or other methods. For example, according to the position coordinates of all nodes in the data link, the optimal size required for the view interface is calculated. Specifically, the width and height of the view interface are determined by considering factors such as the distribution range, spacing and layout of the nodes, and the view interface size is reset to the calculated optimal size to ensure that all nodes can be fully displayed in the view interface, and the interface layout is reasonable and beautiful, so that users can intuitively see the latest positions and layouts of all nodes.

[0091] The embodiments of the present application reduce the user's manual operations, improve the operation efficiency, reset the view interface size, avoid the display abnormality caused by view jump scaling, and enhance the aesthetics and user experience of the view interface; and can dynamically adjust the view interface size according to the change of node position, enhance the flexibility and adaptability of the system, and is suitable for node data links of different scales and layouts.

[0092] In a possible implementation, the Echarts-based data link visualization method includes: in response to detecting a query instruction for a target node in a data link on a display interface, obtaining the position coordinates of the target node, and focusing on displaying the target node on a view interface.

[0093] For example, the query command may be issued via a mouse, a touch pad or other input devices, and still refer to Figure 1 When the Web server node 13 detects a query instruction issued by the user on the display interface for the target node in the data link, it immediately responds to the instruction and obtains the attribute information of the target node according to the query instruction, such as the node name, code, description information and other unique identifiers. According to the attribute information of the target node, the position coordinates of the target node are searched in the local second coordinate template data or memory. For example, the center position of the view interface is adjusted to the coordinate position of the target node, so that the target node is located in the center or prominent position of the view interface. Further, the zoom ratio of the view interface is adjusted as needed to ensure that the target node is clearly visible. If the target node is located at the edge of the view interface or exceeds the current view range, the view will be automatically zoomed to include the target node.

[0094] Optionally, in order to further highlight the target node, the target node may be highlighted, for example, by changing the color of the node, adding a border, or using an animation effect, so that the user can quickly identify the location of the target node.

[0095] The embodiment of the present application provides intuitive visual feedback by focusing on or highlighting the target node, thereby improving the user's operating experience and satisfaction; automatically focusing on the target node in the view interface according to the user's query command, thereby quickly locating the target node and enhancing the flexibility and adaptability of the system.

[0096] In some embodiments, visualization is performed based on node data processing delay and inter-node data transmission delay, including: based on node data processing delay threshold and inter-node data transmission delay threshold, visualization is performed based on differentiation of node data processing delay and inter-node data transmission delay.

[0097] Among them, the node data processing delay threshold and the inter-node data transmission delay threshold can be set in the client display interface of the Web server, or in the algorithm on the cloud server. The node data processing delay threshold and the inter-node data transmission delay threshold can be configured according to system performance requirements and user needs.

[0098] For example, the node data processing delay threshold and the inter-node data transmission delay threshold are set on the client display interface, for example, the node data processing delay threshold is 100 milliseconds, and the inter-node data transmission delay threshold is 50 milliseconds. The acquired delay data is analyzed, and the actual delay is compared with the set delay threshold. Specifically, for each node, its data processing delay is compared with 100 milliseconds, and the inter-node data transmission delay is compared with 50 milliseconds. Visual display data is generated according to the analysis results, and a visual view interface is drawn based on the visual display data.

[0099] Correspondingly, generating visual display data according to the analysis results includes: generating different color codes or icons for node data processing delays. For example, nodes with node data processing delays exceeding 100 milliseconds are represented by red, and nodes with node data processing delays within 100 milliseconds are represented by green. For data transmission delays between nodes, generating different connection (link) styles or colors. For example, connections (links) with data transmission delays between nodes exceeding 50 milliseconds are represented by red dotted lines, and connections (links) with data transmission delays between nodes within 50 milliseconds are represented by green solid lines, and so on. Drawing a visual view interface based on visual display data includes: color coding or style setting of nodes and connections (links) according to the generated visual display data.

[0100] Optionally, the client updates the link data on the visualization interface in real time to ensure that the displayed data is up to date, helping users monitor the performance of each node in real time. At the same time, users can interact with the visualization, for example, click on a node to view detailed latency data, adjust latency thresholds, etc., which improves the user's interactive experience and satisfaction.

[0101] The embodiment of the present application helps users quickly identify latency problems by intuitively displaying latency information. Through differentiated visual displays, it helps users quickly locate and troubleshoot faults, thereby improving operation and maintenance efficiency.

[0102] Furthermore, in some embodiments, based on the node data processing delay threshold and the inter-node data transmission delay threshold, a visual display distinguishing between the node data processing delay and the inter-node data transmission delay includes:

[0103] In the first case, if the node data processing delay of the node is a null value, the node is identified by the first color on the view interface.

[0104] For example, if the node data processing delay of a node is a null value, the node is considered to be unenabled or has no data, for example, the node is marked in yellow.

[0105] In the second case, if the node data processing delay of the node is less than or equal to the node data processing delay threshold, the node is identified by the second color on the view interface, and the node data processing delay corresponding to the node is visually displayed.

[0106] For example, if the node data processing delay of a node is less than or equal to the node data processing delay threshold, the node is considered normal. For example, the node is marked in green, and the node data processing delay corresponding to the node is displayed around the node, such as in the upper area, lower area, left area, right area of ​​the node, or superimposed on the node, etc. The node data processing delay can also be displayed in a green font. The embodiments of the present application do not impose specific restrictions on this.

[0107] In the third case, if the node data processing delay of the node is greater than the node data processing delay threshold, the node is identified by a third color on the view interface, and the node data processing delay corresponding to the node is displayed visually.

[0108] For example, if the node data processing delay of a node is greater than the node data processing delay threshold, the node is deemed abnormal. For example, the node is marked in red, and the node data processing delay corresponding to the node is displayed around the node, such as in the upper area, lower area, left area, right area of ​​the node, or superimposed on the node, etc. The node data processing delay can also be displayed in a red font, and the embodiments of the present application do not impose specific restrictions on this.

[0109] In the fourth case, if the inter-node data transmission delay on the data link is less than or equal to the inter-node data transmission delay threshold, the fourth color is used to identify the link on the view interface, and the inter-node data processing delay is visually displayed.

[0110] For example, if the data transmission delay between nodes on a data link is less than or equal to the data transmission delay threshold between nodes, the link is considered normal. For example, the link is marked in green, and the data transmission delay between nodes corresponding to the link is displayed around the link, such as in the upper area, lower area, left area, right area of ​​the link, or superimposed on the link, etc. The data transmission delay between nodes can also be displayed in green font, and the embodiments of the present application do not impose specific restrictions on this.

[0111] In the fifth case, if the inter-node data transmission delay on the data link is greater than the inter-node data transmission delay threshold, the fifth color is used to identify the link on the view interface, and the inter-node data processing delay is visually displayed.

[0112] For example, if the data transmission delay between nodes on a data link is greater than the data transmission delay threshold between nodes, the link is deemed abnormal. For example, the link is marked in gray, and the data transmission delay between nodes corresponding to the link is displayed around the link, such as in the upper area, lower area, left area, right area of ​​the link, or superimposed on the link, etc. The data transmission delay between nodes can also be displayed in red font, and the embodiments of the present application do not impose specific restrictions on this.

[0113] Still refer to Figure 3 ,like Figure 3 As shown in the visualization view interface of the complete location coordinates provided in an embodiment of the present application, the data transmission delay between nodes and the node data processing delay are respectively displayed in the upper area of ​​the node and the link. When the node data processing delay is a null value, the node name is marked with an × symbol. When the node data processing delay is less than or equal to the node data processing delay threshold, the node name is marked with a check mark. Abnormal links are marked in bold gray, and normal links are marked in normal gray.

[0114] The embodiment of the present application helps users quickly identify latency problems by intuitively displaying latency information. Through differentiated visual displays, it helps users quickly locate and troubleshoot faults, thereby improving operation and maintenance efficiency.

[0115] Based on the above embodiments, in some embodiments, in the view interface, abnormal nodes whose node data processing delay is greater than the node data processing delay threshold are highlighted; and / or, in the view interface, abnormal links whose inter-node data transmission delay is greater than the inter-node data transmission delay threshold are highlighted.

[0116] For example, Figure 4As shown in the visualization view interface for highlighting abnormal nodes and abnormal links provided in an embodiment of the present application, the single-sensing MEC_N_3_5 node has no data yet, and the node is identified by an origin with an ×. The node data processing delay of the local fusion algorithm_2 node is 1668, which is greater than the node data processing delay threshold. The local fusion algorithm_2 node is judged to be abnormal, so 1668 is displayed in bold, and the local fusion algorithm_2 node is highlighted. In addition, the data transmission delay between the single-sensing MEC_N_3_5 node and the local fusion algorithm_2 node is 269, which is greater than the data transmission delay threshold between nodes. The link between the single-sensing MEC_N_3_5 node and the local fusion algorithm_2 node is judged to be abnormal, and the abnormal link is highlighted.

[0117] The embodiments of the present application highlight abnormal nodes or links on the data link to help users quickly locate and troubleshoot faults and improve operation and maintenance efficiency.

[0118] In some embodiments, obtaining link data for a device and a terminal includes: obtaining link data for a device and a terminal based on a WebSocket protocol.

[0119] WebSocket is a protocol for full-duplex communication over a single TCP connection. It is used for real-time data exchange between browsers and servers and is suitable for application scenarios that require frequent data updates.

[0120] In the embodiment of the present application, a WebSocket persistent connection is established between the Web server node 13 and the cloud server node 12, and link data including nodes, node connection relationships, node data processing delays, and inter-node data transmission delays are obtained from the cloud server node 12. It can be understood that the link data on the cloud server node 12 changes dynamically according to the actual situation. Therefore, the link data of the visual interface on the Web server node 13 can be updated in real time through the WebSocket protocol.

[0121] In the embodiment of the present application, link data for devices and terminals are obtained through the WebSocket protocol. The data transmission is highly real-time and reliable, ensuring that the displayed link data is the latest, helping users to monitor the performance of each node in real time. In addition, the WebSocket connection is persistent and there is no need to re-establish the connection each time. Therefore, the latency is low, reducing the load on each server and saving bandwidth.

[0122] Next, the data link visualization method based on Echarts is further described through a specific embodiment. Figure 5 A flow chart of a data link visualization method based on Echarts provided in another embodiment of the present application is shown in FIG. Figure 5 As shown, the data link visualization method includes the following steps:

[0123] S501. Based on the WebSocket protocol, obtain link data and corresponding coordinate template data.

[0124] The web server node 14 establishes a WebSocket connection with the cloud server node 12, and obtains link data for the device and the terminal and the first coordinate template data from the cloud server node 12 through the WebSocket connection. The link data includes nodes, node connection relationships, node data processing delays, and data transmission delays between nodes.

[0125] S502: Classify the acquired link data according to business meaning.

[0126] The nodes in the data link are classified and displayed according to their business meanings. Different categories represent different business levels, so as to achieve the purpose of multi-level display of nodes.

[0127] S503: Determine whether the first coordinate template data contains the position coordinates of the node.

[0128] Through an algorithm or an interface, the first coordinate template data is searched for the position coordinates of a node. If the position coordinates of the node are not included, it means that the node is a new node, and the node position is assigned a value, and S504 is executed. If the position coordinates of the node are included, it means that the node is not a new node, and the node position is assigned a value, and S505 is executed.

[0129] S504, displaying the nodes around the corresponding parent nodes based on the force relationship layout in Echarts.

[0130] For example, the parent nodes of the new nodes c1, c2, and c3 are all b nodes. According to the default force relationship layout algorithm (child nodes are laid out around parent nodes), c1, c2, and c3 are displayed around b node. It can also be agreed that c1, c2, and c3 are displayed around b node at a fixed distance. Optionally, c1, c2, and c3 can be identified with a color different from that of b node.

[0131] S505. Display the node at a specified position of the view interface based on Echarts.

[0132] For example, when it is determined that the c1 node, the c2 node, and the c3 node are in the first coordinate template data, the c1 node, the c2 node, and the c3 node are displayed at designated positions around the b node with fixed position coordinates.

[0133] S506, in response to detecting a position drag command for a target node in the data link, updating the position of the target node displayed in the view interface following the position drag command, and updating the position coordinates after dragging to the first coordinate template data to obtain second coordinate template data.

[0134] The target node can be a node with position coordinates (the node is displayed at a specified position in the view interface) or a node without position coordinates (the node is displayed around the corresponding parent node, the view interface of the node is enlarged and prompted in an animated form). Step S506 can be regarded as editing the node position, and the editing operation includes dragging the node and / or clearing the node.

[0135] By default, dragging a node only moves the position of the current node. You can also choose to reset the child nodes of the current node, so that all child nodes lose their position coordinates and are displayed as the default force relationship layout (the default force relationship layout means that the child nodes are arranged around the parent node, which requires more nodes to be laid out twice). This makes it easier for the child nodes to follow when dragging the parent node.

[0136] After clearing a node, the node becomes a node without position coordinates and is displayed around the corresponding parent node. The child nodes of the node also lose their position coordinates and are displayed as the default force relationship layout.

[0137] like Figure 6 As shown in the visualization view interface for clearing node and child node coordinates provided in an embodiment of the present application, if the local fusion algorithm_5 node is cleared, the local fusion algorithm_5 node will be displayed around the global fusion algorithm node, and the view interface of the local fusion algorithm_5 node will be enlarged and prompted in the form of animation, and its child nodes (single perception MEC_N_15, single perception MEC_N_16, single perception MEC_N_13, single perception MEC_N_14) are arranged around the parent node.

[0138] S507 : In response to detecting that the position of the last node without position coordinates contained in the data link is solidified, resetting the view interface size of the data link.

[0139] For example, when the Web server node 13 detects that the user issues a position fixation instruction to the last node without position coordinates in the data link, it immediately responds to the instruction and assigns specific two-dimensional coordinates (x, y) to the last node without position coordinates according to the user's instruction or preset rules. The coordinates can be determined based on user input, automatic calculation, dragging or other methods. For example, according to the position coordinates of all nodes in the data link, the optimal size required for the view interface is calculated. Specifically, the width and height of the view interface are determined by considering factors such as the distribution range, spacing and layout of the nodes, and the view interface size is reset to the calculated optimal size to ensure that all nodes can be fully displayed in the view interface, and the interface layout is reasonable and beautiful, so that users can intuitively see the latest positions and layouts of all nodes.

[0140] S508 , performing a union process based on the first coordinate template data and the second coordinate template data to obtain third coordinate template data, and submitting the third coordinate template data to a database.

[0141] Based on the union processing of the first coordinate template data and the second coordinate template data, for example, for the same node in the first coordinate template data and the second coordinate template data, the position coordinates of the node in the second coordinate template data are stored in the third coordinate template data to ensure that the third coordinate template data is the latest and the uniqueness of the position coordinates of the same node is ensured; for other nodes, the position coordinates of the node in the second coordinate template data are directly added to the first coordinate template data.

[0142] For example, the Web server node 13 compares the cached data of the second coordinate template data and the first coordinate template data to generate a union, obtains the third coordinate template data, and submits it to the cloud server node 12, or to other database nodes, and the cloud server node 12 then obtains the third coordinate template data from other database nodes for use in subsequent operations. The third coordinate template data can be used to save the current view layout, generate a new view interface, or perform further data processing.

[0143] The method provided in the embodiment of the present application and the method provided in the above-mentioned method embodiment actually have similar technical effects, and this embodiment will not be described in detail here.

[0144] Figure 7 A schematic diagram of the structure of a data link visualization device based on Echarts provided in an embodiment of the present application is shown in FIG. Figure 7 As shown, the data link visualization device 70 based on Echarts includes: a receiving module 71, an acquisition module 72, a processing module 73 and a visualization module 74. Among them:

[0145] A receiving module 71, used for receiving an interactive operation for setting a device and a terminal on a display interface;

[0146] An acquisition module 72 is used to respond to the interactive operation and acquire link data and first coordinate template data for the device and the terminal, wherein the link data includes nodes, node connection relationships, node data processing delays, and inter-node data transmission delays, and the nodes include device nodes, terminal nodes, and algorithm nodes, and the first coordinate template data includes the location coordinates of the nodes;

[0147] The processing module 73 is used to assign the position of the node based on Echarts according to the node connection relationship and the first coordinate template data, and obtain the data link corresponding to the device and the terminal;

[0148] The visualization module 74 is used to perform visualization in the data link based on the node data processing delay and the inter-node data transmission delay.

[0149] In a possible implementation, the processing module 73 is specifically used to: traverse each node and perform the following operations to obtain the data link corresponding to the device and the terminal: determine whether the first coordinate template data contains the position coordinates of the node; if the first coordinate template data does not contain the position coordinates of the node, display the node around the corresponding parent node based on the force relationship layout in Echarts; if the first coordinate template data contains the position coordinates of the node, display the node at a specified position in the view interface based on Echarts.

[0150] In a possible implementation manner, the processing module 73 is further configured to: if the first coordinate template data does not include the position coordinates of the node, enlarge the view interface of the node and provide a prompt in the form of animation.

[0151] In a possible implementation, the data link visualization device 70 based on Echarts also includes an update module for: responding to detection of a position drag command for a target node in a data link, following the position drag command to update the position of the target node displayed in the view interface, and updating the position coordinates after dragging to the first coordinate template data to obtain the second coordinate template data.

[0152] In a possible implementation, the Echarts-based data link visualization device 70 further includes a first processing module, which is used to: perform union processing based on the first coordinate template data and the second coordinate template data to obtain third coordinate template data, and submit the third coordinate template data to the database.

[0153] In a possible implementation, the Echarts-based data link visualization device 70 further includes a reset module, which is used to: in response to detecting that the position of the last node without position coordinates contained in the data link is solidified, reset the view interface size of the data link.

[0154] In a possible implementation, the visualization module 74 is specifically used to: based on the node data processing delay threshold and the inter-node data transmission delay threshold, perform differentiated visualization display according to the node data processing delay and the inter-node data transmission delay.

[0155] In one possible implementation, the visualization module 74 is also used for: if the node data processing delay of the node is a null value, the node is identified by a first color on the view interface; if the node data processing delay of the node is less than or equal to the node data processing delay threshold, the node is identified by a second color on the view interface, and the node data processing delay corresponding to the node is visually displayed; if the node data processing delay of the node is greater than the node data processing delay threshold, the node is identified by a third color on the view interface, and the node data processing delay corresponding to the node is visually displayed; if the inter-node data transmission delay on the data link is less than or equal to the inter-node data transmission delay threshold, the link is identified by a fourth color on the view interface, and the inter-node data processing delay is visually displayed; if the inter-node data transmission delay on the data link is greater than the inter-node data transmission delay threshold, the link is identified by a fifth color on the view interface, and the inter-node data processing delay is visually displayed.

[0156] In one possible implementation, the visualization module 74 is also used to: highlight abnormal nodes whose node data processing delay is greater than a node data processing delay threshold in the view interface; and / or, highlight abnormal links whose inter-node data transmission delay is greater than an inter-node data transmission delay threshold in the view interface.

[0157] In a possible implementation, the Echarts-based data link visualization device 70 also includes a second processing module, which is used to: respond to detecting a query instruction for a target node in the data link on the display interface, obtain the position coordinates of the target node, and focus on displaying the target node on the view interface.

[0158] In a possible implementation, the acquisition module 72 is further configured to: acquire link data for the device and the terminal based on the WebSocket protocol.

[0159] The Echarts-based data link visualization device provided in this embodiment can execute the method provided in the above method embodiment, and its implementation principle and technical effect are similar, which will not be described in detail in this embodiment.

[0160] Figure 8 This is a schematic diagram of the structure of an electronic device provided by an embodiment of the present application. Figure 8 As shown, the electronic device 80 provided in this embodiment includes: at least one processor 801 and a memory 802. Optionally, the device 80 also includes a communication component 803. The processor 801, the memory 802 and the communication component 803 are connected via a bus 804.

[0161] In a specific implementation process, at least one processor 801 executes the computer-executable instructions stored in the memory 802, so that at least one processor 801 executes the above method.

[0162] The specific implementation process of the processor 801 can be found in the above method embodiment, and its implementation principle and technical effect are similar, so this embodiment will not be repeated here.

[0163] In the above embodiments, it should be understood that the processor can be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), etc. A general-purpose processor can be a microprocessor or any conventional processor. The steps of the method disclosed in the invention can be directly implemented as a hardware processor, or can be implemented by a combination of hardware and software modules in the processor.

[0164] The memory may include a high-speed memory (Random Access Memory, RAM), and may also include a non-volatile memory (NVM), such as at least one disk storage.

[0165] The bus can be an Industry Standard Architecture (ISA) bus, a Peripheral Component Interconnect (PCI) bus, or an Extended Industry Standard Architecture (EISA) bus, etc. The bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, the bus in the drawings of this application is not limited to only one bus or one type of bus.

[0166] The present application also provides a computer program product, including a computer program, which implements the above method when executed by a processor.

[0167] The present application also provides a computer-readable storage medium, in which computer-executable instructions are stored. When a processor executes the computer-executable instructions, the above method is implemented.

[0168] The above-mentioned readable storage medium can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic disk or optical disk. The readable storage medium can be any available medium that can be accessed by a general or special-purpose computer.

[0169] An exemplary readable storage medium is coupled to a processor so that the processor can read information from the readable storage medium and write information to the readable storage medium. Of course, the readable storage medium can also be a component of the processor. The processor and the readable storage medium can be located in an application specific integrated circuit (Application Specific Integrated Circuits, referred to as: ASIC). Of course, the processor and the readable storage medium can also exist in the device as discrete components.

[0170] The division of units is only a logical function division, and there may be other divisions in actual implementation, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be an indirect coupling or communication connection through some interface, device or unit, which can be electrical, mechanical or other forms.

[0171] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.

[0172] In addition, each functional unit in each embodiment of the present invention may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit.

[0173] If the function is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, or the part of the technical solution, can be embodied in the form of a software product. The computer software product is stored in a storage medium, including several instructions for a computer device (which can be a personal computer, server, or network device, etc.) to perform all or part of the steps of the methods of each embodiment of the present invention. The aforementioned storage medium includes: U disk, mobile hard disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), disk or optical disk, etc. Various media that can store program codes.

[0174] Those skilled in the art can understand that all or part of the steps of implementing the above-mentioned method embodiments can be completed by hardware related to program instructions. The aforementioned program can be stored in a computer-readable storage medium. When the program is executed, the steps of the above-mentioned method embodiments are executed; and the aforementioned storage medium includes: ROM, RAM, disk or optical disk and other media that can store program codes.

[0175] Finally, it should be noted that those skilled in the art will readily conceive of other embodiments of the present invention after considering the specification and practicing the invention disclosed herein. The present invention is intended to cover any variations, uses or adaptations of the present invention, which follow the general principles of the present invention and include common knowledge or customary technical means in the art not disclosed by the present invention, are not limited to the precise structure described above and shown in the drawings, and may be modified and changed in various ways without departing from the scope thereof. The scope of the present invention is limited only by the appended claims.

Claims

1. A data link visualization method based on Echarts, characterized in that: include: Receiving interactive operations for setting devices and terminals acting on the display interface; In response to the interactive operation, link data and first coordinate template data for the device and the terminal are obtained, the link data including nodes, node connection relationships, node data processing delays, and inter-node data transmission delays, the nodes including device nodes, terminal nodes, and algorithm nodes, and the first coordinate template data including location coordinates of the nodes; Based on Echarts, assigning a value to the position of the node according to the node connection relationship and the first coordinate template data, and obtaining a data link corresponding to the device and the terminal; In the data link, a visual display is performed based on the node data processing delay and the inter-node data transmission delay.

2. The method according to claim 1, characterized in that The method of assigning a value to the position of the node based on Echarts according to the node connection relationship and the first coordinate template data to obtain a data link corresponding to the device and the terminal includes: Traverse each of the nodes and perform the following operations to obtain the data link corresponding to the device and the terminal: Determining whether the first coordinate template data includes the position coordinates of the node; If the first coordinate template data does not include the position coordinates of the node, the node is displayed around the corresponding parent node based on the force relationship layout in Echarts; If the first coordinate template data includes the position coordinates of the node, the node is displayed at a specified position of the view interface based on Echarts.

3. The method according to claim 2, characterized in that Also includes: If the first coordinate template data does not include the position coordinates of the node, the view interface of the node is enlarged and prompted in an animation form.

4. The method according to any one of claims 1 to 3, characterized in that Also includes: In response to detecting a position drag command for a target node in the data link, the position of the target node displayed in the view interface is updated following the position drag command, and the position coordinates after dragging are updated to the first coordinate template data to obtain second coordinate template data.

5. The method according to claim 4, characterized in that Also includes: A union process is performed based on the first coordinate template data and the second coordinate template data to obtain third coordinate template data, and the third coordinate template data is submitted to a database.

6. The method according to any one of claims 1 to 3, characterized in that Also includes: In response to detecting that the position of the last node without position coordinates contained in the data link is solidified, the view interface size of the data link is reset.

7. The method according to any one of claims 1 to 3, characterized in that The visual display according to the node data processing delay and the inter-node data transmission delay includes: Based on the node data processing delay threshold and the inter-node data transmission delay threshold, a visual display is distinguished according to the node data processing delay and the inter-node data transmission delay.

8. The method according to claim 7, characterized in that The visual display based on the node data processing delay threshold and the inter-node data transmission delay threshold, distinguishing according to the node data processing delay and the inter-node data transmission delay, includes: If the node data processing delay of the node is null, the node is marked with the first color on the view interface; If the node data processing delay of the node is less than or equal to the node data processing delay threshold, the node is identified by the second color on the view interface, and the node data processing delay corresponding to the node is visually displayed; If the node data processing delay of the node is greater than the node data processing delay threshold, the node is marked with a third color on the view interface, and the node data processing delay corresponding to the node is visually displayed; If the inter-node data transmission delay on the data link is less than or equal to the inter-node data transmission delay threshold, the link is identified with a fourth color on the view interface, and the inter-node data processing delay is visually displayed; If the inter-node data transmission delay on the data link is greater than the inter-node data transmission delay threshold, the link is identified by the fifth color on the view interface, and the inter-node data processing delay is visually displayed.

9. The method according to claim 8, characterized in that Also includes: In the view interface, abnormal nodes whose node data processing delay is greater than the node data processing delay threshold are highlighted; And / or, in the view interface, abnormal links whose inter-node data transmission delay is greater than the inter-node data transmission delay threshold are highlighted.

10. The method according to any one of claims 1 to 3, characterized in that Also includes: In response to detecting a query instruction for a target node in the data link on the display interface, the position coordinates of the target node are acquired, and the target node is displayed in a focused manner on the view interface.

11. The method according to any one of claims 1 to 3, characterized in that The acquiring link data for the device and the terminal includes: Based on the WebSocket protocol, link data for the device and the terminal is obtained.

12. A data link visualization device based on Echarts, characterized in that: include: A receiving module, used for receiving an interactive operation for setting a device and a terminal on a display interface; an acquisition module, configured to respond to the interactive operation and acquire link data and first coordinate template data for the device and the terminal, wherein the link data includes nodes, node connection relationships, node data processing delays, and inter-node data transmission delays, wherein the nodes include device nodes, terminal nodes, and algorithm nodes, and the first coordinate template data includes location coordinates of the nodes; A processing module, configured to assign a value to the position of the node based on Echarts according to the node connection relationship and the first coordinate template data, and obtain a data link corresponding to the device and the terminal; A visualization module is used to perform visualization in the data link according to the node data processing delay and the data transmission delay between the nodes.

13. An electronic device, characterized in that: include: A processor, and a memory communicatively connected to the processor; The memory is used to store computer-executable instructions; The processor is used to execute the computer-executable instructions to implement the data link visualization method according to any one of claims 1 to 11.

14. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer-executable instructions, and when the computer-executable instructions are executed, they are used to implement the data link visualization method according to any one of claims 1 to 11.

Images