Method and device for realizing configurable ECharts solution based on low-code platform and medium

Abstract

The invention discloses a solution method and device for realizing configurable ECharts based on a low-code platform and a medium. The solution method comprises the following steps: receiving a client request by a browser side, and entering a creation process; the browser end constructs a chart structure according to the entity name; the browser side renders the chart structure based on the chart structure; the browser end receives the entity field and generates a chart type; the browser end carries out datamation configuration and style configuration on the chart based on the chart type; under the condition that the datamation configuration and the style configuration are completed, generating a chart view; and under the condition that the chart view is generated, dynamically setting the chart and adding a drilling function. The method has the advantages that the code writing amount is reduced, the code amount needing to be written in traditional development is greatly reduced, and the development difficulty is lowered. And real-time updating is supported, a user can update and adjust chart configuration in real time according to requirements, and the requirement for rapid change is met.

Description

Technical Field

[0001] The present invention belongs to the field of information visualization technology, and specifically relates to a solution, device and medium for realizing configurable ECharts based on a low-code platform. Background Art

[0002] With the development of society and the advancement of science and technology, the demand for data visualization is growing, and ECharts, as a powerful open source visualization library, has been widely used in various fields. However, the traditional way of using it usually requires developers to write a lot of configuration code, which increases the complexity of development and reduces development efficiency. In the current field of data visualization technology, the use of chart libraries such as ECharts has become a common practice. However, this traditional development method has a big problem, that is, it requires writing a lot of code, which not only reduces development efficiency, but also makes it difficult for developers to cope with rapid changes in demand. Summary of the invention

[0003] To solve the problems raised in the above background technology, the present invention provides a configurable ECharts solution based on a low-code platform, which can not only effectively reduce the amount of code written by developers, but also improve development efficiency, thereby better meeting user needs.

[0004] To achieve the above object, the present invention provides the following technical solutions:

[0005] A solution to achieve configurable ECharts based on a low-code platform includes:

[0006] The browser receives the client request and enters the creation process; wherein the client request includes the entity name, entity fields, data configuration, and style configuration;

[0007] The browser builds the chart structure based on the entity name;

[0008] The browser renders the chart structure based on the chart structure;

[0009] The browser receives the entity fields and generates the chart type;

[0010] The browser configures the data and style of the chart based on the chart type;

[0011] When the data configuration and style configuration are completed, the browser generates a chart view;

[0012] In the case of generating a chart view, dynamically set the chart;

[0013] Further: confirm the validity of the entity name based on whether the entity name exists in the entity list of the APAAS platform;

[0014] If the entity name exists in the entity list of the APAAS platform, the entity name is considered valid; the browser continues the chart creation and configuration process;

[0015] If the entity name does not exist in the entity list of the APAAS platform, the entity name is invalid; the entity name is judged to be invalid; and the browser returns an error message to the front end.

[0016] By passing in the entity name entityName, the system can clearly know the data source to be processed, providing a clear direction for subsequent data acquisition and chart configuration.

[0017] Further: wherein, the browser side constructs a chart structure according to the entity name, and the method for constructing the chart structure includes:

[0018] The browser presets the default chart type;

[0019] When the default chart is preset, build the control structure according to the default chart type based on the initChartData method;

[0020] After the control structure is built, the control structure is further generated based on the getTemplateByName method to build the chart hierarchy;

[0021] Among them, the chart level includes the outermost chart level;

[0022] Among them, the children array in the control structure includes the basic elements of the chart;

[0023] The children array is used to store the child controls of the control structure;

[0024] The basic elements of the chart include: chart components: chart title, x-axis configuration item, y-axis configuration item, data layer, legend, prompt box, toolbox;

[0025] Among them, the xcell level is set under the x-axis configuration item to store the data bound to the x-axis; the ycell level is set under the y-axis configuration item to store the data bound to the y-axis.

[0026] When the chart type needs to be switched, the browser clears the currently configured options for the x and y axes.

[0027] Further: the control structure includes: a unique identifier of the component; a name or type of the component, used to identify the component during subsequent rendering; a display name of the component, used for user interface display; description information of the component, used to help users understand the purpose of the component; a children array, used to build a hierarchical structure of the component; a data type of the component, used to guide data processing and rendering; a property object of the component, used to store detailed configuration information of the component; a pointer to an object describing detailed information of the component;

[0028] The above chart configuration information is used for the chart's appearance display and internal data storage.

[0029] Further: the control structure also includes a descriptor;

[0030] The descriptor includes: component name, component name in multiple languages, component grouping, default value, component data type, and function for controlling component visibility;

[0031] Descriptors are used to define the behavior and display rules of chart components.

[0032] Further: The browser renders based on the chart structure, where the rendering method is:

[0033] When the chart structure is built, the browser generates a renderItem component and sets item as layoutJson and passes it into the component.

[0034] layoutJson is the layout configuration data;

[0035] If there are basic chart elements in item, each element in the basic chart element is processed in a loop to render the renderItem component;

[0036] If there is no basic chart element in the item, the render component is rendered directly;

[0037] In the render component, render the render component through the render function;

[0038] During the rendering process, check the checkVisiabe function in descriptor.props;

[0039] If the verification result is false, stop rendering the current component;

[0040] If the verification result is true, continue to render the current component;

[0041] Among them, the components of the layoutJson level configuration attributes include: data type component;

[0042] When a component is configured by the user, the corresponding data type changes accordingly.

[0043] item is the chart configuration object;

[0044] The render component is a layout item rendering component;

[0045] The renderItem component is a component that configures the object of the layout item rendering chart.

[0046] Further: the browser receives the entity fields and generates the chart type;

[0047] The browser determines the type of chart that needs to be generated based on the content of the entity field;

[0048] When determining the chart type, different configuration logic is applied;

[0049] Among them, the configuration logic includes: single-axis or multi-axis configuration;

[0050] Among them, bar charts and line charts support the configuration of dual x-axis and single y-axis or single x-axis and multiple y-axis.

[0051] Pie charts and funnel charts: Forced to be configured with a single x-axis and a single y-axis.

[0052] Mixed column chart: supports single x-axis or dual x-axis, fixed 2 y-axis data, and y-axis data types are mutually exclusive.

[0053] The mutually exclusive logic is that in a mixed column chart, if the user tries to change the data type of one y-axis to a bar chart, the data type of the other y-axis will be automatically changed to a line chart, and vice versa.

[0054] The x-axis and y-axis of the chart are automatically configured according to the entity fields, realizing data-driven chart configuration and reducing user manual operations.

[0055] Further: Data configuration includes the data processing and display methods in the chart; style configuration includes general class configuration and specific chart class configuration;

[0056] The display methods include: chart name, set a clear title for the chart so that readers can quickly understand the content of the chart;

[0057] Data processing methods include: data binding, which is used to bind fields in the data source to elements such as the x-axis and y-axis in the chart to ensure that the chart can accurately display the data; empty group processing, which is used to configure whether to hide these empty groups when there are null values ​​or missing data in the data to avoid interference with the interpretation of the chart; sorting configuration, which sorts the data as needed, including specifying the sorting fields and sorting methods such as ascending and descending, so as to more clearly display data trends or comparative relationships;

[0058] General configurations include: Display values, which is used to configure whether to display specific values ​​at data points, axis labels, etc. in the chart; Legend display, which is used to control whether the legend is displayed and allow users to customize the legend name, direction, and position; Tooltip, which is used to configure whether to display the tooltip to provide additional data information when the mouse hovers; X-axis first n items configuration, which is used to configure to display only the first n items of data on the X-axis when there is too much data to reduce the complexity of the chart and improve readability;

[0059] Specific chart class configurations include: line chart, pie chart, funnel chart;

[0060] It allows users to configure data and set styles according to their needs, which improves the customization and aesthetics of charts.

[0061] Further: When the data configuration and style configuration are completed, the browser generates a chart view, wherein the method for generating the chart view on the browser is:

[0062] In the initialization, charts.init is performed to generate an echarts instance, listen to the browser resize event, and execute the instance's reize method. When the data configuration of the x-axis and y-axis in layoutJson is completed, the initLayoutJson method is triggered, and the getChartDetail data query method is performed in the initLayoutJson method. If the returned result is empty data, the component with no data is displayed. If there is data, the optionChart method is used to draw the chart.

[0063] Further: when generating a chart view, the chart is dynamically set, wherein the dynamic setting method is:

[0064] In the optionChart method, execute the convert2RuntimeControl method, use the characteristics of webpac to obtain *.ts in all subdirectories, recursively traverse the current $nodetype to find the corresponding rendered control file. Finally, add it to addToParent and splice it to the corresponding parent level to generate the echar toptions structure, and finally perform setOption of the echarts instance.

[0065] Through methods such as convert2RuntimeControl and addToParent, layoutJson is automatically converted into ECharts configuration options, reducing the workload of manual configuration.

[0066] Further: Add the drill function method as follows:

[0067] In the generated data chart, double-click the current data node to drill into the current data node. For example, if the current configuration statistics chart counts the dispatch of service order sources under the current service order entity, it is necessary to count the status of the return visits of completed orders.

[0068] Double-click the completed column to reconfigure it in the pop-up window. Implementation steps: bind the double-click method to the echarts instance, obtain the condition of the current column when double-clicking, deeply copy the layoutJson structure layoutJson2, replace the xAxis and yAxis in layoutJson2, push the original layoutJson and layoutJson2 into the array in the brandSaveList array to switch between the original chart and the drill-down chart, trigger initLayoutJson, pass the condition to the data query getChartDetail interface, and execute up to 2 layers of data cascading.

[0069] The drill-down function can be realized by double-clicking the data node, allowing users to conduct more in-depth analysis and mining of the data. The interactivity of the chart is enhanced, allowing users to understand the meaning and relationship behind the data more intuitively.

[0070] A configurable ECharts solution based on a low-code platform includes:

[0071] Initialization and configuration module: build chart infrastructure and configuration;

[0072] Configuration item parsing and rendering module: parses configuration and renders chart components;

[0073] Data acquisition and processing module: obtain entity data and configure chart data source;

[0074] Configuration module: provides user-customizable data and style configuration options;

[0075] ECharts chart rendering module: instantiate ECharts, process data and render charts;

[0076] Interaction and drilling module: realizes the interactive function of charts and data drilling.

[0077] A computer-readable storage medium stores program instructions therein: when the program instructions are executed by a processor, the above method is implemented.

[0078] The present invention solves the defects existing in the background technology and has the following beneficial effects:

[0079] 1. This configurable ECharts solution based on the low-code platform automatically generates a layoutJson structure in combination with the initChartData method. This structure defines in detail the various components of the chart, such as the title, axis, data series, etc., so users do not need to manually write these basic configurations. In the optionChart method, the configuration options (echartoptions) of echarts are automatically generated through functions such as convert2RuntimeControl and addToParent, further reducing the need to directly write ech arts configuration code; effectively reducing the amount of code written by developers; compared with existing technologies, it improves development efficiency, thereby better meeting user needs.

[0080] 2. This configurable ECharts solution based on a low-code platform, when users modify the chart configuration through the graphical interface, these changes will be reflected in the layoutJson structure in real time, thereby triggering the re-rendering of the chart. This mechanism allows users to adjust the chart configuration at any time and see the effect immediately. By monitoring the browser's resize event, it ensures that the chart can be displayed correctly on different screen sizes; compared with existing technologies, it enhances the responsiveness and real-time performance of the chart. BRIEF DESCRIPTION OF THE DRAWINGS

[0081] The accompanying drawings are used to provide a further understanding 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 do not constitute a limitation of the present invention. In the accompanying drawings:

[0082] Figure 1 It is a schematic diagram of the system structure of the present invention;

[0083] Figure 2 It is a schematic diagram of the module flow in the present invention;

[0084] Figure 3 A schematic diagram of data configuration of the configuration interface in the present invention;

[0085] Figure 4 A schematic diagram of data configuration of the configuration interface in the present invention;

[0086] Figure 5 A schematic diagram of the style configuration of the configuration interface in the present invention;

[0087] Figure 6 A schematic diagram of the style configuration of the configuration interface in the present invention; DETAILED DESCRIPTION

[0088] The present invention will now be further described in detail with reference to the accompanying drawings and embodiments. These drawings are simplified schematic diagrams that only illustrate the basic structure of the present invention in a schematic manner, and therefore only show the components related to the present invention.

[0089] Application Overview

[0090] In the process of realizing data visualization based on the ECharts chart library, developers need to write a lot of configuration codes, which not only reduces development efficiency, but also makes it difficult for developers to cope with rapid changes in demand.

[0091] The present invention combines the initChartData method to automatically generate a layoutJson structure, which defines in detail the various components of the chart such as title, coordinate axis, data series, etc., and the user does not need to manually write these basic configurations. In the optionChart method, through functions such as convert2RuntimeControl and addToPa rent, the configuration options (echartoptions) of echarts are automatically generated, further reducing the need to directly write echarts configuration code. Effectively reduce the amount of code written by developers, improve development efficiency, so as to better meet the needs of users.

[0092] Exemplary Methods

[0093] Figure 1 The figure shows a schematic diagram of the system structure provided by the present invention.

[0094] A solution to achieve configurable ECharts based on a low-code platform includes:

[0095] The browser receives the client request and enters the creation process; wherein the client request includes the entity name, entity fields, data configuration, and style configuration;

[0096] The browser builds the chart structure based on the entity name;

[0097] The browser renders the chart structure based on the chart structure;

[0098] The browser receives the entity fields and generates the chart type;

[0099] The browser configures the data and style of the chart based on the chart type;

[0100] When the data configuration and style configuration are completed, the browser generates a chart view;

[0101] In the case of generating a chart view, dynamically set the chart;

[0102] Further: confirm the validity of the entity name based on whether the entity name exists in the entity list of the APAAS platform;

[0103] If the entity name exists in the entity list of the APAAS platform, the entity name is considered valid; the browser continues the chart creation and configuration process;

[0104] If the entity name does not exist in the entity list of the APAAS platform, the entity name is invalid; the entity name is judged to be invalid; and the browser returns an error message to the front end.

[0105] Further: wherein, the browser side constructs a chart structure according to the entity name, and the method for constructing the chart structure includes:

[0106] The browser presets the default chart type;

[0107] When the default chart is preset, build the control structure according to the default chart type based on the initChartData method;

[0108] After the control structure is built, the control structure is further generated based on the getTemplateByName method to build the chart hierarchy;

[0109] Among them, the chart level includes the outermost chart level;

[0110] Among them, the children array in the control structure includes the basic elements of the chart;

[0111] The children array is used to store the child controls of the control structure;

[0112] The basic elements of the chart include: chart components: chart title, x-axis configuration item, y-axis configuration item, data layer, legend, prompt box, toolbox;

[0113] Among them, the xcell level is set under the x-axis configuration item to store the data bound to the x-axis; the ycell level is set under the y-axis configuration item to store the data bound to the y-axis.

[0114] When the chart type needs to be switched, the browser clears the currently configured options for the x and y axes.

[0115] Further: the control structure includes: a unique identifier of the component; a name or type of the component, used to identify the component during subsequent rendering; a display name of the component, used for user interface display; description information of the component, used to help users understand the purpose of the component; a children array, used to build a hierarchical structure of the component; a data type of the component, used to guide data processing and rendering; a property object of the component, used to store detailed configuration information of the component; a pointer to an object describing detailed information of the component;

[0116] The above chart configuration information is used for the chart's appearance display and internal data storage.

[0117] Further: the control structure also includes a descriptor;

[0118] The descriptor includes: component name, component name in multiple languages, component grouping, default value, component data type, and function for controlling component visibility;

[0119] Descriptors are used to define the behavior and display rules of chart components.

[0120] Further: The browser renders based on the chart structure, where the rendering method is:

[0121] When the chart structure is built, the browser generates a renderItem component and sets the item as layoutJson and passes it into the component.

[0122] layoutJson is the layout configuration data;

[0123] If there are basic chart elements in item, each element in the basic chart element is processed in a loop to render the renderItem component;

[0124] If there is no basic chart element in the item, the render component is rendered directly;

[0125] In the render component, render the render component through the render function;

[0126] During the rendering process, check the checkVisiabe function in descriptor.props;

[0127] If the verification result is false, stop rendering the current component;

[0128] If the verification result is true, continue to render the current component;

[0129] Among them, the components of the layoutJson level configuration attributes include: data type component;

[0130] When a component is configured by the user, the corresponding data type changes accordingly.

[0131] item is the chart configuration object;

[0132] The render component is a layout item rendering component;

[0133] The renderItem component is a component that configures the object of the layout item rendering chart.

[0134] Further: the browser receives the entity fields and generates the chart type;

[0135] The browser determines the type of chart that needs to be generated based on the content of the entity field;

[0136] When determining the chart type, different configuration logic is applied;

[0137] Among them, the configuration logic includes: single-axis or multi-axis configuration;

[0138] Among them, bar charts and line charts support the configuration of dual x-axis and single y-axis or single x-axis and multiple y-axis.

[0139] Pie charts and funnel charts: Forced to be configured with a single x-axis and a single y-axis.

[0140] Mixed column chart: supports single x-axis or dual x-axis, fixed 2 y-axis data, and y-axis data types are mutually exclusive.

[0141] The mutually exclusive logic is that in a mixed column chart, if the user tries to change the data type of one y-axis to a bar chart, the data type of the other y-axis will be automatically changed to a line chart, and vice versa.

[0142] Further: Data configuration includes the data processing and display methods in the chart; style configuration includes general class configuration and specific chart class configuration;

[0143] The display methods include: chart name, set a clear title for the chart so that readers can quickly understand the content of the chart;

[0144] Data processing methods include: data binding, which is used to bind fields in the data source to elements such as the x-axis and y-axis in the chart to ensure that the chart can accurately display the data; empty group processing, which is used to configure whether to hide these empty groups when there are null values ​​or missing data in the data to avoid interference with the interpretation of the chart; sorting configuration, which sorts the data as needed, including specifying the sorting fields and sorting methods such as ascending and descending, so as to more clearly display data trends or comparative relationships;

[0145] General configurations include: Display values, which is used to configure whether to display specific values ​​at data points, axis labels, etc. in the chart; Legend display, which is used to control whether the legend is displayed and allow users to customize the legend name, direction, and position; Tooltip, which is used to configure whether to display the tooltip to provide additional data information when the mouse hovers; X-axis first n items configuration, which is used to configure to display only the first n items of data on the X-axis when there is too much data to reduce the complexity of the chart and improve readability;

[0146] Specific chart class configurations include: line chart, pie chart, funnel chart;

[0147] Further: When the data configuration and style configuration are completed, the browser generates a chart view, wherein the method for generating the chart view on the browser is:

[0148] In the process of initializing the chart instance, use charts.init to generate an echarts instance, listen to the browser resize event, and execute the instance's reize method;

[0149] When the data configuration of the x-axis and y-axis in layoutJson is completed, the initialization layout configuration signal is triggered;

[0150] The browser receives the initialization layout configuration signal and uses the getChartDetail data query method to determine whether the returned signal is empty data;

[0151] If the data is empty, the component with no data will be displayed.

[0152] If there is data, a chart is drawn to generate a chart view;

[0153] The charts.init is used to initialize the chart instance;

[0154] Further: when generating a chart view, the chart is dynamically set, wherein the dynamic setting method is:

[0155] The browser receives the client request and reconstructs the query conditions;

[0156] Build a new chart configuration based on the query conditions; execute the optionChart method;

[0157] In the optionChart method, execute the convert2RuntimeControl method, use the characteristics of web pack to obtain *.ts in all subdirectories, recursively traverse the current $nodetype, and confirm the corresponding rendered control structure;

[0158] When the control is confirmed, add it to addToParent and splice it to the corresponding parent level to generate the echartoptions structure, and finally perform setOption of the echarts instance;

[0159] Further: Add the drill function method as follows:

[0160] Bind a double-click event listener to the echarts instance;

[0161] When the browser receives a user trigger signal, the listener is triggered; the user trigger signal is that the user double-clicks a data node in the chart;

[0162] In the double-click event processing function, obtain the conditions of the double-clicked data node;

[0163] The browser receives the user trigger signal and reconstructs the query conditions; it builds a new chart configuration based on the query conditions;

[0164] Among them, the query condition reconstruction process: the browser receives the user trigger signal and modifies the coordinate axis and filter conditions of the chart;

[0165] The process of constructing a new chart configuration includes: when constructing a new chart configuration on the browser side, retaining the original chart configuration to facilitate users to switch between the original chart and the new chart.

[0166] like Figure 2 The configurable ECharts solution device based on the low-code platform includes:

[0167] Initialization and configuration module: build chart infrastructure and configuration;

[0168] Configuration item parsing and rendering module: parses configuration and renders chart components;

[0169] Data acquisition and processing module: obtain entity data and configure chart data source;

[0170] Configuration module: provides user-customizable data and style configuration options;

[0171] ECharts chart rendering module: instantiate ECharts, process data and render charts;

[0172] Interaction and drilling module: realizes the interactive function of charts and data drilling.

[0173] A computer-readable storage medium stores program instructions therein: when the program instructions are executed by a processor, the above method is implemented.

[0174] In addition to the above-mentioned methods and devices, an embodiment of the present application may also be a computer program product, which includes computer program instructions, which, when executed by a processor, enable the processor to execute the steps of implementing a configurable ECharts solution based on a low-code platform according to various embodiments of the present application described in the above method section of this specification.

[0175] The computer program product may be written in any combination of one or more programming languages ​​to write program codes for performing the operations of the embodiments of the present application, including object-oriented programming languages ​​such as Java, C++, etc., and conventional procedural programming languages ​​such as "C" language or similar programming languages. The program code may be executed entirely on the user computing device, partially on the user device, as a separate software package, partially on the user computing device and partially on a remote computing device, or entirely on a remote computing device or server.

[0176] In addition, an embodiment of the present application may also be a computer-readable storage medium on which computer program instructions are stored. When the computer program instructions are executed by a processor, the processor executes the steps of implementing a configurable ECharts solution based on a low-code platform according to various embodiments of the present application as described in the above method section of this specification.

[0177] Computer readable storage media can adopt any combination of one or more readable media. The readable medium can be a readable signal medium or a readable storage medium. The readable storage medium can include, for example, but is not limited to, a system, device or device of electricity, magnetism, light, electromagnetic, infrared, or semiconductor, or any combination of the above. More specific examples (non-exhaustive list) of readable storage media include: an electrical connection with one or more wires, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above.

[0178] In the description of the present invention, it should be understood that the terms "first" and "second" are used for descriptive purposes only and should not be understood as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of the features. In the description of the present invention, the meaning of "plurality" is two or more, unless otherwise clearly and specifically defined.

[0179] In the description of this specification, the description of the terms "one embodiment", "some embodiments", "embodiment", "example", "specific example" or "some examples" etc. means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present invention. In this specification, the schematic expressions of the above terms do not necessarily refer to the same embodiment or example.

[0180] Although the embodiments of the present invention have been shown and described above, it is to be understood that the above embodiments are exemplary and are not to be construed as limitations of the present invention. A person skilled in the art may alter, modify, replace and modify the above embodiments within the scope of the present invention.

Claims

1. A configurable ECharts solution based on a low-code platform, characterized in that: include: The browser receives the client request and enters the creation process; the client request includes the entity name, entity fields, data configuration, and style configuration; The browser builds the chart structure based on the entity name; The browser renders the chart structure based on the chart structure; The browser receives the entity fields and generates the chart type; The browser configures the data and style of the chart based on the chart type; After the data configuration and style configuration are completed, generate a chart view; In the case of generated chart views, dynamically set the chart and add drill-down capabilities; The method to add drill-down function is: Bind a double-click event listener to the echarts instance; When the browser receives a user trigger signal, the listener is triggered; the user trigger signal is that the user double-clicks a data node in the chart; In the double-click event processing function, obtain the conditions of the double-clicked data node; The browser receives the user trigger signal and reconstructs the query conditions; it builds a new chart configuration based on the query conditions; Among them, the query condition reconstruction process: the browser receives the user trigger signal and modifies the coordinate axis and filter conditions of the chart; The process of constructing a new chart configuration includes: when constructing a new chart configuration on the browser side, retaining the original chart configuration to facilitate users to switch between the original chart and the new chart.

2. A configurable ECharts solution based on a low-code platform according to claim 1, characterized in that: The browser performs data configuration and style configuration on the chart based on the chart type; the data configuration includes the data processing and display methods in the chart; the style configuration includes general class configuration and specific chart class configuration.

3. A configurable ECharts solution based on a low-code platform according to claim 2, characterized in that: The browser constructs the chart structure based on the entity name. The method for constructing the chart structure is: The browser presets the default chart type; When the default chart is preset, build the control structure according to the default chart type based on the initChartData method; After the control structure is built, the control structure is further generated based on the getTemplateByName method to build the chart hierarchy; Among them, the chart level includes the outermost chart level; the children array in the control structure includes the basic elements of the chart; the children array is used to store the child controls of the control structure; The basic elements of a chart include: Chart components: chart title, x-axis configuration items, y-axis configuration items, data layer, legend, prompt box, toolbox; Among them, under the x-axis configuration item, the xcell level is set to store the data bound to the x-axis; under the y-axis configuration item, the ycell level is set to store the data bound to the y-axis; When the chart type needs to be switched, the browser clears the currently configured options for the x and y axes.

4. A configurable ECharts solution based on a low-code platform according to claim 3, characterized in that: The control structure includes: the unique identifier of the component; the name or type of the component; the display name of the component; the description information of the component; the children array; the data type of the component; the attribute object of the component; and a pointer to an object describing the detailed information of the component. The control structure also includes a descriptor; the descriptor includes: the corresponding name of the component, the multi-language component name, the corresponding grouping of the component, the default value, the data type of the corresponding component, and the function used to control the visibility of the component.

5. A configurable ECharts solution based on a low-code platform according to claim 3, characterized in that: The browser renders based on the chart structure, where the rendering method is: When the chart structure is built, the browser generates a renderItem component and sets the item as layoutJson and passes it into the component. If there are basic chart elements in item, each element in the basic chart element is processed in a loop to render the renderItem component; If there is no basic chart element in the item, the render component is rendered directly; In the render component, render the render component through the render function; During the rendering process, check the checkVisiabe function in descriptor.props; If the verification result is false, stop rendering the current component; If the verification result is true, continue to render the current component; Among them, the components of the layoutJson level configuration attributes include: data type component; When a component is configured by the user, the corresponding data type changes accordingly.

6. A configurable ECharts solution based on a low-code platform according to claim 3, characterized in that: When the data configuration and style configuration are completed, the browser generates a chart view. The method for generating a chart view on the browser is: In the process of initializing the chart instance, use charts.init to generate an echarts instance, listen to the browser resize event, and execute the instance's reize method; When the data configuration of the x-axis and y-axis in layoutJson is completed, the initialization layout configuration signal is triggered; The browser receives the initialization layout configuration signal and uses the getChartDetail data query method to determine whether the returned signal is empty data; If the data is empty, the component with no data will be displayed. If there is data, a chart is drawn to generate a chart view.

7. A configurable ECharts solution based on a low-code platform according to claim 3, characterized in that: When a chart view is generated, the chart is dynamically set, wherein the dynamic setting method is: The browser receives the client request and reconstructs the query conditions; Build a new chart configuration based on the query conditions; execute the optionChart method; In the optionChart method, execute the convert2RuntimeControl method, use the characteristics of web pack to obtain *.ts in all subdirectories, recursively traverse the current $nodetype, and confirm the corresponding rendered control structure; After confirming the control structure, add it to addToParent and splice it into the corresponding parent level to generate the echartoptions structure, and finally perform setOption of the echarts instance.

8. A configurable ECharts solution device based on a low-code platform, characterized in that: include: Initialization and configuration module: build chart infrastructure and configuration; Configuration item parsing and rendering module: parses configuration and renders chart components; Data acquisition and processing module: obtain entity data and configure chart data source; Configuration module: provides user-customizable data and style configuration options; ECharts chart rendering module: instantiate ECharts, process data and render charts; Interaction and drilling module: realizes the interactive function of charts and data drilling.

9. A computer-readable storage medium having program instructions stored therein, characterized in that: When the program instructions are executed by a processor, the program instructions implement any method as claimed in claims 1 to 8.

Images