CN119127999A

CN119127999A - A data visualization processing method, device, system and medium

Info

Publication number: CN119127999A
Application number: CN202411193757.7A
Authority: CN
Inventors: 俞悦
Original assignee: Ping An Property and Casualty Insurance Company of China Ltd
Current assignee: Ping An Property and Casualty Insurance Company of China Ltd
Priority date: 2024-08-28
Filing date: 2024-08-28
Publication date: 2024-12-13

Abstract

The present invention discloses a data visualization processing method, device, system and medium, the method comprising: obtaining map configuration information and data setting information input by a user in a configuration item area, the configuration item area being pre-built based on a Vue framework; sharing the map configuration information with a map component in a data display area through a Vuex warehouse in the Vue framework; the map component calling a specified three-dimensional engine to render a map based on the map configuration information, generating a target style map; obtaining corresponding target data according to the data setting information, and displaying the target data on a target style map in the data display area. The Vuex warehouse is used to conveniently and quickly realize data communication between components, so that during data visualization processing, the configured data can be directly shared with the map component and the three-dimensional engine can be called for rendering, and the target data can be displayed through a high-performance interactive target style map, thereby improving development efficiency and data visualization effects.

Description

Data visualization processing method, device, system and medium

Technical Field

The present invention relates to the technical field of financial science and technology, and in particular, to a data visualization processing method, device, system, and medium.

Background

In the financial insurance industry, many projects are presented with front-end development requirements for look-up charts and small card presentations, such as by a graphical component ECharts, which can be rendered with desired chart information based on canvas labels by some configuration or parameters.

The chart information can only show data from a two-dimensional perspective, such as a line graph, a chart and the like on ppt, and although the chart information improves the look and feel to a certain extent compared with pure digital texts, the visualization degree and interaction effect of a data display mode are still poor, and for insurance data with regional characteristics, if interactive 3D and 2D graphics need to be rendered, other plug-ins are needed to be used, so that the data visualization processing efficiency is lower.

Disclosure of Invention

In view of the foregoing deficiencies of the prior art, an object of the present invention is to provide a data visualization processing method, apparatus, system and medium applicable to the financial technology or other related fields, which are mainly aimed at improving the data visualization processing efficiency.

The technical scheme of the invention is as follows:

The first aspect of the invention provides a data visualization processing method, which comprises the following steps:

map configuration information and data setting information input by a user in a configuration item area are obtained, wherein the configuration item area is built in advance based on a Vue frame;

the map configuration information is shared to a map component of a data display area through Vuex warehouses in a Vue framework;

the map component invokes a specified three-dimensional engine to perform map rendering based on the map configuration information to generate a target style map;

and acquiring corresponding target data according to the data setting information, and displaying the target data on a target style map in the data display area.

In one embodiment, the acquiring the corresponding target data according to the data setting information includes:

Confirming a target data tag selected by a user according to the data setting information;

and reading the associated target data in the database according to the target data tag.

In one embodiment, after the displaying the target data on the target style map in the data display area, the method further comprises:

confirming data updating frequency according to the data setting information;

and reading the updated target data in the database according to the data updating frequency, and displaying the updated target data on the target style map in the data display area.

In response to a display status instruction for specified type data in the target data, the specified type data is displayed or hidden on a target style map in the data presentation area.

And displaying or hiding the data of the appointed subarea on the target style map in the data display area in response to a display state instruction of the appointed subarea in the target style map.

In one embodiment, the map configuration information includes map size, map color, map hierarchical settings, and map hierarchical style.

In one embodiment, the specified three-dimensional engine is a three.js three-dimensional engine based on WebGL packaging.

A second aspect of the present invention provides a data visualization processing apparatus, including:

The acquisition module is used for acquiring map configuration information and data setting information input by a user in a configuration item area, wherein the configuration item area is built in advance based on a Vue frame;

The data sharing module is used for sharing the map configuration information to a map component of the data display area through a Vuex warehouse in the Vue framework;

The rendering module is used for calling a specified three-dimensional engine to render the map based on the map configuration information by the map component to generate a target style map;

The data display module is used for acquiring corresponding target data according to the data setting information and displaying the target data on a target style map in the data display area.

A third aspect of the present invention provides a data visualization processing system comprising at least one processor, and

A memory communicatively coupled to the at least one processor, wherein,

The memory stores instructions executable by the at least one processor to enable the at least one processor to perform the data visualization processing method described above.

A fourth aspect of the present invention provides a non-volatile computer-readable storage medium storing computer-executable instructions that, when executed by one or more processors, cause the one or more processors to perform the data visualization processing method described above.

The method, the device, the system and the medium for data visualization processing have the advantages that compared with the prior art, map configuration information and data setting information input by a user in a configuration item area are obtained, the configuration item area is built in advance based on a Vue frame, the map configuration information is shared to a map component of a data display area through a Vuex warehouse in the Vue frame, the map component calls a specified three-dimensional engine to conduct map rendering based on the map configuration information to generate a target style map, corresponding target data are obtained according to the data setting information, and the target data are displayed on the target style map in the data display area. Through Vuex warehouse convenient and fast's realization data communication between the subassembly for can directly share the data that disposes for map subassembly and call three-dimensional engine and render when data visualization handles, demonstrate target data through the interactive target pattern map of high performance, improve development efficiency and data visualization effect.

Drawings

The invention will be further described with reference to the accompanying drawings and examples, in which:

FIG. 1 is a flowchart of a data visualization processing method according to an embodiment of the present invention;

FIG. 2 is a flowchart of a step of acquiring target data in the data visualization processing method according to the embodiment of the present invention;

FIG. 3 is another flowchart of a data visualization processing method according to an embodiment of the present invention;

Fig. 4 is a schematic functional block diagram of a data visualization processing device according to an embodiment of the present invention;

fig. 5 is a schematic hardware structure of a data visualization processing system according to an embodiment of the present invention.

Detailed Description

The present invention will be described in further detail below in order to make the objects, technical solutions and effects of the present invention more clear and distinct. It should be understood that the specific embodiments described herein are for purposes of illustration only and are not intended to limit the scope of the invention. Embodiments of the present invention are described below with reference to the accompanying drawings.

In order to solve the above-mentioned problems, the present invention provides a data visualization processing method, please refer to fig. 1, and fig. 1 is a flowchart of an embodiment of the data visualization processing method provided by the present invention. The system architecture applied to the data visualization processing method provided in the embodiment may include a first terminal device, a second terminal device, a third terminal device, a network and a server. The network is configured to provide a medium for a communication link between the first terminal device, the second terminal device, the third terminal device, and the server. The network may include various connection types, such as wired and/or wireless communication links, and the like.

The user may interact with the server over the network using the first terminal device, the second terminal device, the third terminal device, to receive or send messages, etc. Various communication client applications, such as a knowledge reading application, a web browser application, a search application, an instant messaging tool, a mailbox client and/or social platform software, etc. (for example only) may be installed on the first, second, and third terminal devices.

The first, second, third terminal devices may be various electronic devices having a display screen and supporting web browsing, including but not limited to smartphones, tablets, laptop and desktop computers, and the like.

The server may be a server providing various services, such as a background management server (by way of example only) providing support for content browsed by the user using the first terminal device, the second terminal device, and the third terminal device. The background management server may analyze and process the received data such as the user request, and feed back the processing result (e.g., the web page, information, or data obtained or generated according to the user request) to the terminal device. The server can be a cloud server, also called a cloud computing server or a cloud host, and is a host product in a cloud computing service system, so that the defects of high management difficulty and weak service expansibility in the traditional physical hosts and VPS service (' ' Virtual PRIVATE SERVER ' ' or ' VPS ' ' for short) are overcome. The server may also be a server of a distributed system or a server that incorporates a blockchain.

It should be noted that, the data visualization processing provided in the embodiment of the present invention may be generally executed by the first terminal device, the second terminal device, or the third terminal device. Accordingly, the data visualization processing provided by the embodiment of the invention can also be set in the first terminal device, the second terminal device or the third terminal device.

Or the data visualization processing method provided by the embodiment of the invention can be generally executed by a server. Accordingly, the data visualization processing device provided by the embodiment of the invention can be generally arranged in a server. The data visualization processing method provided by the embodiment of the invention can also be executed by a server or a server cluster which is different from the server and can be communicated with the first terminal equipment, the second terminal equipment, the third terminal equipment and/or the server. Accordingly, the data visualization processing device provided by the embodiment of the invention can also be arranged in a server or a server cluster which is different from the server and can communicate with the first terminal device, the second terminal device, the third terminal device and/or the server.

It should be understood that the above numbers of terminal devices, networks and servers are merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation.

As shown in fig. 1, the data visualization processing method provided in this embodiment specifically includes the following steps:

s100, map configuration information and data setting information input by a user in a configuration item area are obtained, wherein the configuration item area is built in advance based on a Vue frame.

In this embodiment, a user may perform interactive data visualization processing through a visual interactive interface of the visual platform, where the visual interactive interface includes a configuration item area and a data display area, and positions of the configuration item area and the data display area in the interface may be flexibly adjusted according to requirements, for example, the configuration item area is disposed on the left side of the interface, and the data display area is disposed on the right side of the interface, so that when the content of the configuration item area is adjusted, a display effect of a data map may be intuitively viewed in the data display area.

Wherein the configuration item area is pre-built based on a Vue framework, vue.js (commonly abbreviated as Vue) is a progressive JavaScript framework for building user interfaces. The method is designed to be very flexible, can be easily integrated into part of functions of the project or used for constructing a complete front-end application program, and can realize flexible data visualization processing because the Vue framework provides a declarative rendering mode through data binding and views can be automatically updated when data changes.

When setting up a configuration item area based on a Vue framework, an interface part for showing and editing application configuration is created, specifically, a new Vue item can be quickly initialized by using a Vue CLI (Vue command line tool), then a new Vue component, such as a config. Vue, is created under the src/components catalog, the component is used for showing and editing the configuration item, then an HTML template is written in the config. Vue, a v-for instruction is used for circularly rendering the configuration item list, logic of the component is defined in a < script > tag, and a CSS style is added in the < style > tag to beautify the display of the configuration item area, and after the creation is completed, the configuration component can be imported in a visual interaction interface of the visual platform to form the configuration item area.

The user can input map configuration information and data setting information in the built configuration item area, so that custom map style, map setting, data setting and the like are performed. The data setting information may be target data to be displayed, such as customer data or product data, which are directly input by a user, or may also be related data tables or data labels, so as to obtain corresponding target data by accessing a database. The map configuration information includes map size, map color, map grading arrangement, map grading pattern, etc., i.e. the user can customize the map pattern in the map configuration information, the map size includes map height and map width, the map color includes map ground color and color of each region when graded, the map grading arrangement includes grading criteria such as division by province level or division by geographic region including east China, north China, south China, middle China, southwest, northwest and northeast regions, etc., the map grading pattern includes data display pattern of each region, e.g. the user can select the data display pattern of each region as bubble, histogram, stack map or pie chart.

The map grading arrangement and the map grading pattern can be arranged independently or simultaneously, for example, when only the map grading arrangement is input, only the grading area map with different area colors is displayed, and the data display pattern of each area is not displayed, when only the map grading pattern is input, the map with uniform ground color is displayed, and corresponding data display patterns are displayed on different areas on the map with uniform ground color, and when the map grading arrangement is input on the map grading pattern, the grading area map with different area colors is displayed, and corresponding data display patterns are displayed on the areas with different colors. The map configuration can be flexibly selected according to requirements, of course, some map configuration templates can be set and stored in advance in the visualization platform, a user can directly select a proper template, and the map configuration information of the template is directly obtained based on the selection of the user, so that the visualization processing efficiency is further improved.

S200, sharing the map configuration information to a map component of a data display area through a Vuex warehouse in a Vue framework.

In this embodiment, the configuration item component may share data to the map component in the data presentation area through the Vuex repository in the Vue framework, the Vuex repository is a state management mode and repository developed specifically for vue.js applications, which provides a centralized storage to manage states (states) of all components, and ensures that the states change in a predictable manner with corresponding rules, and when applied to the data visualization platform, the configured data may be stored in the Vuex repository and accessed and used by components as needed, thereby achieving data sharing between the configuration item component and the map component. The use of Vuex stores reduces direct dependencies between components, map components need not know where data is coming from, it only care about reading the required data from Vuex stores, and thus sharing data to map components through Vuex stores can make map components more focused on their responsibilities, i.e., rendering and manipulating the map, while data management and status updates are handled by Vuex stores, this approach of separating points of interest helps to build maintainable and extensible applications, improving map rendering efficiency.

Specifically, in the Vue framework, in addition to using Vuex warehouse to share data of the configuration item component to the map component, data sharing between components may be implemented by other manners, for example, using other state management libraries, such as MobX Vue, reduce, etc., for inter-component communication, or for data sharing between parent and child components, the parent component may transfer data to the child component (map component) through props, the child component may feed back data changes to the parent component through events (events), or an Event Bus (Event Bus) mode may be used, which is a communication manner based on events, allowing any component to trigger events, and other components monitor and respond to the events, or an object in the configuration item component may be defined as observable (Vue. Observable), then a reference of this object is shared in the whole application, when the object data changes, all components using this object may be updated, and so on, and in particular, the embodiment may be flexibly selected according to application requirements, component structure, and so on, and this embodiment is not limited.

And S300, the map component invokes a specified three-dimensional engine to perform map rendering based on the map configuration information, and a target style map is generated.

In this embodiment, after the configuration item component shares data to the map component through the Vuex warehouse of the vue.js, the map component can call the API interface of the specified three-dimensional engine to configure the acquired map configuration information into the map object to perform map rendering, so as to generate the target style map corresponding to the map configuration information.

Specifically, the specified three-dimensional engine is a three.js three-dimensional engine based on WebGL packaging, webGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics on web pages without the use of plug-ins. WebGL uses the < canvas > element of HTML5 to accelerate graphics rendering by using a Graphics Processing Unit (GPU) to communicate directly with the GPU, thereby enabling hardware accelerated graphics display. Meanwhile, in order to improve development efficiency, the embodiment uses a three-dimensional engine three.js based on WebGL encapsulation for map rendering, wherein three.js is a JavaScript library based on WebGL, and provides a set of tools and functions for simplifying 3D content creation. Js abstracts the complexity of WebGL so that developers can more easily create and expose three-dimensional animations and scenes on web pages. Since three.js simplifies the use of WebGL, the developer can focus on creating content instead of the underlying graphic details, and thus work efficiency can be further improved. The map component in the embodiment calls the three-dimensional api to configure the data to the map object, so that map rendering is completed, a visual interaction interface can be provided by using the three-dimensional engine of the three-dimensional api, the data of each client/product can be seen more intuitively, and the efficiency and the intuitiveness of data visual processing are improved.

S400, acquiring corresponding target data according to the data setting information, and displaying the target data on a target style map in the data display area.

In this embodiment, the user may input data setting information in the configuration item area, for example, target data to be displayed, including customer data or product data, which is directly input by the user, or may also be a related data table or data tag, so as to obtain corresponding target data by accessing the database. Based on the target data acquired by the data setting information, the target data is combined with a target pattern map, and the target data is displayed on the target pattern map in the data display area, so that the regional distribution condition and specific numerical values of the target data can be intuitively displayed on the target pattern map, for example, sales data conditions of all regions of a certain product are displayed, sales of the region is displayed in corresponding areas on the map in a manner of, for example, a bar graph, a pie graph and the like, and the longitudinal comparison of the product data is realized.

According to the embodiment, through the data communication among the components conveniently and rapidly realized by the Vuex warehouse, the configured data can be directly shared to the map component and the three-dimensional engine is called for rendering during the data visualization processing, the development efficiency is improved, the target data is displayed through the high-performance interactive target style map, the user can quickly understand the geographic distribution and the spatial relationship of the insurance product data, the user can conveniently compare the data differences among different areas or positions, and the data visualization effect is improved.

In one embodiment, as shown in fig. 2, the obtaining the corresponding target data according to the data setting information includes:

s401, confirming a target data tag selected by a user according to the data setting information;

S402, reading the associated target data in a database according to the target data tag.

In this embodiment, the target data to be displayed is automatically retrieved by accessing the database, and the user may directly select a target data tag in the configuration item area through a drop-down frame or a search frame, where the target data tag includes, for example, a time tag, an area tag, a data index, and the specific data index may be a data item related to a financial product, for example, premium income, odds, comprehensive cost rate, new policy number, renewal rate, insurance depth, insurance density, and the like of the insurance product. According to the method and the device, the data corresponding to each data tag can be stored in the database in advance, the target data tag is determined through the selection of the user in all the data tags, and then the database interface is called to inquire to obtain the corresponding target data, so that the user can quickly and flexibly select the target data to be displayed, and the data visualization efficiency is improved.

In one embodiment, as shown in fig. 3, after the target data is displayed on the target style map in the data display area, the method further includes:

S500, confirming data updating frequency according to the data setting information;

And S600, reading updated target data in a database according to the data updating frequency, and displaying the updated target data on a target style map in the data display area.

In this embodiment, the user may also set the data update frequency in the data setting information, so that periodic update display may be performed on the target data on the map, for example, the user selects to update the target data once every day, every week, every month, or the like in the configuration item area through the drop-down frame, and based on the data update frequency, when the update period arrives, the database interface is called to read the updated target data, and update the data on the target style map in the data display area based on the updated target data, where the influence of outdated information may be reduced by periodically updating the data, so that the data displayed on the map is ensured to be up to date, and the change trend of the data may be dynamically reflected, so that the user follows the change of the target data in time.

In one embodiment, after the target data is presented on a target style map in the data presentation area, the method further comprises:

In this embodiment, after the target style map is generated and the target data is displayed, a display status button may be set for each different type in the target data, where the display status button is used to switch the display status of the corresponding type of data on the map to a hidden status, for example, when the user sets premium income, pay rate, new policy number and follow-up rate for displaying a certain insurance product in a nationwide range, at this time, by default, four types of data, for example, a histogram, a stack diagram, etc. of the 4 types of data, are displayed on the target style map at the same time, when the user needs to hide a certain type of data, for example, premium income, the user may click on the display status button to trigger a display status instruction, so that the display status of the premium income item of data on the target style map is switched to a hidden status, and, likewise, when the premium income item of data needs to be displayed again on the map, the display status button may be switched to a display status again, so that flexible and convenient display status editing may be performed on the generated different types of data on the target style map, and the display status may be satisfied.

In this embodiment, after a target pattern map is generated and target data is displayed, a display status button may be set for each sub-region in the target data, where the display status button is used to switch the display status of the corresponding sub-region on the map and hide, for example, when a user sets a fee collection for displaying a certain insurance product in seven regions including eastern, north, south, west, north and north, the data of the complete seven sub-regions is displayed on the target pattern map by default at this time, when the user needs to hide the data of a certain designated sub-region, such as eastern region, the display status button may be clicked to trigger a display status instruction, so that the display status of the premium income of the eastern region on the target pattern map is switched to a hidden status, and similarly, when the premium of the eastern region needs to be displayed again on the map, the display status button may be clicked again to switch the display status of the data of each sub-region on the generated target pattern map, thereby implementing display status editing, and enhancing the convenience of data visualization processing.

It should be noted that, there is not necessarily a certain sequence between the steps, and those skilled in the art will understand that, in different embodiments, the steps may be performed in different orders, that is, may be performed in parallel, may be performed interchangeably, or the like.

Another embodiment of the present invention provides a data visualization processing apparatus, as shown in fig. 4, an apparatus 1 includes:

The acquiring module 11 is configured to acquire map configuration information and data setting information input by a user in a configuration item area, where the configuration item area is built in advance based on a Vue frame;

the data sharing module 12 is used for sharing the map configuration information to a map component of the data display area through a Vuex warehouse in the Vue frame;

The rendering module 13 is used for calling a specified three-dimensional engine to render the map based on the map configuration information by the map component to generate a target style map;

The data display module 14 is configured to obtain corresponding target data according to the data setting information, and display the target data on a target style map in the data display area.

The modules referred to in the present invention refer to a series of computer program instruction segments capable of completing specific functions, and are more suitable for describing the execution process of the data visualization processing than the program, and specific implementation manners of each module refer to the corresponding method embodiments and are not repeated herein.

In one embodiment, the data presentation module 14 includes:

a tag confirmation unit for confirming the target data tag selected by the user according to the data setting information;

and the data reading unit is used for reading the associated target data in the database according to the target data tag.

In one embodiment, the device 1 comprises:

the updating frequency confirming module is used for confirming the updating frequency of the data according to the data setting information;

and the data updating module is used for reading the updated target data in the database according to the data updating frequency and displaying the updated target data on the target style map in the data displaying area.

In one embodiment, the device 1 further comprises:

and the first display setting module is used for responding to a display state instruction of the specified type data in the target data and displaying or hiding the specified type data on a target style map in the data display area.

In one embodiment, the device 1 further comprises:

and the second display setting module is used for responding to a display state instruction of a designated sub-region in the target pattern map and displaying or hiding the data of the designated sub-region on the target pattern map in the data display region.

Another embodiment of the present invention provides a data visualization processing system, as shown in fig. 5, the system 10 includes:

One or more processors 110 and a memory 120, one processor 110 being illustrated in fig. 5, the processors 110 and the memory 120 being coupled via a bus or other means, the bus coupling being illustrated in fig. 5.

Processor 110 is used to implement various control logic for system 10, which may be a general purpose processor, a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field Programmable Gate Array (FPGA), a single-chip microcomputer, an ARM (Acorn RISC MACHINE) or other programmable logic device, discrete gate or transistor logic, discrete hardware components, or any combination of these components. Also, the processor 110 may be any conventional processor, microprocessor, or state machine. The processor 110 may also be implemented as a combination of computing devices, e.g., a combination of a DSP and a microprocessor, a plurality of microprocessors, one or more microprocessors in conjunction with a DSP, and/or any other such configuration.

The memory 120 is used as a non-volatile computer readable storage medium for storing non-volatile software programs, non-volatile computer executable programs and modules, such as program instructions corresponding to the data visualization processing method in the embodiment of the present invention. The processor 110 executes various functional applications of the system 10 and data processing, i.e., implements the data visualization processing method in the method embodiments described above, by running non-volatile software programs, instructions, and units stored in the memory 120.

The memory 120 may include a storage program area that may store an operating system, application programs required for at least one function, and a storage data area that may store data created according to the use of the system 10, etc. In addition, memory 120 may include high-speed random access memory, and may also include non-volatile memory, such as at least one magnetic disk storage device, flash memory device, or other non-volatile solid-state storage device. In some embodiments, memory 120 may optionally include memory located remotely from processor 110, which may be connected to system 10 via a network. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.

One or more units are stored in memory 120 that, when executed by one or more processors 110, perform the data visualization processing method in any of the method embodiments described above, for example, performing the steps of:

confirming data updating frequency according to the data setting information;

Embodiments of the present invention provide a non-transitory computer readable storage medium storing computer executable instructions which, when executed by one or more processors, perform a data visualization processing method in any of the method embodiments described above, for example, performing the steps of:

confirming data updating frequency according to the data setting information;

By way of example, nonvolatile storage media can include Read Only Memory (ROM), programmable ROM (PROM), electrically Programmable ROM (EPROM), electrically erasable ROM (EEPROM), or flash memory. Volatile memory can include Random Access Memory (RAM), which acts as external cache memory. By way of illustration and not limitation, RAM may be available in many forms such as Synchronous RAM (SRAM), dynamic RAM, (DRAM), synchronous DRAM (SDRAM), double Data Rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), SYNCHLINK DRAM (SLDRAM), and Direct Rambus RAM (DRRAM). The disclosed memory components or memories of the operating environments described herein are intended to comprise one or more of these and/or any other suitable types of memory.

In summary, the method, the device, the system and the medium for data visualization processing comprise the steps of obtaining map configuration information and data setting information input by a user in a configuration item area, wherein the configuration item area is built in advance based on a Vue frame, sharing the map configuration information to a map component of a data display area through a Vuex warehouse in the Vue frame, calling a specified three-dimensional engine by the map component to conduct map rendering based on the map configuration information, generating a target style map, obtaining corresponding target data according to the data setting information, and displaying the target data on the target style map in the data display area. Through Vuex warehouse convenient and fast's realization data communication between the subassembly for can directly share the data that disposes for map subassembly and call three-dimensional engine and render when data visualization handles, demonstrate target data through the interactive target pattern map of high performance, improve development efficiency and data visualization effect.

Of course, those skilled in the art will appreciate that implementing all or part of the above described methods may be accomplished by way of a computer program stored on a non-volatile computer readable storage medium, which when executed may comprise the steps of the above described method embodiments, to instruct related hardware (e.g., processors, controllers, etc.). The storage medium may be a memory, a magnetic disk, a floppy disk, a flash memory, an optical memory, etc.

It is to be understood that the invention is not limited in its application to the examples described above, but is capable of modification and variation in light of the above teachings by those skilled in the art, and that all such modifications and variations are intended to be included within the scope of the appended claims.

Claims

1. A data visualization processing method, comprising:

Obtain the map configuration information and data setting information entered by the user in the configuration item area, where the configuration item area is pre-built based on the Vue framework;

The map configuration information is shared with the map component of the data display area through the Vuex warehouse in the Vue framework;

The map component calls a specified three-dimensional engine to perform map rendering based on the map configuration information to generate a target style map;

Corresponding target data is acquired according to the data setting information, and the target data is displayed on a target style map in the data display area.

2. The data visualization processing method according to claim 1, characterized in that the step of obtaining corresponding target data according to the data setting information comprises:

confirming the target data tag selected by the user according to the data setting information;

The associated target data is read from the database according to the target data tag.

3. The data visualization processing method according to claim 1, characterized in that after displaying the target data on the target style map in the data display area, the method further comprises:

confirming the data update frequency according to the data setting information;

The updated target data is read from the database according to the data update frequency, and the updated target data is displayed on the target style map in the data display area.

4. The data visualization processing method according to claim 1, characterized in that after displaying the target data on the target style map in the data display area, the method further comprises:

In response to a display status instruction for data of a specified type in the target data, the data of the specified type is displayed or hidden on a target style map in the data display area.

5. The data visualization processing method according to claim 1, characterized in that after displaying the target data on the target style map in the data display area, the method further comprises:

In response to a display status instruction for a designated sub-area in the target style map, data of the designated sub-area is displayed or hidden on the target style map in the data display area.

6. The data visualization processing method according to claim 1 is characterized in that the map configuration information includes map size, map color, map classification settings and map classification style.

7. The data visualization processing method according to claim 1 is characterized in that the designated 3D engine is a Three.js 3D engine based on WebGL encapsulation.

8. A data visualization processing device, comprising:

The acquisition module is used to obtain the map configuration information and data setting information entered by the user in the configuration item area, and the configuration item area is pre-built based on the Vue framework;

A data sharing module is used to share the map configuration information with the map component of the data display area through the Vuex warehouse in the Vue framework;

A rendering module, used for the map component to call a specified three-dimensional engine to perform map rendering based on the map configuration information to generate a target style map;

The data display module is used to obtain corresponding target data according to the data setting information and display the target data on a target style map in the data display area.

9. A data visualization processing system, characterized in that the system comprises at least one processor; and

a memory communicatively connected to the at least one processor; wherein,

The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor so that the at least one processor can execute the data visualization processing method according to any one of claims 1 to 7.

10. A non-volatile computer-readable storage medium, characterized in that the non-volatile computer-readable storage medium stores computer-executable instructions, and when the computer-executable instructions are executed by one or more processors, the one or more processors can execute the data visualization processing method described in any one of claims 1-7.