Processing Method, Device, Electronic Device and Storage Medium for Legend Object in Echarts

Abstract

The present disclosure relates to a method, apparatus, electronic device, and storage medium for processing legend objects in Echarts, and relates to the field of computer technology. The method includes: determining the position and the first height of a legend object in Echarts; determining legend items according to target data; determining the length and the second height of the legend items; determining a DOM structure according to the first height, the length, and the second height; hiding the legend object and adding the DOM structure at the position. By applying the present disclosure, by using the DOM structure to replace the Legend object, it is possible to customize the number of rows for displaying legend items, facilitating users to view the legend.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a method, device, electronic device and storage medium for processing legend objects in Echarts. Background Art

[0002] ECharts is a data visualization chart library based on JavaScript, which provides intuitive, vivid, interactive and customizable data visualization charts. In ECharts, Legend can be used to display the identifiers of different series of data, such as color, line type, etc. Users can display or hide the corresponding series of data by clicking on the items in Legend.

[0003] ECharts can switch between normal legend and scrolling legend by setting the type property in the legend object. Normal legend will automatically wrap, but the number of lines cannot be set, and paging cannot be performed based on the set number of lines. Scrolling legend has paging function, but can only display one row of data. This makes the display of legend inconvenient and not conducive to user viewing. Summary of the invention

[0004] Embodiments of the present disclosure provide a method, device, electronic device, and storage medium for processing a legend object in Echarts.

[0005] In a first aspect, an embodiment of the present disclosure provides a method for processing a legend object in Echarts, comprising: determining a position and a first height of a legend object in Echarts; determining a legend item based on target data; determining a length and a second height of the legend item; determining a DOM structure based on the first height, the length, and the second height; hiding the legend object and adding a DOM structure at the position.

[0006] In a second aspect, an embodiment of the present disclosure provides a processing device for a legend object in Echarts, comprising: a first determination unit, configured to determine a position and a first height of a legend object in Echarts; a second determination unit, configured to determine a legend item according to target data; a third determination unit, configured to determine a length and a second height of the legend item; a fourth determination unit, configured to determine a DOM structure according to the first height, the length, and the second height; and a DOM structure adding unit, configured to hide the legend object and add a DOM structure at the position.

[0007] In a third aspect, an embodiment of the present disclosure provides an electronic device, comprising a memory, a processor, a bus, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the computer program, the method for processing legend objects in Echarts as described in the first aspect is implemented.

[0008] Fourthly, an embodiment of the present disclosure provides a non-transitory computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, it implements the method for processing a legend object in Echarts as described in the first aspect.

[0009] By applying the technical solution of the present disclosure, by using the DOM structure to replace the Legend object, it is possible to customize the number of lines for displaying legend items, facilitating users to view the legend.

[0010] It should be understood that the content described in this part is not intended to identify the key or important features of the embodiments of the present disclosure, nor is it used to limit the scope of the present disclosure. Other features of the present disclosure will become easily understood through the following description. Description of the Drawings

[0011] The drawings are used to better understand the solution and do not constitute a limitation to the present disclosure. Among them:

[0012] Figure 1 is a schematic flowchart of an embodiment of the method for processing a legend object in Echarts of the present disclosure;

[0013] Figure 2 is a schematic flowchart of another embodiment of the method for processing a legend object in Echarts of the present disclosure;

[0014] Figures 3a to 3d is a schematic diagram of the display when there are different numbers of legend items in the method for processing a legend object in Echarts of the present disclosure;

[0015] Figure 4 is a schematic structural diagram of an embodiment of the device for processing a legend object in Echarts of the present disclosure;

[0016] Figure 5 is a schematic structural diagram of an embodiment of the electronic device of the present disclosure. Detailed Embodiments

[0017] It should be noted that the following detailed description is exemplary and is intended to provide further illustration of the present disclosure. Unless otherwise specified, all technical and scientific terms used herein have the same meaning as commonly understood by those of ordinary skill in the technical field to which the present disclosure belongs.

[0018] It should be noted that the terms used herein are only for describing specific embodiments and are not intended to limit the exemplary embodiments according to the present disclosure. As used herein, unless the context clearly indicates otherwise, the singular form is also intended to include the plural form. In addition, it should be understood that when the terms "comprise" and / or "include" are used in this specification, they specify the presence of features, steps, operations, devices, components, and / or combinations thereof.

[0019] In the case of no conflict, the embodiments in the present disclosure and the features in the embodiments may be combined with each other.

[0020] In order to make the technical solutions and advantages of the present disclosure clearer and more understandable, the following further describes the present disclosure in detail with reference to the accompanying drawings and specific embodiments.

[0021] Figure 1 Flow 100 of an embodiment of the method for processing a legend object in Echarts of the present disclosure is shown. As Figure 1 shown, the method for processing a legend object in Echarts of this embodiment may include the following steps:

[0022] Step 101, determine the position and the first height of the legend object in Echarts.

[0023] In this embodiment, the position and height of the legend object in Echarts may be determined first. Here, the legend object is the Legend object. In order not to affect the display of the legend, it is necessary to ensure that the position of the DOM structure is consistent with the position of the Legend object, and at the same time ensure that the height of the Legend object remains unchanged. Therefore, the position and height of the Legend object need to be determined first. Here, that is, the height of the Legend object is the first height. Specifically, the position and height of the Legend object can be determined by viewing the configuration information of the Legend object.

[0024] Step 102, determine the legend items according to the target data.

[0025] In this embodiment, the legend items may be determined according to the target data. The target data here may be the data that needs to be displayed through Echarts. Specifically, the target data can be input into Echarts for processing to obtain the legend items.

[0026] Step 103, determine the length and the second height of the legend items.

[0027] After determining the legend items, the length and height of the legend items can be further determined. Here, the height of the legend item is denoted as the second height. Specifically, the above-mentioned length and height can be determined by a specified function. Alternatively, the length of the legend item can be determined by the number of characters included in each legend item. The second height is determined according to the size of the characters in the legend item. For example, the height of two lines of text can be used as the second height. Here, the role of determining the length is to prevent the text of each legend item from being too long and affecting the display effect.

[0028] Step 104: Determine the DOM structure according to the first height, length, and second height.

[0029] After determining the above-mentioned first height, the length of the legend item, and the second height, the DOM structure can be determined. Specifically, each node or each parameter in the DOM structure can be configured according to the above-mentioned parameters. For example, the height of the grandparent node in the DOM structure can be determined according to the first height. The length of a certain element in the DOM structure can be determined according to the above-mentioned length. The height of the parent node in the DOM structure can be determined according to the above-mentioned second height.

[0030] Step 105: Hide the legend object and add the DOM structure at the position.

[0031] After determining the DOM structure, the legend object can be hidden, and the DOM structure can be added at the position of the legend object. In this way, the DOM structure can replace the legend object, getting rid of the limitation of Legend on the legend and enabling the user to customize the height of the legend.

[0032] The method for processing the legend object in Echarts provided by the above embodiments of the present disclosure can realize customizing the number of lines for displaying the legend by using the DOM structure to replace the Legend object, which is convenient for the user to view the legend.

[0033] Continue to refer to Figure 2 , which shows the flow 200 of another embodiment of the method for processing the legend object in Echarts according to the present disclosure. As Figure 2 shown, the method in this embodiment may include the following steps:

[0034] Step 201: Determine the position and the first height of the legend object in Echarts.

[0035] Step 202: Determine the legend items according to the target data.

[0036] Step 203: Determine the length and the second height of the legend items.

[0037] In this embodiment, a DOM element can be created first, and the text and style in the legend item are extracted onto this DOM element. Then, a specified function is used to calculate the length. In some specific practices, the above-specified function can be window.getComputedStyle.

[0038] In some alternative implementation manners of this embodiment, if the length of a certain legend item exceeds a preset threshold (such as 150px), a specified length can be set for this legend item, and a specified style is added to the DOM structure at the same time. This specified style is used to indicate that the text in the legend item is not fully displayed. The above-specified style can be a CSS style, which can be represented as an ellipsis or a drop-down arrow. By clicking on the above style, all the text of the image item can be viewed.

[0039] Step 204: Determine the height of the grandparent node in the DOM structure according to the first height; determine the height of the parent node in the DOM structure according to the second height; determine the length of the legend item element in the DOM structure according to the length.

[0040] The Legend area generally has a fixed height and does not extend infinitely. In this embodiment, to ensure that the height of the legend object remains unchanged, the above first height can be determined as the height of the grandparent node in the DOM structure. Then, according to the second height, the height of the parent node in the DOM structure is determined. In this embodiment, the height of the parent node is the height of the legend. All legend items are displayed in the parent node. In some specific practices, it can be determined through the CSS attributes of the legend item element.

[0041] Here, the height of the parent node can be adaptive, that is, the height of the parent node can change according to the amount of text in the legend item. At the same time, the above length can also be the length of the legend item in the DOM structure.

[0042] In some alternative implementation manners of this embodiment, the number of pages of the legend object can be determined according to the height of the grandparent node and the height of the parent node. In this implementation manner, the number of pages of the legend item can be calculated by "the number of pages = (the height of the parent node - the height of the grandparent node) / the height of one line of legend items + 1".

[0043] In some alternative implementation manners of this embodiment, if the number of pages is greater than 1, a first structure and a second structure can be added to the DOM structure. Here, the first structure is a structure for displaying pagination, and the second structure can be a structure for hiding pagination. In specific display, the positions of the first structure and the second structure in the legend can be the same and can be switched with the user's click.

[0044] Step 205: Hide the legend object and add a DOM structure at the position.

[0045] Step 206, in response to detecting a paging event, move the parent node upward by a preset height.

[0046] In this embodiment, if a paging event is detected, that is, the user clicks on the first structure in the legend, the parent node can be moved upward by a preset height. Here, the preset height can be the height of one line of text. This can achieve the scrolling display of legend items.

[0047] Step 207, in response to detecting an event of a preset type, recalculate the number of pages of the legend object.

[0048] In this embodiment, the listening event of the parent node can be customized. If an event of a preset type occurs, the number of pages of the legend object can be recalculated. The above-mentioned preset type of events can include but are not limited to: events that affect the height of the parent node such as container width, data quantity, etc. Similarly, it can also be determined again whether the legend object needs to be paged.

[0049] See Figures 3a to 3d , by applying the method for processing the legend object in Echarts of the present disclosure, it is possible to display one line of legend items when the number of legend items is small (as shown in Figure 3a ). When the number of legend items is slightly more, two lines of legend items are automatically wrapped and displayed (as shown in Figure 3b ). When the number of legend items is large, two lines of legend items are displayed and there is a paging function, and the displayed legend items can be switched by clicking the paging button (as shown in Figure 3c ). When the number of legend items changes, it is possible to dynamically calculate whether to page and wrap lines (as shown in Figure 3d ).

[0050] The method for processing the legend object in Echarts provided by the above embodiments of the present disclosure can customize the number of displayed lines of legend items, and the legend items exceeding the displayed number of lines can be switched and displayed through paging; it can also dynamically adjust the display of legend items.

[0051] Further referring to Figure 4 , as an implementation of the methods shown in the above figures, the present disclosure provides an embodiment of a device for processing a legend object in Echarts. This device embodiment corresponds to the method embodiment shown in Figure 1 , and this device can be specifically applied to various electronic devices.

[0052] As shown in Figure 4 , the device 400 for processing the legend object in Echarts of this embodiment includes: a first determination unit 401, a second determination unit 402, a third determination unit 403, a fourth determination unit 404, and a DOM structure adding unit 405.

[0053] The first determination unit 401 is configured to determine the position and the first height of the legend object in Echarts.

[0054] The second determination unit 402 is configured to determine legend items according to target data.

[0055] The third determination unit 403 is configured to determine the length and the second height of the legend items.

[0056] The fourth determination unit 404 is configured to determine the DOM structure according to the first height, the length, and the second height.

[0057] The DOM structure adding unit 405 is configured to hide the legend object and add the DOM structure at the position.

[0058] In addition, in the technical solution of this application, an electronic device is also proposed.

[0059] Figure 5 The structural schematic diagram of an electronic device provided by an embodiment of the present disclosure is shown.

[0060] As Figure 5 shown, the electronic device may include a processor 501, a memory 502, a bus 503, and a computer program stored on the memory 502 and executable on the processor 501. Among them, the processor 501 and the memory 502 complete mutual communication through the bus 503. When the processor 501 executes the computer program, the steps of the above method are implemented, for example, including: determining the position and the first height of the legend object in Echarts; determining legend items according to target data; determining the length and the second height of the legend items; determining the DOM structure according to the first height, the length, and the second height; hiding the legend object and adding the DOM structure at the position.

[0061] In addition, in an embodiment of the present disclosure, a non-transitory computer-readable storage medium is also provided, on which a computer program is stored. When the computer program is executed by a processor, the steps of the above method are implemented, for example, including: determining the position and the first height of the legend object in Echarts; determining legend items according to target data; determining the length and the second height of the legend items; determining the DOM structure according to the first height, the length, and the second height; hiding the legend object and adding the DOM structure at the position.

[0062] In summary, in the technical solution of the present disclosure, by using the DOM structure to replace the Legend object, it is possible to customize the number of rows for displaying the legend, which is convenient for users to view the legend.

[0063] The above are only the preferred embodiments of the present disclosure, and are not intended to limit the present disclosure. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principle of the present disclosure shall be included within the scope of protection of the present disclosure.

Claims

1. A method for processing a legend object in Echarts, comprising: Determine the position and first height of the legend object in Echarts; Determine the legend items based on the target data; Determine the length and second height of the legend item; Determine a DOM structure according to the first height, the length and the second height; Hide the legend object and add the DOM structure at the position; Determining the length and the second height of the legend item includes: Create a DOM element, extract the text and style in the legend item to the DOM element, and use the specified function to calculate the length; If the length of a legend item exceeds the preset threshold, a specified length is set for the legend item, and a specified style is added to the DOM structure. The specified style is used to indicate that the text in the legend item is not fully displayed. By clicking the above style, all the text of the legend item can be viewed; The determining the DOM structure according to the first height, the length and the second height includes: The first height is used to determine the height of a grandfather node in the DOM structure, and the second height is used to determine the height of a parent node in the DOM structure. The height of the parent node is adaptive and changes with the amount of text in the legend item.

2. The method according to claim 1, wherein: The determining the DOM structure according to the first height, the length and the second height includes: Determine the height of the grandparent node in the DOM structure according to the first height; Determine the height of the parent node in the DOM structure according to the second height; According to the length, the length of the legend item element in the DOM structure is determined.

3. The method according to claim 2, wherein: The determining the DOM structure according to the first height, the length and the second height includes: In response to determining that the length is greater than a preset threshold, determining a target length based on the length; Adds the specified style to the grandparent node of the DOM structure.

4. The method according to claim 3, wherein: The determining the DOM structure according to the first height, the length and the second height includes: The number of pages of the legend object is determined according to the height of the grandparent node and the height of the parent node.

5. The method according to claim 4, wherein: The determining the DOM structure according to the first height, the length and the second height includes: In response to determining that the number of pages is greater than 1, a first structure and a second structure are added to the DOM structure.

6. The method according to claim 5, wherein: The method further comprises: In response to detecting a paging event, the parent node is moved upward by a preset height.

7. The method according to claim 6, wherein: The method further comprises: In response to monitoring an event of a preset type, the number of pages of the legend object is recalculated.

8. A device for processing legend objects in Echarts, comprising: A first determining unit is configured to determine a position and a first height of a legend object in Echarts; A second determining unit is configured to determine a legend item according to the target data; a third determining unit, configured to determine a length and a second height of the legend item; a fourth determining unit configured to determine a DOM structure according to the first height, the length and the second height; a DOM structure adding unit configured to hide the legend object and add the DOM structure at the position; The third determining unit is further configured to: Create a DOM element, extract the text and style in the legend item to the DOM element, and use the specified function to calculate the length; If the length of a legend item exceeds the preset threshold, a specified length is set for the legend item, and a specified style is added to the DOM structure. The specified style is used to indicate that the text in the legend item is not fully displayed. By clicking the above style, all the text of the legend item can be viewed; The fourth determining unit is further configured to: The first height is used to determine the height of the grandparent node in the DOM structure, and the second height is used to determine the height of the parent node in the DOM structure. The height of the parent node is adaptive and changes with the amount of text in the legend item.

9. An electronic device comprising a memory, a processor, a bus, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the computer program, the method for processing the legend object in Echarts according to any one of claims 1 to 7 is implemented.

10. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the method for processing a legend object in Echarts as described in any one of claims 1 to 7 is implemented.

Images