Web multi-type graph visualization system based on QAR data and use method

Abstract

The invention discloses a Web multi-type graph visualization system based on QAR data and a use method, and relates to the technical field of data processing and visualization, and the system comprises a front-end module used for user interaction and information transmission, a data preprocessing module used for preprocessing QAR data, a parameter configuration module, a configuration module used for data attribute configuration, a layout control module, and a data processing module used for processing QAR data. According to the self-adaptive layout algorithm, the layout of the graph is optimized, the interaction control module provides control of a user interaction function, the data analysis module carries out data analysis, and the drawing module is used for drawing the Web multi-type graph. According to the Web multi-type graph visualization system based on the QAR data, quick analysis and visual display of the QAR data can be achieved, powerful support is provided for aviation data processing and analysis, important practical value and application prospects are achieved, and the problems that operation is complex and efficiency is low when a user processes and understands aircraft QAR data are solved.

Description

Technical Field

[0001] The present invention relates to the technical field of data processing and visualization, and in particular to a system and a method for using the system for visualizing multiple types of Web graphs based on QAR data. Background Art

[0002] With the continuous development of aviation technology, the demand for processing and analyzing flight data is increasing. QAR, as an important airborne electronic device that records aircraft flight parameters, can continuously record flight data for hundreds of hours. It is of great significance for flight process simulation and reproduction, flight quality monitoring and improvement, flight technology evaluation, aircraft maintenance, safety quality assessment, fuel consumption evaluation and energy-saving technology improvement, accident factor investigation, etc. However, traditional QAR data processing and analysis methods usually require professional operation and it is difficult to intuitively display complex data structures.

[0003] At present, although there are some data processing and visualization tools, data visualization refers to the use of graphics, images, computer vision and other technologies to display data in various forms in order to better understand and analyze data. However, they often only support a single data type and cannot meet the multi-type characteristics of QAR data. This results in users having to use multiple tools to process and analyze QAR data, which is complex and inefficient.

[0004] However, Web applications are based on browsers and can maintain consistent performance on different operating systems and devices, ensuring that users can get a good experience on different platforms. Therefore, developing a Web multi-type graph visualization system based on QAR data to achieve rapid parsing and intuitive display of QAR data is of great significance to improving the efficiency and quality of aviation data processing. Summary of the invention

[0005] The purpose of the invention provided by the present invention is to provide a system and method for using Web multi-type graph visualization based on QAR data to solve the problems in the above-mentioned background technology.

[0006] To achieve the above objectives, the present invention is implemented through the following technical solutions: A system for visualizing multiple types of Web graphs based on QAR data, comprising: Front-end module, used for user interaction and information transmission.

[0007] The data preprocessing module is used to preprocess the QAR data.

[0008] Parameter configuration module, used for configuration of data attributes.

[0009] The layout control module optimizes the layout of the graph according to the adaptive layout algorithm.

[0010] The interactive control module provides control over user interactive functions.

[0011] Data analysis module, for data analysis.

[0012] Drawing module, used to draw multi-type Web maps.

[0013] There is a bidirectional signal connection between the front-end module and the data preprocessing module, a bidirectional signal connection between the front-end module and the parameter configuration module, a bidirectional signal connection between the front-end module and the layout control module, a bidirectional signal connection between the front-end module and the interactive control module, a bidirectional signal connection between the front-end module and the data analysis module, and a bidirectional signal connection between the front-end module and the drawing module.

[0014] Furthermore, the data preprocessing module includes data parsing, cleaning and formatting functions. By parsing and preprocessing QAR data, key parameters of the flight process are extracted. Then, the extracted data is cleaned to remove outliers and duplicate data to ensure the accuracy and reliability of the data. Finally, the data is formatted into a format recognizable by the system to provide data support for subsequent map generation.

[0015] Furthermore, the parameter configuration module includes but is not limited to aircraft model, flight number, X-axis display field, Y-axis parameter and downsampling function. The flight number and Y-axis parameter can be selected multiple times, and the Y parameter can be added with a range limit. The layout control module adds an adaptive layout algorithm according to the characteristics and quantity of the atlas, optimizes the layout of the atlas, and supports responsive layout to improve the display effect.

[0016] Furthermore, the interactive control module provides user interaction functions, including drawing marks, drawing templates and map operations. The drawing marks can realize real-time saving and reading of map marks. The drawing templates can save parameter configurations and select templates to quickly backfill parameter configurations. The map operations include zooming, panning, sliding, clicking and data linkage. The data analysis module realizes data analysis and can perform simple analysis based on the data to display parameter details.

[0017] Furthermore, the drawing display configuration of the drawing module may have configurable properties including but not limited to a drawing grid, a zoom scroll bar, a drawing mode, a drawing style, a legend and an interpolation method. The drawing mode may include single Y-axis drawing, multiple Y-axis drawing, multiple curve drawing, overlapping graphs and tables. The drawing styles may include line graphs, bar graphs, point graphs and point-line graphs. The legends may include center, left and right.

[0018] A method for using a system for visualizing a multi-type Web graph based on QAR data, characterized in that it is applied to any one of the systems for visualizing a multi-type Web graph based on QAR data described above, and comprises the following steps: S1. Preprocess QAR data, including data parsing, cleaning and formatting.

[0019] S2. Determine the configurable attributes and attribute conditions of the parameter configuration, and divide the attributes of the parameter configuration into two categories: data attributes and drawing display attributes.

[0020] S3. Parse the data. According to the data attributes described in step S2, send a network request to the backend through the API encapsulated by Axios to obtain the QAR data and convert the data into a data format that can be displayed by the frontend.

[0021] S4. Control the layout of different drawing methods. According to the number of selected flight numbers (len), the number of Y-axis parameters (num), and the browser page height (height), first determine the minimum height of a graph (singleHeight) as 1 / n of the browser page height, where n is the maximum number of drawings displayed on the screen. Then calculate the display heights of single Y-axis drawings, multi-Y-axis drawings, multi-curve drawings, and overlapping drawings respectively.

[0022] S5. Draw a graph or a table, and display the corresponding graph according to the drawing display attributes described in step S2.

[0023] Further, the following steps are included: according to the operation steps in S1, S101. Data parsing: Read and parse QAR data through parsing algorithms and tools, convert binary data into structured data, and extract key parameters.

[0024] S102, data cleaning: Clean the parsed data to remove outliers and duplicate data caused by equipment failure and data transmission errors. In this step, time series data can be down-converted, and abnormal data can be automatically identified and filtered through data smoothing, interpolation filling, and resampling methods.

[0025] S103, data formatting: according to the storage format and query requirements of IOTDB, the original data is converted, and the cleaned data is formatted into a format recognizable by the system so that the subsequent graph generation module can read and process it.

[0026] Furthermore, the method includes the following steps: according to the operation steps in S3, define an array to save data, traverse the flight parameter data returned by the backend, and define a flight data object, the fields of which include flight id, drawing X-axis data, drawing title, graph information data, parameter details, table information, and whether it is a character parameter field, and then add the object to the array, the graph information data object array, the object fields include the display data of the graph Y-axis, the maximum and minimum values ​​of the Y-axis display range, and marking information.

[0027] Further, the method includes the following steps: according to the operation steps in S4, single Y-axis drawing, multi-Y-axis drawing: determine whether the browser page height is greater than the single minimum map height multiplied by the number of drawings, if greater, the height of a single Y-axis map, multi-Y-axis map is the browser page height divided by the number of drawings, otherwise it is the single minimum map height, multi-curve drawing: determine whether the browser page height is greater than the single minimum map height multiplied by the number of drawings m and then multiplied by the number of parameters, if greater, the height of a multi-curve map is the browser page height divided by the number of drawings, otherwise it is the single minimum map height, overlapping map: determine whether the browser page height is greater than X pixels multiplied by the number of drawings and then multiplied by the number of parameters, if greater, the height of an overlapping map is the browser page height divided by the number of drawings, otherwise it is X pixels multiplied by the number of drawings.

[0028] Further, the following steps are included: according to the operation steps in S5, S501, determine whether it is the first drawing or whether the data attribute described in step S2 has changed. If the XOR result of the two conditions is true, do not perform step S3, otherwise perform step S3.

[0029] S502, judging whether the drawing mode is a table, if the result is true, then the step S4 operation is not performed, otherwise, the step S4 operation is performed.

[0030] S503. For parameters with range display, add an efficient extreme value algorithm to quickly find the extreme value of the parameter so that multiple parameters of the Y axis are evenly distributed on the page.

[0031] S504. According to the setting method of Echarts, a multi-parameter graph data linkage effect is achieved to improve the visualization of the graph and the data comparison effect.

[0032] S505. Add a data analysis algorithm to highlight the parameter re-alarm time period and increase the warning effect.

[0033] S506. According to the usage of Echarts and the common method of extracting various drawing methods in the graph display of the present invention, the functions of downloading, zooming, panning, box selection and full-screen display of the graph are realized.

[0034] S507. According to the height and width of the browser page and the drawing method, the layout of the graph is optimized in combination with the Grid setting method of Echarts and the adaptive function of Echarts, and adaptive layout and responsive layout are realized. In combination with the rendering mechanism of Echarts, multiple parameters in multiple flights are rendered on the Web page in different colors and in multiple forms.

[0035] The present invention provides a system and method for visualizing multiple types of Web graphs based on QAR data. It has the following beneficial effects: The Web multi-type graph visualization system based on QAR data can realize the rapid analysis and intuitive display of QAR data, providing strong support for aviation data processing and analysis. It has important practical value and application prospects, and solves the problem of complex and inefficient operation of users in processing and understanding aircraft QAR data. BRIEF DESCRIPTION OF THE DRAWINGS

[0036] Figure 1 A schematic diagram of the architecture of a system and a method for using the QAR data-based Web multi-type graph visualization system of the present invention; Figure 2 A schematic diagram of the system architecture of a system and a method for using the system for visualizing multiple types of Web graphs based on QAR data according to the present invention; Figure 3 The present invention is a flowchart of a system and a method for using the system for visualizing multiple types of Web graphs based on QAR data.

[0037] In the figure: 1. Front-end module; 2. Data preprocessing module; 3. Parameter configuration module; 4. Layout control module; 5. Interaction control module; 6. Data analysis module; 7. Drawing module. DETAILED DESCRIPTION

[0038] The technical solutions in the embodiments of the present invention will be described clearly and completely below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all the embodiments.

[0039] Examples of the embodiments are shown in the accompanying drawings, wherein the same or similar reference numerals throughout represent the same or similar elements or elements having the same or similar functions. The embodiments described below with reference to the accompanying drawings are exemplary and are intended to be used to explain the present invention, and should not be construed as limiting the present invention.

[0040] The present invention will be further described below in conjunction with the accompanying drawings and embodiments: See also Figure 1-3The present invention provides a technical solution: a system for visualizing a Web multi-type graph based on QAR data, comprising: a front-end module 1 for user interaction and information transmission, a data preprocessing module 2 for preprocessing QAR data, a parameter configuration module 3 for configuring data attributes, a layout control module 4 for optimizing the layout of the graph according to an adaptive layout algorithm, an interactive control module 5 for providing control of user interaction functions, a data analysis module 6 for performing data analysis, a drawing module 7 for drawing a Web multi-type graph, a bidirectional signal connection between the front-end module 1 and the data preprocessing module 2, a bidirectional signal connection between the front-end module 1 and the parameter configuration module 3, a bidirectional signal connection between the front-end module 1 and the layout control module 4, a bidirectional signal connection between the front-end module 1 and the interactive control module 5, a bidirectional signal connection between the front-end module 1 and the data analysis module 6, and a bidirectional signal connection between the front-end module 1 and the drawing module 7.

[0041] The data preprocessing module 2 includes data parsing, cleaning and formatting functions. By parsing and preprocessing QAR data, the key parameters of the flight process are extracted. Then, the extracted data is cleaned to remove outliers and duplicate data to ensure the accuracy and reliability of the data. Finally, the data is formatted into a format that the system can recognize to provide data support for subsequent map generation. The parameter configuration module 3 includes but is not limited to aircraft model, flight number, X-axis display field, Y-axis parameter and downsampling function. The flight number and Y-axis parameter can be selected multiple times, and the Y parameter can add range restrictions. The layout control module 4 can add an adaptive layout algorithm according to the characteristics and quantity of the map to optimize the layout of the map. At the same time, it supports responsive layout to improve the display effect. The interactive control module 5 provides user interaction functions, including drawing marks, drawing templates and map operations. Drawing marks can realize real-time saving and reading of map marks. Drawing templates can save parameter configurations and select templates to quickly realize parameter configuration backfilling. Map operations include zooming, panning, sliding, clicking and data linkage. The data analysis module 6 can realize data analysis, and can perform simple analysis based on the data and display parameter details. The drawing display configuration of the drawing module 7 can configure attributes including but not limited to drawing grid, zoom scroll bar, drawing mode, drawing style, legend and interpolation mode. Drawing modes include single Y-axis drawing, multi-Y-axis drawing, multi-curve drawing, overlapping graph and table. Drawing styles include line graph, bar graph, point graph and point line graph. Legends include center, left and right. A method for using a system for visualizing a multi-type Web graph based on QAR data, applied to any one of the above-mentioned systems for visualizing a multi-type Web graph based on QAR data, includes the following steps: Step 1: Preprocessing the QAR data, including data parsing, cleaning and formatting, as follows: Data parsing: Read and parse the QAR data through parsing algorithms and tools, convert binary data into structured data, and extract key parameters; Data cleaning: Clean the parsed data to remove outliers and duplicate data caused by equipment failure, data transmission errors, etc. In this step, time series data down-frequency processing can be performed, and data smoothing, interpolation filling, resampling, etc. can be used. , Automatically identify and filter abnormal data, data formatting: According to the storage format and query requirements of IOTDB, the original data is converted, and the cleaned data is formatted into a format recognizable by the system so that the subsequent map generation module can read and process it, Step 2: Determine the configurable attributes and attribute conditions of parameter configuration. The present invention divides the attributes of parameter configuration into two categories: data attributes and drawing display attributes. The specific attribute conditions are as follows: Data attributes include: aircraft model, flight number, X-axis display field, Y-axis parameter, downsampling function, the flight number and Y-axis parameter in the attribute can be selected, the attribute Y-axis parameter can add range restrictions, and the attribute Y-axis parameter can be updated in real time according to the selected aircraft model and flight number. Drawing display attributes include: drawing grid, Zoom scroll bar, drawing method, drawing style, legend, interpolation method, etc. Attribute drawing methods include single Y-axis drawing, multi-Y-axis drawing, multi-curve drawing, overlapping graph and table. Attribute drawing styles include line graph, bar graph, point graph, point line graph. Attribute legends include center, left and right. Select drawing template and quickly fill in all attribute information. Step 3: parse data. According to the data attributes in step S2, send a network request to the backend through the Axios encapsulated API to obtain QAR data and convert the data into a data format that can be displayed by the front end. The specific conversion method is as follows: define an array to save the data, traverse the flight parameter data returned by the backend, and define a flight data object. The fields include flight id, drawing X-axis data, drawing title, graph information data, parameter details, table information, whether it is a character parameter and other fields, and then add the object to the array, where the graph information data object array, where the object field includes the display data of the graph Y axis, the maximum and minimum values ​​of the Y axis display range, marking information, etc., step S4: control the layout of different drawing methods, according to the number of selected flight numbers (len), the number of Y axis parameters (num), and the browser page height (height), first determine the minimum height of a graph (singleHeight) as 1 / n of the browser page height, n is the maximum number of drawings displayed on the screen, and then calculate the display heights of single Y axis drawing, multi-Y axis drawing, multi-curve drawing, and overlapping drawing respectively,The following are specific calculation methods for each drawing method: Single Y-axis drawing, multi-Y-axis drawing: determine whether the browser page height is greater than the single minimum map height multiplied by the number of drawings. If it is greater, the height of a single Y-axis map or a multi-Y-axis map is the browser page height divided by the number of drawings, otherwise it is the single minimum map height. Multi-curve drawing: determine whether the browser page height is greater than the single minimum map height multiplied by the number of drawings m and then multiplied by the number of parameters. If it is greater, the height of a multi-curve map is the browser page height divided by the number of drawings, otherwise it is the single minimum map height. Overlapping map: determine whether the browser page height is greater than X pixels multiplied by the number of drawings and then multiplied by the number of parameters. If it is greater, the height of an overlapping map is the browser page height divided by the number of drawings, otherwise it is X pixels multiplied by the number of drawings. Step 5: Draw a map or table, and display the corresponding map according to the drawing display attributes of step S2. The rendering algorithm is used in this step. The specific optimization algorithm is as follows: Step 501, determine whether it is the first drawing or whether the data attributes of step S2 have changed. If the XOR result of the two conditions is true, step S3 operation is not performed, otherwise step S3 operation is performed. Step 502: Determine whether the drawing method is a table. If the result is true, do not perform step S4, otherwise perform step S4. Step 503: For parameters with range display, add an efficient extreme value algorithm to quickly find the extreme value of the parameter so that multiple parameters of the Y axis are evenly distributed on the page. Step 504: According to the setting method of Echarts, realize the linkage effect of multi-parameter graph data and improve the visualization and data comparison effect of the graph. Step 505: Add a data analysis algorithm to realize the highlighting of the parameter re-alarm time period and increase the warning effect. Step 506: According to the use method of Echarts and the graph display of the present invention, extract the common methods of each drawing method to realize the download, zoom, translation, frame selection, full-screen display and other functions of the graph. Step 507: According to the height and width of the browser page and the drawing method, combine the Grid setting method of Echarts and the adaptive function of Echarts to optimize the layout of the graph, realize adaptive layout and responsive layout, and combine the rendering mechanism of Echarts to render multiple parameters in multiple flights in different colors and multiple forms on the Web page. ,

[0042] The above are only preferred embodiments of the present invention. It should be pointed out that a person skilled in the art can make several modifications and improvements without departing from the inventive concept of the present invention, and these all fall within the protection scope of the present invention.

Claims

1. A system for visualizing multiple types of Web graphs based on QAR data, characterized in that: include: Front-end module (1), used for user interaction and information transmission; A data preprocessing module (2), used for preprocessing QAR data; Parameter configuration module (3), used for configuring data attributes; A layout control module (4) optimizes the layout of the graph according to an adaptive layout algorithm; An interactive control module (5) provides control of user interactive functions; Data analysis module (6), performing data analysis; A drawing module (7) is used to draw multi-type Web maps; A bidirectional signal connection is formed between the front-end module (1) and the data preprocessing module (2), a bidirectional signal connection is formed between the front-end module (1) and the parameter configuration module (3), a bidirectional signal connection is formed between the front-end module (1) and the layout control module (4), a bidirectional signal connection is formed between the front-end module (1) and the interactive control module (5), a bidirectional signal connection is formed between the front-end module (1) and the data analysis module (6), and a bidirectional signal connection is formed between the front-end module (1) and the drawing module (7).

2. A system for visualizing multiple types of Web graphs based on QAR data according to claim 1, characterized in that: The data preprocessing module (2) includes data parsing, cleaning and formatting functions. By parsing and preprocessing the QAR data, key parameters of the flight process are extracted. Then, the extracted data is cleaned to remove abnormal values ​​and duplicate data to ensure the accuracy and reliability of the data. Finally, the data is formatted into a format that can be recognized by the system to provide data support for subsequent map generation.

3. The system for visualizing multiple types of Web graphs based on QAR data according to claim 1, characterized in that: The parameter configuration module (3) includes but is not limited to the aircraft model, flight number, X-axis display field, Y-axis parameter and downsampling function. The flight number and Y-axis parameter can be selected multiple times, and the Y parameter can be added with a range limit. The layout control module (4) adds an adaptive layout algorithm according to the characteristics and quantity of the atlas, optimizes the layout of the atlas, and supports responsive layout to improve the display effect.

4. The system for visualizing multiple types of Web graphs based on QAR data according to claim 1, characterized in that: The interactive control module (5) provides user interactive functions, including drawing marks, drawing templates and map operations. The drawing marks can realize real-time saving and reading of map marks. The drawing templates can save parameter configurations and select templates to quickly fill in parameter configurations. The map operations include zooming, panning, sliding, clicking and data linkage. The data analysis module (6) realizes data analysis and can perform simple analysis based on the data to display parameter details.

5. The system for visualizing multiple types of Web graphs based on QAR data according to claim 1, characterized in that: The drawing display configuration configurable attributes of the drawing module (7) include but are not limited to a drawing grid, a zoom scroll bar, a drawing mode, a drawing style, a legend and an interpolation mode. The drawing mode includes single Y-axis drawing, multi-Y-axis drawing, multi-curve drawing, overlapping graph and table. The drawing style includes line graph, bar graph, point graph and point line graph. The legend includes center, left and right.

6. A method for using a system for visualizing multiple types of Web graphs based on QAR data, characterized in that: A system for visualizing a multi-type Web graph based on QAR data as described in any one of claims 1 to 5, comprising the following steps: S1. Preprocess QAR data, including data parsing, cleaning and formatting; S2. Determine the configurable attributes and attribute conditions of parameter configuration, and divide the attributes of parameter configuration into two categories: data attributes and drawing display attributes; S3, parse the data, according to the data attributes described in step S2, send a network request to the backend through the API encapsulated by Axios, obtain the QAR data, and convert the data into a data format that can be displayed by the front end; S4, control the layout of different drawing modes, according to the number of selected flight numbers (len), the number of Y-axis parameters (num), and the browser page height (height), first determine the minimum height of a graph (singleHeight) as 1 / n of the browser page height, n is the maximum number of drawings displayed on the screen, and then calculate the display heights of single Y-axis drawing, multi-Y-axis drawing, multi-curve drawing, and overlapping drawing respectively; S5. Draw a graph or a table, and display the corresponding graph according to the drawing display attributes described in step S2.

7. The method for using the system for visualizing multiple types of Web graphs based on QAR data according to claim 6, characterized in that: The method comprises the following steps: according to the operation steps in S1, S101, Data Parsing: Read and parse QAR data through parsing algorithms and tools, convert binary data into structured data, and extract key parameters; S102, data cleaning: Clean the parsed data to remove abnormal values ​​and duplicate data caused by equipment failure and data transmission errors. In this step, time series data can be down-converted, and abnormal data can be automatically identified and filtered through data smoothing, interpolation filling, and resampling methods; S103, data formatting: according to the storage format and query requirements of IOTDB, the original data is converted, and the cleaned data is formatted into a format recognizable by the system so that the subsequent graph generation module can read and process it.

8. The method for using the system for visualizing multiple types of Web graphs based on QAR data according to claim 6, characterized in that: The following steps are involved: According to the operation steps in S3, define an array to save data, traverse the flight parameter data returned by the backend, and define a flight data object, the fields of which include flight id, drawing X-axis data, drawing title, graph information data, parameter details, table information, and whether it is a character parameter field. Then add the object to the array, the graph information data object array, and the object fields include the display data of the graph Y-axis, the maximum and minimum values ​​of the Y-axis display range, and mark information.

9. The method for using the system for visualizing multiple types of Web graphs based on QAR data according to claim 6, characterized in that: The following steps are involved: According to the operation steps in S4, single Y-axis drawing and multi-Y-axis drawing: determine whether the browser page height is greater than the single minimum map height multiplied by the number of drawings. If so, the height of a single Y-axis map and a multi-Y-axis map is the browser page height divided by the number of drawings, otherwise it is the single minimum map height. Multi-curve drawing: determine whether the browser page height is greater than the single minimum map height multiplied by the number of drawings m and then multiplied by the number of parameters. If so, the height of a multi-curve map is the browser page height divided by the number of drawings, otherwise it is the single minimum map height. Overlapping map: determine whether the browser page height is greater than X pixels multiplied by the number of drawings and then multiplied by the number of parameters. If so, the height of an overlapping map is the browser page height divided by the number of drawings, otherwise it is X pixels multiplied by the number of drawings.

10. The method for using the system for visualizing multiple types of Web graphs based on QAR data according to claim 6, characterized in that: The method comprises the following steps: according to the operation steps in S5, S501, determine whether it is the first drawing or whether the data attribute described in step S2 has changed. If the XOR result of the two conditions is true, do not perform step S3, otherwise perform step S3; S502, determining whether the drawing mode is a table, if the result is true, not performing step S4, otherwise performing step S4; S503. For parameters with range display, add an efficient extreme value algorithm to quickly find the extreme value of the parameter so that multiple parameters of the Y axis are evenly distributed on the page; S504. According to the setting method of Echarts, the multi-parameter graph data linkage effect is realized to improve the visualization of the graph and the data comparison effect; S505, add data analysis algorithm to realize the highlighting of parameter re-alarm time period and increase the warning effect; S506, according to the usage of Echarts combined with the common method of the present invention to extract various drawing methods, realize the download, zoom, translation, frame selection, and full-screen display functions of the map; S507. According to the height and width of the browser page and the drawing method, the layout of the graph is optimized in combination with the Grid setting method of Echarts and the adaptive function of Echarts, and adaptive layout and responsive layout are realized. In combination with the rendering mechanism of Echarts, multiple parameters in multiple flights are rendered on the Web page in different colors and in multiple forms.

Images