A method and system for rendering large amounts of data based on Echarts

Abstract

This invention discloses a method and system for rendering large amounts of data based on Echarts, belonging to the field of data graphics conversion technology. The system frontend sends data requests to the system backend, which queries the data, compresses it, and returns it to the frontend. The frontend generates Echarts parameter configuration items and calls a downsampling algorithm. The downsampling algorithm, combined with the parameter configuration items, calculates the data sent by the backend to generate a complete line chart. The frontend then performs scaling and dragging actions on the complete line chart. Each operation calls the downsampling algorithm to re-bucket the data and perform data sampling. Based on the scaling and dragging actions, the line chart is shrunk, enlarged, and moved. This invention can generate a complete line chart by calling the algorithm, maintaining the overall trend after the chart is generated. Each scaling and dragging action calls the downsampling algorithm to ensure smooth and accurate display of each point within a limited screen resolution.

Description

Technical Field

[0001] This invention belongs to the field of data graphics conversion technology, specifically, it relates to a method and system for rendering large amounts of data based on Echarts. Background Technology

[0002] In recent years, with the development of big data, more and more fields have attached importance to visualizing big data, and people are using data analysis more and more to solve problems. In order to improve the efficiency of data analysis, various advanced data visualization tools have emerged, which can directly generate cool and intuitive charts based on specified data sources.

[0003] Currently, there is an open-source charting library called Echarts based on JavaScript. Echarts is an excellent visualization chart library with a powerful rendering engine and deep interactive data exploration. For most scenarios, the official Echarts configuration options can run smoothly. However, when dealing with large amounts of data, especially line charts, although Echarts provides a sampling function, the graphics still become very laggy when there are hundreds of thousands or millions of points. Furthermore, the official sampling rate is calculated based on the screen resolution, resulting in too few points being displayed after sampling, and a significant amount of original curve information is lost. The user-friendliness and experience are poor. There is also lag when using the dataZoom component while dragging the line chart. When the browser size changes, the reload caused by listening to myChart.resize() causes lag.

[0004] The massive amounts of time-series data pose a challenge to the performance of graphics display. While reducing the number of display points in graphics through downsampling can improve performance, it also involves trade-offs in terms of algorithm complexity, scalability, and correctness. Several commonly used downsampling algorithms exist, including: lttb downsampling rate (Largest-Triangle-Three-Bucket algorithm, which can preserve the trend, shape, and extrema of the lines after sampling as much as possible); average downsampling rate (average of the filtered points); max downsampling rate (maximum of the filtered points); min downsampling rate (minimum of the filtered points); and sum downsampling rate (sum of the filtered points).

[0005] The LTTB downsampling rate algorithm retains only points that provide important information and are easily perceived by humans, ignoring other points. The AVERAGE downsampling rate algorithm loses a lot of detail when the data is very dense and the peaks and valleys are very similar across the overall dataset; the MAX downsampling rate algorithm loses many minimum extrema; the MIN downsampling rate algorithm loses many maximum extrema; and the SUM downsampling rate algorithm also loses a lot of important extremum information. The LTTB algorithm performs best, but it loses some detail on relatively regular and very dense graphs. The AVERAGE, MIN, MAX, and SUM algorithms disrupt the overall trend, producing significant differences from the source data.

[0006] In some professional analytical graphs, the graphical content is not only presented, but also needs to provide a lot of interactive operations. In some scenarios where data is updated in real time, each frame updates hundreds of thousands or millions of data points. Therefore, these algorithms are prone to rendering lag and operation lag, which cannot provide users with a good experience. Summary of the Invention

[0007] The problem to be solved

[0008] To address the problem that existing algorithms suffer from rendering lag and operational stuttering when dealing with hundreds of thousands or millions of data points, thus failing to provide a good user experience, this invention provides a method and system for large-scale data rendering based on Echarts.

[0009] Technical solution

[0010] To solve the above problems, the present invention adopts the following technical solution.

[0011] A method for rendering large amounts of data based on Echarts, comprising the following steps:

[0012] Step 1: The system frontend sends a data request to the system backend. The system backend queries and processes the data according to the request content, compresses the queried data, and returns it to the system frontend.

[0013] Step 2: The system front-end calls the unified encapsulated Echarts configuration file and adds the Echarts generation parameter configuration items;

[0014] Step 3: The system front-end calls the downsampling algorithm, which, in conjunction with the Echarts parameter configuration items, calculates the data sent by the system back-end to generate a complete line chart.

[0015] Step 4: The system front-end performs scaling and dragging actions on the complete line chart. Each operation calls the downsampling algorithm to re-bucket the data and perform data sampling. The line chart is shrunk, enlarged, and moved according to the scaling and dragging actions.

[0016] Preferably, the data returned from the system backend to the system frontend is in JSON format, and the specific data format is as follows:

[0017] {data:[y1,y2,y3,…],sampleFre,X}

[0018] Where data is an array of Y-values ​​of the point coordinates, and sampleFre is the sampling frequency.

[0019] Preferably, the Echarts parameter configuration items include: title component, legend component, grid component in Cartesian coordinate system, xAxis component in Cartesian coordinate system grid, yAxis component in Cartesian coordinate system grid, dataZoom component, tooltip component, axisPointer component, toolbox component, brush component, graphic component, and series-line component.

[0020] Furthermore, the downsampling algorithm steps are as follows:

[0021] S401. Obtain the start and end dataZoom.start of the current graphics zoom using Echarts' region zoom component.

[0022] S402. Use dataZoom.start and dataZoom.end to calculate the traversal conditions of the algorithm: the starting index startIndex and the ending index endIndex.

[0023] S403. Define initialization variables: points = [], currentX = -1, yMin = 0, yMax = 0; yMinIndex = 0; yMaxIndex = 0; where points is the set of data points after sampling, currentX is the bucket interval index, yMin is the minimum value in the current range, yMax is the maximum value in the current range, yMaxIndex is the index corresponding to yMax, and yMinIndex is the index corresponding to yMin.

[0024] S404. Combine dataZoom.start and dataZoom.end with the actual width of the chart and the length of the chart data to calculate the step size;

[0025] S405. Iterate through the data item data, starting from startIndex and ending at endIndex.

[0026] S406. In the traversal body, the step size is judged, and different logical operations are performed according to the judgment result.

[0027] S407. The above logical operations continue until the traversal ends, and the final data format of points is [{value:[x1,y1]},{value:[x2,y2]},{...}...}].

[0028] Furthermore, the formula for calculating the starting index startIndex is as follows:

[0029] parseInt(arrayWidth*start-arrayWidth*(end-start)*start)

[0030] Here, parseInt is the native JavaScript rounding method, arrayWidth is the data length, start is dataZoom.start, and end is dataZoom.end.

[0031] Furthermore, the formula for calculating the ending subscript endIndex is as follows:

[0032] arrayWidth*end+arrayWidth*(end-start)*(1-end)

[0033] Furthermore, the formula for calculating the step size is as follows:

[0034] Step size = (dw * (end - start)) / cw

[0035] Where dw is the data length, end is the current zoom end position, start is the current zoom start position, and cw is the physical width of the chart display area.

[0036] Furthermore, the step size is judged, and different logical operations are performed according to the judgment result as follows: When the step size < 1, the coordinates of each point in the current traversal are pushed into points; when the step size >= 1, the relationship between the current traversal value and yMin and yMax is judged in each traversal, and yMin and yMax are modified, and yMinIndex and yMaxIndex are modified synchronously; the entry condition is: parseInt(current traversal index / step size)! == currentX is true, points are pushed into yMax and yMin and their corresponding x, forming a coordinate; and the value of currentX is modified to parseInt(current traversal index / step size), and the values ​​of yMin and yMax are modified to the data Y corresponding to the next index; yMinIndex and yMaxIndex are modified synchronously to the next index to prepare conditions for subsequent traversals.

[0037] Furthermore, the formula for calculating the x value is:

[0038] parseFloat(((index / sampleFre)*1000).toFixed(2))

[0039] Here, parseFloat is the native JavaScript method for obtaining floating-point numbers, index is the index of either yMin or yMax, i.e., yMinIndex or yMaxIndex, and sampleFre is the sampling frequency.

[0040] A large-scale data rendering and processing system based on Echarts, comprising:

[0041] The backend storage module is used to receive data requests, query the data that needs to be processed according to the data requests, compress the data and return it;

[0042] The parameter configuration module is used to build a unified and encapsulated Echarts configuration file and generate Echarts parameter configuration items.

[0043] The data calculation module is used to call the parameter settings configured in the parameter configuration module and perform calculations on the data returned by the backend storage module;

[0044] The front-end display module is used to send data requests to the back-end storage module and display the line charts generated by the data calculation module.

[0045] The zoom and drag module is used to distinguish the user's zoom and drag actions, send signals to the data calculation module based on the user's operation, re-bucket the data, and then call the front-end display module to zoom in, zoom out, and move the line chart.

[0046] A method and system for rendering large amounts of data based on Echarts is disclosed. The system frontend sends data requests to the system backend. The backend queries and processes the data based on the request, compresses the data, and returns it to the frontend. The frontend calls a unified, encapsulated Echarts configuration file, adds Echarts generation parameter configuration items, and invokes a downsampling algorithm. This downsampling algorithm, combined with the Echarts parameter configuration items, calculates the data sent by the backend to generate a complete line chart. The frontend then performs scaling and dragging actions on the complete line chart. Each operation calls the downsampling algorithm to re-bucket the data and resample it. The line chart is then zoomed in, zoomed out, and moved based on the scaling and dragging actions. By calling the algorithm, the chart data is obtained, and the complete line chart is generated. The overall trend is maintained after the chart is generated. Each scaling and dragging action invokes the downsampling algorithm, supporting all fine-grained aspects of the chart. This ensures smooth and accurate display of every point even at limited screen resolutions.

[0047] Beneficial effects

[0048] Compared with the prior art, the beneficial effects of the present invention are as follows:

[0049] (1) This invention uses a bucketing algorithm that retains max and min, combined with Echarts official configuration items, to extract the peak and valley values ​​within the buckets, ensuring the integrity of the trend and quickly generating line charts. This can significantly solve the problems of lag and poor operation caused by rendering charts with a large amount of data.

[0050] (2) This invention utilizes the high performance of JavaScript to cleverly process large amounts of data, always keeping the number of rendered points within a reasonable range, unaffected by the total amount of data. During the initial rendering and subsequent scaling and dragging operations on the chart, the algorithm is called in real time to re-bucket and sample the data, ensuring data integrity and trend integrity, thus achieving second-level chart rendering in the case of large amounts of data; and it runs smoothly during subsequent dragging and scaling operations on the chart, always keeping the number of rendered points within a reasonable range, unaffected by the total amount of data. Attached Figure Description

[0051] To more clearly illustrate the technical solutions in the embodiments or examples of this application, the accompanying drawings used in the embodiments or examples will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application and should not be regarded as a limitation of the scope. For those skilled in the art, other drawings can be obtained according to these drawings without creative effort.

[0052] Figure 1This is a schematic diagram of the steps of the present invention;

[0053] Figure 2 This is a schematic diagram of the process of the present invention;

[0054] Figure 3 This is a schematic diagram of the system structure of the present invention;

[0055] Figure 4 This is a schematic diagram of Embodiment 2 of the present invention without the use of a sampling point method;

[0056] Figure 5 This is a schematic diagram illustrating the sampling point selection using this method in Embodiment 2 of the present invention;

[0057] Figure 6 This is a schematic diagram illustrating scaling without using a sampling point method in Embodiment 2 of the present invention;

[0058] Figure 7 This is a schematic diagram illustrating the scaling method used in Embodiment 2 of the present invention. Detailed Implementation

[0059] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are some embodiments of this application, but not all embodiments. Generally, the components of the embodiments of this application described and shown in the accompanying drawings can be arranged and designed in various different configurations.

[0060] Therefore, the following detailed description of the embodiments of this application provided in the accompanying drawings is not intended to limit the scope of the claimed application, but merely to illustrate selected embodiments of the application. All other embodiments obtained by those skilled in the art based on the embodiments of this application without inventive effort are within the scope of protection of this application.

[0061] Example 1

[0062] like Figure 1 and Figure 2As shown, a method for rendering large amounts of data based on Echarts has the following main process: The system frontend sends a data request to the system backend. The system backend queries and processes the data according to the request content, compresses the queried data, and returns it to the system frontend. The system frontend calls the unified encapsulated Echarts configuration file, adds Echarts generation parameter configuration items, and calls the downsampling algorithm. The downsampling algorithm, combined with the Echarts parameter configuration items, calculates the data sent by the system backend to generate a complete line chart. The system frontend performs scaling and dragging actions on the complete line chart. Each operation calls the downsampling algorithm to re-bucket the data and perform data sampling. The line chart is shrunk, enlarged, and moved according to the scaling and dragging actions.

[0063] A method for rendering large amounts of data based on Echarts, comprising the following steps:

[0064] The system frontend sends a data request to the system backend. The system backend queries and processes the data based on the request content, compresses the queried data, and returns it to the system frontend. The data format returned by the system backend to the system frontend is JSON, and the specific format of the data is as follows:

[0065] {data:[y1,y2,y3,…],sampleFre:X}

[0066] Where data is an array of Y-values ​​of the point coordinates, and sampleFre is the sampling frequency.

[0067] The system front-end calls the unified encapsulated Echarts configuration file and adds Echarts parameter configuration items. The Echarts parameter configuration items include: title component, legend component, grid component in the Cartesian coordinate system, xAxis component in the Cartesian coordinate system grid, yAxis component in the Cartesian coordinate system grid, dataZoom component, tooltip component, axisPointer component, toolbox component, brush component, graphic component, and series-line component.

[0068] The system frontend calls the downsampling algorithm, which, in conjunction with Echarts configuration parameters, calculates the data sent by the system backend to generate a complete line chart. The steps of the downsampling algorithm are as follows:

[0069] The start and end dataZoom.end values ​​for the current graph zoom can be obtained using Echarts' region zoom component.

[0070] Use `dataZoom.start` and `dataZoom.end` to calculate the traversal conditions of the algorithm: the starting index `startIndex` and the ending index `endIndex`. The formula for calculating the starting index `startIndex` is as follows:

[0071] parseInt(arrayWidth*start-arrayWidth*(end-start)*start)

[0072] Here, parseInt is the native JavaScript rounding method, arrayWidth is the data length, start is dataZoom.start, and end is dataZoom.end.

[0073] The formula for calculating the ending index endIndex is as follows:

[0074] arrayWidth*end+arrayWidth*(end-start)*(1-end)

[0075] Define initialization variables points = [], currentX = -1, yMin = 0, yMax = 0; yMinIndex = 0; yMaxIndex = 0; where points is the set of data points after sampling, currentX is the bucket interval index, yMin is the minimum value in the current range, yMax is the maximum value in the current range, yMaxIndex is the index corresponding to yMax, and yMinIndex is the index corresponding to yMin;

[0076] The step size is calculated by combining dataZoom.start and dataZoom.end with the actual width of the chart and the length of the chart data. The formula for calculating the step size is as follows:

[0077] Step size = (dw * (end - start)) / cw

[0078] Where dw is the data length, end is the current zoom end position, start is the current zoom start position, and cw is the physical width of the chart display area.

[0079] Iterate through the data item 'data', starting from startIndex and ending at endIndex.

[0080] Within the traversal body, the step size is determined, and different logical operations are performed based on the determination result:

[0081] When the step size is less than 1, the coordinates of each point being traversed are pushed into points.

[0082] When the step size is greater than or equal to 1, each traversal checks the relationship between the current traversal value and yMin and yMax, and modifies yMin and yMax, while simultaneously modifying yMinIndex and yMaxIndex. The entry condition is: parseInt(current traversal index / step size)! == currentX is true. Points are pushed into yMax and yMin and their corresponding x values ​​to form a coordinate system. The currentX value is then modified to parseInt(current traversal index / step size), and the values ​​of yMin and yMax are both modified to the data Y corresponding to the next index. Simultaneously, yMinIndex and yMaxIndex are modified to the next index, preparing conditions for subsequent traversals. The formula for calculating the x value is:

[0083] parseFloat(((index / sampleFre)*1000).toFixed(2))

[0084] Here, parseFloat is the native JavaScript method for obtaining floating-point numbers, index is the index of either yMin or yMax, i.e., yMinIndex or yMaxIndex, and sampleFre is the sampling frequency.

[0085] The above logical operations continue until the traversal is complete, and the final data format of points is [{value:[x1,y1]},{value:[x2,y2]},{...}...}].

[0086] The system front-end performs zooming and dragging actions on the complete line chart. Each operation calls a downsampling algorithm to re-bucket the data. Re-bucketing divides the data evenly into multiple partitions, calculated based on the data length generated by the zooming and dragging actions, the physical width area occupied by the chart, and the current zoom start and end points. Data sampling is the process of extracting data points from all partitions. The line chart is then zoomed out, enlarged, and moved according to the zooming and dragging actions.

[0087] As described above, in this example, the system frontend sends a data request to the system backend. The system backend queries and processes the data based on the request, compresses the data, and returns it to the system frontend. The system frontend calls the unified encapsulated Echarts configuration file, adds Echarts generation parameter configuration items, and calls the downsampling algorithm. The downsampling algorithm, combined with the Echarts parameter configuration items, calculates the data sent by the system backend to generate a complete line chart. The system frontend performs scaling and dragging actions on the complete line chart. Each operation calls the downsampling algorithm to re-bucket the data and sample it. Based on the scaling and dragging actions, the line chart is shrunk, enlarged, and moved. By calling the algorithm, the chart data is obtained, and the complete line chart is generated. After the chart is generated, the overall trend is maintained. Each scaling and dragging action calls this downsampling algorithm, supporting all fine-grained aspects of the chart. This ensures smooth and accurate display of every point even at limited screen resolutions.

[0088] Example 2

[0089] like Figure 4-7 As shown, in this example, the "Intelligent Operation and Maintenance Big Data Cloud Platform" of Aerospace Intelligent Control Monitoring Technology Co., Ltd. is used to collect real-time data, specifically vibration data (16384 samples, 16384 sampling points). The system frontend sends a data request to the system backend. The system backend queries and processes the data according to the request content, compresses the queried data, and returns it to the system frontend. The data format returned by the system backend to the system frontend is JSON, and the specific format of the data is as follows:

[0090] {data:[y1,y2,y3,…],sampleFre:X}

[0091] Where data is an array of Y-values ​​of the point coordinates, and sampleFre is the sampling frequency.

[0092] The system front-end calls the unified encapsulated Echarts configuration file and adds Echarts parameter configuration items. The Echarts parameter configuration items include: title component, legend component, grid component in the Cartesian coordinate system, xAxis component in the Cartesian coordinate system grid, yAxis component in the Cartesian coordinate system grid, dataZoom component, tooltip component, axisPointer component, toolbox component, brush component, graphic component, and series-line component.

[0093] The system frontend calls the downsampling algorithm, which, in conjunction with Echarts configuration parameters, calculates the data sent by the system backend to generate a complete line chart. The steps of the downsampling algorithm are as follows:

[0094] The start and end dataZoom.end values ​​for the current graph zoom can be obtained using Echarts' region zoom component.

[0095] Use `dataZoom.start` and `dataZoom.end` to calculate the traversal conditions of the algorithm: the starting index `startIndex` and the ending index `endIndex`. The formula for calculating the starting index `startIndex` is as follows:

[0096] parseInt(arrayWidth*start-arrayWidth*(end-start)*start)

[0097] Here, parseInt is the native JavaScript rounding method, arrayWidth is the data length, start is dataZoom.start, and end is dataZoom.end.

[0098] The formula for calculating the ending index endIndex is as follows:

[0099] arrayWidth*end+arrayWidth*(end-start)*(1-end)

[0100] Define initialization variables points = [], currentX = -1, yMin = 0, yMax = 0; yMinIndex = 0; yMaxIndex = 0; where points is the set of data points after sampling, currentX is the bucket interval index, yMin is the minimum value in the current range, yMax is the maximum value in the current range, yMaxIndex is the index corresponding to yMax, and yMinIndex is the index corresponding to yMin;

[0101] The step size is calculated by combining dataZoom.start and dataZoom.end with the actual width of the chart and the length of the chart data. The formula for calculating the step size is as follows:

[0102] Step size = (dw * (end - start)) / cw

[0103] Where dw is the data length, end is the current zoom end position, start is the current zoom start position, and cw is the physical width of the chart display area.

[0104] Iterate through the data item 'data', starting from startIndex and ending at endIndex.

[0105] Within the traversal body, the step size is determined, and different logical operations are performed based on the determination result:

[0106] When the step size is less than 1, the coordinates of each point being traversed are pushed into points.

[0107] When the step size is greater than or equal to 1, each traversal checks the relationship between the current traversal value and yMin and yMax, and modifies yMin and yMax accordingly, while simultaneously modifying yMinIndex and yMaxIndex. The entry condition is: parseInt(current traversal index / step size)! If currentX is true, points are pushed into yMax and yMin and their corresponding x values ​​to form a coordinate system; the value of currentX is then modified to parseInt(current traversal index / step size) to prepare conditions for subsequent traversals, and the values ​​of yMin and yMax are both modified to the data Y corresponding to the next index; yMinIndex and yMaxIndex are simultaneously modified to the next index. The formula for calculating the x value is:

[0108] parseFloat(((index / sampleFre)*1000).toFixed(2))

[0109] Here, parseFloat is the native JavaScript method for obtaining floating-point numbers, index is the index of either yMin or yMax, i.e., yMinIndex or yMaxIndex, and sampleFre is the sampling frequency.

[0110] The above logical operations continue until the traversal is complete, and the final data format of points is [{value:[x1,y1]},{value:[x2,y2]},{...}...}].

[0111] The system frontend performs zooming and dragging actions on the complete line chart. Each operation calls a downsampling algorithm to re-bucket the data and resample it. The line chart is then zoomed in, zoomed out, and moved based on the zooming and dragging actions. No sampling point extraction method is used. Figure 4 As shown; sampling points are obtained using this method as follows. Figure 5 As shown; for scaling without using the sampling point method, the starting point is 30% and the ending point is 60%, as shown. Figure 6 As shown in the figure, the scaling method using sampling points starts at 30% and ends at 60%.

[0112] The final comparison showed that the overall trend of the sampled graph was almost the same as that of the original graph. After continuously zooming in on the graph, each point was still fully displayed.

[0113] Example 3

[0114] like Figure 3 As shown, a large-scale data rendering and processing system based on Echarts includes:

[0115] The backend storage module is used to receive data requests, query the data that needs to be processed according to the data requests, compress the data and return it;

[0116] The parameter configuration module is used to build a unified and encapsulated Echarts configuration file and generate Echarts parameter configuration items.

[0117] The data calculation module is used to call the parameter settings configured in the parameter configuration module and perform calculations on the data returned by the backend storage module;

[0118] The front-end display module is used to send data requests to the back-end storage module and display the line charts generated by the data calculation module.

[0119] The zoom and drag module is used to distinguish the user's zoom and drag actions, send signals to the data calculation module based on the user's operation, re-bucket the data, and then call the front-end display module to zoom in, zoom out, and move the line chart.

[0120] As described above, in this example, the backend storage module receives data requests, queries the data to be processed based on the data requests, compresses the data, and returns it. The parameter configuration module generates Echarts parameter configuration items. The data calculation module calls the parameter settings to calculate the data. The frontend display module sends data requests to display the calculated line chart. The zoom and drag module re-buckets the data according to the user's operation and zooms, moves, and scales the line chart.

[0121] The embodiments described above are merely preferred embodiments of the present invention, and while the descriptions are specific and detailed, they should not be construed as limiting the scope of the present invention. It should be noted that those skilled in the art can make various modifications, improvements, and substitutions without departing from the concept of the present invention, and these all fall within the protection scope of the present invention.

Claims

1. A method for rendering large amounts of data based on Echarts, characterized in that, The following steps are adopted: Step 1: The system frontend sends a data request to the system backend. The system backend queries and processes the data based on the request content, compresses the queried data, and returns it to the system frontend. The data format returned by the system backend to the system frontend is JSON, and the specific format of the data is as follows: ； in, This is an array of Y-coordinates of the point. The sampling frequency; Step 2: The system front-end calls the unified encapsulated Echarts configuration file and adds Echarts parameter configuration items. The Echarts parameter configuration items include: title component, legend component, grid component in the Cartesian coordinate system, xAxis component in the Cartesian coordinate system grid, yAxis component in the Cartesian coordinate system grid, dataZoom component, tooltip component, axisPointer component, toolbox component, brush component, graphic component, and series-line component. Step 3: The system front-end calls the first downsampling algorithm. The first downsampling algorithm, combined with the Echarts parameter configuration items, calculates the data sent by the system back-end to generate the complete line chart. Step 4: The system front-end performs scaling and dragging actions on the complete line chart. Each operation calls the second downsampling algorithm to re-bucket the data and perform data sampling. The line chart is shrunk, enlarged, and moved according to the scaling and dragging actions. The steps of the second downsampling algorithm are as follows: S401. Obtain the start and end dataZoom.start of the current graphics zoom using Echarts' region zoom component. S402. Use dataZoom.start and dataZoom.end to calculate the traversal conditions of the algorithm: the starting index startIndex and the ending index endIndex. The formula for calculating the starting index startIndex is as follows: ； Where parseInt is the native JavaScript rounding method, arrayWidth is the data length, start is dataZoom.start, and end is dataZoom.end; The formula for calculating the ending index endIndex is as follows: ； S403. Define initialization variables: points = [], currentX = -1, yMin = 0, yMax = 0; yMinIndex = 0; yMaxIndex = 0; where points is the set of data points after sampling, currentX is the bucket interval index, yMin is the minimum value in the current range, yMax is the maximum value in the current range, yMaxIndex is the index corresponding to yMax, and yMinIndex is the index corresponding to yMin. S404. Combine dataZoom.start and dataZoom.end with the actual width of the chart and the length of the chart data to calculate the step size. The formula for calculating the step size is as follows: ； Where dw is the data length, end is the current zoom end position, start is the current zoom start position, and cw is the physical width of the chart display area; S405. Iterate through the data item data, starting from startIndex and ending at endIndex. S406. In the traversal body, the step size is judged, and different logical operations are performed according to the judgment result. S407. The above logical operations continue until the traversal ends, and the final data format of points is [{value: [x1, y1]},{value:[x2, y2]},{...} ...}].

2. The method for rendering large amounts of data based on Echarts according to claim 1, characterized in that: The step size is determined, and different logical operations are performed based on the determination result as follows: When the step size is less than 1, the coordinates of each point being traversed are pushed into points. When the step size is greater than or equal to 1, each traversal determines the relationship between the current traversal value and yMin and yMax, and modifies yMin and yMax, while simultaneously modifying yMinIndex and yMaxIndex. Entry condition: if parseInt(current traversal index / step) !== currentX is true, push points into yMax and yMin and their corresponding x to form a coordinate system; modify the value of currentX to parseInt(current traversal index / step), and modify the values ​​of yMin and yMax to the data Y corresponding to the next index; simultaneously modify yMinIndex and yMaxIndex to the next index to prepare conditions for subsequent traversals.

3. The method for rendering large amounts of data based on Echarts according to claim 2, characterized in that: The formula for calculating the value of x is: ； Here, parseFloat is the native JavaScript method for obtaining floating-point numbers, index is the index of either yMin or yMax, i.e., yMinIndex or yMaxIndex, and sampleFre is the sampling frequency.

4. A large-scale data rendering and processing system based on Echarts, implementing the large-scale data rendering and processing method based on Echarts as described in claims 1-3, characterized in that, include: The backend storage module is used to receive data requests, query the data that needs to be processed according to the data requests, compress the data and return it; The parameter configuration module is used to build a unified and encapsulated Echarts configuration file and generate Echarts parameter configuration items. The data calculation module is used to call the parameter settings configured in the parameter configuration module and perform calculations on the data returned by the backend storage module; The front-end display module is used to send data requests to the back-end storage module and display the line charts generated by the data calculation module. The zoom and drag module is used to distinguish the user's zoom and drag actions, send signals to the data calculation module based on the user's operation, re-bucket the data, and then call the front-end display module to zoom in, zoom out, and move the line chart.

Images