Visual large screen component generation method and device, electronic equipment and storage medium

Abstract

The invention discloses a visual large-screen component generation method and device, electronic equipment and a storage medium. The method comprises the steps that a chart component form is created, and ECharts configuration item data is acquired; the ECharts configuration item data in the chart component form is verified, and form data is obtained; analyzing the form data, and repackaging the form data into new list data according to a preset data format; defining attributes and configuration of the common component; and transmitting the new list data and the attribute and configuration of the public component as parameters into the ECharts public component to obtain a visual large-screen component. According to the method and the device, on one hand, the data visualization requirement in a complex scene is met, and on the other hand, a reusable component is provided.

Description

Technical Field

[0001] The present application relates to the field of large-screen visualization technology, and in particular to a method, device, electronic device, and storage medium for generating a large-screen visualization component. Background Art

[0002] The large-screen editor is mainly used in multi-data visualization display scenarios, where data visualization mostly relies on ECharts chart components. ECharts chart components can help users present data in an intuitive and clear way, and can quickly convey data trends, comparisons and other information.

[0003] Large-screen editors need to provide various common chart types, such as bar charts, line charts, pie charts, etc., and support custom chart styles and data sources to meet users' data visualization needs in different scenarios.

[0004] If you want to develop a set of reusable components based on ECharts in the component library, it will take a lot of effort and time, and ordinary users without development skills cannot easily and independently create the ECharts components they need. The simple and basic components in the component library may not meet the user's complex data display requirements. Summary of the invention

[0005] The embodiments of the present application provide a method, device, electronic device, and storage medium for generating a large-screen visualization component to meet the complex data display needs of different users.

[0006] The present application embodiment adopts the following technical solutions:

[0007] In a first aspect, an embodiment of the present application provides a method for generating a large-screen visualization component, wherein the method comprises:

[0008] Create a chart component form and obtain ECharts configuration item data;

[0009] Verify the ECharts configuration item data in the chart component form to obtain form data;

[0010] Parsing the form data and repackaging it into new list data according to a preset data format;

[0011] Define the properties and configuration of common components;

[0012] The new list data, the properties and configuration of the common component are passed as parameters into the ECharts common component to obtain a visualization large screen component.

[0013] In some embodiments, the step of creating a chart component form and obtaining ECharts configuration item data includes:

[0014] Add a custom ECharts component and create a new chart component form. The chart component form includes at least one of the following: component basic information, component configuration items, and custom style parameters.

[0015] In some embodiments, verifying the ECharts configuration item data in the chart component form to obtain form data includes:

[0016] Verify the format and data items in the ECharts configuration item data in the chart component form;

[0017] Preview the ECharts configuration in the chart component form;

[0018] If the preview effect is displayed as expected, the structured data format is correct;

[0019] Otherwise, adjust the ECharts configuration item property content.

[0020] In some embodiments, parsing the form data and repackaging it into new list data according to a preset data format includes:

[0021] Parsing the component basic information and the component configuration items in the form data;

[0022] Repackage into new component list data according to the preset data format;

[0023] When each component is added, one more structured data attribute is added to the component list array, and the structured data attribute includes at least one of the following attributes: chart data, chart configuration items, custom style parameters, and component basic information.

[0024] In some embodiments, the method further comprises:

[0025] Extracting dataset attribute data from the component configuration item in the form data;

[0026] Extracting the component configuration item in the form data;

[0027] Parsing the custom style parameters in the form data, combining the component configuration items in the form data, and taking the corresponding custom style parameters as variables;

[0028] Extract the basic information of the component in the form data, and use the key value as the unique mark for dynamic component registration and identification.

[0029] In some embodiments, defining properties and configurations of common components includes:

[0030] Define the page properties of public components to obtain the page public properties of components;

[0031] Define the dynamic acquisition of data for common components to provide API request forms;

[0032] Define the response events of common components to provide one or more interactions among click events, double-click events, mouse-in events, and mouse-out events.

[0033] In some embodiments, the new list data, the properties and configuration of the common component are passed as parameters into the ECharts common component to obtain a visualization large screen component, including:

[0034] Create vue files and TS files of public components, build ECharts public components, pass the new list data, the properties of the public components and the properties of the parameters in the configuration as parameters into the ECharts public components, and obtain the visualization large-screen components according to the component properties.

[0035] In a second aspect, an embodiment of the present application further provides a device for generating a large-screen visualization component, wherein the device comprises:

[0036] Create a module to create a chart component form and obtain ECharts configuration item data;

[0037] A verification module, used to verify the ECharts configuration item data in the chart component form to obtain form data;

[0038] A parsing module, used for parsing the form data and repackaging it into new list data according to a preset data format;

[0039] Definition modules are used to define the properties and configurations of common components;

[0040] The generation module is used to pass the new list data, the properties and configuration of the common component as parameters into the ECharts common component to obtain a visualization large screen component.

[0041] In a third aspect, an embodiment of the present application further provides an electronic device, comprising: a processor; and a memory arranged to store computer executable instructions, wherein the executable instructions, when executed, cause the processor to perform the above method.

[0042] In a fourth aspect, an embodiment of the present application further provides a computer-readable storage medium, which stores one or more programs. When the one or more programs are executed by an electronic device including multiple application programs, the electronic device executes the above method.

[0043] At least one of the above technical solutions adopted in the embodiments of the present application can achieve the following beneficial effects: first, create a chart component form, obtain ECharts configuration item data, and then verify the ECharts configuration item data in the chart component form to obtain form data. Parse the form data and repackage it into new list data according to a preset data format, and define the properties and configuration of the public component. Finally, pass the new list data, the properties and configuration of the public component as parameters into the ECharts public component to obtain a visualization large screen component. BRIEF DESCRIPTION OF THE DRAWINGS

[0044] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0045] Figure 1 A schematic diagram of the process of generating a visual large-screen component in an embodiment of the present application;

[0046] Figure 2 This is a schematic diagram of the form information structure in the embodiment of this application;

[0047] Figure 3 A schematic diagram for creating a form in an embodiment of the present application;

[0048] Figure 4 This is a flow chart of configuration item data verification in an embodiment of the present application;

[0049] Figure 5 A schematic diagram of a custom style parameter analysis and style form in an embodiment of the present application;

[0050] Figure 6 This is a schematic diagram of the component library list data structure in an embodiment of the present application;

[0051] Figure 7 This is a component page attribute structure diagram in the embodiment of this application;

[0052] Figure 8 This is a structural diagram of data dynamic acquisition in the embodiment of this application;

[0053] Fig. 9 This is a component response event structure diagram in an embodiment of the present application;

[0054] Fig.10 This is a schematic diagram of the structure of a visual large-screen component generating device in an embodiment of the present application;

[0055] Fig.11 This is a schematic diagram of the structure of an electronic device in an embodiment of the present application. DETAILED DESCRIPTION

[0056] In order to make the purpose, technical solution and advantages of the present application clearer, the technical solution of the present application will be clearly and completely described below in combination with the specific embodiments of the present application and the corresponding drawings. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of the present application.

[0057] The large-screen editor is an efficient drag-and-drop data visualization tool that can help users quickly create and edit large-screen visualization data. This editor has data-driven and visualization features, and provides a reusable component library. Users can choose different components according to their needs and combine and arrange them as needed to create different large-screen display effects. However, ordinary chart components cannot meet the complex and diverse data display needs. In addition, the development of chart components also takes a certain amount of time, and it is impossible to quickly build reusable chart components based on display requirements. In the related technology, the large-screen editor does not have a one-stop method for generating chart components based on ECharts configuration items, and lacks a method for parsing configuration items to extract customizable configuration chart style variables.

[0058] In some schemes, a method and device for generating charts with custom components for a large visual screen is provided, which mainly receives the input style sheet, html template and style configuration, renders the result code, and configures the rendered component interface based on the event style configuration to generate a custom chart. In this scheme, it is mainly based on the react framework, and does not parse and generate components for ECharts components. In addition, html templates need to be provided, and users need to have a certain code foundation.

[0059] In some solutions, a packaging method for simplifying ECharts calls is provided. A batch of structured data with html element ID values ​​and corresponding ECharts configuration parameters is constructed through parameter classification, simplified mapping, definition of default values, and module packaging processing. The ECharts configuration parameters are simplified or original configuration parameters. The interface in the packaging program is called to parse the structured data, and ECharts is used to generate charts in batches. This solution mainly parses ECharts configuration items to generate charts in batches, but it is not applied to the development of large-screen components, and no custom style configuration for charts is parsed.

[0060] In some solutions, a custom display component is provided for displaying charts using a data analysis system, including analysis results, chart development tools, custom configuration components, and display terminals; in the chart development tool, basic and general chart development is performed, and based on the developed basic chart or general chart, the developed chart is published to the running system; during the chart operation, the custom configuration component is used to personalize the chart display settings to meet the needs of customization and personalized display. This solution mainly allows users to customize the style of chart components through configuration items on the developed chart components. It is not possible to customize the generation of a new reusable component, and it is not suitable for large-screen application scenarios, and it is not possible to achieve dynamic data acquisition of large-screen components and interaction between components.

[0061] The large screen editor is widely used for data display in scenarios such as multi-component interaction and real-time data acquisition. This editor allows users to create multiple components, and multi-data visualization mostly relies on chart components for display. Different ECharts configuration items correspond to different chart components. In order to meet the complex and multi-dimensional data display, meet the needs of users in various scenarios, and optimize the user experience, it is necessary to expand the original components by writing custom code. Although component elements can be customized, professional technicians are required to write code that complies with the specifications of the original visualization system, which has a high threshold and is time-consuming and labor-intensive. In addition, the reusable components in the large screen need to carry high-level requirements such as static and dynamic data acquisition and configuration response events to achieve real-time display of large-screen visualization and high-frequency interaction between components.

[0062] In response to the above problems, the method for generating a visual large-screen component in the embodiment of the present application generates a visual large-screen component based on ECharts, specifically including: creating a form, inputting ECharts configuration items (option), basic component information and modifiable style parameters, parsing configuration content, dynamically updating the structured data of the component library, and providing a set of common properties and event methods of the component to generate a reusable large-screen chart component.

[0063] The technical solutions provided by various embodiments of the present application are described in detail below in conjunction with the accompanying drawings.

[0064] The present application embodiment provides a method for generating a large-screen visualization component. Figure 1 As shown, a flow chart of a method for generating a large-screen visualization component in an embodiment of the present application is provided, and the method at least includes the following steps S110 to S150:

[0065] Step S110, create a chart component form and obtain ECharts configuration item data.

[0066] When a user adds a custom ECharts component, a new chart component form is created. When a new table component form is created, ECharts configuration item data is obtained synchronously, and the ECharts configuration item data includes but is not limited to basic information, configuration item options, and custom style parameters.

[0067] It can be understood that ECharts is a JavaScript-based data visualization chart library that can run smoothly on PC or mobile devices and is compatible with most current browsers.

[0068] It should be noted that ECharts configuration item data is an object containing multiple properties, which are used to describe the data of the chart, how the data is mapped into graphics, and interactive behaviors. In addition, the configuration format of the configuration item is Json format, which is an object defined in JavaScript, separated by curly braces. Inside the brackets, the properties of the object are defined in the form of name and value pairs (name:value), and the properties are separated by commas. In the configuration object, each property represents a different component or setting, which is used to set the display method and style of the component or data series.

[0069] Step S120, verifying the ECharts configuration item data in the chart component form to obtain form data.

[0070] Verifying the ECharts configuration item data in the chart component form includes format verification, data item verification, etc., and displaying it using a chart display method.

[0071] Step S130, parsing the form data and repackaging it into new list data according to a preset data format.

[0072] Parse component basic information and ECharts configuration item data, repackage them into new list data according to the specified data format, and complete the rendering and use of the reusable component library based on this structured data.

[0073] It should be noted that the component library list data is of array type, and each element in the array is a structured data object. When creating a form, each new component is equivalent to adding one more structured data attribute in the component list array.

[0074] Step S140, defining the properties and configuration of the common components.

[0075] The chart components in the large screen need to meet high-level requirements such as static or dynamic data acquisition and configuration response events to achieve component interaction, so it is also necessary to define common component properties and response events.

[0076] Common component properties include, but are not limited to, page properties and dynamic data acquisition.

[0077] The interaction between components depends on the response events of the components. In the embodiment of the present application, four response events of the components are provided: a single-click event, a double-click event, a mouse-in event, and a mouse-out event.

[0078] Step S150, passing the new list data, the properties and configuration of the common component as parameters into the ECharts common component to obtain a visualization large screen component.

[0079] Create vue files and TS files of public components, build ECharts public components, pass the new list data, properties and configurations of the public components as parameters into the ECharts public components, and implement the large-screen display function based on the component properties.

[0080] By creating a new chart component form, the form content includes the basic information of the component, configuration items, and custom style parameters. Then verify the data validation of the chart configuration items in the form. Furthermore, parse the form content and repackage it into new list data according to the specified data format; define and provide component public properties and configurations to meet high-level requirements such as static or dynamic acquisition and configuration of response events to achieve component interaction. Finally, create the vue file and TS file of the public component, build the ECharts public component, configure the component information, listen and synchronously implement the rendering and interaction functions.

[0081] Through the above method, a new chart component form is created, and the form content includes the basic information of the component, configuration item options, and custom style parameters. Then verify the data validation of the chart configuration items in the form. Further, parse the form content and repackage it into new list data according to the specified data format; define and provide component public properties and configurations to meet high-level requirements such as static or dynamic acquisition and configuration of response events to achieve component interaction. Finally, create the vue file and TS file of the public component, build the ECharts public component, configure the component information, listen and synchronously implement the rendering and interaction functions.

[0082] The above method, based on Echarts configuration items, does not require users to have development technology foundation to generate reusable chart components, meeting the data display needs of different users in different scenarios.

[0083] The above method parses the form data content, parses the basic component information and configuration item option, repackages it into new list data according to the specified data format, and completes the rendering and use of the reusable component library based on this structured data. Every time the component content information is added or modified, the component library list is dynamically updated.

[0084] The above method uses public properties as the input parameters of public components. It also innovates a series of base classes and public methods for high-level requirements such as component interaction and dynamic data acquisition. By creating instances when using components, inheriting public component classes and methods, the rendering and interaction functions of components can be realized.

[0085] In one embodiment of the present application, the creation of a chart component form and the acquisition of ECharts configuration item data include: adding a custom ECharts component and creating a new chart component form, wherein the chart component form includes at least one of the following: basic component information, component configuration items, and custom style parameters.

[0086] like Figure 2 As shown, the basic information of the component includes the component name, ECharts component type (Bar, Pie, Line, etc.), component key value, and component preview image (used for component library list display).

[0087] After the user selects the component type, the configuration item option will automatically provide basic configuration items for this type of component. The user can edit based on this configuration item, or copy new configuration data to complete the input of the configuration item. Custom styles include name, parameter, type (String, Boolean, color, Number)

[0088] like Figure 3 As shown, in order to enable the chart to design various display effect parameters according to the user's preference for display effect during operation, so as to achieve the custom chart rendering function, a custom chart display method component is provided in the embodiment of the present application. By parsing the attribute information of the configuration item, the user can choose to generate style parameter information (name, parameter, type) with one click, extract all style attributes in the configuration item, and use them as style modification variables, so that the style modification has a higher degree of freedom. When the content of the configuration item is too much, the user can also manually add or delete style parameters, select some style attributes in the configuration item, and improve the custom display effect of the chart while ensuring that the style is not excessively modified.

[0089] In one embodiment of the present application, verifying the ECharts configuration item data in the chart component form to obtain the form data includes: verifying the format and data items in the ECharts configuration item data in the chart component form; previewing and displaying the ECharts configuration in the chart component form; if the preview effect is displayed as expected, the structured data format is correct; otherwise, adjusting the ECharts configuration item attribute content.

[0090] like Figure 4As shown, format verification uses the JSON.parse() function to verify the data format. Structured data should consist of key-value pairs and be wrapped in curly braces "{}". At the same time, keys and values ​​should be separated by a colon ":", and different key-value pairs should be separated by a comma ",". Use the JSON.parse() function in the JSON parsing library to verify the structured data format. If the parsing fails, a format verification error is displayed.

[0091] It should be noted that JSON (Javascript Object Notation) is a lightweight data exchange format; it is a subset of ECMAScript; JSON is completely independent of the text format of the language. JSON is an ideal lightweight data exchange language format; it is easy for people to read, parse, and operate directly; it is also easy for machines to parse and operate; in network interaction, JSON is also a mainstream data exchange format.

[0092] Data item verification (verify whether the configuration item contains the dataset data item). The most important attribute in the configuration item is the dataset attribute, which is the data source of the component. When verifying the configuration item, it is necessary to determine whether the dataset attribute exists in the configuration item and the value is not empty. If it does not exist or the value is empty, a data verification error is displayed.

[0093] Chart display (use my Chart.setOption(option) to verify the chart preview effect). Since ECharts has many configuration item attributes, simple format verification and data item verification cannot guarantee the smooth generation of subsequent components. In the embodiment of the present application, a chart preview display entry is provided. Based on the Echarts plug-in, the configuration item option in the form is previewed using the myChart.setOption(option) method. If the preview effect is displayed as expected, it indicates that the structured data format is correct. Otherwise, the user can appropriately adjust the configuration item attribute content to meet the needs of the chart component constructed by the user.

[0094] In one embodiment of the present application, the parsing of the form data and repackaging into new list data according to a preset data format include: parsing the component basic information and the component configuration items in the form data; repackaging into new component list data according to a preset data format; when each new component is added, an additional structured data attribute is added to the component list array, and the structured data attribute includes at least one of the following attributes: chart data, chart configuration items, custom style parameters, component basic information.

[0095] Parse the basic component information and component configuration items in the chart component form, repackage them into new list data according to the specified data format, and complete the rendering and use of the reusable component library based on this structured data. The component library list data is of array type, and each element in the array is a structured data object. When creating a form, each new component is equivalent to adding one more structured data attribute in the component list array.

[0096] Furthermore, if Figure 5 As shown, the custom style parameters in the form are parsed, combined with the chart configuration item option, the corresponding custom style parameters are used as variables, and when the component is clicked, the label, parameter and type information of the style parameters in the form are used to provide a style modification form.

[0097] in,

[0098] In the type information, the String type corresponds to the input box, the Boolean type corresponds to the switch, the Color type corresponds to the color selector, and the Number type corresponds to the number input box.

[0099] In addition, Object type can be provided, corresponding to the selector and the configuration items of the selector can be set. The user modifies the value of the variable and assigns the value to the corresponding attribute value of the configuration item option to realize the custom style modification function of the chart component.

[0100] Furthermore, if Figure 6 As shown, the basic component information (baseData) extracts the basic component information in the form, where the key value is used as a unique mark for dynamic component registration and identification.

[0101] In one embodiment of the present application, the method also includes: extracting dataset attribute data in the component configuration item in the form data; extracting the component configuration item in the form data; parsing the custom style parameters in the form data, combining the component configuration items in the form data, and using the corresponding custom style parameters as variables; extracting basic component information in the form data, and using the key value as a unique mark for dynamic component registration identification.

[0102] like Figure 7 As shown, the chart component in the large screen needs to meet high-level requirements such as static or dynamic data acquisition and configuration response events to achieve component interaction. Therefore, after parsing the form data and repackaging it into new list data in a preset data format, it is also necessary to provide some common properties and configurations for the components.

[0103] a. Page attributes (attr). Drag the corresponding component from the component list and place it in the large-screen editor. You need to configure and obtain the component's page common attributes, including component position, component size, offset, and layer size.

[0104] like Figure 8 As shown, b. Dynamic data acquisition (request), when configuring the component to dynamically acquire parameters, provide an API request form similar to postman, fill in the http request method (post / get), as well as the request interface URL, interface cycle request time value, interface request time unit, interface request parameter information, parameter Body type, SQL statement content. In order to meet the correspondence between the interface return data and the chart value format, a data filtering window is provided to dynamically adjust the interface return data.

[0105] In one embodiment of the present application, the definition of the properties and configuration of the common components includes: defining the page properties of the common components to obtain the common properties of the component page; defining the dynamic acquisition of data of the common components to provide an API request form; defining the response events of the common components to provide any one or more interactions among single-click events, double-click events, mouse-in events, and mouse-out events.

[0106] like Fig. 9 As shown, the interaction between components depends on the response event of the component. In the embodiment of the present application, four response events of the component are provided, such as single-click event, double-click event, mouse-in event and mouse-out event. Each response event provides a coding window, and the user can add basic code in the window to complete the process of the response event and the function of component interaction.

[0107] In one embodiment of the present application, the new list data, the properties of the common component and the configuration are passed as parameters into the ECharts common component to obtain a visualization large-screen component, including: creating a vue file and a TS file of the common component, building the ECharts common component, passing the new list data, the properties of the common component and the properties of the parameters in the configuration as parameters into the ECharts common component, and obtaining the visualization large-screen component according to the component properties.

[0108] Create vue files and TS files of public components, build ECharts public components, pass the new list data, properties and configurations of the public components as parameters into the component, and implement the large-screen display function based on the component properties.

[0109] In the vue file, based on the ECharts plug-in, directly use v-echart and component configuration items to render charts. When adding components, the array list attribute in the large screen project data will add the corresponding component structured data, and create a new id to assign the id of the component element as the unique mark of the large screen element.

[0110] When editing a component or configuring component information in the large screen, the configuration information of the component is modified. Monitor changes in the large screen component configuration information and handle component style modifications and dynamic events in a timely manner.

[0111] The present application embodiment also provides a visualization large screen component generating device 1000, such as Fig.10 As shown, a schematic diagram of the structure of a visualization large screen component generating device in an embodiment of the present application is provided, wherein the visualization large screen component generating device 1000 at least includes: a creation module 1010, a verification module 1020, a parsing module 1030, a definition module 1040 and a generation module 1050, wherein:

[0112] In one embodiment of the present application, the creation module 1010 is specifically used to: create a chart component form and obtain ECharts configuration item data.

[0113] When a user adds a custom ECharts component, a new chart component form is created. When a new table component form is created, ECharts configuration item data is obtained synchronously, and the ECharts configuration item data includes but is not limited to basic information, configuration item options, and custom style parameters.

[0114] It can be understood that ECharts is a JavaScript-based data visualization chart library that can run smoothly on PC or mobile devices and is compatible with most current browsers.

[0115] In one embodiment of the present application, the verification module 1020 is specifically used to: verify the ECharts configuration item data in the chart component form to obtain form data.

[0116] Verifying the ECharts configuration item data in the chart component form includes format verification, data item verification, etc., and displaying it using a chart display method.

[0117] In one embodiment of the present application, the parsing module 1030 is specifically used to: parse the form data and repackage it into new list data according to a preset data format.

[0118] Parse component basic information and ECharts configuration item data, repackage them into new list data according to the specified data format, and complete the rendering and use of the reusable component library based on this structured data.

[0119] It should be noted that the component library list data is of array type, and each element in the array is a structured data object. When creating a form, each new component is equivalent to adding one more structured data attribute in the component list array.

[0120] In one embodiment of the present application, the definition module 1040 is specifically used to define the properties and configuration of the common components.

[0121] The chart components in the large screen need to meet high-level requirements such as static or dynamic data acquisition and configuration response events to achieve component interaction, so it is also necessary to define common component properties and response events.

[0122] Common component properties include, but are not limited to, page properties and dynamic data acquisition.

[0123] The interaction between components depends on the response events of the components. In the embodiment of the present application, four response events of the components are provided: a single-click event, a double-click event, a mouse-in event, and a mouse-out event.

[0124] In one embodiment of the present application, the generation module 1050 is specifically used to: pass the new list data, the properties and configuration of the public component as parameters into the ECharts public component to obtain a visualization large screen component.

[0125] Create vue files and TS files of public components, build ECharts public components, pass the new list data, properties and configurations of the public components as parameters into the ECharts public components, and implement the large-screen display function based on the component properties.

[0126] It can be understood that the above-mentioned visualization large screen component generation device can implement each step of the visualization large screen component generation method provided in the aforementioned embodiment, and the relevant explanations on the visualization large screen component generation method are applicable to the visualization large screen component generation device, which will not be repeated here.

[0127] Fig.11 This is a schematic diagram of the structure of an electronic device according to an embodiment of the present application. Fig.11At the hardware level, the electronic device includes a processor, and optionally also includes an internal bus, a network interface, and a memory. The memory may include a memory, such as a high-speed random access memory (RAM), and may also include a non-volatile memory (non-volatile memory), such as at least one disk storage. Of course, the electronic device may also include hardware required for other services.

[0128] The processor, network interface and memory can be interconnected through an internal bus, which can be an ISA (Industry Standard Architecture) bus, a PCI (Peripheral Component Interconnect) bus or an EISA (Extended Industry Standard Architecture) bus. The bus can be divided into an address bus, a data bus, a control bus, etc. For ease of representation, Fig.11 Only one bidirectional arrow is used in the diagram, but this does not mean that there is only one bus or only one type of bus.

[0129] The memory is used to store the program. Specifically, the program may include a program code, and the program code includes a computer operation instruction. The memory may include a memory and a non-volatile memory, and provides instructions and data to the processor.

[0130] The processor reads the corresponding computer program from the non-volatile memory into the memory and then runs it, forming a visualization large screen component generation device at the logical level. The processor executes the program stored in the memory and is specifically used to perform the following operations:

[0131] Create a chart component form and obtain ECharts configuration item data;

[0132] Verify the ECharts configuration item data in the chart component form to obtain form data;

[0133] Parsing the form data and repackaging it into new list data according to a preset data format;

[0134] Define the properties and configuration of common components;

[0135] The new list data, the properties and configuration of the common component are passed as parameters into the ECharts common component to obtain a visualization large screen component.

[0136] The above application Figure 1The method performed by the visualization large screen component generation device disclosed in the illustrated embodiment can be applied to a processor or implemented by a processor. The processor may be an integrated circuit chip with signal processing capabilities. In the implementation process, each step of the above method can be completed by an integrated logic circuit of hardware in the processor or an instruction in the form of software. The above processor may be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it may also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA) or other programmable logic devices, discrete gates or transistor logic devices, discrete hardware components. The methods, steps and logic block diagrams disclosed in the embodiments of the present application can be implemented or executed. The general-purpose processor may be a microprocessor or the processor may also be any conventional processor, etc. The steps of the method disclosed in conjunction with the embodiments of the present application can be directly embodied as being executed by a hardware decoding processor, or executed by a combination of hardware and software modules in a decoding processor. The software module can be located in a storage medium mature in the art such as a random access memory, a flash memory, a read-only memory, a programmable read-only memory, or an electrically erasable programmable memory, a register, etc. The storage medium is located in the memory, and the processor reads the information in the memory and completes the steps of the above method in combination with its hardware.

[0137] The electronic device may also perform Figure 1 The method executed by the visualization large screen component generation device in the Figure 1 The functions of the illustrated embodiment will not be described in detail in the embodiments of the present application.

[0138] The present application also provides a computer-readable storage medium, which stores one or more programs, wherein the one or more programs include instructions, which, when executed by an electronic device including multiple application programs, enable the electronic device to execute Figure 1 The method performed by the visualization large screen component generating device in the illustrated embodiment is specifically used to perform:

[0139] Create a chart component form and obtain ECharts configuration item data;

[0140] Verify the ECharts configuration item data in the chart component form to obtain form data;

[0141] Parsing the form data and repackaging it into new list data according to a preset data format;

[0142] Define the properties and configuration of common components;

[0143] The new list data, the properties and configuration of the common component are passed as parameters into the ECharts common component to obtain a visualization large screen component.

[0144] Those skilled in the art will appreciate that embodiments of the present invention may be provided as methods, systems, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0145] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0146] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0147] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process in the computer or other programmable device. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0148] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0149] The memory may include non-permanent storage in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.

[0150] Computer readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include temporary computer readable media (transitory media), such as modulated data signals and carrier waves.

[0151] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, commodity or device. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the process, method, commodity or device including the elements.

[0152] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment or an embodiment in combination with software and hardware. Moreover, the present application may adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that contain computer-usable program code.

[0153] The above is only an embodiment of the present application and is not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the scope of the claims of the present application.

Claims

1. A method for generating a large-screen visualization component, wherein: The method comprises: Create a chart component form and obtain ECharts configuration item data; Verify the ECharts configuration item data in the chart component form to obtain form data; Parsing the form data and repackaging it into new list data according to a preset data format; Define the properties and configuration of common components; The new list data, the properties and configuration of the common component are passed as parameters into the ECharts common component to obtain a visualization large screen component.

2. The method of claim 1, wherein: The chart component form is created to obtain ECharts configuration item data, including: Add a custom ECharts component and create a new chart component form. The chart component form includes at least one of the following: component basic information, component configuration items, and custom style parameters.

3. The method of claim 2, wherein: The checking of the ECharts configuration item data in the chart component form to obtain form data includes: Verify the format and data items in the ECharts configuration item data in the chart component form; Preview the ECharts configuration in the chart component form; If the preview effect is displayed as expected, the structured data format is correct; Otherwise, adjust the ECharts configuration item property content.

4. The method of claim 2, wherein: The parsing of the form data and repackaging into new list data according to a preset data format includes: Parsing the component basic information and the component configuration items in the form data; Repackage into new component list data according to the preset data format; When each component is added, one more structured data attribute is added to the component list array, and the structured data attribute includes at least one of the following attributes: chart data, chart configuration items, custom style parameters, and component basic information.

5. The method of claim 4, wherein: The method further comprises: Extracting dataset attribute data from the component configuration item in the form data; Extracting the component configuration item in the form data; Parsing the custom style parameters in the form data, combining the component configuration items in the form data, and taking the corresponding custom style parameters as variables; Extract the basic information of the component in the form data, and use the key value as the unique mark for dynamic component registration and identification.

6. The method of claim 1, wherein: The properties and configurations of the defined common components include: Define the page properties of public components to obtain the page public properties of components; Define the dynamic acquisition of data for common components to provide API request forms; Define the response events of common components to provide one or more interactions among click events, double-click events, mouse-in events, and mouse-out events.

7. The method of claim 1, wherein: The new list data, the properties and configuration of the common component are passed as parameters into the ECharts common component to obtain a visualization large screen component, including: Create vue files and TS files of public components, build ECharts public components, pass the new list data, the properties of the public components and the properties of the parameters in the configuration as parameters into the ECharts public components, and obtain the visualization large-screen components according to the component properties.

8. A visual large screen component generation device, wherein: The device comprises: Create a module to create a chart component form and obtain ECharts configuration item data; A verification module, used to verify the ECharts configuration item data in the chart component form to obtain form data; A parsing module, used for parsing the form data and repackaging it into new list data according to a preset data format; Definition modules are used to define the properties and configurations of common components; The generation module is used to pass the new list data, the properties and configuration of the common component as parameters into the ECharts common component to obtain a visualization large screen component.

9. An electronic device, comprising: processor; as well as A memory arranged to store computer executable instructions, which when executed cause the processor to perform the method of any one of claims 1 to 7.

10. A computer-readable storage medium storing one or more programs, which, when executed by an electronic device including a plurality of application programs, causes the electronic device to execute any one of the methods of claims 1 to 7.

Images