Visual presentation method and device of business data, electronic equipment and storage medium

Abstract

The invention provides a business data visual presentation method and device, electronic equipment and a computer readable storage medium, and relates to the technical field of data processing. The visualization presentation method comprises the steps that a visualization demand and data source information of business data are acquired, and the visualization demand comprises a target type label; respectively obtaining a visual function code file and a visual interface code file corresponding to the target type label from a preset component template library and a component interface library; and based on a preset component base code file, combined data source information, the visual function code file and the visual interface code file, generating a visual component corresponding to the target type label so as to visually present business data. The problems that in the prior art, the development and configuration workload of the visual component is large, and the development and application efficiency of the visual component is low are at least solved. The method is suitable for a data visualization scene.

Description

Technical Field

[0001] The present invention relates to the field of data processing technology, and in particular to a method, device, electronic device and computer-readable storage medium for visually presenting business data. Background Art

[0002] In the wave of digital transformation, enterprises are paying more and more attention to various types of data on production links and business performance. They often obtain key indicators through collection and processing, and present them in the form of a large visual screen to support problem discovery, process improvement, and performance summary.

[0003] The user-friendly display of data on the existing visualization screen usually relies on a mature chart component library, including: 1. Special visualization components realize visualization presentation, such as dashboards, bar charts, and line charts, which require developers to develop specific business visualization components and write parameter configuration interfaces; when calling special visualization components, select the specific business visualization components that have been developed, and configure the corresponding data interface and style parameters; 2. General visualization components realize visualization presentation, and developers need to complete the module development that supports code input and rendering without designing special interface interfaces; when calling, directly configure the specific business visualization component code and data on the foreground.

[0004] However, the existing technology has the following problems: 1. Dedicated visualization components are used to implement visualization presentation methods, and the workload in the development phase is large. Different types of visualization components require different code writing. The input parameters received by different types of visualization components are also very different, and corresponding input configuration interfaces need to be developed, resulting in low overall implementation efficiency.

[0005] 2. General visualization components implement visualization presentation. Although one-time development in the development phase can directly support the implementation of multiple types of visualization components, the dynamic data update problem is often not solved when configuring specific business visualization component codes and data in the application phase, and application personnel are required to have basic component code usage capabilities. At the same time, the pre-code increases convenience while also bringing certain security risks. Summary of the invention

[0006] The technical problem to be solved by the present invention is to provide a method, device, electronic device and computer-readable storage medium for visual presentation of business data in response to the above-mentioned deficiencies in the prior art. The method can realize automatic and rapid visual presentation of business data, reduce the development and configuration workload of visual components that meet the needs of business data visualization, improve the development and application efficiency of visual components, thereby reducing the time for visual presentation of business data and improving the convenience, security and user experience of visual presentation.

[0007] In a first aspect, the present invention provides a method for visualizing business data, comprising: obtaining visualization requirements and data source information of business data, wherein the visualization requirements include a target type label; respectively obtaining a visualization function code file and a visualization interface code file corresponding to the target type label from a preset component template library and a component interface library; based on a preset component base code file, combining the data source information, the visualization function code file and the visualization interface code file, generating a visualization component corresponding to the target type label to visualize the business data.

[0008] Preferably, before respectively obtaining the visualization function code files and visualization interface code files corresponding to the target type tags from the preset component template library and component interface library, the method for visual presentation of business data further includes: constructing the component template library and the component interface library to obtain the preset component template library and the component interface library, wherein the component template library stores various types of visualization function code files, and the component interface library stores various types of visualization interface code files; constructing an association relationship between itself and various types of visualization function code files and visualization interface code files, generating a component base code file to obtain a preset component base code file, wherein the association relationship includes at least one of the following: a reference relationship between projects, functions, dependencies, functions or objects.

[0009] Preferably, the construction of the component template library and the component interface library specifically includes: accessing the chart component library and extracting various types of visualization component instance source code in the chart component library; constructing various types of visualization function code files and visualization interface files based on various types of visualization component instance source code; identifying type tags corresponding to the visualization function code files and the visualization interface files, the type tags are used to characterize the types of the visualization function code files and the visualization interface files; obtaining a set of visualization function code files and a set of visualization interface files marked with type tags, and forming a component template library and a component interface library respectively.

[0010] Preferably, the construction of various types of visualization function code files and visualization interface files based on various types of visualization component instance source codes specifically includes: extracting corresponding visualization function codes from various types of visualization component instance source codes, wherein the visualization function codes include visualization function static codes, visualization interface parameters and visualization style parameters; replacing the visualization interface parameters and visualization style parameters of the visualization function codes with visualization interface data variables and visualization style variables, respectively, to obtain various types of visualization function code files; defining data fields and style fields corresponding to the visualization interface data variables and visualization style variables, respectively; and constructing database queries and combination statements based on the visualization interface data variables, visualization style variables, data fields and style fields, to obtain various types of visualization interface files.

[0011] Preferably, the preset component base code file combines the data source information, the visualization function code file and the visualization interface code file to generate a visualization component corresponding to the target type tag to visualize the business data, specifically including: combining the data source information and the visualization interface file to generate an assignment code file corresponding to the target type tag; splicing the assignment code file and the visualization function code file to obtain a visualization component code file corresponding to the target type tag; running the visualization component code file to obtain a visualization component corresponding to the target type tag.

[0012] Preferably, the combination of the data source information and the visualization interface code file generates an assignment code file corresponding to the target type tag, specifically including: filling the data source information into the data field of the visualization interface code file to generate a first visualization interface code file corresponding to the target type tag; running the first visualization interface code file, extracting the business data corresponding to the data source information, and generating a first assignment code file corresponding to the target type tag, wherein the first assignment code file includes a first assignment statement and a second assignment statement, the first assignment statement is used to characterize the assignment of business data to the target type visualization interface data variable, and the second assignment statement is used to characterize the assignment of preset style parameters to the target type visualization interface data variable.

[0013] Preferably, the visualization requirement also includes target style information, the combined data source information and the visualization interface code file generate an assignment code file corresponding to the target type tag, and the method for visualizing business data also includes: filling the data source information and the target style information into the data field and the style field of the visualization interface file respectively, generating a second visualization interface code file corresponding to the target type tag; running the second visualization interface code file, extracting the business data corresponding to the data source information, and generating a second assignment code file, wherein the second assignment code file includes a first assignment statement and a third assignment statement, and the third assignment statement is used to characterize the assignment of the target style information to the target type visualization interface data variable.

[0014] In a second aspect, the present invention also provides a visualization presentation device for business data, comprising: a first acquisition module, a second acquisition module and a generation module, the first acquisition module being used to acquire visualization requirements and data source information of business data, wherein the visualization requirements include target type labels, the second acquisition module being connected to the first acquisition module and being used to respectively acquire visualization function code files and visualization interface code files corresponding to the target type labels from preset component template libraries and component interface libraries, the generation module being connected to the second acquisition module and being used to combine data source information, the visualization function code files and the visualization interface code files based on preset component base code files to generate visualization components corresponding to the target type labels to visualize the business data.

[0015] In a third aspect, the present invention further provides an electronic device, comprising a memory and a processor, wherein the memory stores a computer program, and the processor is configured to run the computer program to implement the method for visualizing business data provided in the first aspect.

[0016] In a fourth aspect, the present invention further provides a computer-readable storage medium having a computer program stored thereon, and when the computer program is executed by a processor, the method for visualizing the business data provided in the first aspect above is implemented.

[0017] The present invention provides a method, device, electronic device and computer-readable storage medium for visual presentation of business data. By obtaining the target type label and data source information of the business data in the business data visualization requirements, respectively obtaining the visualization function code file and visualization interface code file corresponding to the target type label from the preset component template library and component interface library, and combining the data source information, visualization function code file and visualization interface code file based on the preset component base code file, a visualization component corresponding to the target type label is generated to visualize the business data. Since the required type of visualization component code file can be obtained from the preset component template library and component interface library according to the visualization requirements, and the required visualization component is obtained by combining, the present invention can realize automatic and rapid visualization presentation of business data, reduce the development and configuration workload of visualization components that meet the business data visualization requirements, improve the development and application efficiency of visualization components, thereby reducing the time of business data visualization presentation, and improving the convenience, security and user experience of visualization presentation. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] Figure 1 This is a flowchart of a method for visually presenting business data according to Embodiment 1 of the present invention;

[0019] Figure 2 This is a flow chart of a method for visually presenting business data in Embodiment 2 of the present invention;

[0020] Figure 3 This is a schematic diagram of the structure of a large visual screen device in Embodiment 3 of the present invention;

[0021] Figure 4 This is a schematic diagram of the structure of a device for visualizing presentation of business data in Example 4 of the present invention. DETAILED DESCRIPTION

[0022] In order to enable those skilled in the art to better understand the technical solution of the present invention, the embodiments of the present invention will be further described in detail below with reference to the accompanying drawings.

[0023] It should be understood that the specific embodiments and drawings described herein are only used to explain the present invention rather than to limit the present invention.

[0024] It can be understood that, in the absence of conflict, the various embodiments of the present invention and the various features in the embodiments can be combined with each other.

[0025] It can be understood that, for the convenience of description, the drawings of the present invention only show the parts related to the present invention, while the parts irrelevant to the present invention are not shown in the drawings.

[0026] It can be understood that each unit and module involved in the embodiments of the present invention may correspond to only one physical structure, or may be composed of multiple physical structures, or multiple units and modules may be integrated into one physical structure.

[0027] It can be understood that, without conflict, the functions and steps marked in the flowcharts and block diagrams of the present invention may occur in an order different from that marked in the drawings.

[0028] It is understood that the flowcharts and block diagrams of the present invention illustrate the possible architectures, functions, and operations of the systems, devices, equipment, and methods according to the various embodiments of the present invention. Each box in the flowchart or block diagram may represent a unit, module, program segment, or code, which contains executable instructions for implementing the specified functions. Moreover, each box or combination of boxes in the block diagram and flowchart may be implemented by a hardware-based system that implements the specified functions, or may be implemented by a combination of hardware and computer instructions.

[0029] It can be understood that the units and modules involved in the embodiments of the present invention can be implemented by software or hardware. For example, the units and modules can be located in a processor.

[0030] Embodiment 1:

[0031] like Figure 1 As shown, this embodiment provides a method for visualizing business data. The method for visualizing business data includes:

[0032] S101, obtaining visualization requirements and data source information of business data, wherein the visualization requirements include target type tags.

[0033] Optionally, the visualization requirements also include target style information.

[0034] In this embodiment, visualization requirements refer to the user's requirements for the visualization of business data. Visualization components are tools for displaying data and information, and are usually used in data analysis, reporting, and user interface design scenarios. In this embodiment, the user selects the target type label of the visualization component according to the visualization requirements of specific business data, such as: selecting the "Dashboard" label, entering the target style information and the data source information of the business data to achieve the visualization requirements of the business data. The data source information refers to the source of the business data. The data source information includes the business data storage location information and the business data name. The business data storage location information can be a database name or a data table name, and the business data name can be a data table field name. The target style information refers to the user's required style effect for the visualization of business data, such as: hover prompts for charts, click to expand detailed data, and animation effects.

[0035] Common types of visualization components include: Line Charts are used to show the trend of data changes over time. Bar Charts are used to compare data of different categories. Pie Charts are used to show the relationship between each part and the whole. Scatter Plots are used to show the relationship and distribution between variables. Area Charts show the cumulative changes in data. Data Tables display structured data in the form of rows and columns for easy reference and comparison. Pivot Tables are used for data summaries and multidimensional analysis. Maps display data related to geographic locations and can display heat maps and marking information. Heatmaps use color depth on maps or floor plans to indicate the density of data. Real-time Dashboards display dynamically updated data overviews and are often used for monitoring systems. Composite Dashboards aggregate multiple visualization components to provide a comprehensive data analysis perspective. Network Graphs display the relationships and connections between nodes (entities). Tree Diagram is used to represent hierarchical data structures, such as organizational charts. Timeline is used to show the changes or processes of events over time. Custom Visualization is a visualization component designed according to specific needs, which may include interactive functions and specific designs. Interactive Charts is a chart that supports user interaction with data, such as clickable, zoomable and filterable charts.

[0036] It should be noted that visualization components can be used individually or combined together to create more complex and rich visualization effects to help users better understand data and extract information.

[0037] S102, respectively obtaining a visualization function code file and a visualization interface code file corresponding to a target type tag from a preset component template library and a preset component interface library.

[0038] In this embodiment, by obtaining the "dashboard" tag, the visualization function code file and visualization interface code file corresponding to the "dashboard" tag can be obtained. The visualization function code file refers to the core function code used to implement the visualization component, and the visualization interface code file refers to the interface code used to access the business data to the core function code that implements the visualization component. The core function code and data access interface of each visualization component are designed for specific business needs and user scenarios. Usually, when developers create visualization components, they need to consider data structure, type, real-time and interactivity to ensure that users can understand and operate data in an intuitive way. Therefore, different types of visualization components have different core function files, and correspondingly, they also have different business data access interfaces to effectively process different types of business data and provide appropriate display effects. For example: the core function code of the dashboard component needs to be able to display multiple indicators in real time and monitor system performance; the data access interface code needs to aggregate indicator data from different data sources, which may be updated in real time through API requests, and usually also needs to support data push mechanisms (such as WebSocket) to display changes in real time.

[0039] Optionally, before S102: respectively obtaining a visualization function code file and a visualization interface code file corresponding to the target type tag from a preset component template library and a preset component interface library, the method for visualization presentation of business data further includes:

[0040] S104, constructing a component template library and a component interface library to obtain a preset component template library and a component interface library, wherein the component template library stores various types of visualization function code files, and the component interface library stores various types of visualization interface code files.

[0041] Specifically, building a component template library and a component interface library includes steps S1041 to S1044:

[0042] S1041, accessing a chart component library, and extracting source codes of various types of visualization component instances in the chart component library.

[0043] In this embodiment, the chart component library includes but is not limited to: chart, datav, echarts. In this embodiment, the chart component library is echarts, and the target type label is dashboard. Extract the example source code of various types of visualization components in echarts, and decompose the example source code of various types of visualization components into dynamic data and static code, such as:

[0044]

[0045]

[0046] }, where 50 and true are dynamic data, and the code other than the dynamic data is static code.

[0047] S1042, constructing various types of visualization function code files and visualization interface files based on various types of visualization component instance source codes.

[0048] Specifically, S1042: Based on various types of visualization component instance source code, various types of visualization function code files and visualization interface files are constructed, including: extracting corresponding visualization function codes from various types of visualization component instance source code, wherein the visualization function codes include visualization function static codes, visualization interface parameters and visualization style parameters; replacing the visualization interface parameters and visualization style parameters of the visualization function codes with visualization interface data variables and visualization style variables, respectively, to obtain various types of visualization function code files; defining data fields and style fields corresponding to the visualization interface data variables and visualization style variables, respectively; constructing database queries and combination statements based on the visualization interface data variables, visualization style variables, data fields and style fields, to obtain various types of visualization interface files.

[0049] In this embodiment, the dynamic data includes visualization interface parameters and visualization style parameters, and the static code includes visualization framework code and visualization function static code. In this embodiment, the visualization function static code, visualization interface parameters and visualization style parameters are extracted from the visualization component example source code of the dashboard to obtain the visualization function code of the dashboard, such as: extracting visualization interface parameter 50, extracting visualization style parameter true, and extracting all codes except visualization interface parameters and visualization style parameters in the visualization function static code.

[0050] Replace the visualization interface parameter 50 and the visualization style parameter true with the visualization interface data variable and the visualization style variable, such as ifProg, ifAnim, and data, respectively. For example:

[0051]

[0052]

[0053] }, get the visualization function code file.

[0054] According to ifProg, ifAnim and data, define data fields and style fields, and write database query statements and combination statements, such as: SELECT CONCAT("var data=",${colName},"ifProg=${ifProg},ifAnim=${ifAnim};")FROM${tableName}, to obtain a visualization interface code file, wherein the database includes but is not limited to: SQL (Structured Query Language) and MySQL (an open source relational database management system that uses the most commonly used database management language for database management), and the parameters of ${xxx} are configured by the user to specify the data source information and style information of the visualization component. The visualization interface code file can support users to specify the data source information and style information changes of business data by modifying the specific values ​​of the data fields and style fields in the statement, such as: changing tableName to update the visualization interface data variable data, and the same applies to updating the visualization style variables ifProg and ifAnim. This embodiment builds various types of visualization function code files and visualization interface files based on various types of visualization component instance source code to generate component template libraries and component interface libraries, so that different visualization components can be quickly combined and configured according to needs to meet diverse business needs. New components can be easily added or existing components can be modified to adapt to changing needs. The use of a unified component template library and component interface library can ensure the consistency of style and function of different visualization components, improve user decision-making experience and the aesthetics of visualization presentation. The component template library and component interface library allow the same components to be reused in different projects, reduce duplication of work, and improve the maintainability of the code. By generating visualization function code files and visualization interface files separately, the static code and dynamic data of the visualization components are separated. Users only need to input dynamic data without understanding and configuring the relationship between dynamic data and static code, thereby reducing the workload and time when configuring visualization components and realizing the separation of program development and application.

[0055] It should be noted that the present embodiment may also add the definition of visualization interface data variables and visualization style variables at the very front of the visualization function code file, such as: var data = 50, ifProg = true, ifAnim = true, which is used to generate visualization components for visualization presentation with the defined style and data when the visualization interface code file and the visualization function code file are not successfully combined, or the visualization interface code file does not fully access the data and style to the visualization function code file.

[0056] In addition, according to actual needs, more data can be referenced through variables to support custom settings when applying components, such as 'SCORE' representing the data name in the code.

[0057] S1043, identifying type tags corresponding to the visualization function code file and the visualization interface file, where the type tags are used to represent the types of the visualization function code file and the visualization interface file.

[0058] S1044, obtaining a visualization function code file set and a visualization interface file set marked with type tags, and forming a component template library and a component interface library respectively.

[0059] In this embodiment, the visualization function code file and the visualization interface code file of the dashboard are both added with a "dashboard" type tag, and are written into the component template library and the component interface library respectively.

[0060] It should be noted that after the visualization interface parameter 50 and the visualization style parameter true are replaced by the visualization interface data variable and the visualization style variable respectively, the present embodiment can also construct various types of visualization style code files based on the visualization style parameters and visualization style variables in the source code of various types of visualization component instances, and identify the style tags of various types of visualization style code files to generate a style template library; write database query statements and combination statements based only on data and data fields; after obtaining the target style tag of the business data, obtain the visualization style code file corresponding to the target style tag from the style template library based on the target style tag, combine the data source information, the visualization function code file, the visualization interface code file and the visualization style code file, and generate the visualization component corresponding to the target type tag and the target style tag to visually present the business data.

[0061] S105, constructing an association relationship between itself and various types of visualization function code files and visualization interface code files, generating a component base code file to obtain a preset component base code file, wherein the association relationship includes at least one of the following: a reference relationship between projects, functions, dependencies, functions or objects.

[0062] In this embodiment, the echarts component is deployed with reference to the Vue framework, and the association relationship between itself and various types of visualization function code files and visualization interface code files is constructed. The component base code file is generated once in the development stage, without repeated development, such as:

[0063] <template>

[0064] <div:style="myStyle">

[0065] <v-chart ref="myVChart":options="options"autoresize / >

[0066]

[0067] < / template>

[0068] <script>

[0069] methods:{

[0070] runJs(){

[0071] let option＝{}；

[0072] eval(this.optionText)；

[0073] this.options＝option；

[0074] },

[0075] renderingFn(val){

[0076] this.optionText＝this.optionsData.dynData+this.optionsData.staticData；

[0077] this.runJs()；

[0078] },

[0079] }

[0080] < / script>. This embodiment generates a component base code file by constructing an association relationship between itself and various types of visualization function code files and visualization interface code files, thereby realizing the subsequent reception of various types of visualization function code files and visualization interface code files for development, and flexibly completing code execution without repeatedly building a component base, thereby reducing the development workload caused by repeated code development and improving the efficiency of visualization component development. In addition, when the visualization component is subsequently updated, it is not necessary to check and maintain the entire document, but only to check and maintain the code files related to the updated visualization component, thereby saving maintenance costs.

[0081] It should be noted that the component base code file is generated once during the development stage. This embodiment can refer to the source code of multiple chart component libraries in the prior art to deploy visualization components, and generate one or more component base codes to improve the adaptability of visualization function code files and visualization interface code files developed from the visualization component instance source code of different chart component libraries.

[0082] S103, based on the preset component base code file, combining the data source information, the visualization function code file and the visualization interface code file, generating a visualization component corresponding to the target type label to visualize the business data.

[0083] Specifically, S103: based on the preset component base code file, combining the data source information, the visualization function code file and the visualization interface code file, generating a visualization component corresponding to the target type tag to visualize the business data, including steps S1031 to S1033:

[0084] S1031, combining data source information and visualization interface files to generate assignment code files corresponding to target type labels.

[0085] Specifically, S1031: combine data source information and visualization interface file to generate an assignment code file corresponding to the target type tag, including: filling the data source information into the data field of the visualization interface code file to generate a first visualization interface code file corresponding to the target type tag; running the first visualization interface code file, extracting the business data corresponding to the data source information, and generating a first assignment code file corresponding to the target type tag, wherein the first assignment code file includes a first assignment statement and a second assignment statement, the first assignment statement is used to characterize the assignment of business data to the target type visualization interface data variable, and the second assignment statement is used to characterize the assignment of preset style parameters to the target type visualization interface data variable.

[0086] In this embodiment, the user selects the target type label of the visualization component, such as: select the "dashboard" label, and enters the data source information of the business data. Based on the preset component base code file, the business data storage location information and the business data name in the data source information can be filled into the data fields of the visualization interface code file, that is, table Name and colName. For example: the business data storage location information and the business data name are the product sales and total sales shown in Table 1, respectively, and a database query and combination statement of 'SELECT CO NCAT("var data=",${total sales},"ifProg=${NULL},ifAnim=${NUL L};")FROM${product sales}' is generated. According to the database query and combination statement, extract the business data corresponding to tableName and colName, such as the business data under the total sales, and determine whether there is an empty field, that is, NULL, in the combination statement. If there is an empty field, fill in the preset style parameter in the empty position when generating the first assignment code file, such as true, and generate the first assignment statement of 'var data = [$150,000, $120,000, 25%]' and the second assignment statement of 'var i fProg = true, ifAnim = true':

[0087] Table 1 Product sales

[0088]

[0089] It should be noted that this embodiment determines whether there is an empty field, i.e., NULL, in the combined statement. If the data field is empty, when generating the first assignment code file, a preset data parameter, such as 50, is filled in the empty position.

[0090] Optionally, S1031: combining data source information and a visualization interface file to generate an assignment code file corresponding to a target type tag, further comprising: filling the data source information and the target style information into the data field and the style field of the visualization interface file respectively to generate a second visualization interface code file corresponding to the target type tag; running the second visualization interface code file, extracting business data corresponding to the data source information, and generating a second assignment code file, wherein the second assignment code file comprises a first assignment statement and a third assignment statement, and the third assignment statement is used to characterize the assignment of the target style information to a target type visualization interface data variable.

[0091] In this embodiment, if the user selects the target type label of the visualization component, such as selecting the "dashboard" label, and also inputs the target style information of the business data, based on the preset component base code file, the target style information is also filled into the style field of the visualization interface code file, such as: the target style information is false, and a database query and combination statement of 'SELECT CONCAT("vardata=",${total sales},"ifProg=${false},ifAnim=${false};")FROM${product sales}' is generated. According to the database query and combination statement, the business data corresponding to tableName and colName is extracted, such as the business data under the total sales shown in Table 1, and the first assignment statement of 'var data=[$150,000, $120,000, 25%]' and the third assignment statement of 'var ifProg=false,ifAnim=false' are generated.

[0092] S1032, concatenating the value assignment code file and the visualization function code file to obtain a visualization component code file corresponding to the target type label.

[0093] S1033, run the visualization component code file to obtain the visualization component corresponding to the target type label.

[0094] In this embodiment, after obtaining the assignment statement, the assignment statement is inserted into the visualization function code file, so that the visualization function code file can become an executable visualization component code file to run and obtain the visualization component corresponding to the target type label and visualize the business data.

[0095] The present embodiment provides a method for visualizing business data, which obtains a target type label and data source information of the business data in the business data visualization requirement, obtains a visualization function code file and a visualization interface code file corresponding to the target type label from a preset component template library and a component interface library respectively, and combines the data source information, the visualization function code file and the visualization interface code file based on the preset component base code file to generate a visualization component corresponding to the target type label to visualize the business data. Since the visualization component code files of the required types can be obtained from the preset component template library and the component interface library according to the visualization requirement, and the required visualization components are combined to obtain the required visualization components, the automatic and rapid visualization of the business data is realized, the development and configuration workload of the visualization components that meet the business data visualization requirements is reduced, the development and application efficiency of the visualization components is improved, and then the time for visualizing the business data is reduced, and the convenience, security and user experience of the visualization presentation are improved. In addition, based on various types of visualization component instance source code, various types of visualization function code files and visualization interface files are constructed to generate component template libraries and component interface libraries, so that different visualization components can be quickly combined and configured according to needs to meet diverse business needs. New components can be easily added or existing components can be modified to adapt to changing needs. The use of a unified component template library and component interface library can ensure the consistency of style and function of different visualization components, improve user decision-making experience and the aesthetics of visualization presentation. The component template library and component interface library allow the same components to be reused in different projects, reduce duplication of work, and improve the maintainability of the code. By generating visualization function code files and visualization interface files separately, the static code and dynamic data of the visualization components are separated. Users only need to enter dynamic data without understanding and configuring the relationship between dynamic data and static code, thereby reducing the workload and time when configuring visualization components and realizing the separation of program development and application. By building the association relationship between itself and various types of visualization function code files and visualization interface code files, a component base code file is generated to realize the subsequent reception of various types of visualization function code files and visualization interface code files for development, and the code execution is flexibly completed without repeatedly building the component base, thereby reducing the development workload caused by repeated code development and improving the efficiency of visualization component development. In the subsequent update of the visualization component, there is no need to check and maintain the entire text, and only the code files related to the updated visualization component need to be checked and maintained, saving maintenance costs.

[0096] Embodiment 2:

[0097] like Figure 2 As shown, this embodiment provides a method for visualizing presentation of business data, and the method for visualizing presentation of business data includes:

[0098] S201, obtaining visualization requirements and data source information of business data, wherein the visualization requirements include target type tags, and determining whether visualization function code files and visualization interface code files corresponding to the target type tags are in a preset component template library and component interface library.

[0099] In this embodiment, Figure 2 The target component in the target type label is the visualization function code file and the visualization interface code file corresponding to the target type label. Figure 2 The new component library in is the component library other than the preset component template library and component interface library.

[0100] Visualization requirements refer to the user's requirements for the visualization of business data. Visualization components are tools for displaying data and information, and are usually used in data analysis, reporting, and user interface design scenarios. In this embodiment, the user selects the target type label of the visualization component according to the visualization requirements of specific business data, such as: selecting the "Dashboard" label, and entering the target style information and the data source information of the business data to achieve the visualization requirements of the business data. The data source information refers to the source of the business data. The data source information includes the business data storage location information and the business data name. The business data storage location information can be a database name or a data table name, and the business data name can be a data table field name. The target style information refers to the user's required style effect for the visualization of business data, such as: hover prompts for charts, click to expand detailed data, and animation effects.

[0101] S202, in response to the fact that the visualization function code file and the visualization interface code file corresponding to the target type tag are not in the preset component template library and component interface library, the component base code file is updated, the visualization function code file and the visualization interface code file corresponding to the target type tag are generated, and type tags are added to the visualization function code file and the visualization interface code file corresponding to the target type tag so as to store them in the preset component template library and component interface library.

[0102] In this embodiment, Figure 2 The component base code in is the component base code file, Figure 2 The new component static template in is the visual function code file. Figure 2 The new component dynamic interface in the visualization interface code file, Figure 2 The labels in are type labels. Figure 2 The libraries in are the preset component template libraries and component interface libraries.

[0103] The chart component library includes but is not limited to: chart, datav, echarts. This embodiment takes the chart component library as echarts and the target type label as dashboard as an example. Extract the example source code of various types of visualization components in echarts, and decompose the example source code of various types of visualization components into dynamic data and static code, such as: 50, true are dynamic data, and the code other than dynamic data is static code.

[0104] The dynamic data includes visualization interface parameters and visualization style parameters, and the static code includes visualization framework code and visualization function static code. This embodiment extracts visualization function static code, visualization interface parameters and visualization style parameters from the visualization component example source code of the dashboard to obtain the visualization function code of the dashboard, such as: extracting visualization interface parameter 50, extracting visualization style parameter true, and extracting all codes except visualization interface parameters and visualization style parameters in the visualization function static code.

[0105] The visualization interface parameter 50 and the visualization style parameter true are replaced by the visualization interface data variable and the visualization style variable, such as ifProg, ifAnim and data, respectively, to obtain the visualization function code file.

[0106] According to ifProg, ifAnim and data, define data fields and style fields, and write database query statements and combination statements, such as: SELECT CONCAT("var data=",${colName},"ifProg=${ifProg},ifAnim=${ifAnim};")FROM${tableName}, to obtain a visualization interface code file, wherein the database includes but is not limited to: SQL (Structured Query Language) and MySQL (an open source relational database management system that uses the most commonly used database management language for database management), and the parameters of ${xxx} are configured by the user to specify the data source information and style information of the visualization component. The visualization interface code file can support users to specify the data source information and style information changes of business data by modifying the specific values ​​of the data fields and style fields in the statement, such as: changing tableName to update the visualization interface data variable data, and the same applies to updating the visualization style variables ifProg and ifAnim.

[0107] Add the "dashboard" tag to the dashboard's visualization function code files and visualization interface code files, and write them into the component template library and component interface library respectively.

[0108] Refer to the Vue framework to deploy echarts components, build the association between itself and various types of visualization function code files and visualization interface code files, and generate component base code files at one time during the development stage, without repeated development.

[0109] S203, in response to the visualization function code files and visualization interface code files corresponding to the target type tag in the preset component template library and component interface library, obtain the visualization function code files and visualization interface code files corresponding to the target type tag from the preset component template library and component interface library, and based on the component base code file, combine the data source information, the visualization function code files and visualization interface code files corresponding to the target type tag to generate a visualization component corresponding to the target type tag to visualize the business data.

[0110] In this embodiment, Figure 2 The interface parameters in are the data source information. Figure 2 The large screen in the figure is the visualization component corresponding to the target type label.

[0111] By obtaining the "Dashboard" tag, you can obtain the visualization function code file and visualization interface code file corresponding to the "Dashboard" tag. The visualization function code file refers to the core function code used to implement the visualization component, and the visualization interface code file refers to the interface code used to access business data to the core function code that implements the visualization component. The core function code and data access interface of each visualization component are designed for specific business needs and user scenarios. When creating visualization components, developers need to consider data structure, type, real-time and interactivity to ensure that users can understand and operate data in an intuitive way. Therefore, different types of visualization components have different core function files, and correspondingly, they also have different business data access interfaces to effectively process different types of business data and provide appropriate display effects. For example, the core function code of the dashboard component needs to be able to display multiple indicators in real time and monitor system performance; the data access interface code needs to aggregate indicator data from different data sources, which may be updated in real time through API requests, and usually needs to support data push mechanisms (such as WebSocket) to display changes in real time.

[0112] The user selects the target type label of the visualization component, such as selecting the "dashboard" label, and enters the data source information of the business data. Based on the preset component base code file, the business data storage location information and the business data name in the data source information can be filled into the data fields of the visualization interface code file, namely, tableName and colName. For example, the business data storage location information and the business data name are the product sales and total sales shown in Table 1, respectively, and a database query and combination statement of 'SELECT CONCAT("var d ata=",${total sales},"ifProg=${NULL},ifAnim=${NULL};")FROM${product sales}' is generated. According to the database query and combination statement, the business data corresponding to tableName and colName are extracted, such as the business data under the total sales, and it is determined whether there is an empty field, i.e., NUL L, in the combination statement. If there is an empty field, when generating the first assignment code file, fill in the empty position with the preset style parameter, such as true, and generate the first assignment statement of 'var data = [$150,000, $120,000, 25%]' and the second assignment statement of 'var ifProg = true, ifAnim = true'.

[0113] If the user selects the target type label of the visualization component, such as selecting the "Dashboard" label, and also inputs the target style information of the business data, based on the preset component base code file, the target style information is also filled into the style field of the visualization interface code file, such as: the target style information is false, and the database query and combination statement of 'SELECT CONCAT("var data=",${total sales},"ifProg=${false},ifAnim=${false};")FROM${product sales}' is generated. According to the database query and combination statement, the business data corresponding to tableName and colName is extracted, such as the business data under the total sales shown in Table 1, and the first assignment statement of 'var data=[$150,000, $120,000, 25%]' and the third assignment statement of 'var ifProg=false,ifAnim=false' are generated.

[0114] After obtaining the assignment statement, insert the assignment statement into the visualization function code file, so that the visualization function code file can become an executable visualization component code file to run the visualization component corresponding to the target type label and visualize the business data.

[0115] The present embodiment provides a method for visualizing business data, which obtains a target type label and data source information of the business data in the business data visualization requirement, obtains a visualization function code file and a visualization interface code file corresponding to the target type label from a preset component template library and a component interface library respectively, and combines the data source information, the visualization function code file and the visualization interface code file based on the preset component base code file to generate a visualization component corresponding to the target type label to visualize the business data. Since the visualization component code files of the required types can be obtained from the preset component template library and the component interface library according to the visualization requirement, and the required visualization components are combined to obtain the required visualization components, the automatic and rapid visualization of the business data is realized, the development and configuration workload of the visualization components that meet the business data visualization requirements is reduced, the development and application efficiency of the visualization components is improved, and then the time for visualizing the business data is reduced, and the convenience, security and user experience of the visualization presentation are improved.

[0116] This embodiment 3:

[0117] like Figure 3 As shown, this embodiment also provides a large-screen visual device, including:

[0118] The component template library is used to store various types of visual function code files developed by component developers.

[0119] The component interface library is used to store various types of visual interface code files developed by component developers.

[0120] The configuration module is used to obtain the target type label and data source information of the business data in the business data visualization requirements of the component user.

[0121] The publishing module is used to obtain the visualization function code file and visualization interface code file corresponding to the target type label from the preset component template library and component interface library respectively, and based on the preset component base code file, combine the data source information, visualization function code file and visualization interface code file to generate a visualization component corresponding to the target type label to visualize the business data to large-screen users.

[0122] A visual large-screen device provided in this embodiment obtains target type labels and data source information of business data in business data visualization requirements through a configuration module, and obtains visualization function code files and visualization interface code files corresponding to the target type labels from preset component template libraries and component interface libraries respectively through a publishing module, and based on preset component base code files, combines data source information, visualization function code files and visualization interface code files to generate visualization components corresponding to the target type labels to visualize business data. Since visualization component code files of the required types can be obtained from preset component template libraries and component interface libraries according to visualization requirements, and combined to obtain the required visualization components, automatic and rapid visualization of business data is achieved, reducing the development and configuration workload of visualization components that meet business data visualization requirements, improving the development and application efficiency of visualization components, thereby reducing the time for visualization of business data, and improving the convenience, security and user experience of visualization.

[0123] Embodiment 4:

[0124] like Figure 4 As shown, this embodiment also provides a visualization presentation device for business data, including: a first acquisition module 41, a second acquisition module 42 and a generation module 43, the first acquisition module 41 is used to obtain the visualization requirements and data source information of the business data, wherein the visualization requirements include a target type label, the second acquisition module 42 is connected to the first acquisition module 41, and is used to respectively obtain the visualization function code file and the visualization interface code file corresponding to the target type label from the preset component template library and the component interface library, and the generation module 43 is connected to the second acquisition module 42, and is used to combine the data source information, the visualization function code file and the visualization interface code file based on the preset component base code file to generate a visualization component corresponding to the target type label to visualize the business data.

[0125] Optionally, the visual presentation device for business data also includes: a first construction module 44 and a second construction module 45, the first construction module 44 is used to construct a component template library and a component interface library to obtain a preset component template library and a component interface library, wherein the component template library stores various types of visualization function code files, and the component interface library stores various types of visualization interface code files, and the second construction module 45 is used to construct an association relationship between itself and various types of visualization function code files and visualization interface code files, and generate a component base code file to obtain a preset component base code file, wherein the association relationship includes at least one of the following: a reference relationship between projects, functions, dependencies, functions or objects.

[0126] Specifically, the first construction module 44 includes: an extraction unit 441, a construction unit 442, an identification unit 443 and a generation unit 444. The extraction unit 441 is used to access the chart component library and extract various types of visualization component instance source code in the chart component library. The construction unit 442 is used to construct various types of visualization function code files and visualization interface files based on various types of visualization component instance source code. The identification unit 443 is used to identify the type tags corresponding to the visualization function code files and the visualization interface files, and the type tags are used to characterize the types of the visualization function code files and the visualization interface files. The generation unit 444 is used to obtain a visualization function code file set and a visualization interface file set marked with type tags to form a component template library and a component interface library respectively.

[0127] Specifically, construction unit 442 includes: extracting subunits, replacing subunits, defining subunits and constructing subunits. The extracting subunits are used to extract corresponding visualization function codes from various types of visualization component instance source codes, wherein the visualization function codes include visualization function static codes, visualization interface parameters and visualization style parameters. The replacing subunits are used to replace the visualization interface parameters and visualization style parameters of the visualization function codes with visualization interface data variables and visualization style variables, respectively, to obtain various types of visualization function code files. The defining subunits are used to define data fields and style fields corresponding to the visualization interface data variables and visualization style variables, respectively. The constructing subunits are used to construct database queries and combination statements based on the visualization interface data variables, visualization style variables, data fields and style fields, to obtain various types of visualization interface files.

[0128] Specifically, the generation module 43 includes: a combination unit 431, a splicing unit 432 and an operation unit 433. The combination unit 431 is used to combine the data source information and the visualization interface file to generate an assignment code file corresponding to the target type label. The splicing unit 432 is used to splice the assignment code file and the visualization function code file to obtain a visualization component code file corresponding to the target type label. The operation unit 433 is used to run the visualization component code file to obtain a visualization component corresponding to the target type label.

[0129] Specifically, the combination unit 431 includes: a first generation subunit and a first running subunit, the first generation subunit is used to fill the data source information into the data field of the visualization interface code file, and generate a first visualization interface code file corresponding to the target type label, the first running subunit is used to run the first visualization interface code file, extract the business data corresponding to the data source information, and generate a first assignment code file corresponding to the target type label, wherein the first assignment code file includes a first assignment statement and a second assignment statement, the first assignment statement is used to characterize the assignment of business data to the target type visualization interface data variable, and the second assignment statement is used to characterize the assignment of preset style parameters to the target type visualization interface data variable.

[0130] Optionally, the combination unit 431 also includes: a second generation subunit and a second running subunit, the second generation subunit is used to fill the data source information and the target style information into the data field and the style field of the visualization interface file respectively, and generate a second visualization interface code file corresponding to the target type label, and the second running subunit is used to run the second visualization interface code file, extract the business data corresponding to the data source information, and generate a second assignment code file, wherein the second assignment code file includes a first assignment statement and a third assignment statement, and the third assignment statement is used to characterize the assignment of the target style information to the target type visualization interface data variable.

[0131] It can be understood that the above-mentioned business data visualization presentation device executes the business data visualization presentation method corresponding to the embodiment 1 provided above. Therefore, the beneficial effects that can be achieved can refer to the beneficial effects of the scheme corresponding to the business data visualization presentation method of the embodiment 1 above, and will not be repeated here.

[0132] Embodiment 5:

[0133] This embodiment further provides an electronic device, including a memory and a processor, wherein the memory stores a computer program, and the processor is configured to run the computer program to implement the method for visualizing business data in the above-mentioned embodiment 1.

[0134] Embodiment 6:

[0135] This embodiment further provides a computer-readable storage medium on which a computer program is stored. When the computer program is executed by a processor, the method for visualizing business data in the above-mentioned embodiment 1 is implemented.

[0136] It is to be understood that the above embodiments are merely exemplary embodiments used to illustrate the principles of the present invention, but the present invention is not limited thereto. For those of ordinary skill in the art, various modifications and improvements can be made without departing from the spirit and essence of the present invention, and these modifications and improvements are also considered to be within the scope of protection of the present invention.

Claims

1. A method for visualizing business data, characterized in that: include: Obtaining visualization requirements and data source information of business data, wherein the visualization requirements include target type labels; Obtaining a visualization function code file and a visualization interface code file corresponding to a target type label from a preset component template library and a component interface library respectively; Based on the preset component base code file, the data source information, the visualization function code file and the visualization interface code file are combined to generate a visualization component corresponding to the target type label to visualize the business data.

2. The method for visualizing business data according to claim 1, characterized in that: Before respectively obtaining the visualization function code file and the visualization interface code file corresponding to the target type label from the preset component template library and the component interface library, the method further includes: Constructing a component template library and a component interface library to obtain a preset component template library and a component interface library, wherein the component template library stores various types of visualization function code files, and the component interface library stores various types of visualization interface code files; Build an association relationship between itself and various types of visualization function code files and visualization interface code files, generate a component base code file, and obtain a preset component base code file, wherein the association relationship includes at least one of the following: a reference relationship between projects, functions, dependencies, functions, or objects.

3. The method for visualizing business data according to claim 2, characterized in that: The construction of the component template library and the component interface library specifically includes: Access the chart component library and extract the source code of various types of visualization component instances in the chart component library; Based on various types of visualization component example source codes, build various types of visualization function code files and visualization interface files; Identify the type tags corresponding to the visualization function code files and the visualization interface files, where the type tags are used to characterize the types of the visualization function code files and the visualization interface files; A visualization function code file set and a visualization interface file set marked with type tags are obtained to form a component template library and a component interface library respectively.

4. The method for visualizing business data according to claim 3, characterized in that: The construction of various types of visualization function code files and visualization interface files based on various types of visualization component instance source codes specifically includes: Extracting corresponding visualization function codes from various types of visualization component instance source codes, wherein the visualization function codes include visualization function static codes, visualization interface parameters and visualization style parameters; Replacing the visualization interface parameters and visualization style parameters of the visualization function code with the visualization interface data variables and the visualization style variables respectively, to obtain various types of visualization function code files; Define the data fields and style fields corresponding to the visualization interface data variables and visualization style variables respectively; Based on the visualization interface data variables, visualization style variables, data fields and style fields, database queries and combination statements are constructed to obtain various types of visualization interface files.

5. The method for visualizing business data according to claim 1, characterized in that: The preset component base code file is based on combining the data source information, the visualization function code file and the visualization interface code file to generate a visualization component corresponding to the target type label to visualize the business data, specifically including: Combining the data source information and the visualization interface file to generate an assignment code file corresponding to the target type label; Splicing the assignment code file and the visualization function code file to obtain a visualization component code file corresponding to the target type label; Run the visualization component code file to obtain the visualization component corresponding to the target type label.

6. The method for visualizing business data according to claim 5, characterized in that: The combining data source information and the visualization interface code file to generate an assignment code file corresponding to the target type label specifically includes: Filling the data source information into the data field of the visualization interface code file to generate a first visualization interface code file corresponding to the target type label; Run the first visualization interface code file, extract the business data corresponding to the data source information, and generate a first assignment code file corresponding to the target type label, wherein the first assignment code file includes a first assignment statement and a second assignment statement, the first assignment statement is used to characterize the business data assignment target type visualization interface data variable, and the second assignment statement is used to characterize the preset style parameter assignment target type visualization interface data variable.

7. The method for visualizing business data according to claim 6, characterized in that: The visualization requirement also includes target style information. The combining of the data source information and the visualization interface code file to generate an assignment code file corresponding to the target type tag also includes: Filling the data source information and the target style information into the data field and the style field of the visualization interface file respectively, and generating a second visualization interface code file corresponding to the target type label; Run the second visualization interface code file, extract the business data corresponding to the data source information, and generate a second assignment code file, wherein the second assignment code file includes a first assignment statement and a third assignment statement, and the third assignment statement is used to characterize the target style information assignment target type visualization interface data variable.

8. A visual presentation device for business data, characterized in that: include: a first acquisition module, a second acquisition module and a generation module, The first acquisition module is used to obtain the visualization requirements and data source information of the business data, wherein the visualization requirements include target type tags, The second acquisition module is connected to the first acquisition module and is used to obtain the visualization function code file and the visualization interface code file corresponding to the target type label from the preset component template library and the component interface library respectively. The generation module is connected to the second acquisition module and is used to generate a visualization component corresponding to the target type label based on a preset component base code file, combining the data source information, the visualization function code file and the visualization interface code file to visualize the business data.

9. An electronic device, characterized in that: It comprises a memory and a processor, wherein the memory stores a computer program, and the processor is configured to run the computer program to implement a method for visualizing business data as described in any one of claims 1 to 7.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, a method for visualizing business data as described in any one of claims 1 to 7 is implemented.

Images