Low-code data visualization method and system based on ECharts and WebSocket

Abstract

The invention discloses a low-code data visualization method and system based on ECharts and WebSocket, and belongs to the technical field of data processing.The method comprises the steps that a Web data management system is built; development of a visual platform data configuration page in the Web data management system is completed, connection with a back-end server is established, and communication is completed; in the data management system, configuring data required during display of the visual platform, sending the data to a back-end server, and storing the data in a database; establishing a data visualization platform, creating a websocket connection, completing handshake for three times, and confirming that communication between the data visualization platform and a back-end server is normal; processing the collected data through a big data cleaning and data comparison algorithm, and sending the data with differences to a visual data platform through websocket connection; the data visualization platform carries out initialization and updated data display; the problems of slow data transmission, poor interaction performance, long development period, high maintenance cost and the like in the prior art can be solved, big data visualization is realized, the development efficiency is improved, and the cost is reduced.

Description

Technical Field

[0001] The present invention belongs to the field of data processing technology, and specifically relates to a low-code data visualization method and system based on ECharts and WebSocket. Background Art

[0002] In the era of rapid development of big data, data visualization has gradually entered people's field of vision. Data visualization refers to the presentation of structured or unstructured data in a graphical way, so as to present the information hidden in the data to people in a more intuitive way. Compared with the traditional way of presenting data in tables or documents, visualization presents data in a more intuitive chart way, which is more concise and reliable. Data dashboard systems have been widely used in various industries for real-time monitoring, data analysis, etc.

[0003] ECharts is a JS-based data visualization icon library that provides intuitive, vivid, interactive, and customizable data visualization charts. As a powerful open source library, it is widely used in various data visualization projects. However, the existing data dashboards have the following deficiencies in data transmission and real-time performance:

[0004] (1) Data transmission: The traditional HTTP+timer response model has delays when processing real-time data, making it difficult to meet the needs of high-frequency data updates. It wastes resources when there is no data change, and cannot refresh in real time when there is a data change.

[0005] (2) Poor interactive performance: When the amount of data is huge, the efficiency of data processing and rendering is low, and the interactive response speed of the system is slow, resulting in system performance bottlenecks and affecting user experience;

[0006] (3) Every time the requirements change, the layout design must be redone, resulting in a longer development cycle. Summary of the invention

[0007] In view of the above-mentioned deficiencies in the prior art, the present invention provides a low-code data visualization method and system based on ECharts and WebSocket. The method solves the problems of slow data transmission, poor interactive performance, long development cycle and high maintenance cost in the prior art by optimizing the data transmission method, enhancing system interactivity and improving data processing efficiency. It realizes big data visualization while improving development efficiency and reducing costs.

[0008] The present invention is achieved through the following technical solutions:

[0009] In a first aspect, the present invention provides a low-code data visualization method based on ECharts and WebSocket, which specifically includes the following steps:

[0010] S1. Build a Web data management system;

[0011] S2. Complete the development of the data configuration page of the visualization platform in the Web data management system, and establish a connection with the back-end server to complete the communication;

[0012] S3. In the data management system, configure the data required for visualization platform display, send it to the backend server, and save it in the database;

[0013] S4. Build a data visualization platform, create a websocket connection, complete a three-way handshake, and confirm that the communication between the data visualization platform and the backend server is normal;

[0014] S5, process the collected data through big data cleaning and data comparison algorithms, and send the different data to the visualization data platform through the websocket connection;

[0015] S6. The data visualization platform is initialized and updates data for display.

[0016] Furthermore, step S1 specifically includes the following contents:

[0017] S11. Install the node development environment;

[0018] S12. Use the command line npm create vite@latest "project name" to create a vue3+vite project;

[0019] S13. Use the command line npminstall element-plus --save to complete the installation of the component library required for development;

[0020] S14. Complete the construction of the data management platform framework and start page development.

[0021] Furthermore, step S2 specifically includes the following contents:

[0022] S21. Use javascript with component library to develop pages;

[0023] S22. Configure the routing of the page;

[0024] S23. Use the command line npminstall axios to install the http component library;

[0025] S24. Complete the http communication component encapsulation.

[0026] Furthermore, step S3 specifically includes the following contents:

[0027] S31. Configuring data in a data management system;

[0028] S32. Use the encapsulated http component to send data;

[0029] S33. The backend server receives the data and saves it into the database.

[0030] Furthermore, in step S31, the data includes types and data formats of pie charts, bar charts, and word cloud charts.

[0031] Furthermore, step S4 specifically includes the following contents:

[0032] S41. Use the command line npminstall vue-native-websocket --save to complete the websocket installation;

[0033] S42. Initialize websocket, complete three-way handshake, and confirm successful communication connection;

[0034] S43. Complete secondary packaging according to the websocket proxy protocol.

[0035] Furthermore, step S6 specifically includes the following contents:

[0036] S61. The data management platform receives data;

[0037] S62. Determine whether the data visualization platform is initialized. If not, initialize the data view and display the data. If it is initialized, directly modify the different data and display it.

[0038] In a second aspect, the present invention provides a low-code data visualization system based on ECharts and WebSocket, comprising:

[0039] Data management system building module, used to build a Web data management system;

[0040] The low-code platform configuration module is used to complete the development of the visualization platform data configuration page in the Web data management system and to establish a connection with the back-end server to complete the communication;

[0041] The data configuration module is used to configure the data required for visualization platform display in the data management system, send it to the back-end server, and save it in the database;

[0042] The data visualization platform building module is used to build the data visualization platform, create a websocket connection, complete the three-way handshake, and confirm that the communication between the data visualization platform and the backend server is normal;

[0043] The data processing module is used to process the collected data through big data cleaning and data comparison algorithms, and send the different data to the visualization data platform through the websocket connection;

[0044] The low-code platform display module is used to initialize the data visualization platform and update data for display.

[0045] In a third aspect, the present invention further provides a computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, a low-code data visualization method based on ECharts and WebSocket as described in any one of the present invention is implemented.

[0046] In a fourth aspect, the present invention further provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements a low-code data visualization method based on ECharts and WebSocket as described in any one of the present inventions.

[0047] Compared with the prior art, the advantages of the present invention are as follows:

[0048] The present invention provides a low-code data visualization method and system based on ECharts and WebSocket. The method solves the problems of slow data transmission, poor interactive performance, long development cycle and high maintenance cost in the prior art by optimizing the data transmission method, enhancing system interactivity and improving data processing efficiency. It realizes big data visualization while improving development efficiency and reducing costs. BRIEF DESCRIPTION OF THE DRAWINGS

[0049] In order to more clearly illustrate the specific embodiments of the present invention or the technical solutions in the prior art, the following is a brief introduction to the drawings required for the specific embodiments or the description of the prior art. In all the drawings, similar elements or parts are generally identified by similar reference numerals. In the drawings, the elements or parts are not necessarily drawn according to the actual scale.

[0050] Figure 1 A flowchart of a low-code data visualization method based on ECharts and WebSocket of the present invention;

[0051] Figure 2 It is a structural block diagram of a low-code data visualization system based on ECharts and WebSocket of the present invention;

[0052] Figure 3 This is a schematic diagram of the structure of an electronic device in Example 3 of the present invention. DETAILED DESCRIPTION

[0053] In order to clearly and completely describe the technical solution and its specific working process of the present invention, the specific implementation methods of the present invention are as follows in conjunction with the accompanying drawings of the specification:

[0054] In the present invention, unless otherwise clearly specified and limited, the terms "installed", "connected", "connected", "fixed" and the like should be understood in a broad sense, for example, it can be a fixed connection, a detachable connection, or an integral connection; it can be a mechanical connection or an electrical connection; it can be a direct connection or an indirect connection through an intermediate medium, it can be the internal connection of two elements or the interaction relationship between two elements, unless otherwise clearly defined. For ordinary technicians in this field, the specific meanings of the above terms in the present invention can be understood according to specific circumstances.

[0055] In the present invention, unless otherwise clearly specified and limited, a first feature being "above" or "below" a second feature may mean that the first and second features are in direct contact, or the first and second features are in indirect contact through an intermediate medium. Moreover, a first feature being "above", "above" or "above" a second feature may mean that the first feature is directly above or obliquely above the second feature, or simply means that the first feature is higher in level than the second feature. A first feature being "below", "below" or "below" a second feature may mean that the first feature is directly below or obliquely below the second feature, or simply means that the first feature is lower in level than the second feature.

[0056] In the description of this specification, the description with reference to the terms "one embodiment", "some embodiments", "example", "specific example", or "some examples" etc. means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present invention. In this specification, the schematic representations of the above terms do not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described may be combined in any one or more embodiments or examples in a suitable manner. In addition, those skilled in the art may combine and combine the different embodiments or examples described in this specification and the features of the different embodiments or examples, without contradiction.

[0057] Example 1

[0058] like Figure 1 As shown, this embodiment provides a low-code data visualization method based on ECharts and WebSocket, which specifically includes the following steps:

[0059] S1. Build a Web data management system, including the following:

[0060] S11. Install the node development environment;

[0061] S12. Use the command line npm create vite@latest "project name" to create a vue3+vite project;

[0062] S13. Use the command line npminstall element-plus --save to complete the installation of the component library required for development;

[0063] S14. Complete the construction of the data management platform framework and start page development;

[0064] S2. Complete the development of the data configuration page of the visualization platform in the management system, and create a connection with the backend service to complete the communication, including the following:

[0065] S21. Use javascript with component library to develop pages;

[0066] S22. Configure the route (path) of the page;

[0067] S23. Use the command line npminstall axios to install the http component library;

[0068] S24. Complete the http communication component encapsulation;

[0069] S3. In the data management system, configure the data required for visualization platform display (such as the type and data format of pie charts, bar charts, and word cloud charts), send it to the backend server, and save it in the database, including the following:

[0070] S31. Configuring data in a data management system;

[0071] S32. Use the encapsulated http component to send data;

[0072] S33. The backend server receives the data and saves it to the database;

[0073] S4. Build a data visualization platform, create a websocket connection, complete a three-way handshake, and confirm that the communication between the data visualization platform and the backend service is normal, including the following:

[0074] S41. Use the command line npminstall vue-native-websocket --save to complete the websocket installation;

[0075] S42. Initialize websocket, complete three-way handshake, and confirm successful communication connection;

[0076] S43. Complete secondary packaging according to the websocket proxy protocol.

[0077] S5. The collected data is cleaned and compared with other algorithms, and the different data are sent to the visualization data platform through the websocket connection, including the following:

[0078] Through data cleaning (removing duplicate data, processing missing values, correcting data errors, and data verification) algorithms, the different data are calculated and sent to the data management platform through the send() method of websocket;

[0079] S6. The data visualization platform is initialized and the updated data is displayed, including the following:

[0080] S61. The data management platform receives data;

[0081] S62. Determine whether the data visualization platform is initialized;

[0082] i. If not initialized, initialize the data view and display the data

[0083] ii. If it has been initialized, directly modify the different data and display it.

[0084] Example 2

[0085] like Figure 2 As shown, this embodiment provides a low-code data visualization system based on ECharts and WebSocket, including:

[0086] Example 3

[0087] Figure 3 This is a schematic diagram of the structure of a computer device in Example 3 of the present invention. Figure 3 A block diagram of an exemplary computer device 12 suitable for use in implementing embodiments of the present invention is shown. Figure 3 The computer device 12 shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present invention.

[0088] like Figure 3 As shown, the computer device 12 is in the form of a general-purpose computing device. The components of the computer device 12 may include, but are not limited to: one or more processors or processing units 16, a system memory 28, and a bus 18 that connects various system components (including the system memory 28 and the processing unit 16).

[0089] Bus 18 represents one or more of several types of bus structures, including a memory bus or memory controller, a peripheral bus, an accelerated graphics port, a processor or a local bus using any of a variety of bus architectures. By way of example, these architectures include, but are not limited to, an Industry Standard Architecture (ISA) bus, a Micro Channel Architecture (MAC) bus, an Enhanced ISA bus, a Video Electronics Standards Association (VESA) local bus, and a Peripheral Component Interconnect (PCI) bus.

[0090] The computer device 12 typically includes a variety of computer system readable media. These media can be any available media that can be accessed by the computer device 12, including volatile and non-volatile media, removable and non-removable media.

[0091] The system memory 28 may include computer system readable media in the form of volatile memory, such as random access memory (RAM) 30 and / or cache memory 32. The computer device 12 may further include other removable / non-removable, volatile / non-volatile computer system storage media. By way of example only, the storage system 34 may be used to read and write non-removable, non-volatile magnetic media ( Figure 3 not shown, usually called a "hard drive"). Although Figure 3 Not shown in the figure, a disk drive for reading and writing to a removable non-volatile disk (e.g., a "floppy disk"), and an optical disk drive for reading and writing to a removable non-volatile optical disk (e.g., a CD-ROM, a DVD-ROM, or other optical media) may be provided. In these cases, each drive may be connected to the bus 18 via one or more data medium interfaces. The memory 28 may include at least one program product having a set (e.g., at least one) of program modules that are configured to perform the functions of the various embodiments of the present invention.

[0092] A program / utility 40 having a set (at least one) of program modules 42 may be stored, for example, in the memory 28. Such program modules 42 include, but are not limited to, an operating system, one or more application programs, other program modules, and program data, each of which or some combination may include an implementation of a network environment. The program modules 42 generally perform the functions and / or methods of the embodiments described herein.

[0093] The computer device 12 may also communicate with one or more external devices 14 (e.g., keyboard, pointing device, display 24, etc.), may also communicate with one or more devices that enable a user to interact with the computer device 12, and / or communicate with any device that enables the computer device 12 to communicate with one or more other computing devices (e.g., network card, modem, etc.). Such communication may be performed through an input / output (I / O) interface 22. In addition, the computer device 12 in this embodiment, the display 24 does not exist as an independent individual, but is embedded in the mirror surface, and when the display surface of the display 24 is not displayed, the display surface of the display 24 and the mirror surface are visually integrated. In addition, the computer device 12 may also communicate with one or more networks (e.g., local area network (LAN), wide area network (WAN) and / or public network, such as the Internet) through a network adapter 20. As shown in the figure, the network adapter 20 communicates with other modules of the computer device 12 through a bus 18. It should be understood that although not shown in the figures, other hardware and / or software modules may be used in conjunction with the computer device 12, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems.

[0094] The processing unit 16 executes various functional applications and data processing by running programs stored in the system memory 28, such as implementing a low-code data visualization method based on ECharts and WebSocket provided in an embodiment of the present invention.

[0095] Example 4

[0096] Embodiment 4 of the present invention provides a computer-readable storage medium having a computer program stored thereon. When the program is executed by a processor, a low-code data visualization method based on ECharts and WebSocket is implemented as provided in all the embodiments of the invention of this application.

[0097] Any combination of one or more computer-readable media may be used. A computer-readable medium may be a computer-readable signal medium or a computer-readable storage medium. A computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination thereof. More specific examples (a non-exhaustive list) of computer-readable storage media include: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In this document, a computer-readable storage medium may be any tangible medium containing or storing a program that may be used by or in conjunction with an instruction execution system, device, or device.

[0098] Computer-readable signal media may include a data signal propagated in baseband or as part of a carrier wave, which carries a computer-readable program code. Such propagated data signals may take a variety of forms, including, but not limited to, electromagnetic signals, optical signals, or any suitable combination of the above. Computer-readable signal media may also be any computer-readable medium other than a computer-readable storage medium, which may send, propagate, or transmit a program for use by or in conjunction with an instruction execution system, apparatus, or device.

[0099] Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.

[0100] Computer program code for performing the operations of the present invention may be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, C++, and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a separate software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0101] Note that the above are only preferred embodiments of the present invention and the technical principles used. Those skilled in the art will understand that the present invention is not limited to the specific embodiments described herein, and that various obvious changes, readjustments and substitutions can be made by those skilled in the art without departing from the scope of protection of the present invention. Therefore, although the present invention has been described in more detail through the above embodiments, the present invention is not limited to the above embodiments, and may include more other equivalent embodiments without departing from the concept of the present invention, and the scope of the present invention is determined by the scope of the appended claims.

Claims

1. A low-code data visualization method based on ECharts and WebSocket, characterized in that: The specific steps include: S1. Build a Web data management system; S2. Complete the development of the data configuration page of the visualization platform in the Web data management system, and establish a connection with the back-end server to complete the communication; S3. In the data management system, configure the data required for visualization platform display, send it to the backend server, and save it in the database; S4. Build a data visualization platform, create a websocket connection, complete a three-way handshake, and confirm that the communication between the data visualization platform and the backend server is normal; S5, process the collected data through big data cleaning and data comparison algorithms, and send the different data to the visualization data platform through the websocket connection; S6. The data visualization platform is initialized and updates data for display.

2. A low-code data visualization method based on ECharts and WebSocket as described in claim 1, characterized in that: Step S1 specifically includes the following contents: S11. Install the node development environment; S12. Use the command line npm create vite@latest "project name" to create a vue3+vite project; S13. Use the command line npminstall element-plus --save to complete the installation of the component library required for development; S14. Complete the construction of the data management platform framework and start page development.

3. A low-code data visualization method based on ECharts and WebSocket as described in claim 1, characterized in that: Step S2 specifically includes the following contents: S21. Use javascript with component library to develop pages; S22. Configure the routing of the page; S23. Use the command line npminstall axios to install the http component library; S24. Complete the http communication component encapsulation.

4. A low-code data visualization method based on ECharts and WebSocket as claimed in claim 1, characterized in that: Step S3 specifically includes the following contents: S31. Configuring data in a data management system; S32. Use the encapsulated http component to send data; S33. The backend server receives the data and saves it into the database.

5. A low-code data visualization method based on ECharts and WebSocket as described in claim 4, characterized in that: In step S31, the data includes the types and data formats of pie charts, bar charts, and word cloud charts.

6. A low-code data visualization method based on ECharts and WebSocket as described in claim 1, characterized in that: Step S4 specifically includes the following contents: S41. Use the command line npminstall vue-native-websocket --save to complete the websocket installation; S42. Initialize websocket, complete three-way handshake, and confirm successful communication connection; S43. Complete secondary packaging according to the websocket proxy protocol.

7. A low-code data visualization method based on ECharts and WebSocket as claimed in claim 1, characterized in that: Step S6 specifically includes the following contents: S61. The data management platform receives data; S62. Determine whether the data visualization platform is initialized. If not, initialize the data view and display the data. If it is initialized, directly modify the different data and display it.

8. A low-code data visualization system based on ECharts and WebSocket, used to implement the method according to any one of claims 1 to 7, characterized in that: include: Data management system building module, used to build a Web data management system; The low-code platform configuration module is used to complete the development of the visualization platform data configuration page in the Web data management system and to establish a connection with the back-end server to complete the communication; The data configuration module is used to configure the data required for visualization platform display in the data management system, send it to the back-end server, and save it in the database; The data visualization platform building module is used to build the data visualization platform, create a websocket connection, complete the three-way handshake, and confirm that the communication between the data visualization platform and the backend server is normal; The data processing module is used to process the collected data through big data cleaning and data comparison algorithms, and send the different data to the visualization data platform through the websocket connection; The low-code platform display module is used to initialize the data visualization platform and update data for display.

9. A computer device, characterized in that: It includes a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the program, a low-code data visualization method based on ECharts and WebSocket as described in any one of claims 1 to 7 is implemented.

10. A computer-readable storage medium, characterized in that: A computer program is stored thereon, which, when executed by a processor, implements a low-code data visualization method based on ECharts and WebSocket as described in any one of claims 1 to 7.

Images