A real-time big data visualization method and system based on echarts

Abstract

The present invention relates to a real-time big data visualization method and system based on echarts. Ajax is used to respond to http requests and real-time data rendering is used to obtain echarts charts. JS and its method library are used for programming, and the compatibility is good. Ajax is used for http response, and its asynchrony is utilized. A pedometer is added asynchronously, and the number of steps is specified to realize dynamic data, thereby realizing real-time data visualization. Asynchronous processing and local refresh do not affect other modules, and the independence is good. The user operation is simplified, the user is convenient to view data, the product viewing is improved, and the user has a good experience.

Description

Technical Field

[0001] The present invention relates to the technical field of data visualization processing, and in particular to a real-time big data visualization method and system based on echarts. Background Art

[0002] Data visualization refers to the visual interpretation of data through expression, modeling, and display of three-dimensional, surface, attribute, and animation. With the help of graphical means, information can be conveyed and communicated clearly and effectively.

[0003] Ajax is a web development technology for creating interactive, fast and dynamic web applications. It is asynchronous JS and XML. It also has the feature of partial refresh. It can update part of the web page without reloading the entire web page.

[0004] The operating environment of the Javascript language is "single-threaded", that is, each operation can only complete one task. If there are multiple tasks, then you need to wait for the previous task to be completed before completing the next task. In order to prevent this "queuing" behavior from wasting time and delaying the running of the entire task, resulting in a bad user experience, JS asynchronous processing divides the task execution mode into two types: synchronous and asynchronous. Ajax is a typical JS asynchronous processing.

[0005] With the rapid development of big data, data visualization has entered people's field of vision. Based on data visualization, there are relatively mature visualization libraries Echarts and D3.js, which are widely used in tools. The financial field is no exception. Especially in the tools related to test case management, the statistics of some test data are particularly important. In test case management, the number of related test cases, defects, execution status, etc. require test managers to obtain data from the tools, process, analyze, and handle them by themselves, and then report them. This requires a good statistical chart to help managers count and analyze the quantity, and finally easily draw conclusions through data visualization.

[0006] The existing technology does not really solve the real-time problem, that is, it cannot update immediately as soon as the data changes, because the data update is achieved through timed refresh, and there is essentially no detection of whether the data is modified, so the data is updated within a fixed time. The refresh time period can be shortened so that it cannot be seen by the naked eye, and similar "real-time" data acquisition can be achieved. Summary of the invention

[0007] In order to solve the shortcomings of the prior art, the present invention proposes a real-time big data visualization method and system based on echarts, which are programmed using JS and its method library, and have good compatibility; ajax is used for http response, and its asynchrony is utilized to asynchronously add a pedometer and specify the number of steps to realize dynamic data, thereby realizing real-time data visualization, asynchronous processing, local refresh, no impact on other modules, and good independence; user operation is simplified, it is convenient for users to view data, the product viewing is improved, and users have a good experience.

[0008] To achieve the above objectives, the technical solutions adopted by the present invention include:

[0009] A real-time big data visualization method based on echarts, characterized by comprising:

[0010] S1, ajax responds to http request, and extracts first matching information from the http request, wherein the first matching information at least includes a data tag and a chart indication tag;

[0011] S2, obtain real-time data;

[0012] S3, using the data tag to verify the acquired real-time data, when the real-time data does not match the data tag, rejecting the real-time data and re-performing step S2;

[0013] S4. When the real-time data matches the data label, use the chart to indicate the label to match the corresponding chart class;

[0014] S5. Based on the matched graph class, use real-time data rendering to obtain the echarts chart;

[0015] S6. Record the step frequency corresponding to the echarts chart and update the http request;

[0016] S7. Repeat steps S1 to S6 according to the updated http request.

[0017] Furthermore, the step S2 comprises:

[0018] Ajax sends the http request to the backend;

[0019] The backend performs logical processing on http requests;

[0020] Retrieve corresponding real-time data from the database based on the logical processing results;

[0021] Ajax feeds real-time data back to the front end.

[0022] Furthermore, the logic processing includes parsing the http request and identifying the data items corresponding to the request.

[0023] Furthermore, the ajax sending the http request to the backend includes ajax connecting to the backend through JNDI.

[0024] Furthermore, the step S4 comprises:

[0025] Use chart indicator label matching to determine the chart class selected by echarts chart;

[0026] Use chart indicator label matching to determine the components selected by the echarts chart;

[0027] The step S5 includes: calling the rendering library to render the echarts chart according to the selected chart class and component.

[0028] Furthermore, the step S6 comprises:

[0029] Use the preset number of steps to match the updated step frequency and control the frequency of the update http request.

[0030] The present invention also relates to a real-time big data visualization system based on echarts, characterized in that it includes:

[0031] Request response module, used to respond to http requests through ajax and obtain real-time data;

[0032] The back-end logic processing module is used to perform logical processing on http requests;

[0033] Database, used to store real-time data;

[0034] A matching module, which is used to verify the acquired real-time data using data tags;

[0035] Rendering module, used to obtain echarts charts using real-time data rendering;

[0036] The pedometer module is used to record the step frequency corresponding to the echarts chart.

[0037] The present invention also relates to a computer-readable storage medium, characterized in that a computer program is stored on the storage medium, and the computer program implements the above method when executed by a processor.

[0038] The present invention also relates to an electronic device, characterized in that it comprises a processor and a memory;

[0039] The memory is used to store the first matching information and the real-time data;

[0040] The processor is used to execute the above method by calling the first matching information and the real-time data.

[0041] The present invention also relates to a computer program product, comprising a computer program and / or instructions, characterized in that the computer program and / or instructions implement the steps of the above method when executed by a processor.

[0042] The beneficial effects of the present invention are:

[0043] The real-time big data visualization method and system based on echarts of the present invention are adopted, and JS and its method library are used for programming, so as to have good compatibility; ajax is adopted for http response, and its asynchrony is utilized, and a pedometer is added asynchronously, and the number of steps is specified to realize dynamic data, thereby realizing real-time data visualization, asynchronous processing, partial refresh, no influence on other modules, and good independence; user operation is simplified, and it is convenient for users to view data, so as to improve the ornamental value of the product and provide users with a good experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0044] Figure 1 The figure is a flow chart of the real-time big data visualization method based on echarts in the present invention.

[0045] Figure 2 This is a schematic diagram of the structure of the real-time big data visualization system based on echarts in the present invention. DETAILED DESCRIPTION

[0046] In order to more clearly understand the content of the present invention, it will be described in detail with reference to the drawings and embodiments.

[0047] The first aspect of the present invention relates to a process of steps as follows Figure 1 The real-time big data visualization method based on echarts shown includes:

[0048] S1. Ajax responds to an http request and extracts first matching information from the http request, wherein the first matching information at least includes a data tag and a chart indication tag.

[0049] Ajax realizes the communication of data between client and server. By utilizing its asynchronous processing and partial refresh features, real-time data refresh can be achieved without fully loading the entire page, thus improving the user experience.

[0050] In order to further decouple requests, data and charts, the first matching information extracted from the http request is used to verify and match the subsequent real-time data and charts, rather than directly using the http request. The first matching information includes a data tag for verifying the data and an icon indication tag for matching the chart. The data tag can include any basic information of the data, such as data generation time, data object, data storage location, data format, etc., or it can be a custom tag using a special selected verification method. The chart indication tag is selected from the preset chart class and component according to the content of the http request.

[0051] S2. Get real-time data. Specifically, ajax connects to the backend through JNDI and sends the http request to the backend; the backend performs logical processing on the http request; the corresponding real-time data is retrieved from the database according to the result of the logical processing. The logical processing includes parsing the http request and identifying the data items corresponding to the request; ajax feeds the real-time data back to the frontend.

[0052] Using JNDI avoids tight coupling between the program and the database, and helps to achieve asynchronous and real-time updates of charts.

[0053] S3. Use the data tag to verify the acquired real-time data. When the real-time data does not match the data tag, reject the real-time data and re-execute step S2.

[0054] During verification, it is preferred to adopt a semi-strong verification mode, especially when using data tags containing multiple different verification items. You can pre-set verification items that must be met, verification items that require manual confirmation, and verification items that only provide feedback on verification information after execution. This allows for more efficient data verification and helps users select the best data for visualization.

[0055] For data that cannot pass the verification, it needs to be rejected and the real-time data acquisition step needs to be re-executed. At this time, due to the time consumed by the verification, the re-acquired real-time data will be different from the previous data, so it is still necessary to re-verify it completely according to the data label, instead of just verifying the verification items that failed the previous data separately.

[0056] When the data obtained after repeated multiple times still cannot pass the verification, the request can be judged as failed according to the preset repetition threshold, the execution is stopped and the failure information is fed back.

[0057] S4. When the real-time data matches the data label, the chart indication label is used to match the corresponding chart class. In particular, the chart indication label is used to match and determine the chart class and components selected by the echarts chart.

[0058] When the chart indication tag cannot correctly obtain the chart class and component selected by the corresponding echarts chart, it is preferred to use the preset general value for processing and feedback the chart drawing error information. At the same time, it can jump independently and re-execute step S1 to re-acquire the chart indication tag (first matching information), and compare the newly obtained chart indication tag with the previous chart indication tag to determine whether they are consistent. When it is determined that they are inconsistent, select the newly obtained chart indication tag (first matching information) and re-execute step S4; when it is determined that they are consistent, feedback the request error information.

[0059] S5. Based on the matched graph class, use real-time data and call the rendering library to render the echarts chart according to the selected graph class and components.

[0060] Using the Echarts visualization library to implement data visualization and representing charts through JavaScript code is a relatively mature existing technology. However, this conventional processing method cannot achieve real-time updates of corresponding data changes. It can only "cheat" human perception by shortening the refresh time to obtain a data refresh result similar to real-time.

[0061] Since the JS chart library is Echarts, you must first import the Echarts.js toolkit. Then write the backend logic, use JNDI to connect to the database, use JS asynchronous processing, send HTTP requests to the backend regularly, and then refresh the echarts table regularly, so that real-time data display can be achieved with the naked eye.

[0062] S6. Record the step frequency corresponding to the echarts chart, use the preset number of steps to match the updated step frequency, control the frequency of updating the http request, and update the http request.

[0063] This frequency control can realize asynchronous update of echarts chart and real-time data, and update echarts chart at specific real-time data node according to selection.

[0064] The traditional way of data visualization is to access the background data and assign it to the echarts chart library. However, there is no clear solution to obtain data in real time, so ajax is used to respond to http, and its asynchrony is used to asynchronously add a pedometer and specify the number of steps to achieve dynamic data and real-time data visualization.

[0065] S7. Repeat steps S1 to S4 according to the updated http request to achieve real-time update of the echarts chart.

[0066] For fields such as financial data that require high real-time data, by applying the above methods, data visualization can be used to simplify the processing steps and help test managers quickly understand and analyze project progress and defects. Based on this, echarts charts are chosen to achieve data visualization. At the same time, given that people who use test case tools have real-time update operations, real-time big data visualization is added to ensure the accuracy of statistical data.

[0067] When using the above method, you can edit the corresponding program code for data visualization by using the following specific steps:

[0068] Import echarts.js;

[0069] The div that stores the chart;

[0070] Import echarts file;

[0071] Call the drawing method to draw;

[0072] Create a method to draw ECharts chart;

[0073] echarts chart implementation, inject options into myChart;

[0074] Set up local real-time refresh, obtain the chart's options object, and obtain data through Ajax, including setting ajax parameters;

[0075] Pass the successful data to echarts;

[0076] Ajax background interaction, introduce related js.

[0077] The corresponding program code can be compiled through this exemplary step. Data visualization involves the echarts chart part, the pedometer calling ajax to access the backend part, and the backend processing feedback data part.

[0078] Another aspect of the present invention also relates to a real-time big data visualization system based on echarts, whose structure is as follows Figure 2 As shown, including:

[0079] The request response module is used to respond to http requests through ajax and obtain real-time data. In particular, ajax connects to the backend through JNDI and sends http requests to the backend.

[0080] The back-end logic processing module is used to perform logic processing on the http request and retrieve the corresponding real-time data from the database according to the logic processing result. The logic processing includes parsing the http request and identifying the data item corresponding to the request.

[0081] Database, used to store real-time data.

[0082] A matching module is used to verify the acquired real-time data using data labels.

[0083] The rendering module is used to obtain the echarts chart using real-time data rendering, including determining the graph class selected by the echarts chart, determining the components selected by the echarts chart, and calling the rendering library to render the echarts chart according to the selected graph class and components.

[0084] The pedometer module is used to record the step frequency corresponding to the echarts chart, and use the preset number of steps to match the updated step frequency to control the frequency of updating the http request.

[0085] By using this system, the above-mentioned operation processing method can be executed and the corresponding technical effects can be achieved.

[0086] An embodiment of the present invention also provides a computer-readable storage medium capable of implementing all the steps in the method in the above embodiment, wherein a computer program is stored on the computer-readable storage medium, and when the computer program is executed by a processor, all the steps in the method in the above embodiment are implemented.

[0087] An embodiment of the present invention also provides an electronic device for executing the above method. As an implementation device of the method, the electronic device has at least a processor and a memory, and in particular, the memory stores data and related computer programs required for executing the method, such as first matching information and real-time data, etc., and the processor calls the data and programs in the memory to execute all steps of the implementation method and obtains the corresponding technical effect.

[0088] Preferably, the electronic device may include a bus architecture, the bus may include any number of interconnected buses and bridges, and the bus will include various circuits linked together by one or more processors and memories. The bus may also link together various other circuits such as peripherals, voltage regulators, and power management circuits, which are all well known in the art and are therefore not further described herein. The bus interface provides an interface between the bus and the receiver and transmitter. The receiver and transmitter may be the same component, i.e., a transceiver, providing a unit for communicating with various other systems over a transmission medium. The processor is responsible for managing the bus and general processing, while the memory may be used to store data used by the processor when performing operations.

[0089] In addition, the electronic device may further include components such as a communication module, an input unit, an audio processor, a display, and a power supply. The processor (or controller, operation control) used may include a microprocessor or other processor device and / or a logic device, which receives input and controls the operation of various components of the electronic device; the memory may be one or more of a cache, a flash memory, a hard drive, a removable medium, a volatile memory, a non-volatile memory, or other suitable devices, which may store the above-mentioned related data information, and may also store a program for executing related information, and the processor may execute the program stored in the memory to realize information storage or processing, etc.; the input unit is used to provide input to the processor, for example, it may be a key or a touch input device; the power supply is used to provide power to the electronic device; the display is used to display display objects such as images and text, for example, it may be an LCD display. The communication module is a transmitter / receiver that sends and receives signals via an antenna. The communication module (transmitter / receiver) is coupled to the processor to provide input signals and receive output signals, which may be the same as the case of a conventional mobile communication terminal. Based on different communication technologies, multiple communication modules may be provided in the same electronic device, such as a cellular network module, a Bluetooth module and / or a wireless local area network module, etc. The communication module (transmitter / receiver) is also coupled to a speaker and a microphone via an audio processor to provide an audio output via the speaker and receive an audio input from the microphone, thereby realizing a common telecommunication function. The audio processor may include any suitable buffer, decoder, amplifier, etc. In addition, the audio processor is also coupled to a central processor, so that recording can be performed on the machine through the microphone, and the sound stored on the machine can be played through the speaker.

[0090] Those skilled in the art will appreciate that embodiments of the present invention may be provided as methods, systems, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0091] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A system that specifies the functions of a box or multiple boxes.

[0092] These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer-readable memory produce a product including an instruction system, which is implemented in the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0093] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process in the computer or other programmable device. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps of the functions specified in a box or multiple boxes. Although the preferred embodiments of the present invention have been described, those skilled in the art may make additional changes and modifications to these embodiments once they know the basic creative concept. Therefore, the attached claims are intended to be interpreted as including the preferred embodiments and all changes and modifications that fall within the scope of the present invention.

[0094] The above is only a preferred specific embodiment of the present invention, but the protection scope of the present invention is not limited thereto. Any changes or substitutions that can be easily thought of by a person skilled in the art within the technical scope disclosed by the present invention should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention should be based on the protection scope of the claims.

Claims

1. A real-time big data visualization method based on echarts, characterized in that: include: S1, ajax responds to http request, and extracts first matching information from the http request, wherein the first matching information at least includes a data tag and a chart indication tag; S2, obtain real-time data; S3, using the data tag to verify the acquired real-time data, when the real-time data does not match the data tag, rejecting the real-time data and re-performing step S2; S4. When the real-time data matches the data label, use the chart to indicate the label to match the corresponding chart class; S5. Based on the matched graph class, use real-time data rendering to obtain the echarts chart; S6. Record the step frequency corresponding to the echarts chart and update the http request; S7. Repeat steps S1 to S6 according to the updated http request.

2. The method according to claim 1, characterized in that The step S2 comprises: Ajax sends the http request to the backend; The backend performs logical processing on http requests; Retrieve corresponding real-time data from the database based on the logical processing results; Ajax feeds real-time data back to the front end.

3. The method according to claim 2, characterized in that The logic processing includes parsing the http request and identifying the data items corresponding to the request.

4. The method according to claim 2, characterized in that The ajax sends the http request to the backend, including connecting the ajax to the backend through JNDI.

5. The method according to claim 1, characterized in that The step S4 comprises: Use chart indicator label matching to determine the chart class selected by echarts chart; Use chart indicator label matching to determine the components selected by the echarts chart; The step S5 includes: calling the rendering library to render the echarts chart according to the selected chart class and component.

6. The method according to claim 1, characterized in that The step S6 comprises: Use the preset number of steps to match the updated step frequency and control the frequency of the update http request.

7. A real-time big data visualization system based on echarts, characterized in that: include: Request response module, used to respond to http requests through ajax and obtain real-time data; The back-end logic processing module is used to perform logical processing on http requests; Database, used to store real-time data; A matching module, which is used to verify the acquired real-time data using data tags; Rendering module, used to obtain echarts charts using real-time data rendering; The pedometer module is used to record the step frequency corresponding to the echarts chart.

8. A computer-readable storage medium, characterized in that: The storage medium stores a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 6 is implemented.

9. An electronic device, characterized in that: including a processor and a memory; The memory is used to store the first matching information and the real-time data; The processor is used to execute the method according to any one of claims 1 to 6 by calling the first matching information and the real-time data.

10. A computer program product comprising a computer program and / or instructions, characterized in that: When the computer program and / or the instructions are executed by a processor, the steps of the method according to any one of claims 1 to 6 are implemented.

Images