Method and device for customizing prompt components of ECharts charts

Abstract

The embodiment of the present invention provides a method, device and electronic device for customizing prompt components of an ECharts chart, belonging to the field of data processing technology. The method includes: receiving a parameter set P inputted from the outside through props, extracting configuration parameters from the parameter set P; using the init method in the ECharts library to create a new ECharts instance according to the chartID, and constructing a complete ECharts configuration object; for the prompt box style T, using a custom CSS class for flexible customization; for the data item di contained in the ECharts chart, formatting the data item di into a string through the formatting function fmt; setting the enterable property of the prompt box to true through the function fet, if the data item set D is not empty, applying performance optimization measures and rendering the prompt box content, otherwise, not doing anything. The present invention improves the customizability and interactive experience of ECharts charts.

Description

Technical Field

[0001] The present invention relates to the technical field of data processing, and in particular to a method, device and electronic device for customizing an ECharts chart prompt component. Background Art

[0002] The tooltip component of ECharts is a very important interactive component, which is used to display relevant data information when users interact with the chart. The tooltip component usually appears when the user hovers the mouse over a data point or area of ​​the chart and displays the specific information of the data point.

[0003] In the process of using the prompt component of the ECharts chart in the prior art, there are the following problems:

[0004] 1. Imprecise position control: The default position option of ECharts makes it difficult to accurately control the position of the tooltip, especially when the chart size changes dynamically, which will cause the tooltip to be displayed in an unreasonable position or be truncated.

[0005] 2. Limited formatting capabilities: The default formatter options of ECharts are relatively simple, and it is difficult to implement complex custom layouts and styles, such as multi-column layouts, conditional styles, etc.

[0006] 3. Limited style customization: The default style options provided are relatively basic, and it is difficult to achieve some special visual effects, such as custom backgrounds, border styles, shadow effects, etc.

[0007] The above problems become technical problems that need to be solved. Summary of the invention

[0008] In view of this, the embodiments of the present invention provide a method, device and electronic device for customizing a prompt component of an ECharts chart, which at least partially solve the problems existing in the prior art.

[0009] In a first aspect, an embodiment of the present invention provides a method for customizing a prompt component of an ECharts chart, comprising:

[0010] Receive the parameter set P passed in from the outside through props, and extract the configuration parameter C={chartID, color, xAxisData, series} from the parameter set P. ChartID indicates the ID of the target container for rendering the specified ECharts chart, color indicates the color theme of the defined chart, xAxisData indicates the data of the X-axis of the ECharts chart, and series indicates the actual data series displayed in the ECharts chart.

[0011] Use the init method in the ECharts library to create a new ECharts instance E=echarts.init(chartID) according to the chartID, and build a complete ECharts configuration object O=fc(C), where fc is a configuration function. fc accepts the configuration parameter C as input and returns a complete ECharts configuration object O. The configuration object O contains color, tooltip style, legend information, and axis setting information.

[0012] For the tooltip style T, a custom CSS class is used for flexible customization, T=Tcss+{tooltipClassName,chartID}, Tcss is the tooltip CSS style class set, tooltipClassName is a custom class name, which is used to apply a specific CSS style to the tooltip in the ECharts chart. For any point (x, y) on the ECharts chart, calculate its adjusted position pos=fps(x, y), and satisfy fps(x, y)=(x′, y′), (x′, y′) is the adjusted position coordinate, ensuring 0≤x′≤W, 0≤y′≤H, fps is the position calculation function, converts the logical coordinates of any point (x, y) on the ECharts chart into pixel coordinates, and determines the best position by calculation, so that the tooltip does not exceed the boundary of the visible area, W, H are the width and height of the ECharts chart container respectively;

[0013] For the data item di contained in the ECharts chart, the data item di is formatted into a string si=fmt(di,L) through the formatting function fmt, where L is the target language L displayed by the ECharts chart, and the corresponding HTML structure is generated by modifying the formatter function;

[0014] The enterable property of the prompt box is set to true through the function fet, fet(T)=T.enterable=true, allowing users to interact with the prompt box content. For each data item di, an attribute named data-series-item is attached to it. This attribute contains the serialized data item set D, which is used to obtain relevant information when processing click events. If the data item set D is not empty, performance optimization measures are applied and the prompt box content is rendered. Otherwise, no operation is performed.

[0015] According to a specific implementation of the embodiment of the present disclosure, the receiving of an externally input parameter set P through props and extracting a configuration parameter C from the parameter set P includes:

[0016] Extract chartID from parameter set P. ChartID is an identifier used to specify the target DOM element for ECharts chart rendering.

[0017] Extracts color from the parameter set P. color is a color array used to define the color theme of the chart.

[0018] According to a specific implementation of the embodiment of the present disclosure, the receiving of an externally input parameter set P through props, and extracting a configuration parameter C from the parameter set P, further includes:

[0019] Extract xAxisData from the parameter set P. xAxisData is the data point on the X-axis. xAxisData is saved in array form.

[0020] Extract the series from the parameter set P and save the series in the form of an array. Each element in the array is an object containing a data point.

[0021] According to a specific implementation of the embodiment of the present disclosure, the init method in the ECharts library is used to create a new ECharts instance E=echarts.init(chartID) according to the chartID, and to construct a complete ECharts configuration object O=fc(C), including:

[0022] Use chartID to get the corresponding container element from DOM, call ECharts' init method, and pass in the DOM element obtained in the previous step as a parameter;

[0023] Receive the ECharts instance object returned by the init method. The ECharts instance object is used for chart configuration and operation.

[0024] According to a specific implementation of the embodiment of the present disclosure, the init method in the ECharts library is used to create a new ECharts instance E=echarts.init(chartID) according to the chartID, and a complete ECharts configuration object O=fc(C) is constructed, which also includes:

[0025] Create an empty ECharts configuration object O, add the title attribute to the configuration object O, and set the corresponding text, position and style;

[0026] Use xAxisData extracted from C to configure the X-axis, setting the type, data, tick marks, and labels of the X-axis;

[0027] Use the series extracted from C to configure the data series of the chart. Each data series contains type, data, color and style.

[0028] Add the toolbox attribute to the configuration object O and set the corresponding tool options.

[0029] According to a specific implementation of the embodiment of the present disclosure, the prompt box style T is flexibly customized using a custom CSS class, including:

[0030] Define one or more custom CSS classes in the CSS file to set the background color, border, font, and padding of the tooltip.

[0031] In the ECharts configuration object, specify a dynamic class name for the tooltip. The dynamic class name is generated based on the passed tooltipClassName parameter.

[0032] In the tooltip configuration item of ECharts, set the className attribute to the custom CSS class name.

[0033] According to a specific implementation of the embodiment of the present disclosure, for the data item di included in the ECharts chart, formatting the data item di into a string through the formatting function fmt includes:

[0034] Define the formatting function fmt, which accepts the data item di as input and returns a formatted string;

[0035] Extract the required attributes from the data item di, and generate a string containing HTML tags and styles based on the extracted attributes. Use Tags to set different styles, use Tags to organize content.

[0036] According to a specific implementation of the embodiment of the present disclosure, setting the enterable attribute of the prompt box to true through the function fet includes:

[0037] Define the function fet, which is used to set the enterable property of the prompt box. The fet function accepts the ECharts instance or the prompt box configuration object as input parameters;

[0038] Get the prompt box configuration object from the passed in parameters. If the passed in parameter is an ECharts instance, the prompt box configuration is accessed through the instance to obtain the configuration object. If the passed in parameter is a prompt box configuration object, the prompt box configuration object is directly used as the input of the fet function.

[0039] In the prompt box configuration object, set the enterable property to true;

[0040] If an ECharts instance is passed in, call the setOption method to apply the updated tooltip configuration.

[0041] In a second aspect, an embodiment of the present invention provides a device for customizing a prompt component of an ECharts chart, comprising:

[0042] The extraction module receives the parameter set P passed in from the outside through props, and extracts the configuration parameter C={chartID, color, xAxisData, series} from the parameter set P, where chartID represents the ID of the target container for rendering the specified ECharts chart, color represents the color theme of the defined chart, xAxisData represents the data of the X-axis of the ECharts chart, and series represents the actual data series displayed in the ECharts chart;

[0043] Create a module, use the init method in the ECharts library to create a new ECharts instance E=echarts.init(chartID) according to the chartID, and build a complete ECharts configuration object O=fc(C), where fc is a configuration function. fc accepts the configuration parameter C as input and returns a complete ECharts configuration object O. The configuration object O contains color, tooltip style, legend information, and axis setting information.

[0044] Customization module, for the tooltip style T, use custom CSS class for flexible customization T=Tcss+{tooltipClassName,chartID}, Tcss is the tooltip CSS style class set, tooltipClassName is a custom class name, which is used to apply specific CSS style to the tooltip in the ECharts chart. For any point (x, y) on the ECharts chart, calculate its adjusted position pos=fps(x, y), and satisfy fps(x, y)=(x′, y′), (x′, y′) is the adjusted position coordinate, ensuring 0≤x′≤W, 0≤y′≤H, fps is the position calculation function, converts the logical coordinates of any point (x, y) on the ECharts chart into pixel coordinates, and determines the best position by calculation, so that the tooltip does not exceed the boundary of the visible area, W, H are the width and height of the ECharts chart container respectively;

[0045] The format module, for the data item di contained in the ECharts chart, formats the data item di into a string si=fmt(di,L) through the formatting function fmt, where L is the target language L displayed by the ECharts chart, and generates the corresponding HTML structure by modifying the formatter function;

[0046] The execution module sets the enterable property of the prompt box to true through the function fet, fet(T)=T.enterable=true, allowing the user to interact with the prompt box content. For each data item di, an attribute named data-series-item is attached to it. This attribute contains the serialized data item set D, which is used to obtain relevant information when processing click events. If the data item set D is not empty, performance optimization measures are applied and the prompt box content is rendered. Otherwise, no operation is performed.

[0047] In a third aspect, an embodiment of the present invention further provides an electronic device, the electronic device comprising:

[0048] at least one processor; and,

[0049] a memory communicatively connected to the at least one processor; wherein,

[0050] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to execute the method of the ECharts chart custom prompt component in any of the first aspects or any of the implementations of the first aspect.

[0051] In a fourth aspect, an embodiment of the present invention further provides a non-transitory computer-readable storage medium storing computer instructions for causing the computer to execute the method of customizing the prompt component of an ECharts chart in the aforementioned first aspect or any implementation of the first aspect.

[0052] In a fifth aspect, an embodiment of the present invention further provides a computer program product, which includes a computer program stored on a non-transitory computer-readable storage medium, and the computer program includes program instructions. When the program instructions are executed by a computer, the computer executes the method of the ECharts chart custom prompt component in the aforementioned first aspect or any implementation of the first aspect.

[0053] The scheme of the ECharts chart custom prompt component in the embodiment of the present invention includes: receiving a parameter set P inputted from the outside through props, extracting configuration parameters C={chartID, color, xAxisData, series} from the parameter set P, where chartID represents the ID of the target container for rendering the specified ECharts chart, color represents the color theme of the defined chart, xAxisData represents the data of the X-axis of the ECharts chart, and series represents the actual data series displayed in the ECharts chart; using the init method in the ECharts library to create a new ECharts according to the chartID Example E=echarts.init(chartID), and build a complete ECharts configuration object O=fc(C), fc is a configuration function, fc accepts configuration parameter C as input, and returns a complete ECharts configuration object O, which contains color, tooltip style, legend information and axis setting information; for the tooltip style T, a custom CSS class is used for flexible customization, T=Tcss+{tooltipClassName,chartID}, Tcss is a tooltip CSS style class set, tooltipClassName is a custom class name, used for the tooltip in the ECharts chart Apply a specific CSS style. For any point (x, y) on the ECharts chart, calculate its adjusted position pos=fps(x, y), and satisfy fps(x, y)=(x′, y′). (x′, y′) is the adjusted position coordinate, ensuring 0≤x′≤W, 0≤y′≤H. fps is a position calculation function. The logical coordinates of any point (x, y) on the ECharts chart are converted into pixel coordinates, and the best position is determined by calculation so that the prompt box does not exceed the boundary of the visible area. W and H are the width and height of the ECharts chart container respectively. For the data item di contained in the ECharts chart, the data item di is formatted as a character through the formatting function fmt. The string si=fmt(di,L), L is the target language L for ECharts chart display, and the corresponding HTML structure is generated by modifying the formatter function; the enterable attribute of the prompt box is set to true through the function fet, fet(T)=T.enterable=true, allowing users to interact with the prompt box content. For each data item di, an attribute named data-series-item is attached to it, which contains the serialized data item set D, which is used to obtain relevant information when processing click events. If the data item set D is not empty, performance optimization measures are applied and the prompt box content is rendered, otherwise, no operation is performed.The solution of this application realizes the intelligent positioning of the prompt box and the display of complex content through precise position calculation and flexible data formatting functions. At the same time, it uses DOM structure simulation to replace the ECharts default prompt box content, which greatly improves the customizability and interactive experience of the chart. BRIEF DESCRIPTION OF THE DRAWINGS

[0054] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings required for use in the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying creative work.

[0055] Figure 1 A schematic diagram of a method flow of a custom prompt component for an ECharts chart provided by an embodiment of the present invention;

[0056] Figure 2 A schematic flow chart of another method for customizing a prompt component of an ECharts chart provided by an embodiment of the present invention;

[0057] Figure 3 A schematic diagram of the device structure of the ECharts chart custom prompt component provided by an embodiment of the present invention;

[0058] Figure 4 A schematic diagram of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0059] The embodiments of the present invention are described in detail below with reference to the accompanying drawings.

[0060] The following describes the embodiments of the present disclosure through specific examples, and those skilled in the art can easily understand other advantages and effects of the present disclosure from the contents disclosed in this specification. Obviously, the described embodiments are only a part of the embodiments of the present disclosure, rather than all of the embodiments. The present disclosure can also be implemented or applied through other different specific embodiments, and the details in this specification can also be modified or changed in various ways based on different viewpoints and applications without departing from the spirit of the present disclosure. It should be noted that the following embodiments and features in the embodiments can be combined with each other without conflict. Based on the embodiments in the present disclosure, all other embodiments obtained by ordinary technicians in the field without making creative work are within the scope of protection of the present disclosure.

[0061] It should be noted that various aspects of the embodiments within the scope of the appended claims are described below. It should be apparent that the aspects described herein may be embodied in a wide variety of forms, and any specific structure and / or function described herein is merely illustrative. Based on the present disclosure, it should be understood by those skilled in the art that an aspect described herein may be implemented independently of any other aspect, and two or more of these aspects may be combined in various ways. For example, any number of aspects described herein may be used to implement the device and / or practice the method. In addition, other structures and / or functionalities other than one or more of the aspects described herein may be used to implement this device and / or practice this method.

[0062] It should also be noted that the illustrations provided in the following embodiments are only schematic illustrations of the basic concept of the present disclosure. The drawings only show components related to the present disclosure rather than being drawn according to the number, shape and size of components in actual implementation. In actual implementation, the type, quantity and proportion of each component may be changed arbitrarily, and the component layout may also be more complicated.

[0063] Additionally, in the following description, specific details are provided to facilitate a thorough understanding of the examples. However, it will be understood by those skilled in the art that the aspects described may be practiced without these specific details.

[0064] The disclosed embodiment provides a method for customizing a prompt component of an ECharts chart. The method for customizing a prompt component of an ECharts chart provided in this embodiment can be executed by a computing device, which can be implemented as software, or as a combination of software and hardware, and the computing device can be integrated in a server, a terminal device, etc.

[0065] See also Figure 1 and Figure 2 The embodiment of the present disclosure provides a method for customizing a prompt component of an ECharts chart, including:

[0066] S101, receive the parameter set P passed in from the outside through props, extract the configuration parameter C={chartID, color, xAxisData, series} from the parameter set P, where chartID represents the ID of the target container for rendering the specified ECharts chart, color represents the color theme of the defined chart, xAxisData represents the data of the X-axis of the ECharts chart, and series represents the actual data series displayed in the ECharts chart.

[0067] Receiving the external parameter set P through props and extracting the configuration parameters C={chartID,color,xAxisData,series} from it can include the following steps:

[0068] First, the component receives a parameter set P through props. This set contains all the data and configuration information passed from the parent component. Before processing, make sure that the parameter set P is valid. This usually means that P is not an empty object and contains the necessary properties.

[0069] Extract chartID from parameter set P. chartID is an identifier, usually used to specify the target DOM element for ECharts chart rendering. Make sure chartID is valid, for example, it should be a non-empty string.

[0070] Extracts color from the parameter set P. color can be a color value or an array of colors used to define the color theme of the chart. Make sure color follows the expected format, for example, it can be a hexadecimal color code, RGB value, or a predefined color name.

[0071] Extract xAxisData from the parameter set P. xAxisData is usually the data points on the X-axis, which can be time series, categories, or other forms of X-axis coordinate data. xAxisData is a valid array or object containing the appropriate data type.

[0072] Extract series from parameter set P. Series is the main data series of the chart. Each series contains multiple data points. Series is a valid array, and each element is an object containing a data point. Combine the extracted chartID, color, xAxisData and series into a new configuration parameter set C.

[0073] Through the above steps, the required configuration parameters C can be extracted from the parameter set P passed in from the outside, so that these parameters can be used to initialize and configure the ECharts chart.

[0074] S102, use the init method in the ECharts library to create a new ECharts instance E=echarts.init(chartID) according to the chartID, and build a complete ECharts configuration object O=fc(C), where fc is a configuration function. fc accepts the configuration parameter C as input and returns a complete ECharts configuration object O. The configuration object O includes color, tooltip style, legend information, and axis setting information.

[0075] Use the init method in the ECharts library to create a new ECharts instance according to the chartID and build a complete ECharts configuration object, which can include the following steps:

[0076] Make sure that the ECharts library has been correctly loaded in the project. This can be done by importing the ECharts JavaScript file in the HTML file, or by importing ECharts in a modular way (such as ES6 modules, CommonJS, etc.).

[0077] Use chartID to get the corresponding container element from DOM. chartID is an identifier, usually the id attribute value of an HTML element. Make sure the DOM element is valid. If it does not exist, error handling should be performed or a default container should be provided.

[0078] Call the init method of ECharts and pass in the DOM element obtained in the previous step as a parameter. The init method will return an ECharts instance object, which is used for subsequent chart configuration and operation.

[0079] Define a configuration function fc, which accepts configuration parameter C as input and returns a complete ECharts configuration object O. Configuration parameter C contains information such as chartID, color, xAxisData, series, etc. In the configuration function fc, construct the ECharts configuration object O according to the parameters in C. Configuration object O contains color, tooltip style, legend information, axis settings, etc. Apply the constructed configuration object O to the ECharts instance E to make the chart display the expected data and style.

[0080] Through the above steps, you can use the init method in the ECharts library to create a new ECharts instance according to the chartID, and build a complete ECharts configuration object O through the configuration function fc.

[0081] S103, for the tooltip style T, a custom CSS class is used for flexible customization, T=Tcss+{tooltipClassName,chartID}, Tcss is the tooltip CSS style class set, tooltipClassName is a custom class name, which is used to apply a specific CSS style to the tooltip in the ECharts chart. For any point (x, y) on the ECharts chart, calculate its adjusted position pos=fps(x, y), and satisfy fps(x, y)=(x′, y′), (x′, y′) is the adjusted position coordinate, ensuring 0≤x′≤W, 0≤y′≤H, fps is a position calculation function, converts the logical coordinates of any point (x, y) on the ECharts chart into pixel coordinates, and determines the best position by calculation, so that the tooltip does not exceed the boundary of the visible area, W and H are the width and height of the ECharts chart container respectively.

[0082] For the prompt box style T, use custom CSS classes for flexible customization and ensure that the prompt box can be intelligently positioned at any point (x, y) on the ECharts chart. You can follow the detailed steps below:

[0083] Define one or more custom CSS classes in the CSS file. These classes will be used to set the tooltip style, such as background color, border, font size, padding, etc. For example, you can define a basic tooltip style class common-tooltip and a special tooltip class special-tooltip.

[0084] Defines a dynamic class name that is generated based on the tooltipClassName parameter passed in and other possible information (such as chartID). The dynamic class name can be in the form of {tooltipClassName,chartID}, where tooltipClassName is a custom class name and chartID is the unique identifier of the chart.

[0085] Combine the custom CSS style class set Tcss with the dynamic class name to form the final tooltip style T. For example, if Tcss contains common-tooltip and special-tooltip, and tooltipClassName is special-tooltip, the final tooltip style T can be expressed as:

[0086] T=Tcss+{tooltipClassName,chartID}.

[0087] Define a position calculation function fps, which accepts the logical coordinates of any point (x, y) on the ECharts chart as input and returns the adjusted position coordinates (x', y'). The position calculation function fps needs to ensure that the prompt box does not exceed the boundaries of the visible area, that is, it satisfies 0≤x'≤W and 0≤y'≤H, where W and H are the width and height of the ECharts chart container respectively.

[0088] Use the methods provided by ECharts (such as myChart.convertToPixel) to convert the logical coordinates (x, y) to pixel coordinates. This step is to ensure that the calculated position is based on the actual pixel coordinates, not the logical coordinates.

[0089] The position calculation function fps calculates the adjusted position coordinates (x', y') so that the tooltip box does not exceed the boundary of the visible area. For example, the best position (x', y') can be determined by checking the width and height of the tooltip box and the current mouse position.

[0090] Apply the final tooltip style T to the tooltip, and use the calculated optimal position (x', y') to set the tooltip position. Make sure the tooltip style and position are correctly applied to the ECharts instance.

[0091] Through the above steps, you can achieve flexible customization of the ECharts chart prompt box style and ensure that the prompt box can be intelligently positioned at any point (x, y) without exceeding the boundaries of the visible area.

[0092] S104, for the data item di included in the ECharts chart, format the data item di into a string si=fmt(di,L) through the formatting function fmt, where L is the target language L displayed by the ECharts chart, and generate the corresponding HTML structure by modifying the formatter function.

[0093] For the data item di contained in the ECharts chart, format it into a string si through the formatting function fmt, and generate the corresponding HTML structure according to the target language L. You can follow the detailed steps below:

[0094] Define a formatting function fmt, which accepts two parameters: data item di and target language L. The purpose of function fmt is to convert data item di into a formatted string si and support multi-language display.

[0095] Extract the required attributes from the data item di. These attributes may include name, value, unit, color, etc. Use an internationalization library (such as i18next) or a custom language package to obtain the translation text corresponding to the target language L. Replace the text part of the extracted attribute with the translation text of the target language.

[0096] Generate a string si containing appropriate HTML tags and styles based on the extracted attributes and multilingual text. For example, you can create different strings for name, value, and unit. Tag, and set the corresponding CSS class. If you need to display a color mark, you can include a small square or dot with the corresponding color in the generated string.

[0097] If you need to display a color marker associated with a data item in the tooltip, you can include a small square or dot with the corresponding color in the generated string. This can be done by setting The background color of the label.

[0098] If you need to display the sum of multiple data series, you can calculate the sum of all related data items in the formatting function and add it to the resulting string.

[0099] In the ECharts configuration, modify the formatter function of the tooltip to call the formatting function fmt and pass in the current data item di and the target language L. The formatter function will return the generated string si and display it as the content of the tooltip.

[0100] Through the above steps, the data item di in the ECharts chart can be converted into a formatted string si through the formatting function fmt, and the corresponding HTML structure can be generated according to the target language L.

[0101] S105, set the enterable attribute of the prompt box to true through the function fet, fet(T)=T.enterable=true, allowing the user to interact with the prompt box content. For each data item di, attach an attribute named data-series-item to it, which contains the serialized data item set D, which is used to obtain relevant information when processing click events. If the data item set D is not empty, apply performance optimization measures and render the prompt box content, otherwise, do nothing.

[0102] The enterable property of the prompt box is set to true through the function fet, and an attribute named data-series-item is added to each data item di. At the same time, whether to render the prompt box content and application performance optimization measures are determined based on whether the data item set D is empty. The following steps can be included:

[0103] Define a function fet that accepts a tooltip configuration object T as a parameter. The purpose of the function fet is to set the enterable property of the tooltip to true, allowing the user to interact with the tooltip content.

[0104] In the tooltip configuration object, set the enterable property to true. This property allows the user to interact with the tooltip content by hovering the mouse over it without it disappearing automatically.

[0105] Traverse the data item set D, and for each data item di, attach an attribute named data-series-item to it. This attribute contains the serialized data item information. For example, you can use JSON.stringify(di) to convert the data item into a string form and store it in the data-series-item attribute. In this way, when processing a click event, you can get the relevant data item information by reading the data-series-item attribute.

[0106] Check whether the data item set D is empty. If D is not empty, proceed to the next step; otherwise, do nothing. If the data item set D is not empty, apply performance optimization measures, including: generating prompt box content only when valid data exists, avoiding unnecessary DOM updates, and using array methods (such as filter, map) to efficiently process large amounts of data.

[0107] If the data item set D is not empty, call the corresponding ECharts method (such as setOption) to render the tooltip content. Make sure that the tooltip content is generated according to the formatting function fmt and contains all necessary information.

[0108] Through the above steps, you can use the function fet to set the enterable attribute of the prompt box to true, and add the data-series-item attribute to each data item. At the same time, decide whether to render the prompt box content and apply performance optimization measures based on whether the data item set D is empty.

[0109] In this way, a highly customizable and high-performance ECharts chart prompt box can be implemented, and the user's interactive experience can be improved.

[0110] According to a specific implementation of the embodiment of the present disclosure, the receiving of an externally input parameter set P through props and extracting a configuration parameter C from the parameter set P includes:

[0111] Extract chartID from parameter set P. ChartID is an identifier used to specify the target DOM element for ECharts chart rendering.

[0112] Extracts color from the parameter set P. color is a color array used to define the color theme of the chart.

[0113] According to a specific implementation of the embodiment of the present disclosure, the receiving of an externally input parameter set P through props, and extracting a configuration parameter C from the parameter set P, further includes:

[0114] Extract xAxisData from the parameter set P. xAxisData is the data point on the X-axis. xAxisData is saved in array form.

[0115] Extract the series from the parameter set P and save the series in the form of an array. Each element in the array is an object containing a data point.

[0116] According to a specific implementation of the embodiment of the present disclosure, the init method in the ECharts library is used to create a new ECharts instance E=echarts.init(chartID) according to the chartID, and to construct a complete ECharts configuration object O=fc(C), including:

[0117] Use chartID to get the corresponding container element from DOM, call ECharts' init method, and pass in the DOM element obtained in the previous step as a parameter;

[0118] Receive the ECharts instance object returned by the init method. The ECharts instance object is used for chart configuration and operation.

[0119] According to a specific implementation of the embodiment of the present disclosure, the init method in the ECharts library is used to create a new ECharts instance E=echarts.init(chartID) according to the chartID, and a complete ECharts configuration object O=fc(C) is constructed, which also includes:

[0120] Create an empty ECharts configuration object O, add the title attribute to the configuration object O, and set the corresponding text, position and style;

[0121] Use xAxisData extracted from C to configure the X-axis, setting the type, data, tick marks, and labels of the X-axis;

[0122] Use the series extracted from C to configure the data series of the chart. Each data series contains type, data, color and style.

[0123] Add the toolbox attribute to the configuration object O and set the corresponding tool options.

[0124] According to a specific implementation of the embodiment of the present disclosure, the prompt box style T is flexibly customized using a custom CSS class, including:

[0125] Define one or more custom CSS classes in the CSS file to set the background color, border, font, and padding of the tooltip.

[0126] In the ECharts configuration object, specify a dynamic class name for the tooltip. The dynamic class name is generated based on the passed tooltipClassName parameter.

[0127] In the tooltip configuration item of ECharts, set the className attribute to the custom CSS class name.

[0128] According to a specific implementation of the embodiment of the present disclosure, for the data item di included in the ECharts chart, formatting the data item di into a string through the formatting function fmt includes:

[0129] Define the formatting function fmt, which accepts the data item di as input and returns a formatted string;

[0130] Extract the required attributes from the data item di, and generate a string containing HTML tags and styles based on the extracted attributes. Use Tags to set different styles, use Tags to organize content.

[0131] According to a specific implementation of the embodiment of the present disclosure, setting the enterable attribute of the prompt box to true through the function fet includes:

[0132] Define the function fet, which is used to set the enterable property of the prompt box. The fet function accepts the ECharts instance or the prompt box configuration object as input parameters;

[0133] Get the prompt box configuration object from the passed in parameters. If the passed in parameter is an ECharts instance, the prompt box configuration is accessed through the instance to obtain the configuration object. If the passed in parameter is a prompt box configuration object, the prompt box configuration object is directly used as the input of the fet function.

[0134] In the prompt box configuration object, set the enterable property to true;

[0135] If an ECharts instance is passed in, call the setOption method to apply the updated tooltip configuration.

[0136] Corresponding to the above method embodiment, see Figure 3 The embodiment of the present invention further discloses a device 30 for customizing a prompt component of an ECharts chart, comprising:

[0137] Extraction module 301 receives the parameter set P passed in from the outside through props, and extracts the configuration parameter C={chartID, color, xAxisData, series} from the parameter set P, where chartID represents the ID of the target container for rendering the specified ECharts chart, color represents the color theme of the defined chart, xAxisData represents the data of the X-axis of the ECharts chart, and series represents the actual data series displayed in the ECharts chart;

[0138] Create module 302, use the init method in the ECharts library to create a new ECharts instance E=echarts.init(chartID) according to chartID, and build a complete ECharts configuration object O=fc(C), where fc is a configuration function, fc accepts configuration parameter C as input, and returns a complete ECharts configuration object O, which includes color, tooltip style, legend information, and axis setting information;

[0139] Customization module 303, for the prompt box style T, a custom CSS class is used for flexible customization T=Tcss+{tooltipClassName,chartID}, Tcss is a prompt box CSS style class set, tooltipClassName is a custom class name, which is used to apply a specific CSS style to the prompt box in the ECharts chart. For any point (x, y) on the ECharts chart, its adjusted position pos=fps(x, y) is calculated, and fps(x, y)=(x′, y′) is satisfied, (x′, y′) is the adjusted position coordinate, ensuring 0≤x′≤W, 0≤y′≤H, fps is a position calculation function, the logical coordinates of any point (x, y) on the ECharts chart are converted into pixel coordinates, and the best position is determined by calculation so that the prompt box does not exceed the boundary of the visible area, W and H are the width and height of the ECharts chart container respectively;

[0140] The format module 304 formats the data item di contained in the ECharts chart into a string si=fmt(di,L) through the formatting function fmt, where L is the target language L displayed by the ECharts chart, and generates a corresponding HTML structure by modifying the formatter function;

[0141] Execution module 305 sets the enterable attribute of the prompt box to true through the function fet, fet(T)=T.enterable=true, allowing the user to interact with the prompt box content. For each data item di, an attribute named data-series-item is attached to it. The attribute contains the serialized data item set D, which is used to obtain relevant information when processing click events. If the data item set D is not empty, performance optimization measures are applied and the prompt box content is rendered. Otherwise, no operation is performed.

[0142] See also Figure 4 The embodiment of the present invention further provides an electronic device 60, the electronic device comprising:

[0143] at least one processor; and,

[0144] a memory communicatively connected to the at least one processor; wherein,

[0145] The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to execute the method of the ECharts chart custom prompt component in the aforementioned method embodiment.

[0146] An embodiment of the present invention further provides a non-transitory computer-readable storage medium, which stores computer instructions, and the computer instructions are used to enable the computer to execute the aforementioned method embodiment.

[0147] An embodiment of the present invention also provides a computer program product, which includes a computer program stored on a non-transitory computer-readable storage medium. The computer program includes program instructions. When the program instructions are executed by a computer, the computer executes the method of the ECharts chart custom prompt component in the aforementioned method embodiment.

[0148] Reference below Figure 4 , which shows a schematic diagram of the structure of an electronic device 60 suitable for implementing the embodiment of the present disclosure. The electronic device in the embodiment of the present disclosure may include, but is not limited to, mobile terminals such as mobile phones, notebook computers, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), vehicle terminals (such as vehicle navigation terminals), etc., and fixed terminals such as digital TVs, desktop computers, etc. Figure 4 The electronic device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present disclosure.

[0149] like Figure 4 As shown, the electronic device 60 may include a processing device (e.g., a central processing unit, a graphics processing unit, etc.) 601, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 602 or a program loaded from a storage device 608 into a random access memory (RAM) 603. In the RAM 603, various programs and data required for the operation of the electronic device 60 are also stored. The processing device 601, the ROM 602, and the RAM 603 are connected to each other via a bus 604. An input / output (I / O) interface 605 is also connected to the bus 604.

[0150] Typically, the following devices may be connected to the I / O interface 605: an input device 606 including, for example, a touch screen, a touch pad, a keyboard, a mouse, an image sensor, a microphone, a gage, a gyroscope, etc.; an output device 607 including, for example, a liquid crystal display (LCD), a speaker, a vibrator, etc.; a storage device 608 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 609. The communication device 609 may allow the electronic device 60 to communicate with other devices wirelessly or by wire to exchange data. Although Figure 4 The electronic device 60 is shown with various devices, but it should be understood that it is not required to implement or have all the devices shown. More or fewer devices may be implemented or have instead.

[0151] In particular, according to an embodiment of the present disclosure, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present disclosure includes a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication device 609, or installed from a storage device 608, or installed from a ROM 602. When the computer program is executed by the processing device 601, the above-mentioned functions defined in the method of the embodiment of the present disclosure are executed.

[0152] The above is only a specific embodiment of the present invention, but the protection scope of the present invention is not limited thereto. Any changes or substitutions that can be easily thought of by a person skilled in the art within the technical scope disclosed by the present invention should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.

Claims

1. A method for customizing prompt components of ECharts charts, characterized in that: include: Receive the parameter set P passed in from the outside through props, and extract the configuration parameter C={chartID, color, xAxisData, series} from the parameter set P. ChartID indicates the ID of the target container for rendering the specified ECharts chart, color indicates the color theme of the defined chart, xAxisData indicates the data of the X-axis of the ECharts chart, and series indicates the actual data series displayed in the ECharts chart. Use the init method in the ECharts library to create a new ECharts instance E=echarts.init(chartID) according to the chartID, and build a complete ECharts configuration object O=fc(C), where fc is a configuration function. fc accepts the configuration parameter C as input and returns a complete ECharts configuration object O. The configuration object O contains color, tooltip style, legend information, and axis setting information. For the tooltip style T, a custom CSS class is used for flexible customization, T=Tcss+{tooltipClassName,chartID}, Tcss is the tooltip CSS style class set, tooltipClassName is a custom class name, which is used to apply a specific CSS style to the tooltip in the ECharts chart. For any point (x, y) on the ECharts chart, calculate its adjusted position pos=fps(x, y), and satisfy fps(x, y)=(x′, y′), (x′, y′) is the adjusted position coordinate, ensuring 0≤x′≤W, 0≤y′≤H, fps is the position calculation function, converts the logical coordinates of any point (x, y) on the ECharts chart into pixel coordinates, and determines the best position by calculation, so that the tooltip does not exceed the boundary of the visible area, W, H are the width and height of the ECharts chart container respectively; For the data item di contained in the ECharts chart, the data item di is formatted into a string si=fmt(di,L) through the formatting function fmt, where L is the target language L displayed by the ECharts chart, and the corresponding HTML structure is generated by modifying the formatter function; The enterable property of the prompt box is set to true through the function fet, fet(T)=T.enterable=true, allowing users to interact with the prompt box content. For each data item di, an attribute named data-series-item is attached to it. This attribute contains the serialized data item set D, which is used to obtain relevant information when processing click events. If the data item set D is not empty, performance optimization measures are applied and the prompt box content is rendered. Otherwise, no operation is performed.

2. The method according to claim 1, characterized in that The receiving of the parameter set P inputted from the outside through props and extracting the configuration parameter C from the parameter set P includes: Extract chartID from parameter set P. ChartID is an identifier used to specify the target DOM element for ECharts chart rendering. Extracts color from the parameter set P. color is a color array used to define the color theme of the chart.

3. The method according to claim 2, characterized in that The receiving of the parameter set P inputted from the outside through props, and extracting the configuration parameter C from the parameter set P, further includes: Extract xAxisData from the parameter set P. xAxisData is the data point on the X-axis. xAxisData is saved in array form. Extract the series from the parameter set P and save the series in the form of an array. Each element in the array is an object containing a data point.

4. The method according to claim 3, characterized in that The init method in the ECharts library is used to create a new ECharts instance E=echarts.init(chartID) according to the chartID, and to construct a complete ECharts configuration object O=fc(C), including: Use chartID to get the corresponding container element from DOM, call ECharts' init method, and pass in the DOM element obtained in the previous step as a parameter; Receive the ECharts instance object returned by the init method. The ECharts instance object is used for chart configuration and operation.

5. The method according to claim 4, characterized in that The init method in the ECharts library is used to create a new ECharts instance E=echarts.init(chartID) according to the chartID, and to construct a complete ECharts configuration object O=fc(C), which also includes: Create an empty ECharts configuration object O, add the title attribute to the configuration object O, and set the corresponding text, position and style; Use xAxisData extracted from C to configure the X-axis, setting the type, data, tick marks, and labels of the X-axis; Use the series extracted from C to configure the data series of the chart. Each data series contains type, data, color and style. Add the toolbox attribute to the configuration object O and set the corresponding tool options.

6. The method according to claim 5, characterized in that The prompt box style T is flexibly customized using a custom CSS class, including: Define one or more custom CSS classes in the CSS file to set the background color, border, font, and padding of the tooltip. In the ECharts configuration object, specify a dynamic class name for the tooltip. The dynamic class name is generated based on the passed tooltipClassName parameter. In the tooltip configuration item of ECharts, set the className attribute to the custom CSS class name.

7. The method according to claim 6, characterized in that For the data item di contained in the ECharts chart, the data item di is formatted into a string through the formatting function fmt, including: Define the formatting function fmt, which accepts the data item di as input and returns a formatted string; Extract the required attributes from the data item di, and generate a string containing HTML tags and styles based on the extracted attributes. Use Tags to set different styles, use Tags to organize content.

8. The method according to claim 7, characterized in that The enterable property of the prompt box is set to true through the function fet, including: Define the function fet, which is used to set the enterable property of the prompt box. The fet function accepts the ECharts instance or the prompt box configuration object as input parameters; Get the prompt box configuration object from the passed in parameters. If the passed in parameter is an ECharts instance, the prompt box configuration is accessed through the instance to obtain the configuration object. If the passed in parameter is a prompt box configuration object, the prompt box configuration object is directly used as the input of the fet function. In the prompt box configuration object, set the enterable property to true; If an ECharts instance is passed in, call the setOption method to apply the updated tooltip configuration.

9. A device for customizing prompt components of ECharts charts, characterized in that: include: The extraction module receives the parameter set P passed in from the outside through props, and extracts the configuration parameter C={chartID, color, xAxisData, series} from the parameter set P, where chartID represents the ID of the target container for rendering the specified ECharts chart, color represents the color theme of the defined chart, xAxisData represents the data of the X-axis of the ECharts chart, and series represents the actual data series displayed in the ECharts chart; Create a module, use the init method in the ECharts library to create a new ECharts instance E=echarts.init(chartID) according to the chartID, and build a complete ECharts configuration object O=fc(C), where fc is a configuration function. fc accepts the configuration parameter C as input and returns a complete ECharts configuration object O. The configuration object O contains color, tooltip style, legend information, and axis setting information. Customization module, for the tooltip style T, use custom CSS class for flexible customization T=Tcss+{tooltipClassName,chartID}, Tcss is the tooltip CSS style class set, tooltipClassName is a custom class name, which is used to apply specific CSS style to the tooltip in the ECharts chart. For any point (x, y) on the ECharts chart, calculate its adjusted position pos=fps(x, y), and satisfy fps(x, y)=(x′, y′), (x′, y′) is the adjusted position coordinate, ensuring 0≤x′≤W, 0≤y′≤H, fps is the position calculation function, converts the logical coordinates of any point (x, y) on the ECharts chart into pixel coordinates, and determines the best position by calculation, so that the tooltip does not exceed the boundary of the visible area, W, H are the width and height of the ECharts chart container respectively; The format module, for the data item di contained in the ECharts chart, formats the data item di into a string si=fmt(di,L) through the formatting function fmt, where L is the target language L displayed by the ECharts chart, and generates the corresponding HTML structure by modifying the formatter function; The execution module sets the enterable property of the prompt box to true through the function fet, fet(T)=T.enterable=true, allowing the user to interact with the prompt box content. For each data item di, an attribute named data-series-item is attached to it. This attribute contains the serialized data item set D, which is used to obtain relevant information when processing click events. If the data item set D is not empty, performance optimization measures are applied and the prompt box content is rendered. Otherwise, no operation is performed.

10. An electronic device, characterized in that: The electronic device comprises: at least one processor; and, a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to execute the method of customizing the prompt component of the ECharts chart as described in any one of claims 1 to 8.

Images