Visual component arrangement method and device

Abstract

The invention provides a visual component arrangement method and device. The component arrangement efficiency can be improved. The visual component arrangement method comprises the following steps: receiving an arrangement instruction input by a user; the arrangement instruction comprises a target component, at least one sample parameter and at least one position parameter; based on the target component, the arrangement parameter and the position parameter, determining the style and the position of the target component; performing component arrangement on the visual page according to the style and the position of the target component; and in response to the change of the arrangement instruction, updating the arrangement mode of the target component in real time.

Description

Technical Field

[0001] The present invention relates to the technical field of software development and management systems, and in particular to a visual component arrangement method and device. Background Art

[0002] In the current context of enterprise digital transformation, application development requirements are becoming increasingly complex, and developers urgently need to quickly build user interfaces capable of dynamic data interaction. Traditionally, developers need to manually write extensive code to implement interface layouts. For example, for data display pages, not only do they need to define the page structure and style, but they also need to write data acquisition, binding, and dynamic update logic (such as triggering data refreshes on button clicks). This process results in lengthy code, difficult debugging, and a high risk of functional anomalies due to human error. This makes development efficiency difficult to meet the demands of rapid iteration. Summary of the Invention

[0003] In order to solve the above technical problems, the present invention is proposed. Embodiments of the present invention provide a method and apparatus for visual component arrangement, which can improve the efficiency of component arrangement.

[0004] According to one aspect of the present invention, a method for arranging visual components is provided, comprising: receiving an arranging instruction input by a user; the arranging instruction comprising a target component, at least one style parameter, and at least one position parameter; determining the style and position of the target component based on the target component, the arranging parameter, and the position parameter; arranging components on a visual page according to the style and position of the target component; and updating the arranging mode of the target component in real time in response to changes in the arranging instruction.

[0005] In one embodiment, the style parameters include: at least one of the background color, border style, font size, layout type, spacing configuration and alignment of the target component; the target component includes: at least one of a text box component, a chart component and a button component.

[0006] In one embodiment, the visual component orchestration method further includes: obtaining data binding instructions; parsing the data binding instructions to obtain data source connection information; wherein the data source connection information includes at least one of a database address, a user, a password, a database dialect, and a database connection word; based on the data source connection information, selecting corresponding tables and fields to associate data in the data source with the target component; wherein the data source includes at least one of a relational database, a non-relational database, an API interface, and a local file.

[0007] In one embodiment, the visual component orchestration method further includes: when at least one of the operations of adding, modifying and deleting the data in the data source occurs, obtaining the updated data in the data source; based on the updated data in the data source, deleting the original data associated with the target component, and associating the updated data in the data source with the target component.

[0008] In one embodiment, the visual component orchestration method further includes: obtaining interactive logic configuration instructions; parsing the interactive logic configuration instructions to obtain interactive logic configuration information; setting interactive events for the target component based on the interactive logic configuration information; wherein the interactive events include click events and hover events, the click event representing that when a button is clicked, at least one of data update, page jump and pop-up display is triggered, and the hover event represents that when a data point is hovered over the target component, the information of the data point is displayed.

[0009] In one embodiment, determining the style and position of the target component based on the target component, the layout parameters, and the position parameters includes: determining the style and position of the target component based on the target component, the layout parameters, and the position parameters, and displaying the style state and position state of the target component in real time in a preview window; wherein, updating the layout mode of the target component in real time in response to a change in the layout instruction includes: updating the layout mode of the target component in real time in response to a change in the layout instruction, and displaying the layout mode of the target component in real time in a preview window.

[0010] In one embodiment, after the components of the visual page are arranged according to the style and position of the target components, the visual component arrangement method includes: based on confirming the component arrangement completion instruction of the visual page, deploying the components arranged in the visual page to the target environment; wherein the target environment includes an enterprise internal server or a cloud server; and based on confirming the component arrangement completion instruction of the visual page, storing the components arranged in the visual page as preset components.

[0011] In one embodiment, based on the target component, the layout parameters and the position parameters, the style and position of the target component are determined, including: adaptively adjusting the row and column distribution of the target component according to the screen size of the visualization page; wherein, in response to the change of the layout instruction, the layout mode of the target component is updated in real time, including: recalculating the position of the target component in response to the dynamic change of the layout mode of the target component.

[0012] In one embodiment, the style and position of the target component are determined based on the target component, the layout parameters, and the position parameters, including: when the target component is a chart component, the chart style and chart position are determined according to the layout parameters and the position parameters; wherein the chart style includes at least one of a bar chart, a line chart, and a pie chart, the chart style also includes a color theme and a data label style, and the chart position includes a coordinate axis scale.

[0013] According to another aspect of the present invention, a visual component arrangement device is provided, comprising: a receiving module for receiving an arrangement instruction input by a user; the arrangement instruction comprises a target component, at least one style parameter, and at least one position parameter; a determining module for determining the style and position of the target component based on the target component, the arrangement parameter, and the position parameter; an arrangement module for performing component arrangement on a visual page according to the style and position of the target component; and an updating module for updating the arrangement mode of the target component in real time in response to changes in the arrangement instruction.

[0014] The visual component orchestration method and device provided by this invention significantly shortens the development cycle by eliminating the need for extensive code writing through orchestration instructions. By orchestrating components on a visual page, users can promptly identify and adjust issues during development, ensuring that the final application meets their expectations. They can also easily adapt to dynamic changes in orchestration instructions, updating the orchestration method in real time, and improving the convenience of visual component orchestration. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] The above and other objects, features, and advantages of the present invention will become more apparent through a more detailed description of the embodiments of the present invention in conjunction with the accompanying drawings. The accompanying drawings are provided to provide a further understanding of the embodiments of the present invention and constitute a part of the specification. Together with the embodiments of the present invention, they are used to explain the present invention and are not intended to limit the present invention. In the drawings, the same reference numerals generally represent the same components or steps.

[0016] Figure 1 It is a flowchart of a visualization component arrangement method provided by an exemplary embodiment of the present invention.

[0017] Figure 2 It is a structural diagram of a visual component arrangement device provided by an exemplary embodiment of the present invention. DETAILED DESCRIPTION

[0018] Below, the exemplary embodiments according to the present invention will be described in detail with reference to the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, rather than all the embodiments of the present invention, and it should be understood that the present invention is not limited to the exemplary embodiments described herein.

[0019] As enterprises accelerate their digital transformation, demand for application software with efficient data processing and interaction capabilities is exploding across industries. Against this backdrop, developers face the challenging task of rapidly building complex application interfaces with dynamic data interaction capabilities to meet the ever-growing business needs of enterprises.

[0020] In the traditional application interface development model, developers need to start with low-level code writing, taking full responsibility for component layout planning, style design, data binding, and implementation of interaction logic. Taking the construction of a simple data display page as an example, this process involves complex operations at multiple technical levels. First, developers need to use HTML to define the basic structure of the page, building the page framework through precise tag nesting and element organization. Then, using CSS technology, they style the page elements, covering fonts, colors, layout, spacing, and other aspects to ensure the page has a good visual effect and user experience. At the data interaction level, developers need to rely on JavaScript to write a large amount of code to obtain data from the database, bind data to page components, and handle various interactive functions, such as triggering data updates after users click buttons.

[0021] This traditional development approach has numerous drawbacks. First, the tedious and complex code writing process requires developers to invest significant time and effort, resulting in extended development cycles and an inability to promptly respond to rapidly changing business needs. Second, the sheer volume and complex logic of the code makes it prone to various errors, such as syntax errors and logical vulnerabilities. This not only increases the difficulty of debugging and fixing, but also severely impacts development efficiency. Furthermore, the code's maintainability and scalability are poor. When business requirements change or feature upgrades are required, developers need to modify and adjust large amounts of code, further increasing development costs and risks.

[0022] Low-code platforms have emerged in recent years to address the shortcomings of traditional development methods. However, existing low-code platforms still have significant limitations when it comes to dynamic data interaction. Dynamic adaptation is impossible. In summary, existing application interface development technologies, whether traditional coding or existing low-code platforms, cannot meet the needs of enterprises undergoing digital transformation to quickly build complex and dynamically adaptable application interfaces.

[0023] To solve the above problems, this application proposes a visual component arrangement method and device, which enables users to conveniently layout components on a visual page by dragging and dropping, and can also customize the style of the components to achieve accurate binding of data and components and flexible configuration of interaction logic. It also provides a real-time preview function, which allows users to timely view the actual effects of components under dynamic data interaction. After all debugging is complete, the arranged application can be smoothly deployed to the target environment through the publishing function. This application strongly supports the dynamic interaction of multiple data sources and data sets, covering common types such as databases, APIs, files, etc., which can greatly improve development efficiency and significantly improve user experience.

[0024] To solve the above problems and improve the efficiency of component arrangement in the visual interface, Figure 1 FIG. 1 is a flow chart of a visualization component arrangement method provided by an exemplary embodiment of the present invention. Figure 1 As shown, first, receive the arrangement instruction input by the user (see Figure 1 S110); the layout instruction includes a target component, at least one style parameter and at least one position parameter. Next, based on the target component, the layout parameter and the position parameter, the style and position of the target component are determined (see Figure 1 Then, according to the style and position of the target component, the visual page is arranged as a component (see Figure 1 Finally, in response to the change of the arrangement instruction, the arrangement mode of the target component is updated in real time (see Figure 1 S140).

[0025] Combined with the following Figure 1 , a more detailed introduction to the visual component orchestration method provided in the embodiment of the present application is given.

[0026] In S110 , an arrangement instruction input by a user is received.

[0027] Create an intuitive visual page, which can be thought of as a canvas, upon which subsequent drag-and-drop and other layout customization actions are implemented. The visual page features a drag-and-drop configuration. Users can drag pre-defined components, such as text boxes, charts, and buttons, to generate layout instructions. Based on these instructions, components can be quickly placed in designated locations. This intuitive drag-and-drop approach eliminates the need for extensive code writing, significantly shortening the development cycle.

[0028] In S120 , the style and position of the target component are determined based on the target component, the layout parameter, and the position parameter.

[0029] In some embodiments, when a user drags any component, the dragged component is considered the target component. Target components can include at least one of a text box component, a chart component, and a button component. Not only can the target component be dragged, but the component's style can also be fine-tuned. For example, style parameters include at least one of the target component's background color, border style, font size, layout type, spacing configuration, and alignment. Any of these style parameters can be adjusted. Font size is a key factor affecting information readability and visual hierarchy. Users can adjust the font size based on the importance of the component's content and presentation requirements. Spacing configuration includes the spacing between elements within the component and the spacing between the component and surrounding elements. Proper spacing configuration can make the interface appear more neat and organized. Alignment affects the positional relationship between elements within the component and the component itself on the page. Common alignment methods include left, right, and center. Users can select the appropriate alignment method based on the overall layout and design requirements of the page. The layout type determines the arrangement of elements within the component. Common layout types include horizontal, vertical, and grid. Users can select the appropriate layout type based on the component's function and displayed content. For example, in an image display component, a grid layout can neatly arrange multiple images together, making it easier for users to browse and compare; in a form component, a vertical layout can arrange the form fields in sequence, making it clearer for users to fill in information.

[0030] For example, when the target component is a chart component, the chart style and chart position are determined based on the layout parameters and position parameters; wherein the chart style includes at least one of a bar chart, a line chart, and a pie chart, the chart style also includes a color theme and a data label style, and the chart position includes the coordinate axis scale.

[0031] In some embodiments, the target component can also support data binding from multiple data sources. For example, obtain data binding instructions, parse data binding instructions, and obtain data source connection information. The data source connection information may include at least one of the database address, user, password, database dialect, and database connection word. Based on the data source connection information, select the corresponding table and field to associate the data in the data source with the target component. The data source may include at least one of a relational database (MySQL, Oracle, etc.), a non-relational database (MongoDB, Redis, etc.), an API interface (such as a third-party data service interface, an enterprise internal microservice interface), and a local file (CSV file, JSON file, etc.). In other words, you only need to enter the database connection information in the visual interface and select the corresponding table and field to associate the data in the database with the component, realize real-time update display of the data, and thus establish an association between the component and diversified data and multi-source data.

[0032] In some embodiments, after establishing data binding with multiple data sources, dynamic interaction support for multiple data sources can also be provided. The system can efficiently handle dynamic changes in multiple data sources and data sets. For example, when at least one of the operations of adding, modifying, and deleting data in the data source occurs, the updated data in the data source is obtained, and based on the updated data in the data source, the original data associated with the target component is deleted, and the updated data in the data source is associated with the target component. In other words, when operations such as adding, modifying, and deleting data in the data source occur, the system can automatically detect the changes and synchronize the latest data to the components bound to it in a timely manner to achieve dynamic updates of the components.

[0033] For example, the data source, as the source of data in a system, is responsible for storing and managing critical business data. It could be a relational database like MySQL or Oracle, storing customer information and order data; or a non-relational database like MongoDB, used to process large amounts of semi-structured or unstructured log data and user behavior data; or even a file system, storing various resources such as documents and images. When common operations such as adding, modifying, or deleting data in the data source occur, pre-defined data monitoring policies can accurately identify new records. Once a data change is detected in the data source, a series of synchronization processes are immediately triggered to ensure that the latest data is delivered to the associated components in a timely and accurate manner. These components might be tables and charts on the front-end display, providing users with an intuitive view of business data; or they could be various information display modules in the back-end management interface, allowing managers to grasp business dynamics in real time. Therefore, dynamic data interaction enables applications to respond to user operations and data changes in real time, providing users with a smoother and more efficient user experience. Moreover, it can easily cope with the dynamic changes of various data sources and data sets. Whether it is a change in data format or a large fluctuation in data volume, it can automatically adapt to ensure the stability of the application and the accuracy of data display.

[0034] As a possible implementation, in an e-commerce real-time sales data monitoring system, when sales order data in the database changes, the sales chart component on the page can be updated in real time to display the latest sales data. Alternatively, in the company's management backend, managers can see real-time updates on order status and the progress of customer feedback, allowing them to adjust business strategies in a timely manner and improve operational efficiency and service quality.

[0035] In some embodiments, it is also possible to flexibly configure interaction logic for components. For example, interaction logic configuration instructions are obtained, interaction logic configuration instructions are parsed, interaction logic configuration information is obtained, and based on the interaction logic configuration information, interaction events are set for target components, wherein interaction events include click events and hover events. Click events represent that when a button is clicked, at least one of the events of data update, page jump, and pop-up window display is triggered. Hover events represent that when a data point is hovered over the target component, the information of the data point is displayed. In other words, a click event can be set for a button component, and when the user clicks the button, operations such as data update, page jump, and pop-up window display can be triggered; a mouse hover event can be set for a chart component, and when the mouse hovers over a data point in the chart, detailed information of the data point is automatically displayed.

[0036] In some embodiments, a real-time preview function can also be provided when executing the layout instruction. For example, based on the target component, layout parameters and position parameters, the style and position of the target component are determined, and the style state and position state of the target component are displayed in real time in the preview window. In other words, during the process of component layout and configuration by the user, the actual effect of the component under dynamic data interaction can be displayed in real time. Users do not need to wait for the entire application development to be completed before testing, and can check at any time whether the component style meets expectations, whether the data is correctly bound, and whether the interaction logic is running normally. For example, when the user modifies the data binding data source of the chart component, the real-time preview window will immediately update the chart to show the latest data trends.

[0037] In S130 , components are arranged on the visualization page according to the style and position of the target component.

[0038] According to the style and position of the selected target component, the target component is laid out to the corresponding position of the visualization page and set to the corresponding style, thereby achieving quick and simple component arrangement.

[0039] In some embodiments, based on confirmation of the component arrangement completion instruction for the visualization page, the components arranged in the visualization page are deployed to the target environment; wherein the target environment includes an enterprise internal server or a cloud server; and based on confirmation of the component arrangement completion instruction for the visualization page, the components arranged in the visualization page are stored as preset components. In other words, after the user completes the arrangement and configuration of all components and confirms that they are correct through real-time preview, the system can use the publishing function provided by the system to deploy the arranged application to the target environment, such as an enterprise internal server, a cloud server, etc., with one click. During the publishing process, the system automatically performs a series of optimization and packaging operations to ensure that the application can run stably and efficiently in the target environment.

[0040] In S140 , in response to the change of the orchestration instruction, the orchestration mode of the target component is updated in real time.

[0041] In some embodiments, the layout of the target component is updated in real time in response to changes to the layout instructions, and the layout of the target component is displayed in real time in the preview window. This real-time preview feature allows users to identify problems and make adjustments in a timely manner during the development process, ensuring that the final application meets user expectations.

[0042] As a possible implementation method, during the component arrangement process, the row and column distribution of the target component can be adaptively adjusted according to the screen size of the visualization page, and then the position of the target component can be recalculated in response to the dynamic changes in the arrangement method of the target component.

[0043] Figure 2 is a structural diagram of a visual component arrangement device provided by an exemplary embodiment of the present invention. Figure 2 As shown, the visual component arrangement device 2 includes: a receiving module 21, which is used to receive the arrangement instruction input by the user; the arrangement instruction includes a target component, at least one style parameter and at least one position parameter; a determination module 22, which is used to determine the style and position of the target component based on the target component, the arrangement parameter and the position parameter; an arrangement module 23, which is used to arrange the components of the visual page according to the style and position of the target component; and an update module 24, which is used to update the arrangement method of the target component in real time in response to changes in the arrangement instruction.

[0044] In one embodiment, the visual component layout device 2 can be configured as follows: the style parameters may include: at least one of the background color, border style, font size, layout type, spacing configuration and alignment of the target component; the target component may include: at least one of a text box component, a chart component and a button component.

[0045] In one embodiment, the visual component orchestration device 2 can also be configured to: obtain data binding instructions; parse the data binding instructions to obtain data source connection information; wherein the data source connection information may include at least one of a database address, user, password, database dialect, and database connection word; based on the data source connection information, select corresponding tables and fields to associate the data in the data source with the target component; wherein the data source may include at least one of a relational database, a non-relational database, an API interface, and a local file.

[0046] In one embodiment, the visual component orchestration device 2 can also be configured to: obtain the updated data in the data source when at least one of the operations of adding, modifying and deleting the data in the data source occurs; based on the updated data in the data source, delete the original data associated with the target component, and associate the updated data in the data source with the target component.

[0047] In one embodiment, the visual component orchestration device 2 can also be configured to: obtain interactive logic configuration instructions; parse the interactive logic configuration instructions to obtain interactive logic configuration information; set interactive events for the target component based on the interactive logic configuration information; wherein, the interactive events include click events and hover events, the click event represents that when a button is clicked, at least one of the events of data update, page jump and pop-up display is triggered, and the hover event represents that when a data point is hovered over the target component, the information of the data point is displayed.

[0048] In one embodiment, the determination module 22 can be configured to: determine the style and position of the target component based on the target component, layout parameters and position parameters, and display the style status and position status of the target component in real time in the preview window; wherein, the update module 24 can be configured to: update the layout mode of the target component in real time in response to changes in the layout instructions, and display the layout mode of the target component in real time in the preview window.

[0049] In one embodiment, the visual component orchestration device 2 can also be configured to: deploy the components orchestrated in the visual page to a target environment based on confirmation of the component orchestration completion instruction of the visual page; wherein the target environment may include an enterprise internal server or a cloud server; and store the components orchestrated in the visual page as preset components based on confirmation of the component orchestration completion instruction of the visual page.

[0050] In one embodiment, the determination module 22 can be configured to adaptively adjust the row and column distribution of the target component according to the screen size of the visualization page; wherein the update module 24 can be configured to recalculate the position of the target component in response to dynamic changes in the arrangement of the target component.

[0051] In one embodiment, the determination module 22 can be configured to: when the target component is a chart component, determine the chart style and chart position based on the layout parameters and position parameters; wherein the chart style may include at least one of a bar chart, a line chart, and a pie chart, the chart style may also include a color theme and a data label style, and the chart position may include a coordinate axis scale.

[0052] An embodiment of the present invention provides a visual component orchestration device. The device embodiment can be implemented through software, hardware, or a combination of software and hardware. From a hardware perspective, in addition to the CPU, memory, network interface, and non-volatile memory, the device in the embodiment where the device is located can generally also include other hardware, such as a forwarding chip responsible for processing messages, etc. Taking software implementation as an example, as a device in a logical sense, it is formed by the CPU of the device where it is located reading the corresponding computer program instructions in the non-volatile memory into the memory and running them.

[0053] According to another aspect of the present invention, a computer-readable storage medium is provided. The storage medium stores a computer program, and the computer program is used to execute the visualization component arrangement method of any of the above embodiments.

[0054] In addition to the above methods and devices, embodiments of the present invention may also be a computer program product, which includes computer program instructions. When the computer program instructions are executed by a processor, the processor executes the steps in the visualization component arrangement method according to various embodiments of the present invention described above.

[0055] According to another aspect of the present invention, an electronic device is provided, comprising: a processor; a memory for storing processor-executable instructions; and a processor for executing the visual component arrangement method of any one of the above embodiments.

[0056] Furthermore, an embodiment of the present invention may also be a computer-readable storage medium having computer program instructions stored thereon. When the computer program instructions are executed by a processor, the processor executes the steps of the visualization component arrangement method according to various embodiments of the present invention described above.

[0057] The above description is only a preferred embodiment of the present invention and is not intended to limit the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present invention should be included in the scope of protection of the present invention.

Claims

1. A visual component arrangement method, characterized in that: include: receiving an arrangement instruction input by a user; The layout instruction includes a target component, at least one style parameter and at least one position parameter; Determining a style and a position of a target component based on the target component, the layout parameter, and the position parameter; Arrange components on the visual page according to the style and position of the target component; In response to the change of the orchestration instruction, the orchestration mode of the target component is updated in real time.

2. The visual component arrangement method according to claim 1, characterized in that: The style parameters include: at least one of the background color, border style, font size, layout type, spacing configuration and alignment of the target component; the target component includes: at least one of a text box component, a chart component and a button component.

3. The visual component arrangement method according to claim 1, characterized in that: The visual component arrangement method further includes: Get data binding instructions; Parsing the data binding instruction to obtain data source connection information; wherein the data source connection information includes at least one of a database address, a user, a password, a database dialect, and a database connection word; Based on the data source connection information, select corresponding tables and fields to associate the data in the data source with the target component; The data source includes at least one of a relational database, a non-relational database, an API interface, and a local file.

4. The visual component arrangement method according to claim 3, characterized in that: The visualization component arrangement method further includes: When at least one of the following operations occurs in the data source: addition, modification, and deletion, the updated data in the data source is obtained; Based on the updated data in the data source, the original data associated with the target component is deleted, and the updated data in the data source is associated with the target component.

5. The visual component arrangement method according to claim 1, characterized in that: The visualization component arrangement method further includes: Get interactive logic configuration instructions; Parsing the interactive logic configuration instruction to obtain interactive logic configuration information; Based on the interactive logic configuration information, interactive events are set for the target component; wherein, the interactive events include click events and hover events, the click event represents that when a button is clicked, at least one of data update, page jump and pop-up display is triggered, and the hover event represents that when a data point on the target component is hovered, the information of the data point is displayed.

6. The visual component arrangement method according to claim 1, characterized in that: Determining a style and a position of a target component based on the target component, the layout parameter, and the position parameter includes: Determine the style and position of the target component based on the target component, the layout parameter, and the position parameter, and display the style state and position state of the target component in real time in a preview window; In response to the change of the orchestration instruction, updating the orchestration mode of the target component in real time includes: In response to the change of the arrangement instruction, the arrangement mode of the target component is updated in real time, and the arrangement mode of the target component is displayed in real time in the preview window.

7. The visual component arrangement method according to claim 1, characterized in that: After the components of the visual page are arranged according to the style and position of the target component, the visual component arrangement method includes: Based on the confirmation of the component arrangement completion instruction of the visualization page, deploying the components arranged in the visualization page to the target environment; wherein the target environment includes an enterprise internal server or a cloud server; and Based on the confirmation of the component arrangement completion instruction of the visualization page, the components arranged in the visualization page are stored as preset components.

8. The visual component arrangement method according to claim 1, characterized in that: Determining a style and a position of a target component based on the target component, the layout parameter, and the position parameter includes: Adaptively adjust the row and column distribution of target components according to the screen size of the visualization page; The step of updating the arrangement mode of the target component in real time in response to the change of the arrangement instruction includes: recalculating the position of the target component in response to the dynamic change of the arrangement mode of the target component.

9. The visual component arrangement method according to claim 1, characterized in that: Determining a style and a position of a target component based on the target component, the layout parameter, and the position parameter includes: When the target component is a chart component, the chart style and chart position are determined according to the layout parameters and the position parameters; wherein the chart style includes at least one of a bar chart, a line chart, and a pie chart, the chart style also includes a color theme and a data label style, and the chart position includes a coordinate axis scale.

10. A visual component arrangement device, characterized in that: include: A receiving module, configured to receive an arrangement instruction input by a user; The layout instruction includes a target component, at least one style parameter and at least one position parameter; a determination module, configured to determine a style and a position of a target component based on the target component, the layout parameter, and the position parameter; The layout module is used to arrange components on the visual page according to the style and position of the target components; An updating module is used to update the orchestration mode of the target component in real time in response to changes in the orchestration instruction.

Images