CN114138269A - Visual application construction method and device of business data - Google Patents
Visual application construction method and device of business data Download PDFInfo
- Publication number
- CN114138269A CN114138269A CN202111508834.XA CN202111508834A CN114138269A CN 114138269 A CN114138269 A CN 114138269A CN 202111508834 A CN202111508834 A CN 202111508834A CN 114138269 A CN114138269 A CN 114138269A
- Authority
- CN
- China
- Prior art keywords
- component
- interface
- components
- data
- configuration
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/25—Integrating or interfacing systems involving database management systems
- G06F16/252—Integrating or interfacing systems involving database management systems between a Database Management System and a front-end application
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F18/00—Pattern recognition
- G06F18/20—Analysing
- G06F18/25—Fusion techniques
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/166—Editing, e.g. inserting or deleting
- G06F40/186—Templates
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Data Mining & Analysis (AREA)
- Artificial Intelligence (AREA)
- Software Systems (AREA)
- Bioinformatics & Computational Biology (AREA)
- Bioinformatics & Cheminformatics (AREA)
- Computer Vision & Pattern Recognition (AREA)
- Life Sciences & Earth Sciences (AREA)
- Human Computer Interaction (AREA)
- Evolutionary Computation (AREA)
- Evolutionary Biology (AREA)
- Health & Medical Sciences (AREA)
- Audiology, Speech & Language Pathology (AREA)
- Computational Linguistics (AREA)
- General Health & Medical Sciences (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The application discloses a method and a device for building visual application of business data, the application selects a proper page template to build a target interface or a new blank target page according to business scene requirements, configuration and layout of components are carried out on the target interface based on a pre-integrated component set, and component information configuration processing at least comprising component data configuration (the business data in a business data source is bound with the components on the interface) is carried out on the components, so that building of the visual application of the business data can be completed quickly.
Description
Technical Field
The application belongs to the technical field of application development and release, and particularly relates to a method and a device for constructing a visual application of business data.
Background
When business personnel, data analysts, developers and the like use big data or more complex data (including spatial data) to perform related data analysis work and data sharing, in order to visually know the data comparison condition, two-dimensional data needs to be visually displayed by using a chart (such as a histogram) so as to visually and quickly view data differences. For example, for some planning index data, such as the data of the amount of the cultivated land reserved in all the counties below a city-level city, the data only exists in the excel or csv table, and it is impossible to intuitively know which county has the most or the least amount of the data of the amount of the cultivated land reserved in which county is the two-dimensional data in the table.
In the traditional technology, visual display of two-dimensional data is realized by a method of inserting a chart into files such as excel and csv, but a large amount of manual operations (such as drawing each element of the chart) are needed to construct displayed data in excel and csv, so that the operation is not easy, and the efficiency is low.
Disclosure of Invention
In view of this, the present application provides a method and an apparatus for building a visual application of business data, which improve the visual building efficiency of business data and achieve rapid data sharing by providing a way of building a visual application quickly using existing business data.
The specific technical scheme is as follows:
a visual application construction method of business data, the method comprising:
detecting interface type indication information;
creating a target interface with the interface type matched with the interface type indication information;
detecting a component configuration operation based on a component set; the component set comprises a plurality of component subsets, and different component subsets respectively correspond to a plurality of components with different types;
according to the component configuration operation, configuring components corresponding to the layout on the target interface;
detecting component information configuration operation on the components on the target interface;
executing corresponding component information configuration processing on the corresponding component on the target interface according to the component information configuration operation; wherein the component information configuration process at least includes: and the data configuration of the components is realized by binding each component on the target interface with the service data in the service data source accessed in advance, so as to obtain the visual application in the form of a page of the service data, and the rendering of the components in the visual application is supported based on the bound service data.
Optionally, the interface type is a template interface type or a custom interface type;
creating a target interface with the interface type matched with the interface type indication information, wherein the target interface comprises:
if the interface type indication information indicates the user-defined interface type, creating a user-defined interface;
if the interface type indication information indicates the template interface type, creating a template interface according to an interface template of a target service scene selected from a pre-integrated template set;
different interface templates in the template set correspond to different service scenes respectively, and corresponding interface interaction and linkage interaction functions are built in the different interface templates respectively.
Optionally, the configuring, according to the component configuration operation, a component corresponding to the layout on the target interface includes:
and configuring corresponding chart components, map components, form components, graphic components and/or multimedia components on the target interface according to the detected operation information of component configuration operation on the chart components, map components, form components, graphic components and/or multimedia components.
Optionally, the operation of detecting configuration of component information of the component on the target interface includes at least part of the following detection processes:
detecting a component attribute configuration operation on a component on the target interface;
detecting a component data configuration operation on a component on the target interface;
detecting component animation configuration operation on the components on the target interface;
detecting a component event configuration operation on a component on the target interface;
the executing corresponding component information configuration processing on the corresponding component on the target interface according to the operation information of the component information configuration operation includes:
and carrying out component attribute configuration, component data configuration, component animation configuration and/or component event configuration on the components on the target interface.
Optionally, the configuring component data of the component on the target interface includes:
and binding each component on the target interface with service data in a plurality of service data sources accessed in advance so as to realize multi-source service data fusion on the visual application.
Optionally, the binding of each component on the target interface with service data in a plurality of service data sources accessed in advance includes:
and processing the service data in the data file of the service data source into service data which can be identified by the component according to the conversion rule of dimension and measurement, and binding the service data which can be identified by the processed component with the corresponding component.
Optionally, after creating the target interface with the interface type matching the interface type indication information, the method further includes:
and carrying out interface information configuration on the target interface.
Optionally, after obtaining the visual application of the business data, the method further includes:
setting the page of the visual application as an interface template of the corresponding service scene, and updating the template set according to the set interface template.
Optionally, after obtaining the visualization application of the business data, the method further includes at least one of the following processes:
publishing the visual application of business data, and obtaining address information generated based on publishing the visual application so as to be able to share the visual application through the address information;
respectively storing the page of the visual application or various components in the visual application as pictures;
and packaging and downloading the required components or component pictures.
An apparatus for visualizing application building of business data, the apparatus comprising:
the first detection module is used for detecting the interface type indication information;
the interface creating module is used for creating a target interface with the interface type matched with the interface type indicating information;
a second detection module for detecting component configuration operations based on the component set; the component set comprises a plurality of component subsets, and different component subsets respectively correspond to a plurality of components with different types;
the component configuration module is used for configuring components corresponding to the layout on the target interface according to the component configuration operation;
the third detection module is used for detecting component information configuration operation of the components on the target interface;
the component information configuration module is used for executing corresponding component information configuration processing on a corresponding component on the target interface according to the component information configuration operation; wherein the component information configuration process at least includes: and the data configuration of the components is realized by binding each component on the target interface with the service data in the service data source accessed in advance, so as to obtain the visual application in the form of a page of the service data, and the rendering of the components in the visual application is supported based on the bound service data.
According to the scheme, after the target interface of the matched type is established according to the detected interface type indication information, the configuration and layout of the components are carried out on the target interface based on the pre-integrated component set, and the component information configuration processing at least comprising component data configuration (binding the service data in the service data source and the components on the interface) is carried out on the components, so that the establishment of the visual application of the service data can be quickly completed.
Drawings
In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings needed to be used in the description of the embodiments or the prior art will be briefly introduced below, it is obvious that the drawings in the following description are only embodiments of the present application, and for those skilled in the art, other drawings can be obtained according to the provided drawings without creative efforts.
FIG. 1 is a system architecture diagram of a visualization system provided herein;
FIG. 2 is a business architecture diagram of a visualization system provided herein;
FIG. 3 is a schematic flow chart of a method for constructing a visual application of business data provided by the present application;
FIG. 4 is a schematic flow chart of another method for constructing a visualized application of business data provided by the present application;
FIG. 5 is an overall process flow diagram of a visualization system provided herein;
fig. 6 is a schematic structural diagram of a business data visualization application building apparatus provided in the present application.
Detailed Description
The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only a part of the embodiments of the present application, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
The application discloses a method and a device for building visual application of business data, and aims to solve the problem of quick visual building of business data by providing a mode of quickly building visual application by using existing business data, so that even if non-developers can use the existing business data to quickly build the visual application, data sharing can be quickly realized by publishing the visual application, the development efficiency of the developers is improved, and the non-developers can also quickly build the visual application of the business data.
The method and the device for constructing the visual application of the business data are realized based on a data visualization construction system, namely, in order to realize the method and the device, the embodiment of the application provides the data visualization construction system, through the system, the business data are supported to be rapidly visually constructed, the data dimension to be displayed, the components required by the data to be displayed and the like are selected in some simple component configuration modes such as mouse dragging and the like, and finally the business data are constructed into the visual application containing the expected components such as charts, forms, graphs and multimedia, so that the visual effect is achieved.
First, a data visualization construction system (hereinafter, referred to as "visualization system") based on the method and apparatus of the present application is described below.
The visualization system is a B-side system, can be deployed on a server or a virtual machine, and can be accessed by a user through a browser. The visualization system is used for self-adaptive display of PC (Personal Computer) ends and digital large screens with different resolutions.
The system architecture of the visualization system is as shown in fig. 1, and includes infrastructure, database, data layer, service layer and presentation layer from bottom to top in sequence, the service layer of the visualization system provides three main management modules of page, template and component, wherein the component is the minimum component unit of the whole system, and various components can be combined and laid out to form a complete visualization application, and can be released into a sharable application address such as url (Uniform Resource Locator) address after the components in the visualization application are bound with the data source, or various components in the interface are respectively stored as pictures.
In conjunction with the system architecture shown in fig. 1, optionally, the visualization system uses Oracle to store relational data, such as system initialization data, business data, operation trace data, and the like, in the system, such as component type data (i.e., the component data shown in fig. 1), component attribute data, page list data, template list data, and the like. Wherein, the component type data is currently registered component type data, such as bar chart, line chart, pie chart and the like; the component attribute data is related style attributes, data attributes and the like of each component when the component is used in each page, such as position attributes, size attributes, colors, chart styles and the like of the component in the page; the page list data is data of each page created by the current user, and meanwhile, component data and page data used in the page associated with the current page; the template list data is the same as the page list data, except that the template is used for quickly building the page. The visualization system uses data source files required by the MongoDB storage component, such as CSV files, Excel files, JSON files and the like, and stores pictures saved by screenshot of an interface. In addition, the visualization system also adapts to a Postgre SQL database, and an open source database is used, so that the related requirements in the planning industry are met. The database is automatically backed up periodically to improve system availability and disaster recoverability.
Referring to fig. 2, the system service architecture layer of the visualization system is integrally divided into three layers: data layers (or "data source layers"), component layers, and page layers.
The data layer is mainly used for providing service data for the components and supporting rendering of the components, namely, the data layer provides renderable data for the components, and the data source can be a csv file, an excel file, a json file and the like. The visualization system can upload the data files, the service data in the data files are processed according to the rules of dimensionality and measurement through a data analysis method in the system, and finally the data are converted into effective data which can be identified by a chart. For example: assume that in the data file of the business data of the employee workload table, the table headers are respectively: name, project, number of tasks, remaining man-hours, etc., each row under the header is the value corresponding to these header columns. In the data analysis method, names, items and task numbers represent different dimensions, and values in different dimensions are different, and these different values are the measurement values. In addition to the upload function that can upload data files to the visualization system, the visualization system also provides a function of configuring a data interface, supporting the configuration of addresses of the data interface at component properties.
The component layer divides the component types into a chart component, a map component, a form component, a geometric component, a multimedia component and the like. And packaging a series of components of the type at the component layer aiming at each type respectively to form different component subsets corresponding to different component types respectively, wherein the component subsets of each type form an integral component set of the component layer. Referring to fig. 2 in combination, for example, various chart components such as histograms, broken line charts, pie charts, radar charts are packaged for the chart component type, and various map components such as echarts maps, arcgis maps, mapbox maps are packaged for the map component type. Optionally, the chart component is formed by packaging based on vue-echarts-v3 components, other common components are formed by packaging based on an iView open source component library, and the multimedia component is formed by packaging based on a new attribute of Html 5. When the component is registered for the first time, the component attribute and the attribute initial value of the bottom layer package are obtained for initialization of the component. When the components are used in the page, the attributes of the components can be modified according to the requirements of the components, wherein the attributes comprise common attributes (height, width, page position and stacking sequence) and special attributes (namely unique attributes of different components). And the configuration of the animation effect of the page component and the configuration of the interaction event are supported. Js bidirectional data binding characteristics are utilized by the component bottom layer, the function that the property value and the component show real-time linkage change during the editing of the component property is achieved, namely after the property is edited in the property frame, the data are stored in the database, and then the component style changes.
In the application, the component is the minimum unit of the system and is the minimum page element of the page of the visual application, and the component forms the page of the visual application of the business data through combination and typesetting. And each component packaged in the component layer is an integral component unit formed by a series of component elements after the drawing and editing of the component elements are finished, such as a histogram, a mapbox map and the like.
The page layer is arranged above the component layer, the page provided by the page layer is divided into a scene template (or called page template) and a common page, the scene template/page template is created based on the exclusive specific service scene, and is a function established for quickly creating the page, and the scene template/page template is internally provided with specific page interaction and linkage interaction so as to greatly reduce the complexity of the configuration of the visual application page when a user builds the visual application.
The following are exemplified: for example, when business data is visually designed, multiple pages are often designed at one time, each page is only slightly different in style or data, and if each page is built from 0 one by one, a particularly large amount of repeated work is generated. Based on the characteristics, the template function is added in the embodiment, a page is created based on a pre-defined template each time, the template contains the components which are already arranged, and the style and the interaction effect of each component are roughly adjusted in the template, for example, in the template, the following component interaction effects are pre-customized according to specific business requirements: and aiming at linkage exchange of the map and the histogram data, the rendering effect of the map is switched when the histogram data is clicked and switched. On the basis, the template is only required to be independently modified according to different requirements and differences of each page, and the page of the required visual application can be quickly built.
The visualization system provides a canvas for the user at the page level and provides a canvas-based page designer functionality to support the need for the user to design an interface autonomously. Optionally, the page designer drags and Drop interfaces based on html, enabling the page designer to use Drag and Drop functionality for components in the browser. In order to meet the self-adaptive requirements under different resolutions, the canvas is divided into a plurality of different levels by the page designer according to a certain resolution ratio, for example, the canvas is divided into different levels of 6%, 12%, 16%, 25%, 50%, 100% and the like according to a 1920 × 960 resolution ratio, so that the problem that the design operation is inconvenient due to the resolution problem of the device of a user when the user uses the page designer is solved. The page designer also provides functions of setting page attributes by a user, such as functions of uploading page background pictures, setting background colors and the like. After the page design is finished, the page can be set as a scene template so as to avoid the work of repeatedly designing the page, modifying the attribute of a page component and the like. In addition, each component in the page is a page element, and the visualization system also supports a user to package and download each page element for use in a daily report. Meanwhile, page sharing of the finally generated business data visualization application is supported, and a user can share an application address (such as a url link) generated after the visualization application is issued to other people, so that the purpose of data sharing is achieved. When the visual application of the business data is opened through the shared application address, the page can be rendered based on the business data bound by the page components, required interaction operation can be executed on the components in the page, and the corresponding interaction effect can be synchronously presented.
Further, based on the above composition structure of the visualization system, the visualization system provided in the embodiment of the present application supports the following functions in various aspects by the following design:
11) visual display supporting large data volume
And the data visualization display of large data volume in the system is satisfied by an open source visualization chart library, such as an open source visualization chart library Apache Echarts based on JavaScript. By means of the increment rendering technology of Echarts, the Echarts can display tens of millions of data volumes, smooth interaction such as scaling and translation can still be conducted on the data volume, support for flow loading is provided, and the number of renderings can be loaded by means of WebSocket or loading after data is blocked.
12) Supporting fusing multi-source data
The big data category of the business data generally relates to multiple categories such as mobile phone signaling, gps, lbs and social contact, and the system of the embodiment performs single and composite interpretation on the data from different dimensions and provides data services capable of being used rapidly. The system supports data access and display of Excel, csv and other data files, database direct connection, restful api and other data. And a file uploading interface, database connection configuration, restful interface configuration and the like are provided in the system, and technologies such as graph QL and the like are adopted to realize rapid fusion of different data sources.
13) Supporting multiple types of chart presentations
Presentation of multiple types of charts is also implemented based on open source chart libraries such as Echarts, which provides conventional line charts, histograms, scatter charts, pie charts, K-line charts, box charts for statistics, maps for geographical data visualization, thermodynamic diagrams, line charts, relational diagrams for relational data visualization, treemap, Asahi-Ri-Ma-Hi-Ri-Hook, parallel coordinates for multidimensional data visualization, as well as funnel diagrams for BI (Business Intelligence), dashboards, and supports mash-ups between charts and graphs. The system realizes component data change, namely synchronous updating of component views, based on a data bidirectional binding technology in a VUE.JS front-end development framework, and ensures real-time performance of data. In addition, the embodiment uses a dynamic component mode to switch different diagrams and business components, and avoids a common method for repeatedly developing the components.
14) Supporting autonomic interface design and publishing
In order to meet the requirement that a user can design an interface according to the service requirement, the visualization system provides a visualization design function, specifically, a canvas is provided for the user in the system, the user can independently select a chart component or other functional components to be displayed, the corresponding position in the canvas is dragged by using a mouse, relevant attributes of the components are modified, service data binding is carried out on the components, and then the design of the service data to the chart and then to the interface is completed. The system realizes the functions of dragging and amplifying the components based on the vue-dragable-resizeable open-source component. And meanwhile, a chart report is generated by using an html2canvas, current chart data is automatically captured and integrated into a report, and the one-key sharing report can be supported to be distributed to relevant personnel or units for reference.
15) Supporting spatial data rendering
The system provides map components to satisfy the rendering of spatial data, the Echarts map component and the arcgis map component, respectively. The Echarts map component is a map component packaged based on an Echarts visual library, and supports the display of two-dimensional and three-dimensional data. The Arcgis map component is a map component based on Arcgis for javascript api and service requirement secondary packaging, and mainly aims at display of two-dimensional space data and linkage display of two-dimensional data charts.
Based on the above visualization system, referring to a flow diagram of a visualization application construction method of business data shown in fig. 3, the visualization application construction method of business data disclosed in the present application includes the following processing steps:
and step 301, detecting interface type indication information.
Specifically, after users such as service personnel, data analysts, developers and the like log in the visualization system, if corresponding visualization applications need to be built for service data, whether templates are selected or not can be determined according to needs, and the visualization applications are built based on existing interface templates.
The system can correspondingly detect corresponding interface type indication information, wherein if a user executes template selection operation, the system can detect the interface type indication information for indicating that the visual application is built by adopting the template interface type, and if the template selection operation is not executed, the system correspondingly detects the interface type indication information for indicating that the visual application is built by adopting the user-defined interface type.
And 302, creating a target interface with the interface type matched with the interface type indication information.
And after the interface type indication information is detected, further creating a target interface matched with the interface type. If the interface type indication information indicates the custom interface type, a custom interface is created, and if the interface type indication information indicates the template interface type, a template interface is created according to an interface template of a target service scene selected by a user from a pre-integrated template set.
The different interface templates included in the template set are the scene templates/page templates corresponding to the template list data, the different interface templates in the template set respectively correspond to different service scenes, and the different interface templates are respectively internally provided with corresponding interface interaction and linkage interaction functions.
Optionally, referring to fig. 2 in combination, the component set is deployed in a component layer, and includes a plurality of component subsets, such as a chart component, a map component, a form component, a graphic component, and/or a multimedia component, where each subset is packaged with a series of components of the corresponding type.
In this step, after creating a target interface such as a custom interface or a template interface based on the detected interface type indication information, the user may place, combine, and associate each required component on the target interface by mouse dragging and the like based on a pre-deployed component set. The system detects operation information of the operation, such as a target component related to the operation, operation type (placed at a certain position of the canvas, or associated with a component already existing at a certain position of the canvas, combined, and the like) information of the target component.
And 304, configuring components corresponding to the layout on the target interface according to the component configuration operation.
And then, further performing configuration and layout of a series of components on the target interface based on the detected operation information of the component configuration operation of the user based on the component set.
For the multiple types of the components, the step can correspondingly configure the chart component, the map component, the form component, the graphic component and/or the multimedia component corresponding to the layout on the target interface according to the detected operation information of the component configuration operation on the chart component, the map component, the form component, the graphic component and/or the multimedia component.
And 305, detecting the component information configuration operation of the components on the target interface.
And step 306, executing corresponding component information configuration processing on the corresponding component on the target interface according to the operation information of the component information configuration operation.
Wherein, the component information configuration process at least comprises: and the data configuration of the components is realized by binding the components on the target interface with the service data in the service data source accessed in advance, so as to obtain the visual application in the form of the page of the service data, and the rendering of the components in the visual application is supported based on the bound service data.
Optionally, in this embodiment, the component information configuration processing performed on the component on the target interface specifically includes: component property configuration, component data configuration, component animation configuration, and/or component event configuration. Correspondingly, when detecting the component information configuration operation of the component on the target interface, the method can specifically detect the component attribute configuration operation of the component on the target interface, the component data configuration operation of the component on the target interface, the component animation configuration operation of the component on the target interface, and/or the component event configuration operation of the component on the target interface.
The component data configuration of the components specifically means that each component on the target interface is bound with service data in a plurality of service data sources accessed in advance, so that multi-source service data fusion is realized on visual application.
Furthermore, binding each component on the target interface with the service data in the plurality of service data sources accessed in advance can be further realized as follows: and processing the service data in the data file of the service data source into service data which can be identified by the component according to the conversion rule of dimension and measurement by using a visualization system, and binding the service data which can be identified by the processed component with the corresponding component.
In connection with the data source layer of fig. 2, the plurality of service data sources may be, for example but not limited to, excel files, CSV files, ORACLE/MYSQL databases, API services, and the like.
And configuring the properties of the components, including but not limited to setting or modifying related style properties and data properties (such as position properties, size properties, colors, chart styles and the like of the components in the page) when the components are used in the page.
Component animation configuration, including but not limited to configuring components with animation effects based on pictures/videos.
Component event configuration, including but not limited to configuring various events of the component itself and interaction events between different components.
The interface design from the business data to the chart and then to the visual application can be finished through component attribute configuration, component data configuration, component animation configuration and/or component event configuration, and the visual application in the page form of the business data is obtained.
According to the scheme, after the target interface of the matched type is established according to the detected interface type indication information, the configuration and layout of the components are carried out on the target interface based on the pre-integrated component set, and the component information configuration processing at least comprising component data configuration (the business data in the business data source is bound with the components on the interface) is carried out on the components, so that the establishment of the visual application of the business data can be completed quickly.
In an embodiment, referring to fig. 4, the method for constructing a visualization application of business data disclosed in the present application may further include the following processing after step 302:
The interface information configuration is performed on the target interface, including but not limited to setting a background color of the target interface, setting page adaptive information, setting a background picture of the target interface based on the uploaded picture, and the like. By providing the page information configuration function for the user, the functional experience of the user when building the visual application for the business data is further improved.
In an embodiment, referring to fig. 5, the method for constructing a visualization application of business data disclosed in the present application may further include any one or more of the following processes after obtaining the visualization application of business data based on step 306:
21) setting a page of a visual application of service data as an interface template of a corresponding service scene, and updating the template set according to the set interface template;
22) issuing a visual application of business data, and obtaining address information generated based on issuing the visual application so as to be able to share the visual application by the address information;
23) respectively storing a page of the visual application of the business data or various components in the visual application as pictures;
24) and packaging and downloading the required components.
With reference to the overall processing flow diagram of the visualization system shown in fig. 5, after the relevant configuration of each component (such as component attribute configuration and service data binding based on a service data source) laid out on the page is completed, and the visualization application of the service data is obtained, the page of the visualization application can be set as an interface template (scene template/page template) of the corresponding service scene according to the requirement, and updated to a template set, so that a directly reusable template is provided for the next establishment of the visualization application; or, the generated visual application can be published according to the requirement to obtain the address information (such as a page url link of the visual application) of the visual application, so that the visual application of the business data can be rapidly shared to other people through the address information, and the purpose of rapid data sharing is achieved; or, the page of the visual application of the business data or various components in the visual application can be respectively stored as pictures; or packaging and downloading the required components or component pictures to a local end of a user for daily report use.
Corresponding to the above method, an embodiment of the present application further discloses a visualized application building device of business data, as shown in fig. 6, the device includes:
the first detection module 601 is configured to detect interface type indication information;
an interface creating module 602, configured to create a target interface with an interface type matching the interface type indication information;
a second detection module 603 for detecting component configuration operations based on the component set; the component set comprises a plurality of component subsets, and different component subsets respectively correspond to a plurality of components with different types;
a component configuration module 604, configured to configure components corresponding to the layout on the target interface according to the component configuration operation;
a third detecting module 605, configured to detect a component information configuration operation on a component on the target interface;
a component information configuration module 606, configured to perform corresponding component information configuration processing on a corresponding component on the target interface according to the component information configuration operation; wherein the component information configuration process at least includes: and the data configuration of the components is realized by binding each component on the target interface with the service data in the service data source accessed in advance, so as to obtain the visual application in the form of a page of the service data, and the rendering of the components in the visual application is supported based on the bound service data.
In one embodiment, the interface type is a template interface type or a custom interface type;
the interface creating module 602 is specifically configured to:
if the interface type indication information indicates the user-defined interface type, creating a user-defined interface;
if the interface type indication information indicates the template interface type, creating a template interface according to an interface template of a target service scene selected from a pre-integrated template set;
different interface templates in the template set correspond to different service scenes respectively, and corresponding interface interaction and linkage interaction functions are built in the different interface templates respectively.
In an embodiment, the component configuring module 604 is specifically configured to:
and configuring the corresponding chart component, map component, form component, graphic component and/or multimedia component on the target interface according to the detected operation information of the component configuration operation on the chart component, map component, form component, graphic component and/or multimedia component.
In an embodiment, the third detecting module 605 is specifically configured to:
detecting component attribute configuration operation on a component on a target interface;
detecting a component data configuration operation on a component on a target interface;
detecting component animation configuration operation on a component on a target interface;
detecting a component event configuration operation on a component on a target interface;
the component information configuration module 606 is specifically configured to:
and carrying out component attribute configuration, component data configuration, component animation configuration and/or component event configuration on the components on the target interface.
In an embodiment, when the component data configuration module 606 performs component data configuration on a component on a target interface, it is specifically configured to: and binding each component on the target interface with service data in a plurality of service data sources accessed in advance so as to realize multi-source service data fusion on the visual application.
In an embodiment, the component information configuring module 606 binds each component on the target interface with the service data in the multiple service data sources accessed in advance, and further implements that: and processing the service data in the data file of the service data source into service data which can be identified by the component according to the conversion rule of dimension and measurement, and binding the service data which can be identified by the processed component with the corresponding component.
In one embodiment, the apparatus further comprises:
and the page information configuration module is used for configuring interface information of the target interface.
In an embodiment, the apparatus further comprises any one of the following modules:
the template setting module is used for setting a page of the visual application of the service data as an interface template of the corresponding service scene and updating a template set according to the set interface template;
the issuing module is used for issuing the visual application of the business data and acquiring the address information generated based on issuing the visual application so as to share the visual application through the address information of the visual application;
the storage module is used for respectively storing the page of the visual application or various components in the visual application as pictures;
and the downloading module is used for packaging and downloading the required components or the component pictures.
As for the visualized application construction device of business data disclosed in the embodiment of the present application, since it corresponds to the visualized application construction method of business data disclosed in the above respective method embodiments, the description is relatively simple, and for the relevant similar points, please refer to the description of the above respective method embodiments, and detailed description is omitted here.
To sum up, the method and the device for constructing the visual application of the business data disclosed by the embodiment of the application have at least the following technical advantages:
31) design problem of visual application of business data is solved based on multiple scene templates
The design difficulty of business data visualization is not the diversification of chart types, but how to enable users to read and understand the hierarchy and the association of data in a simple page, which is related to the comprehensive application of colors, layouts and charts.
32) Multiple chart components supporting analytical presentation of multiple data types
Besides the conventional chart optimized for the business display, the method can also be used for conducting multilayer superposition and rendering on geographic data, and expanding the needed business scene in a chart combining mode.
33) The graphical construction tool can quickly realize visual application construction without professional programmers
The visual and acquirement configuration mode provides tools of various business module levels instead of chart components, does not need programming capability, and can create professional visualization application only through dragging.
34) The multi-resolution adaptation and flexible publishing mode meet the use requirements in different occasions
The size of the canvas can be dynamically adjusted according to the size of the screen, the size of the chart can be correspondingly adjusted, the visualization effect under different screens can be met, and the created visualization application can be published and shared.
It should be noted that, in the present specification, the embodiments are all described in a progressive manner, each embodiment focuses on differences from other embodiments, and the same and similar parts among the embodiments may be referred to each other.
For convenience of description, the above system or apparatus is described as being divided into various modules or units by function, respectively. Of course, the functionality of the units may be implemented in one or more software and/or hardware when implementing the present application.
From the above description of the embodiments, it is clear to those skilled in the art that the present application can be implemented by software plus necessary general hardware platform. Based on such understanding, the technical solutions of the present application may be essentially or partially implemented in the form of a software product, which may be stored in a storage medium, such as a ROM/RAM, a magnetic disk, an optical disk, etc., and includes several instructions for enabling a computer device (which may be a personal computer, a server, or a network device, etc.) to execute the method according to the embodiments or some parts of the embodiments of the present application.
Finally, it is further noted that, herein, relational terms such as first, second, third, fourth, and the like may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other identical elements in a process, method, article, or apparatus that comprises the element.
The foregoing is only a preferred embodiment of the present application and it should be noted that those skilled in the art can make several improvements and modifications without departing from the principle of the present application, and these improvements and modifications should also be considered as the protection scope of the present application.
Claims (10)
1. A visual application construction method of business data is characterized by comprising the following steps:
detecting interface type indication information;
creating a target interface with the interface type matched with the interface type indication information;
detecting a component configuration operation based on a component set; the component set comprises a plurality of component subsets, and different component subsets respectively correspond to a plurality of components with different types;
according to the component configuration operation, configuring components corresponding to the layout on the target interface;
detecting component information configuration operation on the components on the target interface;
executing corresponding component information configuration processing on the corresponding component on the target interface according to the component information configuration operation; wherein the component information configuration process at least includes: and the data configuration of the components is realized by binding each component on the target interface with the service data in the service data source accessed in advance, so as to obtain the visual application in the form of a page of the service data, and the rendering of the components in the visual application is supported based on the bound service data.
2. The method of claim 1, wherein the interface type is a template interface type or a custom interface type;
creating a target interface with the interface type matched with the interface type indication information, wherein the target interface comprises:
if the interface type indication information indicates the user-defined interface type, creating a user-defined interface;
if the interface type indication information indicates the template interface type, creating a template interface according to an interface template of a target service scene selected from a pre-integrated template set;
different interface templates in the template set correspond to different service scenes respectively, and corresponding interface interaction and linkage interaction functions are built in the different interface templates respectively.
3. The method of claim 1, wherein configuring a component corresponding to a layout on the target interface according to the component configuration operation comprises:
and configuring corresponding chart components, map components, form components, graphic components and/or multimedia components on the target interface according to the detected operation information of component configuration operation on the chart components, map components, form components, graphic components and/or multimedia components.
4. The method of claim 1, wherein the detecting component information configuration operations on the component on the target interface comprises at least part of the following detection processes:
detecting a component attribute configuration operation on a component on the target interface;
detecting a component data configuration operation on a component on the target interface;
detecting component animation configuration operation on the components on the target interface;
detecting a component event configuration operation on a component on the target interface;
the executing corresponding component information configuration processing on the corresponding component on the target interface according to the operation information of the component information configuration operation includes:
and carrying out component attribute configuration, component data configuration, component animation configuration and/or component event configuration on the components on the target interface.
5. The method of claim 4, wherein configuring component data for the component on the target interface comprises:
and binding each component on the target interface with service data in a plurality of service data sources accessed in advance so as to realize multi-source service data fusion on the visual application.
6. The method of claim 5, wherein the binding the components on the target interface with the service data in the service data sources accessed in advance comprises:
and processing the service data in the data file of the service data source into service data which can be identified by the component according to the conversion rule of dimension and measurement, and binding the service data which can be identified by the processed component with the corresponding component.
7. The method of claim 1, after creating a target interface with an interface type matching the interface type indication information, further comprising:
and carrying out interface information configuration on the target interface.
8. The method of claim 2, after obtaining the visualization application of the business data, further comprising:
setting the page of the visual application as an interface template of the corresponding service scene, and updating the template set according to the set interface template.
9. The method of claim 1, wherein after obtaining the visualization application of the business data, further comprising at least one of:
publishing the visual application of business data, and obtaining address information generated based on publishing the visual application so as to be able to share the visual application through the address information;
respectively storing the page of the visual application or various components in the visual application as pictures;
and packaging and downloading the required components or component pictures.
10. An apparatus for constructing a visual application of business data, the apparatus comprising:
the first detection module is used for detecting the interface type indication information;
the interface creating module is used for creating a target interface with the interface type matched with the interface type indicating information;
a second detection module for detecting component configuration operations based on the component set; the component set comprises a plurality of component subsets, and different component subsets respectively correspond to a plurality of components with different types;
the component configuration module is used for configuring components corresponding to the layout on the target interface according to the component configuration operation;
the third detection module is used for detecting component information configuration operation of the components on the target interface;
the component information configuration module is used for executing corresponding component information configuration processing on a corresponding component on the target interface according to the component information configuration operation; wherein the component information configuration process at least includes: and the data configuration of the components is realized by binding each component on the target interface with the service data in the service data source accessed in advance, so as to obtain the visual application in the form of a page of the service data, and the rendering of the components in the visual application is supported based on the bound service data.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111508834.XA CN114138269A (en) | 2021-12-10 | 2021-12-10 | Visual application construction method and device of business data |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111508834.XA CN114138269A (en) | 2021-12-10 | 2021-12-10 | Visual application construction method and device of business data |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114138269A true CN114138269A (en) | 2022-03-04 |
Family
ID=80385924
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111508834.XA Pending CN114138269A (en) | 2021-12-10 | 2021-12-10 | Visual application construction method and device of business data |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114138269A (en) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115964037A (en) * | 2023-01-05 | 2023-04-14 | 三峡高科信息技术有限责任公司 | Engineering data visualization low code configuration method and system |
| US11726804B1 (en) * | 2022-09-06 | 2023-08-15 | Fmr Llc | Systems and methods for web content orchestration |
| CN117331551A (en) * | 2022-06-27 | 2024-01-02 | 国家电投集团数字科技有限公司 | Large-screen data visualization system and method |
| CN117573090A (en) * | 2023-11-17 | 2024-02-20 | 易方达基金管理有限公司 | Construction method, system and storage medium of application system |
-
2021
- 2021-12-10 CN CN202111508834.XA patent/CN114138269A/en active Pending
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117331551A (en) * | 2022-06-27 | 2024-01-02 | 国家电投集团数字科技有限公司 | Large-screen data visualization system and method |
| US11726804B1 (en) * | 2022-09-06 | 2023-08-15 | Fmr Llc | Systems and methods for web content orchestration |
| CN115964037A (en) * | 2023-01-05 | 2023-04-14 | 三峡高科信息技术有限责任公司 | Engineering data visualization low code configuration method and system |
| CN115964037B (en) * | 2023-01-05 | 2023-08-29 | 三峡高科信息技术有限责任公司 | Engineering data visualization low-code configuration method and system |
| CN117573090A (en) * | 2023-11-17 | 2024-02-20 | 易方达基金管理有限公司 | Construction method, system and storage medium of application system |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11604555B2 (en) | Highlighting data marks in popup secondary data visualizations according to selected data values from primary data visualizations | |
| CN114138269A (en) | Visual application construction method and device of business data | |
| JP5416983B2 (en) | Folder management apparatus, folder management method, and folder management program | |
| US9336267B2 (en) | Method and system for navigation and visualization of data in relational and/or multidimensional databases | |
| JP2022534214A (en) | Systems and methods for providing responsive editing and viewing that integrate hierarchical fluid components and dynamic layouts | |
| US20120120086A1 (en) | Interactive and Scalable Treemap as a Visualization Service | |
| CN111221526A (en) | Data visual editing display platform based on data lake server | |
| US9830058B2 (en) | Generating an insight view while maintaining report context | |
| US10740548B2 (en) | Dynamic report building using a heterogeneous combination of filtering criteria | |
| US9465523B2 (en) | Visual exploration of multidimensional data | |
| CN112926288B (en) | Business intelligent data visualization method, system, equipment and readable storage medium | |
| US20140164895A1 (en) | Systems and methods for managing spreadsheet models | |
| CN110674227A (en) | Method, system, medium and terminal for generating data visualization chart and page | |
| JP6813634B2 (en) | WEB reporting design system for programming event behavior based on graphic interface | |
| US10861202B1 (en) | Sankey graph visualization for machine data search and analysis system | |
| JP7264989B2 (en) | Visualization method, device and recording medium for multi-source earth observation image processing | |
| JP2021512364A (en) | Systems and methods for handling overlapping objects in a visual editing system | |
| WO2008122830A1 (en) | Method and system for navigation and visualization of data in relational and/or multidimensional databases | |
| CN113535165A (en) | Interface generation method and device, electronic equipment and computer readable storage medium | |
| Lobo et al. | MapMosaic: dynamic layer compositing for interactive geovisualization | |
| US11093548B1 (en) | Dynamic graph for time series data | |
| US20150032685A1 (en) | Visualization and comparison of business intelligence reports | |
| CN115691772A (en) | Operation visualization system and corresponding computer device and storage medium | |
| US11768591B2 (en) | Dynamic graphical containers | |
| CN115810064A (en) | Map making and publishing platform construction method based on open source GIS technology |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |