CN115599363A

CN115599363A - Configuration method, device and system of visual component

Info

Publication number: CN115599363A
Application number: CN202211221902.9A
Authority: CN
Inventors: 陈健; 曾昌盛; 钱圆佳; 陈雨淋; 陈则衔
Original assignee: Alibaba China Co Ltd
Current assignee: Alibaba China Co Ltd
Priority date: 2022-10-08
Filing date: 2022-10-08
Publication date: 2023-01-13

Abstract

The invention discloses a configuration method, a configuration device and a configuration system of a visual component. Wherein, the method comprises the following steps: displaying a plurality of visual components in a component display area of an interactive interface, wherein the plurality of visual components are obtained by packaging initial components from a plurality of different component libraries; in response to a selection instruction executed on the plurality of visual components, displaying at least one visual component corresponding to the selection instruction in a canvas display area of the interactive interface; displaying a configuration interface on the interactive interface in response to an activation instruction executed on the at least one visualization component; and displaying at least one visualization component with completed configuration in a canvas display area of the interactive interface in response to a configuration instruction detected in the configuration interface, wherein the configuration instruction is used for configuring data and configuration items of the at least one visualization component. The invention solves the technical problem of poor visualization effect caused by single type of the visualization component in the related technology.

Description

Configuration method, device and system of visual component

Technical Field

The invention relates to the field of data visualization, in particular to a configuration method, a configuration device and a configuration system of a visualization component.

Background

Data visualization is a vital part in big data analysis and is the capability of creating a plurality of excellent data visualization analysis platforms. In order to achieve a better visualization effect of multiple analysis methods under multiple scenes with different data, multiple visualization components of different types are often needed, but the types of the visualization components included in the current visualization analysis platform are single, so that the visualization effect is poor.

In view of the above problems, no effective solution has been proposed.

Disclosure of Invention

The embodiment of the invention provides a configuration method, a configuration device and a configuration system of a visual component, and at least solves the technical problem that the visual effect is poor due to the fact that the type of the visual component is single in the related technology.

According to an aspect of the embodiments of the present invention, there is provided a configuration method of a visualization component, including: displaying a plurality of visual components in a component display area of the interactive interface, wherein the plurality of visual components are obtained by packaging initial components from a plurality of different component libraries; in response to a selection instruction executed on the plurality of visual components, displaying at least one visual component corresponding to the selection instruction in a canvas display area of the interactive interface; displaying a configuration interface on the interactive interface in response to an activation instruction executed on the at least one visualization component; and displaying at least one visualization component with completed configuration in a canvas display area of the interactive interface in response to a configuration instruction detected in the configuration interface, wherein the configuration instruction is used for configuring data and configuration items of the at least one visualization component.

According to an aspect of the embodiments of the present invention, there is provided a configuration apparatus for a visualization component, including: the component display module is used for displaying a plurality of visual components in a component display area of the interactive interface, wherein the visual components are obtained by packaging initial components from a plurality of different component libraries; the component selection module is used for responding to a selection instruction executed on the plurality of visualization components and displaying at least one visualization component corresponding to the selection instruction in a canvas display area of the interactive interface; the interface display module is used for responding to an activation instruction executed on at least one visual component and displaying a configuration interface on the interactive interface; and the component configuration module is used for responding to a configuration instruction detected in the configuration interface and displaying at least one configured visual component in a canvas display area of the interactive interface, wherein the configuration instruction is used for configuring data and configuration items of the at least one visual component.

According to an aspect of an embodiment of the present invention, there is provided a configuration system of a visualization component, including: the component adaptation module is used for encapsulating initial components from a plurality of different component libraries to obtain a plurality of visual components; the component management module is used for responding to a selection instruction executed on the plurality of visualization components, displaying at least one visualization component corresponding to the selection instruction in a canvas display area of the interactive interface, responding to an activation instruction executed on the at least one visualization component, displaying a configuration interface on the interactive interface, responding to a configuration instruction detected in the configuration interface, and displaying the configured at least one visualization component in the canvas display area of the interactive interface, wherein the configuration instruction is used for configuring data and configuration items of the at least one visualization component.

According to an aspect of the embodiments of the present invention, there is provided a computer-readable storage medium, which includes a stored program, wherein when the program runs, the apparatus on which the computer-readable storage medium is located is controlled to execute the configuration method of the visualization component in any one of the above embodiments.

According to an aspect of an embodiment of the present invention, there is provided an electronic apparatus including: a processor; a memory, connected to the processor, for providing the processor with instructions of the configuration method of the visualization component according to any of the above embodiments.

In an embodiment of the present invention, a plurality of visual components are displayed within a component display area of an interactive interface, wherein, the plurality of visual components are obtained by packaging initial components from a plurality of different component libraries; in response to a selection instruction executed on the plurality of visual components, displaying at least one visual component corresponding to the selection instruction in a canvas display area of the interactive interface; displaying a configuration interface on the interactive interface in response to an activation instruction executed on the at least one visualization component; and responding to a configuration instruction detected in the configuration interface, and displaying the configured at least one visualization component in a canvas display area of the interactive interface, wherein the configuration instruction is used for configuring data and configuration items of the at least one visualization component, so that the effect of enriching the visualization components is realized. It is easy to notice that can provide by a plurality of visual subassemblies that the initial subassembly of a plurality of different component libraries encapsulates the obtaining, compare in the visual subassembly of single source, can show the visual subassembly of different sources in the subassembly display area with unified mode, greatly richened the type of visual subassembly, improved visual analytic ability, and then solved the type of visual subassembly in the correlation technique comparatively single, lead to the relatively poor technical problem of visual effect.

Drawings

The accompanying drawings, which are included to provide a further understanding of the invention and are incorporated in and constitute a part of this application, illustrate embodiment(s) of the invention and together with the description serve to explain the invention without limiting the invention. In the drawings:

fig. 1 is a block diagram of a hardware structure of a computer terminal (or mobile device) for implementing a configuration method of a visualization component according to an embodiment of the present application;

fig. 2 is a flowchart of a configuration method of a visualization component according to embodiment 1 of the present invention;

FIG. 3 is a schematic diagram of a visualization configuration and presentation according to a related art embodiment of the present application;

FIG. 4 is a schematic structural diagram illustrating a configuration flow of a visualization component according to an embodiment of the present application;

fig. 5 is a schematic view of a configuration device of a visualization component according to embodiment 2 of the present application;

fig. 6 is a schematic diagram of a configuration system of a visualization component according to embodiment 3 of the present application;

fig. 7 is a block diagram of a computer terminal according to an embodiment of the present invention.

Detailed Description

In order to make the technical solutions of the present invention better understood, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the drawings in the embodiments of the present invention, and it is obvious that the described embodiments are only a part of the embodiments of the present invention, 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 invention.

It should be noted that the terms "first," "second," and the like in the description and claims of the present invention and in the drawings described above are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It is to be understood that the data so used is interchangeable under appropriate circumstances such that the embodiments of the invention described herein are capable of operation in sequences other than those illustrated or described herein. Furthermore, the terms "comprises," "comprising," and "having," and any variations thereof, are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements expressly listed, but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.

First, some terms or terms appearing in the description of the embodiments of the present application are applicable to the following explanations:

multi-source visualization component: visualization components derived from a variety of chart libraries;

general configuration: the chart is configured in the same way and interface;

unified display: the chart is presented using the same approach and interface.

Example 1

There is also provided, in accordance with an embodiment of the present invention, an embodiment of a method for configuring a visualization component, it being noted that the steps illustrated in the flowchart of the figure may be performed in a computer system, such as a set of computer-executable instructions, and that, although a logical order is illustrated in the flowchart, in some cases, the steps illustrated or described may be performed in an order different than here.

The method provided by the first embodiment of the present application may be executed in a mobile terminal, a computer terminal, or a similar computing device. Fig. 1 is a hardware block diagram of a computer terminal (or mobile device) for implementing a configuration method of a visualization component according to an embodiment of the present application. As shown in fig. 1, the computer terminal 10 (or mobile device 10) may include one or more (shown with 102a,102b, … …,102 n) processors 102 (the processors 102 may include, but are not limited to, a processing device such as a microprocessor MCU or a programmable logic device FPGA, etc.), a memory 104 for storing data, and a transmission device 106 for communication functions. In addition, the method can also comprise the following steps: a display, an input/output interface (I/O interface), a Universal Serial BUS (USB) port (which may be included as one of the ports of the BUS), a network interface, a power source, and/or a camera. It will be understood by those skilled in the art that the structure shown in fig. 1 is only an illustration and is not intended to limit the structure of the electronic device. For example, the computer terminal 10 may also include more or fewer components than shown in FIG. 1, or have a different configuration than shown in FIG. 1.

It should be noted that the one or more processors 102 and/or other data processing circuitry described above may be referred to generally herein as "data processing circuitry". The data processing circuitry may be embodied in whole or in part in software, hardware, firmware, or any combination thereof. Further, the data processing circuit may be a single stand-alone processing module, or incorporated in whole or in part into any of the other elements in the computer terminal 10 (or mobile device). As referred to in the embodiments of the application, the data processing circuit acts as a processor control (e.g. selection of a variable resistance termination path connected to the interface).

The memory 104 may be used to store software programs and modules of application software, such as program instructions/data storage devices corresponding to a configuration method of a visualization component in the embodiment of the present invention, and the processor 102 executes various functional applications and data processing by executing the software programs and modules stored in the memory 104, so as to implement the configuration method of a visualization component described above. The memory 104 may include high speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some examples, the memory 104 may further include memory located remotely from the processor 102, which may be connected to the computer terminal 10 via a network. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.

The transmission device 106 is used for receiving or transmitting data via a network. Specific examples of the network described above may include a wireless network provided by a communication provider of the computer terminal 10. In one example, the transmission device 106 includes a Network adapter (NIC) that can be connected to other Network devices through a base station to communicate with the internet. In one example, the transmission device 106 can be a Radio Frequency (RF) module, which is used to communicate with the internet in a wireless manner.

The display may be, for example, a touch screen type Liquid Crystal Display (LCD) that may enable a user to interact with the user interface of the computer terminal 10 (or mobile device).

It should be noted here that, in some embodiments, the computer device (or mobile device) shown in fig. 1 described above has a touch display (also referred to as a "touch screen" or "touch display screen"). In some embodiments, the computer device (or mobile device) shown in fig. 1 above has a Graphical User Interface (GUI) with which a user can interact by touching finger contacts and/or gestures on a touch-sensitive surface, where the human interaction functionality optionally includes the following interactions: executable instructions for creating web pages, drawing, word processing, making electronic documents, games, video conferencing, instant messaging, emailing, call interfacing, playing digital video, playing digital music, and/or web browsing, etc., for performing the above-described human-computer interaction functions, are configured/stored in one or more processor-executable computer program products or readable storage media.

In the above operating environment, the present application provides a configuration method of a visualization component as shown in fig. 2. Fig. 2 is a flowchart of a configuration method of a visualization component according to embodiment 1 of the present invention. As shown in fig. 2, the method may include the steps of:

step S202, displaying a plurality of visual components in a component display area of the interactive interface.

Wherein the plurality of visual components are obtained by encapsulating initial components from a plurality of different component libraries.

The interactive interface may be a display interface for interaction, wherein the display content in the interactive interface may be interacted with by a device such as a mouse, and the display content in the interactive interface may be directly clicked, slid, dragged, and the like to implement an interactive function.

The interactive interface may be a web page in a website, any page in a computer system, a vehicle-mounted interactive interface in a vehicle-mounted system, and the like, and the interactive interface is not limited herein and may be any interface capable of interacting with a user.

The visualization component described above may be obtained by encapsulating initial components from different component libraries. Wherein, different component libraries can be independent without connection relation.

The component library may be a library (ECharts) for Data visualization, a Data-Driven Document (D3), a Data-Driven and highly interactive Data visualization library (G2), a chart library (Highcharts), or the like.

The component library may be initial components that provide a few out-of-box applications, and are used to provide simple data and configuration item inputs for the initial components, so that corresponding visualization effects can be presented, that is, a plurality of visualization components can be displayed in a component display area of the interactive interface.

In an optional embodiment, the data and configuration formats of the initial components of a plurality of different component libraries may be converted and adapted, and then uniformly encapsulated, so that all the visual components can receive a common data and configuration model at an upper layer, and a uniform component life cycle may be established, for example, initialization, update, destruction, and the like of the components, where the update may be data update and configuration update.

Step S204, responding to a selection instruction executed on the plurality of visualization components, and displaying at least one visualization component corresponding to the selection instruction in a canvas display area of the interactive interface.

The selection instruction can be a selection instruction generated by a user through operating a visualization component in the interactive interface. Optionally, the user may be a selection instruction generated by performing a touch operation such as clicking, sliding, and dragging on a canvas display area of the interactive interface, and the user may also be a selection instruction generated by performing a touch operation such as clicking, sliding, and dragging on a canvas display area of the interactive interface through a mouse.

In an alternative embodiment, a user can select at least one visualization component from a plurality of visualization components as required, wherein the visualization components are displayed in a canvas display area of an interactive interface, and since the plurality of visualization components are from a plurality of different component libraries, the user can select the visualization components from different component libraries in the canvas display area of the interactive interface.

Step S206, responding to the activating instruction executed on the at least one visualization component, and displaying a configuration interface on the interactive interface.

The above activating instruction can be realized by clicking, circle selecting, internal triggering and the like.

The configuration interface is used for configuring at least one visualization component.

In an optional embodiment, different configuration panels can be switched and displayed on the interactive interface for the user to configure according to an activation instruction of at least one visualization component, when a plurality of visualization components are activated simultaneously, batch configuration of the visualization components can be supported, and global configuration of the visualization components can be switched to the global configuration panel. Wherein, the global configuration can be to configure the global font, canvas background, filter effect, etc. of the visual component.

Step S208, responding to the configuration instruction detected in the configuration interface, and displaying at least one visualization component which is configured in the canvas display area of the interactive interface.

The configuration instructions are used for configuring data and configuration items of at least one visualization component.

The configuration instruction may be an instruction generated after the data and the configuration items of the at least one visualization component are configured.

In an alternative embodiment, the visualization component that has been activated in the canvas display area may be configured according to a configuration panel displayed on the interactive interface, so as to obtain a configured visualization component. Optionally, the display elements of the visual component, such as the title, color, font size, font style, background, filter effect, size, theme, may be configured, so that the visual component better meets the requirements of the user.

In an optional embodiment, if batch configuration needs to be performed on a plurality of visualization components, global configuration can be performed on the selected plurality of visualization components by switching to a global configuration panel, so that the purpose of performing batch configuration on the plurality of visualization components is achieved.

The data large screen block is taken as an example for explanation, and the data large screen block can contain multiple pages, multiple layers, rich component libraries, freely-arranged canvas, efficient data processing and diagram fine configuration, wherein the multiple pages can support multiple pages, 10 pages can be added, but not limited to words, and page carousel can be configured; the multiple layers can be configured with a layer group, layer carousel, locking and hiding; the rich component library can be used for selecting required components and dragging the required components to canvas for large-screen construction, and various types of charts, rich texts, media, interactive controls and materials can be provided in the component library to meet diversified large-screen construction requirements; the freely-laid canvas can support free-form layout, the components can be overlapped, the adjustment of the size of a large screen and the configuration of a global filter can be supported, and quick operations such as copying, cutting, copying, pasting, copying and the like can be supported; the high-efficiency data processing can select a required data set, different data sets support data analysis and data multiplexing, and the operation mode is simple and easy to operate; the fine configuration of the chart can be the fine configuration of the style, the color, the font, the position, the arrangement mode, the width and the like of the chart can be freely configured, the ideal chart effect is easily realized, the dynamic effect of the chart can support the animation effects of stream light, page turning, rolling and the like, and the atmosphere in the display process is more convenient to set.

In the embodiment of the invention, a plurality of visual components are displayed in a component display area of an interactive interface, wherein the visual components are obtained by packaging initial components from a plurality of different component libraries; in response to a selection instruction executed on the plurality of visual components, displaying at least one visual component corresponding to the selection instruction in a canvas display area of the interactive interface; displaying a configuration interface on the interactive interface in response to an activation instruction executed on the at least one visualization component; and responding to a configuration instruction detected in the configuration interface, and displaying the configured at least one visualization component in a canvas display area of the interactive interface, wherein the configuration instruction is used for configuring data and configuration items of the at least one visualization component, so that the effect of enriching the visualization components is realized. It is easy to notice that can provide by a plurality of visual subassemblies that the initial subassembly of a plurality of different component libraries encapsulates the obtaining, compare in the visual subassembly of single source, can show the visual subassembly of different sources in the subassembly display area with unified mode, greatly richened the type of visual subassembly, improved visual analytic ability, and then solved the type of visual subassembly in the correlation technique comparatively single, lead to the relatively poor technical problem of visual effect.

In the above embodiment of the present application, the method further includes: acquiring initial components from a plurality of different component libraries; and unifying the format of the data, the configuration items and the life cycle of the initial assembly to obtain a plurality of visual assemblies.

The data of the initial component may be memory data, operation data, and the like of the initial component.

The configuration items of the initial component can be the title, color, font size and the like of the initial component.

The lifetime of the initial component may be a lifetime of the initial component, that is, the initial component is valid for a period of time, and beyond the period of time, the initial component fails, and the initial component may be replaced by a new component.

In an alternative embodiment, initial components from a plurality of different component libraries may be obtained, and the data, configuration items, and life cycles of the initial components are unified, that is, the initial components are unified to obtain a visual component, so as to manage and use the visual component.

In another alternative embodiment, the format of the initial components may be unified by the component adaptation module. For example, a line graph and a pie chart are used, and the same input format is only needed to be provided to the packaged line graph and pie chart of the component adaptation module. The line and pie charts, before packaging, may come from a number of different component libraries, which may vary greatly in the format of the data and configuration that needs to be accepted. The received data and the configuration format are consistent after packaging. When the upper layer is used, only the packaged component needs to be directly selected according to the component type, and the component library from which the component comes does not need to be sensed. The main work of encapsulation is to convert the format of data and configuration and to smooth out the differences in the API design of different component libraries.

The above-mentioned multiple different visual component libraries may generally provide multiple access modes, and a common mode is to introduce through a Content Delivery Network (CDN) or introduce through a management tool (NPM), where the introduction mode is not limited, and may be determined according to a specific project and a usage scenario.

In the above embodiment of the present application, in response to a configuration instruction detected in the configuration interface, the method further includes: acquiring target configuration information corresponding to the configuration instruction, wherein the target configuration information comprises at least one of the following: configuring item information, a target data set and data of a target field in the target data set; comparing the target configuration information with current configuration information of at least one visualization component; and under the condition that the target configuration information is different from the current configuration information, configuring the at least one visualization component based on the target configuration information to obtain the configured at least one visualization component.

The configuration item information may be displayed through a configuration panel, wherein the configuration item information may include, but is not limited to, a font configuration, a canvas configuration, and a filter configuration.

The target data set may be displayed by a configuration data panel, wherein the data set may include static data packages, such as tables (Excel), common simple files (CSV), and character strings (JavaScript Object notification, JSON). The data set may also include an Application Programming Interface (API) and a package of various data sources such as a database. The target data set may provide a uniform data format and usage method for use by the components.

The data of the target field in the target data set can be preset fields which are a shortcut for the user to configure the component data, and the user can select the corresponding field without manually inputting the data when using the component.

It should be noted that the components may be configured in a manner that provides the user with manual data entry.

In an optional embodiment, the target configuration information may be compared with current configuration information of the at least one visualization component by the update management module to determine whether the visualization component needs to be updated, and in a case that the target configuration information is different from the current configuration information, the at least one visualization component may be configured according to the target configuration information to obtain the configured at least one visualization component.

The update management module updates the content changed by the configuration management module, the data management module and the layout management module.

In the above embodiments of the present application, the target data set is used to characterize a data set selected from a plurality of data sets, where the plurality of data sets are obtained by encapsulating a plurality of different data sources.

The data sets can be obtained by encapsulating various data sources such as Excel, CSV, JSON, API and database.

In an alternative embodiment, a plurality of data sets may be displayed in the interface, and the user may identify a target data set for use as target configuration information in the displayed plurality of data sets.

In the above embodiment of the application, after at least one visualization component corresponding to the selection instruction is displayed in the canvas display area of the interactive interface, the method further includes one of: in response to a combination instruction executed on a target component in at least one visual component, combining the target components to generate a new visual component, and displaying the new visual component in the canvas display area; in response to a first adjustment instruction executed on the at least one visualization component, adjusting a size and a position of the at least one visualization component based on the first adjustment instruction; in the case that a first component and a second component in the at least one visualization component are co-located, in response to a second adjustment instruction executed on the first component and the second component, a hierarchical relationship of the first component and the second component is determined based on the second adjustment instruction.

The target component may be one or more visual components selected from at least one visual component and required to be combined.

In an alternative embodiment, in response to a combination instruction executed by a target component in at least one visual component, the target component may be combined to generate a new visual component, and the new visual component may support operations of copying, pasting, locking, displaying, hiding, and the like of the component.

It should be noted that locking of a component essentially disables editing operations of the component, and is very practical for a freely laid-out building scene like layer locking in a drawing tool (Photoshop). For example, a user creates a background component, the background in the background component can be replaced by a map, other background pictures, videos and the like, the map component can be used as the background of the whole canvas, the map component is configured and adjusted to be positioned at the lowest layer, other components can be placed on the component, and when the position of other components is adjusted, if the map component in the background is not expected to be operated by mistake, at the moment, the map component can be reduced, and the background component is prevented from being influenced by operations such as dragging, size adjustment and the like.

The first adjustment instruction may be an instruction generated by the user adjusting the displayed at least one visual component by touching the interactive interface.

In an alternative embodiment, after selecting the visual components needing to be adjusted, the user can adjust the size and the position of at least one visual component by means of dragging, clicking or manual input.

The second adjustment instruction is used for adjusting the hierarchical relationship between the first component and the second component in the visual components.

Under the strategy of free layout, the components can be overlapped and overlaid, at this time, a hierarchical relationship is necessary, the component with the higher hierarchy is positioned above the component with the lower hierarchy from the visual effect, for example, a map component and a histogram component can be positioned at the same position, whether the map component is positioned above or the histogram component is positioned above the map component or the histogram component is determined by adjusting the hierarchical relationship, if the components have transparency, the overlapping effect of the components can be displayed in a transparent way, and a user can clearly see the hierarchical relationship between the components according to the overlapping display effect.

In an alternative embodiment, in the case that the first component and the second component in the visualization component are located at the same position, if the user considers that the hierarchical relationship between the first component and the second component needs to be modified, the corresponding hierarchical level can be changed by clicking the first component or the second component, so that the modification of the hierarchical relationship between the first component and the second component is realized.

In the above embodiment of the present application, the method further includes: determining a current state of the canvas display area; receiving an activation instruction executed on at least one visual component under the condition that the current state is an editing state; and under the condition that the current state is a preview state or a release state, displaying a rendering result of at least one visualization component in the interactive interface.

The editing state may be an editing operation performed on a component of the canvas display area.

The preview state described above can be the final preview effect of the components viewing the canvas display area.

The release state can be presented according to the layout and configuration of the components stored in the edit state.

In an alternative embodiment, the current state of the canvas display area may be determined first, and in the case that the current state is the edit state, an activation instruction executed on at least one visualization component may be received, and different configuration panels may be provided for a user to configure the visualization component according to the activated visualization component. The module can receive an activation instruction executed on all the visualization components, can switch to a global configuration panel to perform global configuration on all the activated visualization components, and can input the configurations before and after the configuration change into the update management module to update when the configuration changes.

In an optional embodiment, when the current state is a preview state or a release state, a rendering result of at least one visualization component may be displayed in the interactive interface, and at this time, some preset interactive actions may be started, for example, the visualization component may perform multi-dimensional analysis on data so as to obtain hidden information therein, and a common interactive scenario may be linkage, skip, drill-down and scroll-up, and the like.

Taking a drilling-down scene as an example for explanation, after a user creates a histogram of provinces-sales, when clicking a column representing each province, the user can see the information of the market-sales under the province, the drilling-down interaction can be configured in an editing state, and when the user clicks the column of a certain province in a preview state, the graph automatically drills down and is displayed as the histogram of the market-sales under the current province.

In another alternative embodiment, many interactions may be added to the diagram, such as some more general types of interactions, for example: a prompt box (Tooltip), a circle selection interaction, etc., and interactions that are unique to some particular chart type.

In another optional embodiment, all the visualization components in the canvas display area may be subjected to layout management and maintenance through the layout management module, addition, editing and deletion operations may be performed on the visualization components, all the visualization components may be distributed in one or more canvas display areas, one canvas display area is generally automatically created by default, but a user may manually perform the add-delete operation on the canvas display area as required.

In the above embodiment of the present application, the method further includes: under the condition that the current state is an editing state or a preview state, switching the state of the canvas display area through switching operation; and under the condition that the current state is the release state, switching the state of the canvas display area to be the edit state through preset operation.

In an alternative embodiment, the state of the canvas and components, including the edit state, the preview state, and the publish state, may be managed by the component presentation module. The visual component is edited and updated by relying on the configuration management module, the data management module and the layout management module. And in the editing state, the final preview effect of the canvas display area can be seen through state switching when the editing state enters the preview state, and if a plurality of canvases exist, the canvas switching effect can be previewed. The preview state may also switch back to the edit state again. In the editing process, the editing state and the preview state can be switched for many times at any time. After the editing is finished and the publishing operation is stored, the effect of the publishing state can be checked, the publishing state can be displayed according to the layout and configuration stored in the editing state, some preset interactive actions and the like can be triggered, but the editing operation in the state is not supported. If the component content needs to be updated, the operation needs to be carried out by entering the editing state again through a specific entrance.

FIG. 3 is a structural diagram of a visualization configuration and presentation according to an embodiment of the present application, which includes several parts of a component presentation module, a layout management module, a configuration management module, a data management module, an update management module, and an underlying visualization component, i.e., the component 1, the component 2, the component N, illustrated in FIG. 3, wherein the visualization components are generally homologous and all come from a visualization component library, wherein the problem is that the visualization component is not rich enough in capability and type. The visualization capacity of the existing platform can be realized by means of a third-party chart library, self-research and the like, the capacity and the type of a visualization component in a single visualization component library are often limited, and how to quickly access the visualization component from multiple sources is a problem to be solved by enriching the visualization capacity of the platform.

For the problems generated by the related technologies, the application can provide a general configuration and display method based on the multi-source visual component, the method supports a user to define data, configuration and view layout of the visual component through a graphical draggable interface, an analysis report capable of supporting the multi-source visual component can be constructed, and the method is simple and easy to implement.

Fig. 4 is a schematic structural diagram of a configuration flow of a visualization component according to an embodiment of the present disclosure, which includes a component display module, a layout management module, a configuration management module, a data management module, an update management module, a component adaptation module, and a multi-source visualization component, where the multi-source visualization component may be respectively from a visualization component library 1, a visualization component library 2, and a visualization component library N, where the visualization component library 1 may include a component 11 and a component 12 · component 1N, the visualization component library 2 may include a component 21 and a component 22 · component 2N, and the visualization component library N may include a component N1 and a component N2 · component NN. The application can provide an access framework of a multi-source visual component, the single-source visual component is expanded to the multi-source visual component, a component adaptation module is added, the visual component with multiple sources is supported, and the system is accessed in a universal configuration mode and a unified display mode.

Wherein, the visual component library includes but is not limited to as follows: the common visual component libraries such as ECharts, D3, G2, highcharts and the like are used for providing some visual components which are used after being opened, and corresponding visual effects can be presented by providing simple data and configuration item input for the components.

The component adaptation module adapts multi-source visual components from various visual component libraries, converts and adapts the data and configuration formats of the components and then uniformly packages the components, so that all the visual components can receive upper-layer universal data and configuration models; establishing a uniform component life cycle, such as initialization, updating (including two modes of data updating and configuration updating) and destroying of the component; and uniformly monitoring and managing the interaction event and the life cycle event, such as a click event, a destroy event and the like of the component.

The update management module manages the state updates of all the components, and the update modes comprise two modes: updating of data and updating of configuration. The module receives data input provided by the configuration management module and configuration input of the configuration management module at the same time, judges whether the visual assembly needs to be updated or not by changing and comparing the data and the configuration, and informs the assembly adaptation module to update the assembly.

The configuration management module may manage the configuration of all components and provide a presentation of the configuration panel. Different configuration panels can be switched and displayed for configuration by a user according to currently activated components (which can be realized by clicking, circling, internal triggering and the like), batch configuration of the components is supported when a plurality of components are activated simultaneously, and global configuration (such as global fonts, canvas backgrounds, filter effects and the like) can be switched to the global configuration panel for global configuration. When the configuration is changed, the module will input the configuration before and after the change to the update management module.

The data management module can manage the data of the components and provide the display of the data panel. Switching of data sets and alteration and processing of component data can be performed in the module. The data set comprises encapsulation of various data sources such as static data (Excel, CSV, JSON and the like), API, database and the like, and provides a uniform data format and a use method for components. The component can choose to use multiple fields in the data set, and can process the data of the fields in a sorting, screening, aggregating and other manners. When the field configuration or the data is changed, the update of the data (such as initiating a request of an access interface to acquire new data or directly changing the existing data) can be triggered in a manual or automatic mode, and when the data is changed, the module inputs the data before and after the change to the update management module.

The layout management module can perform layout management and maintenance on all the components, and can perform addition, editing and deletion operations on the components. All the components can be distributed on one or more canvases (one canvases can be automatically created by default, and a user can also manually add and delete the canvases), and the sizes and the positions of the components can be adjusted by dragging or manually inputting after the components are selected. The hierarchical relationship of the components can be adjusted before, and the components can be combined to form a new component. And supports operations such as copying, pasting, locking, displaying, and hiding of components.

The component presentation module can manage the states of the canvas and the components, including an edit state, a preview state, and a publish state. The method enters an editing state during initialization, and at the moment, editing operation can be performed, and the components are edited and updated by relying on a configuration management module, a data management module and a layout management module. And in the editing state, the final preview effect of the canvas can be seen by switching the states, and if a plurality of canvases exist, the switching effect of the canvases can be previewed. The preview state may also switch back to the edit state again. In the process of editing, the editing state and the preview state can be switched for many times at any time. After the editing is finished, the publishing state effect can be checked after the operation of saving the publishing is carried out. The release state can be displayed according to the layout and configuration saved in the edit state, some preset interaction actions and the like can be triggered, but the editing operation in the state is not supported. If the component content needs to be updated, the operation needs to be carried out by entering the editing state again through a specific entrance.

The application provides an access mode of a multi-source visual assembly, which is compared with a single-source visual assembly, an assembly adaptation module is added, and the data and the configuration of the multi-source assembly are adapted to access an update management module of the assembly in a unified manner. By the method, the multi-source visual components can be accessed into the visual analysis platform, the types of the visual components are greatly enriched, and the visual analysis capability is improved.

It should be noted that for simplicity of description, the above-mentioned method embodiments are shown as a series of combinations of acts, but those skilled in the art will recognize that the present invention is not limited by the order of acts, as some steps may occur in other orders or concurrently in accordance with the invention. Further, those skilled in the art should also appreciate that the embodiments described in the specification are preferred embodiments and that the acts and modules referred to are not necessarily required by the invention.

Through the description of the foregoing embodiments, it is clear to those skilled in the art that the method according to the foregoing embodiments may be implemented by software plus a necessary general hardware platform, and certainly may also be implemented by hardware, but the former is a better implementation mode in many cases. Based on such understanding, the technical solutions of the present invention may be embodied in the form of a software product, which is stored in a storage medium (such as ROM/RAM, magnetic disk, optical disk) and includes instructions for enabling a terminal device (such as a mobile phone, a computer, a server, or a network device) to execute the method according to the embodiments of the present invention.

Example 2

According to an embodiment of the present application, there is also provided a visual component configuring apparatus for implementing the above visual component configuring method, and fig. 5 is a schematic diagram of a visual component configuring apparatus according to embodiment 2 of the present application, as shown in fig. 5, the apparatus 500 includes: a component display module 502, a component selection module 504, an interface display module 506, and a component configuration module 508.

The component display module is used for displaying a plurality of visual components in a component display area of the interactive interface, wherein the visual components are obtained by packaging initial components from a plurality of different component libraries; the component selection module is used for responding to a selection instruction executed on the plurality of visualization components and displaying at least one visualization component corresponding to the selection instruction in a canvas display area of the interactive interface; the interface display module is used for responding to an activation instruction executed on at least one visual component and displaying a configuration interface on the interactive interface; and the component configuration module is used for responding to a configuration instruction detected in the configuration interface and displaying at least one configured visual component in a canvas display area of the interactive interface, wherein the configuration instruction is used for configuring data and configuration items of the at least one visual component.

It should be noted here that the component display module 502, the component selection module 504, the interface display module 506, and the component configuration module 508 correspond to steps S202 to S208 in embodiment 1, and the four modules are the same as the corresponding steps in the implementation example and application scenario, but are not limited to the disclosure in embodiment 1. It should be noted that the above modules as part of the apparatus may be run in the computer terminal provided in embodiment 1.

In the above embodiment of the present application, the apparatus includes: the device comprises an assembly acquisition module and an assembly unification module.

The component acquisition module is used for acquiring initial components from a plurality of different component libraries; the component unifying module is used for unifying the formats of the data, the configuration items and the life cycle of the initial component to obtain a plurality of visual components.

In the above embodiment of the present application, the apparatus includes: and a comparison module.

The component acquisition module is used for acquiring target configuration information corresponding to the configuration instruction, wherein the target configuration information comprises at least one of the following: configuring item information, a target data set and data of a target field in the target data set; the comparison module is used for comparing the target configuration information with the current configuration information of at least one visualization component; the component configuration module is used for configuring at least one visualization component based on the target configuration information under the condition that the target configuration information is different from the current configuration information to obtain at least one configured visualization component.

In the above embodiments of the present application, the apparatus includes: the device comprises a component combination module, an adjustment component module and a determination module.

The component combination module is used for responding to a combination instruction executed on a target component in at least one visual component, combining the target component, generating a new visual component and displaying the new visual component in the canvas display area; the adjusting component module is used for responding to a first adjusting instruction executed on at least one visual component, and adjusting the size and the position of the at least one visual component based on the first adjusting instruction; the determination module is used for determining the hierarchical relationship of the first component and the second component based on a second adjustment instruction in response to the second adjustment instruction executed on the first component and the second component when the first component and the second component in the at least one visual component are located at the same position.

In the above embodiments of the present application, the apparatus includes: the display device comprises a receiving module and a display module.

Wherein the determination module is to determine a current state of the canvas display area; the receiving module is used for receiving an activation instruction executed on at least one visualization component under the condition that the current state is an editing state; the display module is used for displaying the rendering result of at least one visualization component in the interactive interface under the condition that the current state is a preview state or a release state.

In the above embodiments of the present application, the apparatus includes: and a switching module.

The switching module is used for switching the state of the canvas display area through switching operation under the condition that the current state is an editing state or a preview state; the switching module is used for switching the state of the canvas display area to be an editing state through preset operation under the condition that the current state is the publishing state.

Example 3

According to an embodiment of the present application, there is also provided a configuration system for implementing the above visualization component, and fig. 6 is a schematic diagram of a configuration system for a visualization component according to an embodiment 3 of the present application, as shown in fig. 6, the apparatus includes:

a component adaptation module 602, configured to encapsulate initial components from multiple different component libraries to obtain multiple visual components;

the component management module 604 is configured to, in response to a selection instruction executed on the plurality of visualization components, display at least one visualization component corresponding to the selection instruction in a canvas display area of the interactive interface, in response to an activation instruction executed on the at least one visualization component, display a configuration interface on the interactive interface, and in response to a configuration instruction detected in the configuration interface, display the configured at least one visualization component in the canvas display area of the interactive interface, where the configuration instruction is used to configure data and configuration items of the at least one visualization component.

In the above embodiments of the present application, the component management module 604 includes: configuration management module 6041, data management module 6042, update management module 6043.

The configuration management module is configured to obtain target configuration information corresponding to the configuration instruction, where the target configuration information includes: configuration item information; the data management module is used for acquiring target configuration information corresponding to the configuration instruction, wherein the target configuration information comprises at least one of the following: a target data set and data of a target field in the target data set; and the updating management module is used for comparing the target configuration information with the current configuration information of the at least one visualization component, and configuring the at least one visualization component based on the target configuration information under the condition that the target configuration information is different from the current configuration information to obtain the configured at least one visualization component.

In the above embodiment of the present application, the system further includes: a layout management module 606.

The layout management module is used for responding to a combination instruction executed on a target component in at least one visual component, combining the target component, generating a new visual component, and displaying the new visual component in the canvas display area; in response to a first adjustment instruction executed on the at least one visualization component, adjusting the size and position of the at least one visualization component based on the first adjustment instruction; in the case that a first component and a second component in the at least one visualization component are co-located, in response to a second adjustment instruction executed on the first component and the second component, a hierarchical relationship of the first component and the second component is determined based on the second adjustment instruction.

In the above embodiment of the present application, the system further includes: a component presentation module 608.

The component display module is used for determining the current state of the canvas display area; receiving an activation instruction executed on at least one visual component under the condition that the current state is an editing state; and under the condition that the current state is a preview state or a release state, displaying a rendering result of at least one visualization component in the interactive interface.

It should be noted that the preferred embodiments described in the above examples of the present application are the same as the schemes, application scenarios, and implementation procedures provided in example 1, but are not limited to the schemes provided in example 1.

Example 4

The embodiment of the invention can provide a computer terminal which can be any computer terminal device in a computer terminal group. Optionally, in this embodiment, the computer terminal may also be replaced with a terminal device such as a mobile terminal.

Optionally, in this embodiment, the computer terminal may be located in at least one network device of a plurality of network devices of a computer network.

In this embodiment, the computer terminal may execute the program code of the following steps in the configuration method of the visualization component: displaying a plurality of visual components in a component display area of an interactive interface, wherein the plurality of visual components are obtained by packaging initial components from a plurality of different component libraries; in response to a selection instruction executed on the plurality of visual components, displaying at least one visual component corresponding to the selection instruction in a canvas display area of the interactive interface; displaying a configuration interface on the interactive interface in response to an activation instruction executed on the at least one visualization component; and displaying at least one visualization component with completed configuration in a canvas display area of the interactive interface in response to a configuration instruction detected in the configuration interface, wherein the configuration instruction is used for configuring data and configuration items of the at least one visualization component.

Alternatively, fig. 7 is a block diagram of a computer terminal according to an embodiment of the present invention. As shown in fig. 7, the computer terminal a may include: one or more processors (only one shown), memory.

The memory may be configured to store software programs and modules, such as program instructions/modules corresponding to the method and apparatus for configuring a visualization component in the embodiments of the present invention, and the processor executes various functional applications and data processing by running the software programs and modules stored in the memory, that is, implements the above-described method for configuring a visualization component. The memory may include high speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some examples, the memory may further include memory remotely located from the processor, which may be connected to terminal a through a network. Examples of such networks include, but are not limited to, the internet, intranets, local area networks, mobile communication networks, and combinations thereof.

The processor can call the information and application program stored in the memory through the transmission device to execute the following steps: displaying a plurality of visual components in a component display area of the interactive interface, wherein the plurality of visual components are obtained by packaging initial components from a plurality of different component libraries; in response to a selection instruction executed on the plurality of visual components, displaying at least one visual component corresponding to the selection instruction in a canvas display area of the interactive interface; displaying a configuration interface on the interactive interface in response to an activation instruction executed on the at least one visualization component; and displaying at least one visualization component with completed configuration in a canvas display area of the interactive interface in response to a configuration instruction detected in the configuration interface, wherein the configuration instruction is used for configuring data and configuration items of the at least one visualization component.

Optionally, the processor may further execute the program code of the following steps: acquiring initial components from a plurality of different component libraries; and unifying the format of the data, the configuration items and the life cycle of the initial assembly to obtain a plurality of visual assemblies.

Optionally, the processor may further execute the program code of the following steps: acquiring target configuration information corresponding to the configuration instruction, wherein the target configuration information comprises at least one of the following: configuring item information, a target data set and data of a target field in the target data set; comparing the target configuration information with current configuration information of the at least one visualization component; and under the condition that the target configuration information is different from the current configuration information, configuring the at least one visualization component based on the target configuration information to obtain the configured at least one visualization component.

Optionally, the processor may further execute the program code of the following steps: the target data set is used to characterize a selected data set from a plurality of data sets, wherein the plurality of data sets are obtained by encapsulating a plurality of different data sources.

Optionally, the processor may further execute the program code of the following steps: in response to a combination instruction executed on a target component in at least one visual component, combining the target components to generate a new visual component, and displaying the new visual component in the canvas display area; in response to a first adjustment instruction executed on the at least one visualization component, adjusting the size and position of the at least one visualization component based on the first adjustment instruction; in the case that a first component and a second component in the at least one visualization component are co-located, in response to a second adjustment instruction executed on the first component and the second component, a hierarchical relationship of the first component and the second component is determined based on the second adjustment instruction.

Optionally, the processor may further execute the program code of the following steps: determining a current state of the canvas display area; receiving an activation instruction executed on at least one visual component under the condition that the current state is an editing state; and under the condition that the current state is a preview state or a release state, displaying a rendering result of at least one visualization component in the interactive interface.

Optionally, the processor may further execute the program code of the following steps: under the condition that the current state is an editing state or a preview state, switching the state of the canvas display area through switching operation; and under the condition that the current state is the release state, switching the state of the canvas display area to be the edit state through preset operation.

By adopting the embodiment of the invention, a plurality of visual components are displayed in the component display area of the interactive interface, wherein the visual components are obtained by packaging initial components from a plurality of different component libraries; in response to a selection instruction executed on the plurality of visual components, displaying at least one visual component corresponding to the selection instruction in a canvas display area of the interactive interface; displaying a configuration interface on the interactive interface in response to an activation instruction executed on the at least one visualization component; and responding to a configuration instruction detected in the configuration interface, and displaying the configured at least one visualization component in a canvas display area of the interactive interface, wherein the configuration instruction is used for configuring data and configuration items of the at least one visualization component, so that the effect of enriching the visualization components is realized. It is easy to notice that can provide by a plurality of visual subassemblies that the initial subassembly of a plurality of different component libraries encapsulates the obtaining, compare in the visual subassembly of single source, can show the visual subassembly of different sources in the subassembly display area with unified mode, greatly richened the type of visual subassembly, improved visual analytic ability, and then solved the type of visual subassembly in the correlation technique comparatively single, lead to the relatively poor technical problem of visual effect.

It should be understood by those skilled in the art that the structure shown in the figure is merely an illustration, and the computer terminal may also be a terminal device such as a smart phone (e.g., an Android phone, an iOS phone, etc.), a tablet computer, a palm computer, and a Mobile Internet Device (MID), PAD, etc. Fig. 7 is a diagram illustrating a structure of the electronic device. For example, the computer terminal 10 may also include more or fewer components (e.g., network interfaces, display devices, etc.) than shown in FIG. 7, or have a different configuration than shown in FIG. 7.

Those skilled in the art will appreciate that all or part of the steps in the methods of the above embodiments may be implemented by a program instructing hardware associated with the terminal device, where the program may be stored in a computer-readable storage medium, and the storage medium may include: flash disks, read-Only memories (ROMs), random Access Memories (RAMs), magnetic or optical disks, and the like.

Example 5

The embodiment of the invention also provides a storage medium. Optionally, in this embodiment, the storage medium may be configured to store the program code executed by the configuration method of the visualization component provided in the first embodiment.

Optionally, in this embodiment, the storage medium may be located in any one of computer terminals in a computer terminal group in a computer network, or in any one of mobile terminals in a mobile terminal group.

Optionally, in this embodiment, the storage medium is configured to store program code for performing the following steps: displaying a plurality of visual components in a component display area of an interactive interface, wherein the plurality of visual components are obtained by packaging initial components from a plurality of different component libraries; in response to a selection instruction executed on the plurality of visual components, displaying at least one visual component corresponding to the selection instruction in a canvas display area of the interactive interface; displaying a configuration interface on the interactive interface in response to an activation instruction executed on the at least one visualization component; and displaying at least one visualization component with completed configuration in a canvas display area of the interactive interface in response to a configuration instruction detected in the configuration interface, wherein the configuration instruction is used for configuring data and configuration items of the at least one visualization component.

Optionally, the storage medium is further configured to store program code for performing the following steps: acquiring initial components from a plurality of different component libraries; and unifying the format of the data, the configuration items and the life cycle of the initial assembly to obtain a plurality of visual assemblies.

Optionally, the storage medium is further configured to store program code for performing the following steps: acquiring target configuration information corresponding to the configuration instruction, wherein the target configuration information comprises at least one of the following: configuring item information, a target data set and data of a target field in the target data set; comparing the target configuration information with current configuration information of the at least one visualization component; and under the condition that the target configuration information is different from the current configuration information, configuring the at least one visualization component based on the target configuration information to obtain the configured at least one visualization component.

Optionally, the storage medium is further configured to store program code for performing the following steps: the target data set is used to characterize a selected data set from a plurality of data sets, wherein the plurality of data sets are obtained by encapsulating a plurality of different data sources.

Optionally, the storage medium is further configured to store program code for performing the following steps: in response to a combination instruction executed on a target component in at least one visual component, combining the target components to generate a new visual component, and displaying the new visual component in the canvas display area; in response to a first adjustment instruction executed on the at least one visualization component, adjusting a size and a position of the at least one visualization component based on the first adjustment instruction; in the case that a first component and a second component in the at least one visualization component are co-located, in response to a second adjustment instruction executed on the first component and the second component, a hierarchical relationship of the first component and the second component is determined based on the second adjustment instruction.

Optionally, the storage medium is further configured to store program code for performing the following steps: determining a current state of the canvas display area; receiving an activation instruction executed on at least one visual component under the condition that the current state is an editing state; and under the condition that the current state is a preview state or a release state, displaying a rendering result of at least one visualization component in the interactive interface.

Optionally, the storage medium is further configured to store program code for performing the following steps: under the condition that the current state is an editing state or a preview state, switching the state of the canvas display area through switching operation; and under the condition that the current state is the release state, switching the state of the canvas display area to be the edit state through preset operation.

By adopting the embodiment of the invention, a plurality of visual components are displayed in the component display area of the interactive interface, wherein the visual components are obtained by packaging initial components from a plurality of different component libraries; in response to a selection instruction executed on the plurality of visual components, displaying at least one visual component corresponding to the selection instruction in a canvas display area of the interactive interface; displaying a configuration interface on the interactive interface in response to an activation instruction executed on the at least one visualization component; and responding to a configuration instruction detected in the configuration interface, and displaying the configured at least one visualization component in a canvas display area of the interactive interface, wherein the configuration instruction is used for configuring data and configuration items of the at least one visualization component, so that the effect of enriching the visualization components is realized. It is easy to notice that a plurality of visual components obtained by packaging initial components of a plurality of different component libraries can be provided, compared with a single-source visual component, visual components of different sources can be displayed in a component display area in a unified mode, the types of the visual components are greatly enriched, the visual analysis capability is improved, and the technical problem that the visual components in the related technology are single in type and poor in visual effect is caused is solved.

The above-mentioned serial numbers of the embodiments of the present invention are merely for description and do not represent the merits of the embodiments.

In the above embodiments of the present invention, the descriptions of the respective embodiments have respective emphasis, and for parts that are not described in detail in a certain embodiment, reference may be made to related descriptions of other embodiments.

In the embodiments provided in the present application, it should be understood that the disclosed technology can be implemented in other ways. The above-described embodiments of the apparatus are merely illustrative, and for example, the division of the units is only one type of division of logical functions, and there may be other divisions when actually implemented, for example, a plurality of units or components may be combined or may be integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection through some interfaces, units or modules, and may be in an electrical or other form.

The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.

In addition, functional units in the embodiments of the present invention may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit. The integrated unit can be realized in a form of hardware, and can also be realized in a form of a software functional unit.

The integrated unit, if implemented in the form of a software functional unit and sold or used as a stand-alone product, may be stored in a computer readable storage medium. Based on such understanding, the technical solution of the present invention may be embodied in the form of a software product, which is stored in a storage medium and includes instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the method according to the embodiments of the present invention. And the aforementioned storage medium includes: a U-disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a removable hard disk, a magnetic disk, or an optical disk, and various media capable of storing program codes.

The foregoing is only a preferred embodiment of the present invention, and it should be noted that, for those skilled in the art, various modifications and decorations can be made without departing from the principle of the present invention, and these modifications and decorations should also be regarded as the protection scope of the present invention.

Claims

1. A method for configuring a visualization component, comprising:

displaying a plurality of visual components in a component display area of an interactive interface, wherein the plurality of visual components are obtained by packaging initial components from a plurality of different component libraries;

in response to a selection instruction executed on the plurality of visualization components, displaying at least one visualization component corresponding to the selection instruction in a canvas display area of the interactive interface;

displaying a configuration interface on the interactive interface in response to an activation instruction executed on the at least one visualization component;

and displaying at least one visualization component with completed configuration in a canvas display area of the interactive interface in response to a configuration instruction detected in the configuration interface, wherein the configuration instruction is used for configuring data and configuration items of the at least one visualization component.

2. The method of claim 1, further comprising:

obtaining initial components from the plurality of different component libraries;

and unifying the formats of the data, the configuration items and the life cycle of the initial assembly to obtain the plurality of visual assemblies.

3. The method of claim 1, wherein in response to a configuration instruction detected in the configuration interface, the method further comprises:

acquiring target configuration information corresponding to the configuration instruction, wherein the target configuration information comprises at least one of the following: configuring item information, a target data set, and data of a target field in the target data set;

comparing the target configuration information with current configuration information of the at least one visualization component;

and under the condition that the target configuration information is different from the current configuration information, configuring the at least one visualization component based on the target configuration information to obtain the configured at least one visualization component.

4. The method of claim 3, wherein the target data set is used to characterize a selected data set from a plurality of data sets, wherein the plurality of data sets are derived by encapsulating a plurality of different data sources.

5. The method of claim 1, wherein after displaying at least one visualization component corresponding to the selection instruction within a canvas display area of the interactive interface, the method further comprises one of:

in response to a combination instruction executed on a target component in the at least one visualization component, combining the target components, generating a new visualization component, and displaying the new visualization component in the canvas display area;

in response to a first adjustment instruction executed on the at least one visualization component, adjusting a size and a position of the at least one visualization component based on the first adjustment instruction;

in the case that a first component and a second component in the at least one visualization component are located at the same position, in response to a second adjustment instruction executed on the first component and the second component, determining a hierarchical relationship of the first component and the second component based on the second adjustment instruction.

6. The method of claim 1, further comprising:

determining a current state of the canvas display area;

receiving the activation instruction executed on the at least one visualization component when the current state is an editing state;

and displaying a rendering result of the at least one visualization component in the interactive interface under the condition that the current state is a preview state or a release state.

7. The method of claim 6, further comprising:

under the condition that the current state is the editing state or the preview state, switching the state of the canvas display area through switching operation;

and under the condition that the current state is the release state, switching the state of the canvas display area to be the edit state through preset operation.

8. An apparatus for configuring a visualization component, comprising:

the component display module is used for displaying a plurality of visual components in a component display area of the interactive interface, wherein the visual components are obtained by packaging initial components from a plurality of different component libraries;

the component selection module is used for responding to a selection instruction executed on the plurality of visualization components and displaying at least one visualization component corresponding to the selection instruction in a canvas display area of the interactive interface;

the interface display module is used for responding to an activation instruction executed on the at least one visualization component and displaying a configuration interface on the interactive interface;

and the component configuration module is used for responding to a configuration instruction detected in the configuration interface and displaying at least one visual component which is configured in a canvas display area of the interactive interface, wherein the configuration instruction is used for configuring data and configuration items of the at least one visual component.

9. A system for configuring a visualization component, comprising:

the component adaptation module is used for encapsulating initial components from a plurality of different component libraries to obtain a plurality of visual components;

the component management module is used for responding to a selection instruction executed on the plurality of visualization components, displaying at least one visualization component corresponding to the selection instruction in a canvas display area of an interactive interface, responding to an activation instruction executed on the at least one visualization component, displaying a configuration interface on the interactive interface, and responding to a configuration instruction detected in the configuration interface, and displaying at least one visualization component which is configured in the canvas display area of the interactive interface, wherein the configuration instruction is used for configuring data and configuration items of the at least one visualization component.

10. The system of claim 9, wherein the component management module comprises:

a configuration management module, configured to obtain target configuration information corresponding to the configuration instruction, where the target configuration information includes: configuration item information;

a data management module, configured to obtain the target configuration information corresponding to the configuration instruction, where the target configuration information includes at least one of the following: a target dataset and data of a target field in the target dataset;

and the update management module is used for comparing the target configuration information with the current configuration information of the at least one visualization component, and configuring the at least one visualization component based on the target configuration information under the condition that the target configuration information is different from the current configuration information to obtain the configured at least one visualization component.

11. The system of claim 9, further comprising:

the layout management module is used for responding to a combination instruction executed on a target component in the at least one visualization component, combining the target component, generating a new visualization component and displaying the new visualization component in the canvas display area; in response to a first adjustment instruction executed on the at least one visualization component, adjusting a size and a position of the at least one visualization component based on the first adjustment instruction; in the case that a first component and a second component in the at least one visualization component are located at the same position, in response to a second adjustment instruction executed on the first component and the second component, determining a hierarchical relationship of the first component and the second component based on the second adjustment instruction.

12. The system of claim 9, further comprising:

a component presentation module to determine a current state of the canvas display area; receiving the activation instruction executed on the at least one visualization component when the current state is an editing state; and displaying a rendering result of the at least one visualization component in the interactive interface under the condition that the current state is a preview state or a release state.

13. A computer-readable storage medium, comprising a stored program, wherein the program, when executed, controls an apparatus in which the computer-readable storage medium is located to perform the method for configuring a visualization component according to any one of claims 1 to 7.

14. An electronic device, comprising:

a processor;

a memory, connected to the processor, for providing the processor with instructions to process the configuration method of the visualization component according to any of the claims 1 to 7.