A data display method and device, electronic equipment and storage medium

Abstract

Embodiments of the present application disclose a data display method and device, electronic equipment and a storage medium; an execution instruction of a target code file can be received, the target code file comprising at least one data display component, a data mapping relationship set is obtained according to the execution instruction, the data mapping relationship set comprising a mapping relationship between a data display component and component data of a preset data format, wherein a set of component data corresponds to at least one data display component, component data corresponding to each data display component is obtained according to the data mapping relationship set, and the target code file is executed and displayed according to the component data of each data display component; thus, front-end and back-end developers can independently develop a data display page, and when a front-end developer needs to develop different component forms for data display, the front-end and back-end developers do not need to communicate, and software development efficiency is improved.

Description

Technical Field

[0001] This invention relates to the field of computer technology, and more specifically to a data display method, apparatus, electronic device, and storage medium. Background Technology

[0002] With the rapid development of society, software developers often need to configure different forms of data display pages according to users' data acquisition needs, such as displaying different chart formats such as line charts, pie charts, and bar charts to obtain data information.

[0003] Currently, the main approach to configuring data display pages involves front-end developers setting the data display format, followed by back-end developers processing the data according to this format before integrating it with the front-end. However, this approach suffers from drawbacks: different chart formats require different data formats, necessitating repeated communication between front-end and back-end developers and impacting software development efficiency. Summary of the Invention

[0004] This invention provides a data display method, apparatus, electronic device, and storage medium that enable front-end and back-end developers to independently develop data display pages without needing to communicate when displaying data in different component forms, thereby improving software development efficiency.

[0005] This invention provides a data display method, including: Receives an execution instruction for a target code file, the target code file including at least one data display component; According to the running instructions, a set of data mapping relationships is obtained. The set of data mapping relationships includes the mapping relationship between data display components and component data in a preset data format, wherein a set of component data corresponds to at least one data display component. Based on the data mapping relationship set, obtain the component data corresponding to each of the data display components; Based on the component data of each of the aforementioned data display components, the target code file is run and displayed.

[0006] Accordingly, embodiments of the present invention provide a data display device, including: An instruction receiving unit is configured to receive execution instructions for a target code file, wherein the target code file includes at least one data display component. A set acquisition unit is used to acquire a set of data mapping relationships according to the running instructions. The set of data mapping relationships includes the mapping relationship between data display components and component data in a preset data format, wherein a set of component data corresponds to at least one data display component. The data acquisition unit is used to acquire component data corresponding to each of the data display components according to the data mapping relationship set; The runtime display unit is used to run and display the target code file based on the component data of each of the data display components.

[0007] Optionally, the component data in the preset data format includes at least one set of data content, the data display component includes data processing code corresponding to the target data content, the data processing code is used to convert the target data content into the content displayed by the corresponding data display component, the running display unit includes a data content determination unit and a data processing unit, the data content determination unit is used to determine the target data content that the data display component needs to process in the corresponding component data according to the data processing code in each of the data display components; The data processing unit is used to run and display the target code file based on the data processing code corresponding to the target data content in each of the data display components and the target data content.

[0008] Optionally, the component data also includes a data display style identifier corresponding to each of the data contents, and the data processing code includes a data calculation code and a calculation result display code. The data calculation code is used to calculate the target data content to obtain a calculation result, and the calculation result display code is used to display the calculation result according to the result display style corresponding to the calculation result determined by the data display style identifier, so as to obtain the content displayed by the data display component. The data processing unit is used to calculate the target data content according to the data calculation code corresponding to the target data content in each of the data display components, and obtain the calculation result corresponding to the target data content. Based on the data display style identifier corresponding to each of the data contents, determine the result display style corresponding to the calculation result of each data content of the component data in the component display style of the data display component; By using the calculation result display code corresponding to the target data content in each of the data display components, the calculation result corresponding to the target data content is displayed according to the result display style corresponding to the calculation result, and the content displayed by each of the data display components is obtained; Based on the content displayed by the data display component, the target code file is run and displayed.

[0009] Optionally, the component data may also include data type description information, and the data calculation code may include data unit conversion code; The data processing unit is used to determine the data unit corresponding to the target data content based on the data type description information corresponding to the target data content in each of the data display components, and the preset correspondence between the data type description information and the data unit. Based on the data unit conversion code corresponding to the target data content and the data unit corresponding to the target data content, the target data content is converted to a unit to obtain the calculation result corresponding to the target data content.

[0010] Optionally, the component data further includes data dimensions, the data display component further includes component displayable dimensions, and a data dimension judgment unit is further included before the data processing unit for obtaining the data dimensions in the component data. If the data dimension is not greater than the component displayable dimension, the step of running and displaying the target code file based on the data processing code corresponding to the target data content in each of the data display components and the target data content is executed.

[0011] Optionally, the data display component includes a component type identifier, and a display style determination unit is further included before the running display unit, for obtaining a component mapping relationship set according to the running instruction, the component mapping relationship set including a preset mapping relationship between a component type identifier and a preset component display style; Based on the component mapping relationship set and the component type identifier of the data display component, determine the component display style corresponding to each data display component; The running display unit is used to run and display the target code file according to the component data and component display style of each of the data display components.

[0012] Optionally, a component display style includes at least one content display style, and the data display component further includes preset display content and a content display style identifier; The operation display unit is used to determine the content display style corresponding to the preset display content from the component display styles of the data display component according to the content display style identifier of the data display component; The target code file is run and displayed based on the component data of each data display component, the preset display content, and the content display style corresponding to the preset display content.

[0013] Optionally, the set acquisition unit further includes a set update unit, which is used to receive a new component display style and a component type identifier set for the new component display style; In the component mapping relationship set, the new component type identifier and the mapping relationship between the new component type identifier and the new component display style are set to obtain the updated component mapping relationship set.

[0014] Optionally, the instruction receiving unit further includes a code generation unit, used to obtain a data display page image and a set of component mapping relationships, wherein the data display page image includes at least one component display style element; The data display page image is parsed to obtain at least one component display style element; Based on the display style elements of each component, determine the component type identifier corresponding to each component display style element from the component mapping relationship set; Based on the component type identifier corresponding to each component display style element, generate the target code file.

[0015] Optionally, the component data includes simulation data, which is used to simulate the data required for the target code file to run.

[0016] Accordingly, embodiments of the present invention also provide an electronic device, including a memory and a processor; the memory stores an application program, and the processor is used to run the application program in the memory to perform the steps in any of the data display methods provided in the embodiments of the present invention.

[0017] Furthermore, embodiments of the present invention also provide a computer-readable storage medium storing a plurality of instructions adapted for loading by a processor to execute steps in any of the data display methods provided in embodiments of the present invention.

[0018] The solution of this invention can receive a running instruction for a target code file, which includes at least one data display component. A data mapping relationship set is obtained according to the running instruction. This data mapping relationship set includes mapping relationships between the data display components and component data in a preset data format. A set of component data corresponds to at least one data display component. Based on the data mapping relationship set, the component data corresponding to each data display component is obtained. The target code file is then run and displayed based on the component data of each data display component. Since the component data in this embodiment is in a preset data format, the same set of component data can correspond to at least one data display component. When front-end developers develop different data display components, they can still call the same set of component data. Therefore, front-end and back-end developers can independently develop data display pages without needing to communicate when displaying in different component formats, thus improving software development efficiency. Attached Figure Description

[0019] To more clearly illustrate the technical solutions in the embodiments of the present invention, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0020] Figure 1 This is a schematic diagram of a data display method provided in an embodiment of the present invention; Figure 2 This is a flowchart of the data display method provided in the embodiments of the present invention; Figure 3 This is a schematic diagram of the page displayed after the target code file is run, as provided in an embodiment of the present invention; Figure 4 This is a schematic diagram of another page after the target code file is run and displayed according to an embodiment of the present invention; Figure 5 This is another schematic diagram of the page displayed after the target code file is run, as provided in this embodiment of the invention; Figure 6 This is another flowchart of the data display method provided in the embodiments of the present invention; Figure 7 This is a schematic diagram of the data display device provided in an embodiment of the present invention; Figure 8 This is another structural schematic diagram of the data display device provided in an embodiment of the present invention; Figure 9 This is a schematic diagram of the structure of the electronic device provided in an embodiment of the present invention. Detailed Implementation

[0021] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0022] This invention provides a data display method, apparatus, electronic device, and computer-readable storage medium. Specifically, this invention provides a data display method suitable for a data display device that can be integrated into an electronic device.

[0023] The electronic device can be a terminal or other device, including but not limited to mobile terminals and fixed terminals. For example, mobile terminals include but are not limited to smartphones, smartwatches, tablets, laptops, smart vehicles, etc., while fixed terminals include but are not limited to desktop computers, smart TVs, etc.

[0024] The electronic device can also be a server or other device. The server can be an independent physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN, and big data and artificial intelligence platforms, but it is not limited to these.

[0025] The data display method of this invention can be implemented by a server, or by a terminal and a server together.

[0026] The following example illustrates this data display method using both a terminal and a server.

[0027] like Figure 1 As shown, the data display system provided in this embodiment of the invention includes a terminal 10 and a server 20, etc.; the terminal 10 and the server 20 are connected via a network, such as a wired or wireless network, etc., wherein the terminal 10 can exist as a terminal for developers to run target code files.

[0028] Terminal 10 can be a terminal for users to store and run target code files. It can be used to receive running instructions for the target code files. The target code files include at least one data display component. According to the running instructions, a data mapping relationship set is obtained. The data mapping relationship set includes the mapping relationship between the data display components and component data in a preset data format. A set of component data corresponds to at least one data display component. According to the data mapping relationship set, the component data corresponding to each data display component is obtained. According to the component data of each data display component, the target code file is run and displayed.

[0029] Server 20 can be used to store data mapping relationship sets and component data in preset data formats.

[0030] The following sections provide detailed descriptions of each example. It should be noted that the order in which the embodiments are described is not intended to limit the preferred order of the embodiments.

[0031] The embodiments of the present invention will be described from the perspective of a data display device, which can be integrated into a server or terminal.

[0032] like Figure 2 As shown, the specific process of the data display method in this embodiment can be as follows: 201. Receive the execution instructions for the target code file, which includes at least one data display component.

[0033] With the development of software development technology, the front-end and back-end separation development approach has been increasingly widely used. The front-end generally refers to the part of the software or client on the terminal that needs to be displayed to the user; the back-end generally refers to the part in the background of the terminal or server that implements data storage and retrieval, software functions, and software stability.

[0034] It can be assumed that the front-end mainly focuses on how the page is presented to the user, while the back-end mainly focuses on the business logic, including the business logic for implementing functions, the business logic for interacting with the database, and so on.

[0035] Among them, target code files are code files developed for the front-end part of web pages, clients, software and other programs. They can be officially completed code files, or test code files that are still under development, not yet perfected or need to be tested, and so on.

[0036] It is understandable that an object code file may include one or more data display components. Each component in the object code file can be considered as an independent unit of code.

[0037] For example, Figure 3 It can be a page illustration obtained after running and displaying the target code file. The text component displaying the "Transaction Overview" content, the display component under the data overview containing "Transaction Amount" and "+4.24%" and the display component under the transaction user analysis containing "Old Users" and "46.58%" can all be data display components in the same target code file.

[0038] In some examples, a data display component may include at least one sub-component. For example, a display component under the data overview that includes content such as "transaction amount" and "+4.24%" can be considered a data display component, where "transaction amount" and "+4.24%" are sub-components of that data display component.

[0039] In this embodiment of the invention, the data display component can be considered a simple encapsulation of data and methods. It should be noted that the data encapsulated in the data display component is not the component data of this embodiment, but rather the front-end display content set by the front-end developers during the development process.

[0040] The execution instructions for the target code file can be instructions generated by the code compiler after the front-end developer triggers the execution in the code compiler; or, the execution instructions for the target code file can be instructions generated by the terminal after the user triggers the display of the page corresponding to the target code file, and so on.

[0041] In some optional examples, in addition to the data display component, the target code file may contain other code developed by the front-end developer. When the compiler runs the target code file, it will run this self-developed code in addition to the data display component.

[0042] In other words, the target code file also includes self-developed code. The step "running and displaying the target code file based on the component data of each data display component" can specifically include: Based on the component data and self-developed code of each data display component, the target code file is run and displayed.

[0043] Self-developed code refers to code developed by front-end developers outside of the data display components.

[0044] It is understood that the data display component can be the complete code of a specific component implementation, or it can be a method for calling one or more pre-written components. This invention does not limit this.

[0045] 202. Obtain a set of data mapping relationships according to the running instructions. The set of data mapping relationships includes the mapping relationship between the data display component and the component data in the preset data format. Among them, a set of component data corresponds to at least one data display component.

[0046] It is understandable that different data display components may require different component data when displaying data. Therefore, a set of data mapping relationships can be pre-built, where the mapping relationship between data display components and component data in a preset data format means that each data display component corresponds to a set of component data in a preset data format.

[0047] The preset data format for component data can be determined according to pre-defined programming specifications. Before program development, the programming specifications can be communicated to the developers, enabling them to develop component data that conforms to the preset data format.

[0048] For example, coding standards may specify that backend developers, in addition to writing specific numerical values, also need to specify the data dimensions to be displayed in the data display component, the data type, a detailed description of the data, and so on. For instance, backend developers can use the following format specification table to write component data:

[0049] The meta field can be further specified as follows:

[0050] It is understandable that there may be other field restrictions in the programming specifications, and this invention does not limit them.

[0051] In some optional examples, the run instruction may carry identification information of the data display component, and the step of "obtaining the data mapping relationship set according to the run instruction" may further include: The identification information carried by the running command is detected.

[0052] Correspondingly, when the running instruction includes the identification information of the data display component, the step of obtaining the data mapping relationship set according to the running instruction can be executed. If the running instruction does not include the identification information of the data display component, the step of obtaining the data mapping relationship set according to the running instruction can be skipped, and the target code file can be directly run by the code compiler.

[0053] In other examples, the target code file may contain a data retrieval interface. When the execution instructions of the target code file are received, the code compiler generally executes the code in the target code file in the order of the code.

[0054] When the code compiler executes the data retrieval code corresponding to the data retrieval interface, it can obtain the data mapping relationship set through the data retrieval interface, and so on.

[0055] 203. Based on the data mapping relationship set, obtain the component data corresponding to each data display component.

[0056] In some embodiments, the data display component and component data in the data mapping relationship set may be storing the code of the data display component in correspondence with the component data, or it may be storing the identification information of the data display component in correspondence with the component data, etc.

[0057] Specifically, the running instruction may include identification information of the data display component. After obtaining the data mapping relationship set, the component data corresponding to each data display component can be determined according to the identification information in the running instruction, the data display component corresponding to the identification information, and the mapping relationship between the data display component and the component data of the preset data format.

[0058] For example, component data can be constructed in the following way: “index”:{“keys”:[“1”,“2”],“names”:[“merchant 1”,“merchant 2”]}, “data”:{122,234}, “meta”:{ "data_value":{"description":"merchant ID","type":"mch_id"}, “dimension_count”:1, “index_key”:{“description”:“amount”,“type”:“price”}} Alternatively, component data can also be constructed in the following way: "index":{"keys":["1","2"],"names":[]}, “data”:{ {"keys":"1", “name”:“Merchant 1”, “values”:“122”}, {"keys":"2", “name”:“Merchant 2”, “values”:“234”}, }, “meta”:{ "data_value":{"description":"merchant ID","type":"mch_id"}, “dimension_count”:2, “index_key”:{“description”:“amount”,“type”:“price”}} To help developers understand the data in component data, backend developers can add descriptive information to the numerical values ​​when creating component data. In some optional examples, the default data format for component data includes descriptive information for the values ​​in addition to the specific values; for example, the descriptive information can be metadata. Metadata describes other data, and its meaning can be obtained.

[0059] For example, the meta section in the two component data sets above is a description of the data in the data section.

[0060] It is understandable that the data dimensions of component data provided to different data display components may differ. For example, the data dimension can be zero-dimensional, one-dimensional, two-dimensional, multi-dimensional, high-dimensional, etc. For instance, component data may be a single value, corresponding to a zero-dimensional data dimension; component data may be a simple array, corresponding to a one-dimensional data dimension; or component data may be an array composed of multiple objects, in which case the corresponding data dimension is two-dimensional, and so on.

[0061] For example, the component data corresponding to data display component A could be a row of one-dimensional data about the number of new users of store A each month, while the component data corresponding to data display component B could be two-dimensional data about the number of new users of both store A and store B (two objects) each month.

[0062] Therefore, the data dimensions of component data can be written into the data content description information. Generally, zero-dimensional data can be a scalar, one-dimensional data can be composed of ordered or unordered data with equivalence relationships, organized linearly, and the data have equivalence relationships; it can be represented by lists, sets, or arrays. Two-dimensional data can be composed of multiple one-dimensional data and can be represented by matrices or lists; multi-dimensional data can be formed by extending one-dimensional or two-dimensional data in new dimensions.

[0063] In some optional examples, to better describe the data when displaying it, primary and secondary dimensions can be set for the data. These primary and secondary dimensions describe information from different perspectives. For example, such as... Figure 3 As shown, when displaying a merchant's transaction user information, there can be 1111 new users and 1112 existing users. The main dimension can be set to new and existing users, and the secondary dimension to the number of transactions, etc.

[0064] 204. Based on the component data of each data display component, run and display the target code file.

[0065] In practical applications, a set of component data can correspond to at least one data display component. Different data display components can be configured with different data processing methods for the same set of component data. For example, the component data may include two sets of data content, A and B. Data display component A can process only data content A, data display component B can process only data content B, data display component C can process both data content A and B simultaneously, and so on.

[0066] Therefore, the component data in the preset data format may include at least one set of data content, and the data display component may include data processing code corresponding to the target data content. The data processing code is used to convert the target data content into the content displayed by the corresponding data display component.

[0067] Correspondingly, step 204 may specifically include: Based on the data processing code in each data display component, determine the target data content that each data display component needs to process in the corresponding component data display component; Based on the data processing code corresponding to the target data content in each data display component, and the target data content, the target code file is run and displayed.

[0068] Because different data display components each have their own data processing code corresponding to the target data content, even for the same component data, front-end developers can parse the component data to obtain the target data content for processing. Consequently, back-end developers no longer need to provide different component data for different data display components; they only need to provide a single component data that conforms to the preset data format. This greatly improves development efficiency.

[0069] In related technologies, component data is typically pre-defined and directly associated with the data display component. Developers need to directly configure the database information, chart types, and so on corresponding to the data display component during development. However, directly retrieving fixed component data from the database when running the target code file lacks flexibility and cannot meet complex user needs. Therefore, data calculation code can be set within the component. After retrieving the component data, further calculations can be performed on the data, and the results can be displayed.

[0070] In other words, in addition to the data content, component data can also include data display style identifiers corresponding to each data content. Data processing code can include data calculation code and calculation result display code. Data calculation code can be used to calculate the target data content to obtain the calculation result, and calculation result display code can be used to display the calculation result according to the result display style corresponding to the calculation result determined by the data display style identifier, thus obtaining the content displayed by the data display component.

[0071] Optionally, the step "based on the data processing code corresponding to the target data content in each data display component, and the target data content, run and display the target code file" may specifically include: Based on the data calculation code corresponding to the target data content in each data display component, the target data content is calculated to obtain the calculation result corresponding to the target data content; Based on the data display style identifier corresponding to each data content, determine the result display style corresponding to the calculation result of each data content in the component data in the component display style of the data display component; By using the calculation result display code corresponding to the target data content in each data display component, the calculation result corresponding to the target data content is displayed according to the result display style corresponding to the calculation result, thus obtaining the content displayed by each data display component; Based on the content displayed by the data display component, the target code file is run and displayed.

[0072] Among them, the data display style identifier can indicate the display style of the calculation result corresponding to the data content. For example, the data display style identifier can be the data type corresponding to the data content. Developers can set the result display style corresponding to data content of data type A to result display style A; or, the data display style identifier can be directly the style identifier corresponding to the result display style. For example, if there are result display styles A, B, and C, a data display style identifier A can be set for a certain data content, indicating that the result display style of the calculation result corresponding to that data content is A, and so on.

[0073] In practical applications, backend developers can directly store data of a specific unit into the database. However, frontend data display components may need to perform unit conversions when processing this data. Therefore, backend developers can set the data unit corresponding to a certain data type when developing component data. When the data display component needs to perform unit conversion, it can determine the unit of the component data based on its data type and then perform the conversion. That is, component data also includes data type description information, and the data calculation code includes data unit conversion code. The step "calculate the target data content according to the data calculation code corresponding to the target data content in each data display component to obtain the calculation result corresponding to the target data content" can specifically include: Based on the data type description information corresponding to the target data content in each data display component, and the pre-defined correspondence between the data type description information and the data unit, the data unit corresponding to the target data content is determined. Based on the data unit conversion code corresponding to the target data content, and the data unit corresponding to the target data content, the unit conversion of the target data content is performed to obtain the calculation result corresponding to the target data content.

[0074] Unit conversion refers to the conversion between different units of the same value. Commonly used unit conversions include conversion between length units, weight units, pressure units, area units, capacitance units, volume units, and temperature units.

[0075] For example, data type description information can be the specific data field name, such as data, keys, or values, etc.

[0076] However, in practical applications, many fields in component data, such as status, type, and gender, often store numbers. When developers need to evaluate these fields, directly using conditional statements like `if` statements to evaluate specific numbers becomes difficult, especially with many fields. It also makes the code unreadable. Therefore, enumerations can be used. The values ​​corresponding to the enumerations are stored in the component data's content section, while the enumeration names are used in the code. This way, developers can immediately see the numerical values ​​or field states in the data content section, making it very clear and straightforward.

[0077] In other words, the data type description information can also be different from the data field name. For example, it can be setting the enumeration type of the data. The enumeration type corresponding to the data field in the data content is "trade_money", and the enumeration type corresponding to the data field of the keys field is "simple_hour", and so on.

[0078] Backend developers can pre-define the correspondence between data type descriptions and data units. For example, "trade_money" corresponds to the data unit "yuan", "simple_hour" corresponds to the data unit "hour", and so on.

[0079] When the front-end needs to display data of type "trade_money" in the data field in units of "ten thousand yuan", it can determine the corresponding data unit based on the data type description information and the correspondence between the data type description information and the data unit. Then, it can use data unit conversion code to convert the data content of type "trade_money" in the data field to the unit. For example, if the data content of the data field is 10000, the calculated result after conversion will be 1.

[0080] For example, such as Figure 4 As shown, Figure 4 The 401 error in the image is a screenshot of the page generated after running and displaying a target code file. Backend developers can write the value 110000 into the data content of the component data. In the sub-component corresponding to "Transaction Amount", the data unit conversion can be omitted, and the value 110000 can be processed and displayed directly.

[0081] However, in the line chart section, or when the user performs a click, swipe, or other triggered action, the terminal displays the following in response to the user's action: Figure 4 When displaying the data component for "Transaction amount of 110,000 on July 6" in error code 402, it is necessary to perform unit conversion and other processing on 110,000 before displaying it.

[0082] In some specific implementations, to facilitate backend developers in writing component data, different programming standards can be adopted if the frontend needs to display data with different dimensions. For example, a simple programming dimension can be used for 0-dimensional or 1-dimensional data, while a more complex programming dimension can be used for 2-dimensional or multi-dimensional data. For instance, if the backend needs to provide transaction data for two users, when the frontend displays the data using a 1-dimensional data display component, the transaction data for both users can be directly written in the same array; when the frontend displays the data using a 2-dimensional or multi-dimensional data display component, the transaction data for only one user can be written for each set of data.

[0083] Understandably, for data display components, the processing method for component data will differ depending on the dimensions that need to be displayed. Therefore, after obtaining the component data, we can first determine the programmed dimensions of the component data. If the programmed dimensions of the component data match the data dimensions that the data display component needs to display, then the component data can be processed. That is, component data can include data dimensions, and data display components can include the displayable dimensions of the component. Based on the data processing code corresponding to the target data content in each data display component, and the target data content, before running and displaying the target code file, the following steps are also included: The process involves retrieving the data dimensions from the component data. If the data dimension is not greater than the component's displayable dimension, the process then executes the data processing code corresponding to the target data content in each data display component, along with the target data content, and runs and displays the target code file.

[0084] The "displayable dimensions" of a component refers to the number of dimensions that the data display component can display. For example, developers can set the number of dimensions that a pie chart can display to 1, and the number of dimensions that a line chart can display to 1, 2, and 3. In this case, the displayable dimensions of a data display component containing a pie chart are 1, and the displayable dimensions of a data display component containing a line chart are 3.

[0085] Understandably, if the data dimensions exceed the displayable dimensions of the component, the data display component may not be able to display the data content or the corresponding calculation results correctly.

[0086] Among them, the data dimension in the component data can be obtained by judging based on the data structure in the component data. For example, if the transaction data of two users are directly written in the same array, it can be judged that the data dimension of the component data is 1-dimensional; if each group of data corresponds to the transaction data of only one user, it can be judged that the data dimension of the component data is 2-dimensional or multi-dimensional, and so on.

[0087] Therefore, data dimensions can be directly written into the component data, and the data dimensions in the component data can be obtained by reading these data dimensions. For example, the component data can include a field called "dimension_count", and the value corresponding to this field is the data dimension of the component data, and so on.

[0088] Judging the data dimensions of a component solely from its data structure can lead to issues. If the component's data has a problem, even if its structure corresponds to a data display component for a specific dimension, the component will still display correctly, but the displayed data will be incorrect. Therefore, it's advisable to first determine the dimensions. If the data dimension doesn't match the component's displayable dimensions, an error message should be sent to the developers or users.

[0089] It should be noted that the data dimension mentioned in this embodiment of the invention does not refer to the number of independent spatiotemporal coordinates in fields such as mathematics or physics, such as an infinitesimally small point with no length being 0-dimensional, or a plane being 2-dimensional, etc. The data dimension in this embodiment refers to the dimension used when observing or representing a set of data; it can be understood as a dimension of thought or evaluation. For example, for a group of users, users can be divided into new users and old users based on the data dimension. In this case, the data dimension is a 1-dimensional dimension of new and old users, which is an evaluation dimension of user identity.

[0090] For example, such as Figure 5 As shown, the actual display dimensions of the data display component are 3 dimensions, namely new customers, retained customers, and returning customers.

[0091] In some optional examples, the data display component can contain specific component code. When it is necessary to display the component, the code of each data display component can be executed directly to display the data display component.

[0092] In some alternative embodiments, to improve the efficiency of front-end development, developers can pre-develop some components with preset styles for front-end developers to choose from during development. By selecting the component style to use, front-end developers can save time developing that component.

[0093] Therefore, the data display component may not include specific component code, but rather a target component type identifier. Before the step "run and display the target code file based on the component data of each data display component," it may also include: The component mapping relationship set is obtained according to the running instructions. The component mapping relationship set includes the mapping relationship between the preset component type identifier and the preset component display style. Based on the component mapping relationship set and the component type identifier of the data display component, determine the component display style corresponding to each data display component; Based on the component data of each data display component, the target code file is run and displayed, including: Based on the component data and display style of each data display component, the target code file is run and displayed.

[0094] In front-end development, the display effect of page components is generally generated based on preset styles. For example, styles may include the width and height of a list, the font color and font size of a pie chart, the background color of a bar chart, and the position of each component on the page, etc.

[0095] The component type identifier can be a component name, component identifier number, or other identifier that can distinguish each component in the preset component display styles. For example, the preset component display styles may include style 1, style 2, and style 3. When the component type identifier in the data display component is 1, it can be assumed that the preset component display style 1 should be used.

[0096] Specifically, the preset component display styles can be stored in the style template library in correspondence with the component type identifiers. The set of component mapping relationships can be obtained according to the running instructions. This can be the process of accessing the style template library when the target code file runs to the code that includes the target component type identifier.

[0097] In practical applications, a component display style may only provide the display effect of the component, while the specific display content in the component can be set by the front-end developer according to the requirements. In order to make the set content display in the corresponding position of the component display style, a component display style includes at least one content display style. Data display components may include preset display content and content display style identifiers. Based on the component data and display styles of each data display component, the target code file is run and displayed, which may include: Based on the content display style identifier of the data display component, determine the content display style corresponding to the preset display content from the component display styles of the data display component; Based on the component data, preset display content, and corresponding display styles of each data display component, the target code file is run and displayed.

[0098] The content display style can correspond to a specific component position within the component. In other words, the component display style can be set to display content A at position A with style A, and content B at position B with style B.

[0099] The content display style identifier can be a field name or parameter name of the displayed content, or an identifier that can distinguish each style in the preset content display styles. For example, the preset content display styles may include style a, style b, and style c. When the content display style identifier in the data display component is a, it can be assumed that the preset content display style a should be used.

[0100] Understandably, as user needs evolve and change, developers can continuously create new component display styles during the development process. When the style template library does not contain the component display styles developed by front-end developers, new component display styles can be stored in the style template library. This makes it easier for front-end developers to determine the component display style directly from the component mapping relationship set if they need to use it again in the future, without having to redevelop it.

[0101] In other words, before the step "obtain the data mapping relationship set according to the running instructions", it may also include: Receive the new component display style and the component type identifier set for the new component display style; Set a new component type identifier and a mapping relationship between the new component type identifier and the new component display style in the component mapping relationship set to obtain the updated component mapping relationship set.

[0102] In some optional embodiments, machine learning is used to identify components from a pre-designed user interface (UI) diagram. Based on the identification results, the corresponding components are selected from the template library to generate target code files, thus realizing the automatic transformation from UI diagram to code generation. That is, before the step "receiving the execution instructions for the target code file", the following steps may also be included: Retrieve a set of data display page images and component mapping relationships, where each data display page image includes at least one component display style element; Perform element parsing on the data display page image to obtain at least one component display style element; Based on the display style elements of each component, determine the component type identifier corresponding to each component's display style element from the component mapping relationship set; The target code file is generated based on the component type identifier corresponding to the display style elements of each component.

[0103] The data display page image can be a pre-designed UI image. This embodiment of the invention does not limit the format and content of the data display page image.

[0104] Among them, component display style elements are components drawn in the UI diagram. For example, text display components, table components, line chart components, etc., drawn in the UI diagram can all be considered as component display style elements.

[0105] For example, after parsing the table component from the data display page image, the component type identifier corresponding to the table component can be determined from the component mapping relationship set. Based on the component type identifier, the target code file is generated.

[0106] In practical applications, front-end developers can test the target code file to facilitate verification of the development results. If back-end developers have not yet completed data creation, they can use simulated data to test the target code file.

[0107] In other words, the component data can be simulated data, which can be used to simulate the data that the target code file needs to obtain from other file or database storage locations during normal operation.

[0108] As disclosed in the data display method of this invention, the component data can be stored on a blockchain.

[0109] As can be seen from the above, the solution of this embodiment of the invention can receive the running instruction of the target code file, which includes at least one data display component. A data mapping relationship set is obtained according to the running instruction. This data mapping relationship set includes the mapping relationship between the data display component and component data in a preset data format. A set of component data corresponds to at least one data display component. Based on the data mapping relationship set, the component data corresponding to each data display component is obtained. Based on the component data of each data display component, the target code file is run and displayed. Since the component data in this embodiment of the invention is in a preset data format, the same set of component data can correspond to at least one data display component. When front-end developers develop different data display components, they can still call the same set of component data. Therefore, front-end and back-end developers can independently develop the data display page, and there is no need to communicate when displaying in different component forms, thus improving software development efficiency.

[0110] Based on the methods described in the preceding embodiments, the following examples will provide further detailed explanations.

[0111] In this embodiment, the combination Figure 1 The system is illustrated using an example of a data display component included in the target code file.

[0112] like Figure 6 As shown, the data display method in this embodiment can be described in the following specific steps: 601. The terminal receives the execution instruction of the target code file and runs the target code file.

[0113] Specifically, a developer might develop a program on a terminal, generate a target code file, and then trigger the execution of that target code file on the terminal. The terminal, in response to the developer's trigger, generates execution instructions for the target code file and begins running it.

[0114] Alternatively, it could be a target code file that has already been developed by the developers and deployed on the user's terminal after the user's installation or other operations. When the user requests to display a certain page, the terminal can be triggered to generate a run instruction for the target code file and start running the target code file.

[0115] Alternatively, other electronic devices can directly send execution instructions for the target code file to the terminal, such as controlling the terminal's operation through remote control, and so on.

[0116] 602. When the terminal runs to the line of code where the data display component is located, it generates a component retrieval request based on the component type identifier in the data display component.

[0117] For example, the programming specification can require developers to use classes with the identifier "modules" when writing data display components. When the terminal runs to the line of code containing "modules", it will trigger the terminal to detect the component type identifier in the code within the "modules" class.

[0118] For example, developers can write the following code in the target code file to represent a data display component: “modules”:[{ “name”:“text1”, "component":"decoration-text", "content": "Transaction Overview" The `component` parameter indicates the component type; for example, if the target component type in this data display component is identified as `decoration-text`, this type of component corresponds to a specific component. The `name` parameter is a custom name defined by the developer for the component. When multiple components of the same type exist in the target code file, they can be distinguished based on their custom names. The `content` parameter specifies the content to be displayed in the component, meaning that after the target code file completes execution, the data display component on the page should include the "Transaction Overview" content.

[0119] The terminal can generate a request to obtain the target component indicated by the target component type identifier, decoration-text, based on the target component type identifier.

[0120] 603. The terminal obtains the component mapping relationship set and determines that the component mapping relationship set includes the component type identifier of the data display component.

[0121] For example, the component mapping set can store components of type decoration-text, normal-text, and simpletab, etc. The terminal can obtain the target component corresponding to the request based on the target component and determine whether the component mapping set includes a target component of that type.

[0122] Understandably, if the component mapping set does not include a target component of that type, the execution of the target code file can be stopped, and a runtime error can be displayed to the developers or users. Alternatively, the target component can be compiled using normal code compilation methods, and so on.

[0123] 604. The terminal determines the component display style corresponding to the data display component based on the component mapping relationship set and the target component type identifier.

[0124] In some examples, to save terminal storage space, the terminal may only store a set of component mapping relationships, which simply represent the correspondence between component types and components. When the set of component mapping relationships includes a target component type, the display style corresponding to the target component type can be obtained from the server.

[0125] In other examples, the terminal may store not only the mapping relationship but also the component display style of each component in the mapping relationship. When it is determined that the target component type is included in the component mapping relationship set, the component display style corresponding to the target component type can be directly obtained from the storage location of the component display style in the terminal.

[0126] 605. The terminal obtains the data mapping relationship set and, based on the data mapping relationship set, obtains the component data corresponding to the data display component.

[0127] In some embodiments, the set of data mapping relationships can be an Application Programming Interface (API) set by the developers in the target code file. Through the data API, the target code file can access component data provided by the backend developers.

[0128] Understandably, if a front-end and back-end separation development approach is not adopted, frequent changes to the front-end content or back-end data based on business needs will affect the overall page development progress.

[0129] In a front-end and back-end separation development scenario, front-end development relies on back-end interface data. However, if there are insufficient back-end developers or they are unable to complete the back-end development, the front-end development cannot start for a long time. Alternatively, front-end developers may refer to the page design and complete the corresponding static page (without data interaction). They can only wait for the back-end developers to complete the back-end development before they can carry out secondary development and assist in completing the interface integration.

[0130] In the solution of this invention embodiment, even if the backend developers have not yet configured the backend data, the frontend developers can develop and debug the data display component through preset simulated data.

[0131] Therefore, in other embodiments, the data mapping set can be directly set in the target code file, or the data mapping set can be stored in correspondence with the component display style, and so on.

[0132] The corresponding component data can be mock data. Front-end developers can first conduct simulated development based on mock data. With mock data, front-end and back-end developers only need to define the interface documents to start working in parallel. Their development progress does not affect each other. They only need to connect the data interface of the back-end developers in the final integration testing stage.

[0133] In practical applications, front-end and back-end developers can define the data API together after breaking down development requirements. The data API can include: a Uniform Resource Locator (URL), request method, request parameters, and data response method. For example, the URL can typically be a project prefix and / or the specific API name, etc.

[0134] Front-end developers can simulate the data to be displayed when the request is returned, based on the interface agreement.

[0135] When the terminal runs the target code file, it can simulate data interaction with the target code file based on the simulated mock data.

[0136] Backend developers develop the corresponding data APIs according to the interface agreements. After the backend developers deliver the APIs, frontend developers can directly modify the data APIs. After switching from the simulated data environment to the corresponding real data environment, the entire project can be submitted to the testers for testing.

[0137] 606. The terminal determines the data dimension of the data content in the component data and the data type corresponding to each data content based on the metadata in the component data.

[0138] The data content description information can be metadata. Metadata is data that describes other data, or structured data used to provide information about a certain resource. Metadata describes information resources or data objects, and its purpose is to: identify resources; evaluate resources; track changes in resources during use; achieve simple and efficient management of large amounts of networked data; and achieve effective discovery, retrieval, integrated organization, and effective management of information resources.

[0139] For example, component data can be represented by the following code: “data”:{ "result":{ "data":["1111","1234"], “index”:{“keys”:[“1”,“2”],“names”:[“new user”,“old user”]}, “meta”:{ “data_value”:{“alias”:“Number of Traders”,“description”:“Number of Traders”,“name”:“trade_user”,“type”:“trade_user”}, “dimension_count”:1, “index_key”:{“alias”:“New and Existing Users”,“description”:“New and Existing Users (1-New User, 2-Existing User, 999-Total)”,“name”:“act_type”,“type”:“act_type”}}}} The information in the meta tag is the data content description information, which describes the data in the data tag. For example, it can be used to describe information about fields such as primary dimension, secondary dimension, and numerical values.

[0140] For example, the `dimension_count` field in the `meta` attribute can indicate the number of dimensions in the data, used to distinguish between zero-dimensional, one-dimensional, two-dimensional, and multi-dimensional data. The `data_value` field is also a data content description, used to describe the metadata of numeric fields, while the `index_key` field describes the metadata of the primary dimension field. The `alias` field indicates the unit of data, and the `description` field provides a descriptive description of the data to facilitate understanding. `name` represents the value displayed in the corresponding primary or secondary dimension, and `type` indicates the type.

[0141] 607. The terminal processes data based on the data display dimensions of each data display component, the data content corresponding to each data display component, and the data type corresponding to the data content.

[0142] For example, the terminal can first determine whether the data display component can display the data content in the component data correctly based on the data dimensions in the metadata and the data display dimensions of the data display component.

[0143] If the data dimension is no greater than the data display dimension, then the data content is calculated accordingly. For example, when a line chart needs to be displayed, the unit is converted according to the data content and data type, and the slope of the line in the line chart is calculated based on the conversion result, and so on.

[0144] 608. The terminal runs and displays the target code file based on the data processing results.

[0145] The execution and display of the target code file can refer to running the code in the target code file and generating a data display page corresponding to the target code file based on the execution results.

[0146] As can be seen from the above, since the component data in the embodiments of the present invention is in a preset data format, the same set of component data can correspond to at least one data display component. When the front-end developers develop different data display components, they can also call the same set of component data. Therefore, the front-end and back-end developers can independently develop the data display page, and there is no need to communicate when displaying in different component forms, which improves the efficiency of software development.

[0147] To better implement the above methods, the present invention also provides a data display device.

[0148] refer to Figure 7 The device may include: The instruction receiving unit 701 can be used to receive the execution instructions of the target code file, which may include at least one data display component. The set acquisition unit 702 can be used to acquire a set of data mapping relationships according to the running instructions. The set of data mapping relationships can include the mapping relationship between the data display component and the component data in the preset data format, wherein a set of component data corresponds to at least one data display component. The data acquisition unit 703 can be used to acquire the component data corresponding to each data display component based on the data mapping relationship set; The runtime display unit 704 can be used to run and display the target code file based on the component data of each data display component.

[0149] In an optional example, the component data in the preset data format may include at least one set of data content, the data display component may include data processing code corresponding to the target data content, the data processing code may be used to convert the target data content into the content displayed by the corresponding data display component, the running display unit 704 may include a data content determination unit 7041 and a data processing unit 7042, the data content determination unit 7041 may be used to determine the target data content that the data display component in the corresponding component data needs to process according to the data processing code in each data display component; The data processing unit 7042 can be used to run and display the target code file based on the data processing code corresponding to the target data content in each data display component and the target data content.

[0150] In an optional example, the component data may also include data display style identifiers corresponding to each data content. The data processing code may include data calculation code and calculation result display code. The data calculation code can be used to calculate the target data content to obtain the calculation result. The calculation result display code can be used to display the calculation result according to the result display style corresponding to the calculation result determined by the data display style identifier, so as to obtain the content displayed by the data display component. The data processing unit 7042 can be used to calculate the target data content according to the data calculation code corresponding to the target data content in each data display component, and obtain the calculation result corresponding to the target data content. Based on the data display style identifier corresponding to each data content, determine the result display style corresponding to the calculation result of each data content in the component data in the component display style of the data display component; By using the calculation result display code corresponding to the target data content in each data display component, the calculation result corresponding to the target data content is displayed according to the result display style corresponding to the calculation result, thus obtaining the content displayed by each data display component; Based on the content displayed by the data display component, the target code file is run and displayed.

[0151] In an optional example, the component data may also include data type description information, and the data calculation code may include data unit conversion code; The data processing unit 7042 can be used to determine the data unit corresponding to the target data content based on the data type description information corresponding to the target data content in each data display component, and the preset correspondence between the data type description information and the data unit. Based on the data unit conversion code corresponding to the target data content, and the data unit corresponding to the target data content, the unit conversion of the target data content is performed to obtain the calculation result corresponding to the target data content.

[0152] In an optional example, the component data may also include data dimensions, and the data display component may also include displayable dimensions. The data processing unit 7042 may also include a data dimension judgment unit 705, which can be used to obtain the data dimensions in the component data. If the data dimension is not greater than the displayable dimension of the component, the step of running and displaying the target code file based on the data processing code corresponding to the target data content in each data display component and the target data content is executed.

[0153] In an optional example, the data display component may include a component type identifier, such as Figure 8 As shown, before the running display unit 704, there may be a display style determination unit 706, which can be used to obtain a component mapping relationship set according to the running instruction. The component mapping relationship set may include the mapping relationship between preset component type identifiers and preset component display styles. Based on the component mapping relationship set and the component type identifier of the data display component, determine the component display style corresponding to each data display component; The runtime display unit 704 can be used to run and display the target code file based on the component data and component display style of each data display component.

[0154] In an optional example, a component display style may include at least one content display style, and a data display component may also include preset display content and a content display style identifier; The operation display unit 704 can be used to determine the content display style corresponding to the preset display content from the component display styles of the data display component based on the content display style identifier of the data display component; Based on the component data, preset display content, and corresponding display styles of each data display component, the target code file is run and displayed.

[0155] In an optional example, a collection update unit 707 may be included before the collection acquisition unit 702, which can be used to receive the new component display style and the component type identifier set for the new component display style; Set a new component type identifier and a mapping relationship between the new component type identifier and the new component display style in the component mapping relationship set to obtain the updated component mapping relationship set.

[0156] In an optional example, the instruction receiving unit 701 may further include a code generation unit 708, which can be used to obtain a set of data display page images and component mapping relationships. The data display page images may include at least one component display style element. Perform element parsing on the data display page image to obtain at least one component display style element; Based on the display style elements of each component, determine the component type identifier corresponding to each component's display style element from the component mapping relationship set; The target code file is generated based on the component type identifier corresponding to the display style elements of each component.

[0157] In an optional example, component data may include mock data, which can be used to simulate the data required when the target code file is run.

[0158] As can be seen from the above, with the data display device provided by the embodiments of the present invention, when the front-end developers develop different data display components, they can also call the same set of component data. Therefore, the front-end and back-end developers can independently develop the data display page, and there is no need to communicate or redevelop when displaying in different component forms, which improves the efficiency of software development.

[0159] Furthermore, embodiments of the present invention also provide an electronic device, which may be a terminal or a server, etc. Figure 9 As shown, it illustrates a structural schematic diagram of the electronic device involved in an embodiment of the present invention, specifically: The electronic device may include a radio frequency (RF) circuit 901, a memory 902 including one or more computer-readable storage media, an input unit 903, a display unit 904, a sensor 905, an audio circuit 906, a wireless fidelity (WiFi) module 907, a processor 908 including one or more processing cores, and a power supply 909, among other components. Those skilled in the art will understand that... Figure 9 The electronic device structure shown does not constitute a limitation on the electronic device and may include more or fewer components than shown, or combine certain components, or have different component arrangements. Wherein: RF circuit 901 can be used for receiving and transmitting signals during information transmission or calls. Specifically, it receives downlink information from the base station and hands it over to one or more processors 908 for processing; additionally, it transmits uplink data to the base station. Typically, RF circuit 901 includes, but is not limited to, an antenna, at least one amplifier, a tuner, one or more oscillators, a Subscriber Identity Module (SIM) card, a transceiver, a coupler, a low-noise amplifier (LNA), a duplexer, etc. Furthermore, RF circuit 901 can also communicate wirelessly with networks and other devices. Wireless communication can use any communication standard or protocol, including but not limited to GSM, GPRS, CDMA, WCDMA, LTE, email, and SMS.

[0160] The memory 902 can be used to store software programs and modules. The processor 908 executes various functional applications and data processing by running the software programs and modules stored in the memory 902. The memory 902 may mainly include a program storage area and a data storage area. The program storage area may store the operating system, application programs required for at least one function (such as sound playback function, image playback function, etc.), etc.; the data storage area may store data created according to the use of the electronic device (such as audio data, telephone directory, etc.). In addition, the memory 902 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, or other volatile solid-state storage device. Accordingly, the memory 902 may also include a memory controller to provide access to the memory 902 for the processor 908 and the input unit 903.

[0161] Input unit 903 can be used to receive input digital or character information, and to generate keyboard, mouse, joystick, optical, or trackball signal inputs related to user settings and function control. Specifically, in one embodiment, input unit 903 may include a touch-sensitive surface and other input devices. A touch-sensitive surface, also known as a touch display or touchpad, can collect user touch operations on or near it (e.g., user operations using fingers, styluses, or any suitable object or accessory on or near the touch-sensitive surface) and drive corresponding connection devices according to a pre-set program. Optionally, the touch-sensitive surface may include a touch detection device and a touch controller. The touch detection device detects the user's touch location and the signal generated by the touch operation, transmitting the signal to the touch controller; the touch controller receives touch information from the touch detection device, converts it into touch point coordinates, sends it to the processor 908, and can receive and execute commands from the processor 908. Furthermore, various types of touch-sensitive surfaces, such as resistive, capacitive, infrared, and surface acoustic wave, can be used. In addition to the touch-sensitive surface, input unit 903 may also include other input devices. Specifically, other input devices may include, but are not limited to, one or more of the following: physical keyboard, function keys (such as volume control buttons, power buttons, etc.), trackball, mouse, joystick, etc. Display unit 904 can be used to display information input by the user or information provided to the user, as well as various graphical user interfaces of electronic devices. These graphical user interfaces can be composed of graphics, text, icons, video, and any combination thereof. Display unit 904 may include a display panel, optionally configured as a liquid crystal display (LCD), organic light-emitting diode (OLED), or similar form. Furthermore, a touch-sensitive surface may cover the display panel. When the touch-sensitive surface detects a touch operation on or near it, it transmits the information to processor 908 to determine the type of touch event. Subsequently, processor 908 provides corresponding visual output on the display panel according to the type of touch event. Although in Figure 9 In this context, the touch-sensitive surface and the display panel are two separate components for implementing input and output functions. However, in some embodiments, the touch-sensitive surface and the display panel can be integrated to achieve both input and output functions.

[0162] Electronic devices may also include at least one sensor 905, such as a light sensor, a motion sensor, and other sensors. Specifically, the light sensor may include an ambient light sensor and a proximity sensor, wherein the ambient light sensor can adjust the brightness of the display panel according to the ambient light level, and the proximity sensor can turn off the display panel and / or backlight when the electronic device is moved to the ear. As a type of motion sensor, a gravity acceleration sensor can detect the magnitude of acceleration in various directions (generally three axes), and can detect the magnitude and direction of gravity when stationary. It can be used for applications that recognize the phone's posture (such as landscape / portrait switching, related games, magnetometer posture calibration), vibration recognition-related functions (such as pedometers, taps), etc. Other sensors that may be configured in electronic devices, such as gyroscopes, barometers, hygrometers, thermometers, and infrared sensors, will not be described in detail here.

[0163] Audio circuitry 906, a speaker, and a microphone provide an audio interface between the user and the electronic device. Audio circuitry 906 converts received audio data into electrical signals, transmits them to the speaker, and the speaker converts them into sound signals for output. Conversely, the microphone converts collected sound signals into electrical signals, which are then received by audio circuitry 906, converted back into audio data, and processed by processor 908. The processed data is then transmitted via RF circuitry 901 to, for example, another electronic device, or output to memory 902 for further processing. Audio circuitry 906 may also include an earphone jack to facilitate communication between external headphones and the electronic device.

[0164] WiFi is a short-range wireless transmission technology. Electronic devices using the WiFi module 907 can help users send and receive emails, browse web pages, and access streaming media, providing users with wireless broadband internet access. Although Figure 9 WiFi module 907 is shown, but it is understood that it is not a necessary component of the electronic device and can be omitted as needed without changing the nature of the invention.

[0165] The processor 908 is the control center of the electronic device. It connects various parts of the phone via various interfaces and lines, and performs various functions and processes data by running or executing software programs and / or modules stored in the memory 902, and by calling data stored in the memory 902, thereby performing overall detection of the phone. Optionally, the processor 908 may include one or more processing cores; preferably, the processor 908 may integrate an application processor and a modem processor, wherein the application processor mainly handles the operating system, user interface, and applications, and the modem processor mainly handles wireless communication. It is understood that the modem processor may also not be integrated into the processor 908.

[0166] The electronic device also includes a power supply 909 (such as a battery) that supplies power to various components. Preferably, the power supply can be logically connected to the processor 908 through a power management system, thereby enabling functions such as charging, discharging, and power consumption management through the power management system. The power supply 909 may also include one or more DC or AC power supplies, recharging systems, power fault detection circuits, power converters or inverters, power status indicators, and other arbitrary components.

[0167] Although not shown, the electronic device may also include a camera, Bluetooth module, etc., which will not be described in detail here. Specifically, in this embodiment, the processor 908 in the electronic device loads the executable files corresponding to the processes of one or more applications into the memory 902 according to the following instructions, and the processor 908 runs the applications stored in the memory 902 to realize various functions, as follows: Receives execution instructions for an object code file, the object code file including at least one data display component; The data mapping relationship set is obtained according to the running instructions. The data mapping relationship set includes the mapping relationship between the data display component and the component data in the preset data format. Among them, a set of component data corresponds to at least one data display component. Based on the data mapping relationship set, obtain the component data corresponding to each data display component; Based on the component data of each data display component, the target code file is run and displayed.

[0168] Those skilled in the art will understand that all or part of the steps in the various methods of the above embodiments can be performed by instructions, or by instructions controlling related hardware. These instructions can be stored in a computer-readable storage medium and loaded and executed by a processor.

[0169] To this end, embodiments of the present invention provide a computer-readable storage medium storing a plurality of instructions that can be loaded by a processor to execute steps in any of the data display methods provided in the embodiments of the present invention. For example, the instructions can execute the following steps: Receives execution instructions for an object code file, the object code file including at least one data display component; The data mapping relationship set is obtained according to the running instructions. The data mapping relationship set includes the mapping relationship between the data display component and the component data in the preset data format. Among them, a set of component data corresponds to at least one data display component. Based on the data mapping relationship set, obtain the component data corresponding to each data display component; Based on the component data of each data display component, the target code file is run and displayed.

[0170] For details on the implementation of each of the above operations, please refer to the previous examples, which will not be repeated here.

[0171] The computer-readable storage medium may include: read-only memory (ROM), random access memory (RAM), disk or optical disk, etc.

[0172] Since the instructions stored in the computer-readable storage medium can execute the steps in any of the data display methods provided in the embodiments of the present invention, the beneficial effects that any of the data display methods provided in the embodiments of the present invention can achieve can be realized, as detailed in the preceding embodiments, and will not be repeated here.

[0173] According to one aspect of this application, a computer program product or computer program is also provided, comprising computer instructions stored in a computer-readable storage medium. A processor of an electronic device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the electronic device to perform the methods provided in the various optional implementations of the above embodiments.

[0174] The present invention has provided a detailed description of a data display method, apparatus, electronic device, and storage medium. Specific examples have been used to illustrate the principles and implementation methods of the present invention. The description of the above embodiments is only for the purpose of helping to understand the method and core ideas of the present invention. At the same time, those skilled in the art will know that there will be changes in the specific implementation methods and application scope based on the ideas of the present invention. Therefore, the content of this specification should not be construed as a limitation of the present invention.

Claims

1. A data display method, characterized in that, include: Receives an execution instruction for a target code file, the target code file including at least one data display component; The data mapping relationship set is obtained according to the running instructions. The data mapping relationship set includes the mapping relationship between data display components and component data in a preset data format. A set of component data corresponds to at least one data display component. Different data display components can call the same set of component data. Based on the data mapping relationship set, obtain the component data corresponding to each of the data display components; The process of running and displaying the target code file based on the component data of each of the data display components includes: determining the target data content that the data display component needs to process in the corresponding component data based on the data processing code in each of the data display components; calculating the target data content based on the data calculation code corresponding to the target data content in each of the data display components to obtain the calculation result corresponding to the target data content; determining the result display style corresponding to the calculation result of each data content in the component display style of the data display component based on the data display style identifier corresponding to each data content; displaying the calculation result corresponding to the target data content according to the result display style corresponding to the calculation result through the calculation result display code corresponding to the target data content in each of the data display components to obtain the content displayed by each of the data display components; and running and displaying the target code file based on the content displayed by the data display components.

2. The data display method according to claim 1, characterized in that, The component data in the preset data format includes at least one set of data content, and the data display component includes data processing code corresponding to the target data content. The data processing code is used to convert the target data content into the content displayed by the corresponding data display component.

3. The data display method according to claim 2, characterized in that, The component data also includes a data display style identifier corresponding to each of the data contents. The data processing code includes a data calculation code and a calculation result display code. The data calculation code is used to calculate the target data content to obtain a calculation result. The calculation result display code is used to display the calculation result according to the result display style corresponding to the calculation result determined by the data display style identifier, so as to obtain the content displayed by the data display component.

4. The data display method according to claim 3, characterized in that, The component data also includes data type description information, and the data calculation code includes data unit conversion code; The step of calculating the target data content based on the data calculation code corresponding to the target data content in each of the data display components to obtain the calculation result corresponding to the target data content includes: Based on the data type description information corresponding to the target data content in each of the data display components, and the preset correspondence between the data type description information and the data unit, the data unit corresponding to the target data content is determined. Based on the data unit conversion code corresponding to the target data content and the data unit corresponding to the target data content, the target data content is converted to a unit to obtain the calculation result corresponding to the target data content.

5. The data display method according to claim 2, characterized in that, The component data also includes data dimensions, and the data display component also includes component displayable dimensions; Before running and displaying the target code file based on the content displayed by the data display component, the method further includes: Obtain the data dimension from the component data. If the data dimension is not greater than the displayable dimension of the component, execute the step of running and displaying the target code file based on the content displayed by the data display component.

6. The data display method according to claim 1, characterized in that, The data display component includes a component type identifier; Before running and displaying the target code file based on the component data of each of the data display components, the method further includes: The component mapping relationship set is obtained according to the running instruction. The component mapping relationship set includes the mapping relationship between preset component type identifiers and preset component display styles. Based on the component mapping relationship set and the component type identifier of the data display component, determine the component display style corresponding to each data display component; The step of running and displaying the target code file based on the component data of each of the data display components includes: Based on the component data and component display style of each of the data display components, the target code file is run and displayed.

7. The data display method according to claim 6, characterized in that, A component display style includes at least one content display style, and the data display component further includes preset display content and a content display style identifier; The step of running and displaying the target code file based on the component data and component display style of each of the data display components includes: Based on the content display style identifier of the data display component, determine the content display style corresponding to the preset display content from the component display styles of the data display component; The target code file is run and displayed based on the component data of each data display component, the preset display content, and the content display style corresponding to the preset display content.

8. The data display method according to claim 6, characterized in that, Before obtaining the data mapping relationship set according to the running instructions, the method further includes: Receive a new component display style and a component type identifier set for the new component display style; In the component mapping relationship set, the new component type identifier and the mapping relationship between the new component type identifier and the new component display style are set to obtain the updated component mapping relationship set.

9. The data display method according to claim 6, characterized in that, Before receiving the execution instructions for the target code file, the process also includes: Obtain a set of data display page images and component mapping relationships, wherein the data display page images include at least one component display style element; The data display page image is parsed to obtain at least one component display style element; Based on the display style elements of each component, determine the component type identifier corresponding to each component display style element from the component mapping relationship set; Based on the component type identifier corresponding to each component display style element, generate the target code file.

10. The data display method according to any one of claims 1-9, characterized in that, The component data includes simulation data, which is used to simulate the data required for the target code file to run.

11. A data display device, characterized in that, include: An instruction receiving unit is configured to receive execution instructions for a target code file, wherein the target code file includes at least one data display component. The set acquisition unit is used to acquire a set of data mapping relationships according to the running instructions. The set of data mapping relationships includes the mapping relationship between data display components and component data in a preset data format. A set of component data corresponds to at least one data display component. Different data display components can call the same set of component data. The data acquisition unit is used to acquire component data corresponding to each of the data display components according to the data mapping relationship set; The execution display unit is configured to execute and display the target code file based on the component data of each of the data display components, including: determining the target data content that the data display component needs to process in the corresponding component data of each data display component according to the data processing code in each data display component; calculating the target data content according to the data calculation code corresponding to the target data content in each data display component to obtain the calculation result corresponding to the target data content; determining the result display style corresponding to the calculation result of each data content in the component display style of the data display component according to the data display style identifier corresponding to each data content; displaying the calculation result corresponding to the target data content according to the result display style corresponding to the calculation result through the calculation result display code corresponding to the target data content in each data display component to obtain the content displayed by each data display component; and executing and displaying the target code file based on the content displayed by the data display components.

12. An electronic device, characterized in that, It includes a memory and a processor; the memory stores an application program, and the processor runs the application program within the memory to perform the steps in the data display method according to any one of claims 1 to 10.

13. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a plurality of instructions adapted for loading by a processor to perform the steps of the data display method according to any one of claims 1 to 10.

14. A computer program product, characterized in that, The computer program product includes computer instructions stored in a computer-readable storage medium; the processor of the electronic device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the electronic device to perform the steps in the data display method as described in any one of claims 1 to 10.

Images