Processing method and device for legend object in Echarts, electronic equipment and storage medium

Abstract

The invention relates to a method and device for processing legend objects in Echarts, electronic equipment and a storage medium, and relates to the technical field of computers. The method comprises the steps that the position and the first height of a legend object in Echarts are determined; determining legend items according to the target data; determining the length and the second height of the legend item; determining a DOM structure according to the first height, the length and the second height; a legend object is hidden and a DOM structure is added at a location. According to the method, the DOM structure is used for replacing the Legend object, so that the line number of the legend item can be displayed in a user-defined mode, and a user can conveniently check 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] In a fourth aspect, an embodiment of the present disclosure provides a non-transitory computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the method for processing legend objects in Echarts as described in the first aspect.

[0009] By applying the technical solution of the present disclosure, by replacing the Legend object with the DOM structure, it is possible to customize the number of rows of displayed legend items, making it convenient for users to view the legend.

[0010] It should be understood that the content described in this section is not intended to identify the key or important features of the embodiments of the present disclosure, nor is it intended to limit the scope of the present disclosure. Other features of the present disclosure will become easily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0011] The accompanying drawings are used to better understand the present solution and do not constitute a limitation of the present disclosure. Figure 1 A flowchart of an embodiment of a method for processing a legend object in Echarts disclosed in the present invention; Figure 2 It is a flowchart of another embodiment of the method for processing a legend object in Echarts disclosed in the present invention; Figure 3a~Figure 3d It is a display schematic diagram of different numbers of legend items in the processing method of the legend object in Echarts disclosed in the present invention; Figure 4 It is a structural schematic diagram of an embodiment of a device for processing legend objects in Echarts disclosed in the present invention; Figure 5 A schematic diagram of the structure of an embodiment of an electronic device disclosed herein. DETAILED DESCRIPTION

[0012] It should be noted that the following detailed descriptions are exemplary and are intended to provide further explanation of the present disclosure. Unless otherwise specified, all technical and scientific terms used herein have the same meanings as those commonly understood by those skilled in the art to which the present disclosure belongs.

[0013] 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 "comprising" and / or "including" are used in this specification, it indicates the presence of features, steps, operations, devices, components and / or combinations thereof.

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

[0015] In order to make the technical solutions and advantages of the present disclosure more clearly understood, the present disclosure is further described in detail below in conjunction with the accompanying drawings and specific embodiments.

[0016] Figure 1 FIG. 1 shows a process 100 of an embodiment of a method for processing a legend object in Echarts of the present disclosure. Figure 1 As shown, the method for processing the legend object in Echarts of this embodiment may include the following steps: Step 101, determine the position and first height of the legend object in Echarts.

[0017] In this embodiment, the position and height of the legend object in Echarts can 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 must be determined first. Here, 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.

[0018] Step 102, determining legend items according to target data.

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

[0020] Step 103, determining the length and the second height of the legend item.

[0021] After determining the legend item, the length and height of the legend item can be further determined. Here, the height of the legend item is recorded as the second height. Specifically, the 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 can be 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 purpose of determining the length is to prevent the text of each legend item from being too long and affecting the display effect.

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

[0023] After determining the 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 parameters. For example, the height of the grandfather node in the DOM structure can be determined according to the first height. The length of an element in the DOM structure can be determined according to the above length. The height of the parent node in the DOM structure can be determined according to the above second height.

[0024] Step 105, hide the legend object and add a DOM structure at the location.

[0025] After determining the DOM structure, you can hide the legend object and add a DOM structure at the location of the legend object. This way, you can use the DOM structure to replace the legend object, get rid of the Legend's restrictions on the legend, and customize the height of the legend.

[0026] The above-mentioned embodiment of the present disclosure provides a method for processing a legend object in Echarts, which replaces the Legend object with a DOM structure, thereby enabling the number of rows of the displayed legend to be customized, making it convenient for users to view the legend.

[0027] Continue to see Figure 2 , which shows a process 200 of another embodiment of a method for processing a legend object in Echarts according to the present disclosure. Figure 2 As shown, the method in this embodiment may include the following steps: Step 201, determine the position and first height of the legend object in Echarts.

[0028] Step 202, determining legend items according to target data.

[0029] Step 203, determining the length and the second height of the legend item.

[0030] In this embodiment, a DOM element may be created first, and the text and style in the legend item may be extracted to the DOM element. Then, a specified function may be used to calculate the length. In some specific practices, the specified function may be window.getComputedStyle.

[0031] In some optional implementations of this embodiment, if the length of a legend item exceeds a preset threshold (e.g., 150px), a specified length may be set for the legend item, and a specified style may be added to the DOM structure, the specified style being used to indicate that the text in the legend item is not fully displayed. The specified style may be a CSS style, and the specified style may be expressed as an ellipsis or a drop-down arrow. By clicking on the style, all text of the image item may be viewed.

[0032] Step 204, determining the height of the grandparent node in the DOM structure according to the first height; determining the height of the parent node in the DOM structure according to the second height; and determining the length of the legend item element in the DOM structure according to the length.

[0033] Legend area generally has a fixed height, not infinite extension. In this embodiment, in order to ensure that the height of the legend object remains unchanged, the first height can be determined as the height of the grandfather 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 by the CSS properties of the legend item element.

[0034] Here, the height of the parent node can be adaptive, that is, the height of the parent node can change with 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.

[0035] In some optional implementations 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, 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 a row of legend items + 1".

[0036] In some optional implementations of this embodiment, if the number of pages is greater than 1, the first structure and the second structure may be added to the DOM structure. Here, the first structure is a structure for displaying paging, and the second structure may be a structure for hiding paging. In a specific display, the positions of the first structure and the second structure in the legend may be the same. They may be switched with a user's click.

[0037] Step 205, hide the legend object and add a DOM structure at the location.

[0038] Step 206: In response to detecting a paging event, the parent node is moved upward by a preset height.

[0039] 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 a line of text. In this way, the legend item can be scrolled.

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

[0041] In this embodiment, the monitoring event of the parent node can be customized. If a preset type of event occurs, the number of pages of the legend object can be recalculated. The above preset type of events may include but are not limited to: container width, data quantity and other events that affect the height of the parent node. Similarly, it can also be re-determined whether the legend object needs paging.

[0042] See also Figure 3a~Figure 3d , by applying the processing method of the legend object in Echarts disclosed in the present invention, it is possible to display a row of legend items (such as Figure 3a When there are too many legend items, the legend will automatically wrap to display two lines (such as Figure 3b When there are many legend items, two rows of legend items are displayed, and there is a paging function. You can switch the displayed legend items by clicking the paging button (such as Figure 3c When the number of legend items changes, you can dynamically calculate whether to break pages and wrap lines (such as Figure 3d as shown).

[0043] The above-mentioned embodiment of the present disclosure provides a method for processing legend objects in Echarts, which can customize the number of displayed rows of legend items. Legend items exceeding the number of displayed rows can be switched and displayed through paging; the display of legend items can also be dynamically adjusted.

[0044] Further references Figure 4 As an implementation of the methods shown in the above figures, the present disclosure provides an embodiment of a device for processing legend objects in Echarts. Figure 1 Corresponding to the method embodiment shown, the device can be specifically applied to various electronic devices.

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

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

[0047] The second determining unit 402 is configured to determine a legend item according to the target data.

[0048] The third determining unit 403 is configured to determine the length and the second height of the legend item.

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

[0050] The DOM structure adding unit 405 is configured to hide the legend object and add a DOM structure at the location.

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

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

[0053] like Figure 5 As shown, the electronic device may include a processor 501, a memory 502, a bus 503, and a computer program stored in the memory 502 and executable on the processor 501, wherein the processor 501 and the memory 502 communicate with each other 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 first height of the legend object in Echarts; determining the legend item according to the target data; determining the length and second height of the legend item; determining the DOM structure according to the first height, length and second height; hiding the legend object and adding the DOM structure at the position.

[0054] In addition, in one embodiment of the present disclosure, a non-transitory computer-readable storage medium is 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 first height of a legend object in Echarts; determining a legend item based on target data; determining the length and second height of the legend item; determining a DOM structure based on the first height, length and second height; hiding the legend object and adding a DOM structure at the position.

[0055] In summary, in the technical solution of the present disclosure, by replacing the Legend object with the DOM structure, it is possible to customize the number of rows of the displayed legend, making it convenient for users to view the legend.

[0056] The above description is only a preferred embodiment of the present disclosure and is not intended to limit the present disclosure. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present disclosure shall be included in 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; The legend object is hidden and the DOM structure is added at the location.

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; The DOM structure adding unit is configured to hide the legend object and add the DOM structure at the position.

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