Method, system, equipment and program for completely expanding ECharts legend

Abstract

The invention discloses a method, a system, equipment and a program for completely expanding ECharts legends. The method comprises the following steps: creating ECharts; obtaining an option configuration on the basis of the ECharts, and obtaining a legend legend attribute of the ECharts on the basis of the option; according to the configuration of the legen legend, obtaining data forming a legen legend component; simulating and drawing a single legen legend, and obtaining the height of the simulated legen legend; and dynamically setting an ECharts height based on the height of the simulated legend legend. Through the processing scheme disclosed by the invention, the situation that the ECharts legends can only be realized through paging and cannot be completely displayed in the prior art is solved, screens with different resolutions can be adapted, and the user experience is enhanced.

Description

Technical Field

[0001] The present invention relates to the field of visual chart technology, and in particular to a method, system, device and program for fully expanding an ECharts legend. Background Art

[0002] Currently, ECharts provides legends, which can display the identifiers of different series of data, such as color, line type, etc. At the same time, users can also display or hide the corresponding series of data by clicking on the items in the legend. In ECharts, the paging of the legend can be achieved by setting the type attribute in the legend options to 'scroll'. In this way, the legend will be displayed in a scrolling manner. When there are too many legend items, you can scroll to view all the legend items, but you cannot determine how much height the legend occupies.

[0003] If there are too many legends and you want to display all of them, and display them all on screens with different resolutions (such as mobile phones and PCs), the current ECharts legend (legend) does not meet your needs.

[0004] It can be seen from this that how to create a new method for fully expanding the legend has become a goal that the industry urgently needs to improve. Summary of the invention

[0005] In view of this, an embodiment of the present disclosure provides a method for fully expanding an ECharts legend, which at least partially solves the problems existing in the prior art.

[0006] In a first aspect, an embodiment of the present disclosure provides a method for fully expanding an ECharts legend, the method comprising the following steps: Create ECharts; Get option configuration based on the ECharts, and get legend attributes of the ECharts based on the option; According to the configuration of the legend, data constituting the legend component is obtained; Simulate drawing a single legend and get the height of the simulated legend; Dynamically set ECharts height based on the simulated legend height.

[0007] According to a specific implementation of the embodiment of the present disclosure, the creation of ECharts includes: Import ECharts file; Create a DOM container, set the width to 100%, and the height to the preset initial height; Get the DOM container and initialize ECharts; Specify ECharts configuration items and data; Render the ECharts into a container based on the configuration items and data.

[0008] According to a specific implementation of an embodiment of the present disclosure, the obtaining option configuration based on the ECharts includes: Get option configuration through ECharts's getOption() method.

[0009] According to a specific implementation of the embodiment of the present disclosure, obtaining data constituting a legend component according to the configuration of the legend includes: Get the distance of the legend component from the left and right sides of the container, the inner margin of the legend, the interval between each item of the legend, and the width and height data of the graphic marked by the legend.

[0010] According to a specific implementation of the embodiment of the present disclosure, the simulating drawing of a single legend and obtaining the height of the simulated legend include: Dynamically create invisible simulation boxes; Simulate drawing a single legend; the legend includes a small legend icon and a legend name; According to the total number of legends, the legend components of the entire simulation are drawn in a loop, and the legend components are inserted into the simulation box to obtain the simulation height, and the simulation legends are dynamically deleted.

[0011] According to a specific implementation of an embodiment of the present disclosure, dynamically setting the height of ECharts based on the simulated legend height includes: Clear the canvas, redraw the ECharts chart, trigger the ECharts resize event, set the ECharts chart height, redraw the canvas, and achieve responsive display of the chart.

[0012] In a second aspect, an embodiment of the present disclosure provides a system for fully expanding ECharts legends, the system comprising: ECharts creation module, configured to create ECharts; A data acquisition module, configured to acquire option configuration based on the ECharts, and acquire legend attributes of the ECharts based on the option; And, according to the configuration of the legend, obtaining data constituting the legend component; A height acquisition module is configured to simulate drawing a single legend and acquire the height of the simulated legend; The height setting module is configured to dynamically set the ECharts height based on the simulated legend height.

[0013] In a third aspect, an embodiment of the present disclosure further provides an electronic device, the electronic device comprising: 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 when the instructions are executed by the at least one processor, the at least one processor implements the method for fully expanding the ECharts legend described in any one of the first aspect or any one of the implementations of the first aspect.

[0014] In a fourth aspect, an embodiment of the present disclosure further provides a computer program product, comprising a computer program stored on a non-transitory computer-readable storage medium, wherein the computer program comprises program instructions, and when the program instructions are executed by a computer, the computer executes the method for fully expanding the ECharts legend in the aforementioned first aspect or any implementation of the first aspect.

[0015] The method for fully expanding the ECharts legends in the disclosed embodiment solves the problem that there are too many ECharts legends in the prior art, and the legends can only be realized through paging and cannot be fully displayed, thereby enhancing the user's readability and being more intuitive. The ECharts legends are calculated by simulation, and the chart is adaptive when the window is scaled through ECharts.resize(), so as to adapt to screens with different resolutions (such as mobile phones and PCs) and enhance the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] The above is only an overview of the technical solution of the present invention. In order to more clearly understand the technical means of the present invention, the present invention is further described in detail below in conjunction with the accompanying drawings and specific implementation methods.

[0017] Figure 1 A schematic flow chart of a method for fully expanding an ECharts legend provided in an embodiment of the present disclosure; Figure 2 A flowchart of a method for fully expanding an ECharts legend provided in an embodiment of the present disclosure; Figure 3A schematic diagram of a system structure in which all ECharts legends are expanded provided in an embodiment of the present disclosure; and Figure 4 A schematic diagram of an electronic device provided in an embodiment of the present disclosure. DETAILED DESCRIPTION

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

[0019] 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.

[0020] 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 a device and / or practice a 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.

[0021] 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.

[0022] An embodiment of the present invention provides a method for fully expanding an ECharts legend, which is suitable for full display on screens with different resolutions (such as mobile phones and PCs).

[0023] Figure 1 A schematic diagram of the method flow for fully expanding the ECharts legend provided in an embodiment of the present disclosure.

[0024] Figure 2 For Figure 1The corresponding ECharts legend is fully expanded.

[0025] like Figure 1 As shown, at step S110, ECharts is created.

[0026] In an embodiment of the present invention, the creation of ECharts includes: importing an ECharts file; creating a DOM container, setting the width to 100%, and setting the height to a preset initial height; obtaining the DOM container and initializing ECharts; specifying configuration items and data of ECharts; and rendering the ECharts into the container based on the configuration items and data.

[0027] More specifically, there are 5 steps in creating an ECharts: 1. Import Echanrts file; 2. Create a container (set the width to 100% and the height to an initial height); 3. Get the DOM element (container) and initialize the ECharts instance; 4. Specify the configuration items and data of the chart; 5. Render the chart using the configuration items and data (render into the container).

[0028] More specifically, the process proceeds to step S120.

[0029] In step S120, option configuration is obtained based on the ECharts, and legend attributes of the ECharts are obtained based on the option.

[0030] In the embodiment of the present invention, the obtaining of option configuration based on the ECharts includes: obtaining option configuration through a getOption() method of ECharts.

[0031] Next, go to step S130.

[0032] In step S130, data constituting legend components are obtained according to the configuration of the legend.

[0033] In an embodiment of the present invention, the data constituting the legend legend component is obtained according to the configuration of the legend legend, including: obtaining the distance between the legend legend component and the left and right sides of the container, the inner margin of the legend legend, the interval between each item of the legend legend, and the graphic width and height data marked by the legend legend.

[0034] More specifically, according to the relevant configuration of the legend, the relevant data that constitutes the legend legend component is obtained, including: obtaining the spacing between the left and right sides of the legend component graphic, obtaining the distance between the legend component and the left and right sides of the container, obtaining the legend inner margin, obtaining the spacing between each legend item, obtaining the width and height of the legend marked graphic, etc., to provide data support for the next step.

[0035] Next, go to step S140.

[0036] In step S140 , a single legend is drawn in a simulated manner, and the height of the simulated legend is obtained.

[0037] In an embodiment of the present invention, the simulation of drawing a single legend and obtaining the simulated legend height includes: dynamically creating an invisible simulation box; simulating the drawing of a single legend; wherein the legend legend includes a small legend icon and a legend name; according to the total number of legend legends, looping to draw the entire simulated legend legend component, inserting the legend legend component into the simulation box, obtaining the simulation height, and dynamically deleting the simulated legend legend.

[0038] More specifically, obtaining the simulated legend height includes the following steps: 1. Dynamically create an invisible simulated box and insert it into the body element. Use the createElement() method to create it. Because it is invisible, it needs to be relatively positioned, set the stacking order of the elements, and set the transparency to ensure that the box is invisible. However, this element does exist in the current element, but it is invisible.

[0039] 2. Simulate drawing a single legend item Based on the data obtained in step S130, a single legend is simulated and created, wherein the legend includes a legend icon and a legend name. A single legend is drawn, and according to the total number of legends, the legend components of the entire simulation are drawn in a loop, and inserted into the simulation box.

[0040] 3. Get the simulated height.

[0041] 4. According to the obtained simulated legend, the height of the simulated legend is obtained through the offsetHeight() method, and the simulated legend is dynamically deleted to reduce code redundancy and improve browser rendering speed. Further, the height of the obtained legend is obtained.

[0042] Next, go to step S150.

[0043] In step S150, the height of ECharts is dynamically set based on the simulated legend height.

[0044] In the embodiment of the present invention, the dynamic setting of the ECharts height based on the simulated legend height includes: clearing the canvas, redrawing the ECharts chart, triggering the resize event of ECharts, setting the ECharts chart height, and redrawing the canvas to achieve responsive display of the chart.

[0045] More specifically, after getting the legend height, clear the canvas and redraw the ECharts chart. The reason for clearing the canvas and redrawing is that ECharts uses canvas for drawing. After initialization, the size of the canvas cannot be changed. You can only clear the drawing and use the dispose method to destroy the previous instance. Because ECharts instances have responsive functions, when the browser resizes, it triggers the ECharts resize event, sets the ECharts chart height, and redraws the canvas to achieve responsive display of the chart.

[0046] The present invention is described in detail below by way of examples.

[0047] ECharts chart legend is an identifier for displaying different series of data, such as color, line type, etc. Users can click items in the legend to display or hide the corresponding series of data. It mainly consists of the series name and icon of each series in the chart.

[0048] ECharts itself does not provide the function of obtaining the actual width and height of a component, so when you need to know the width and height of a component, the first thing to do is to analyze the component behavior. The rendering of the legend component is similar to the rendering of the DOM element. In the configuration items of ECharts, the legend can set the border, padding, width and height, etc. So after the analysis, the simulation is used. Here, the DOM element is used to simulate the drawing of the legend component, and the settings in the legend legend are rendered as DOM elements. The width and height of the DOM element are used to simulate the height of the legend component inside the ECharts legend.

[0049] This embodiment provides a method based on the full expansion of ECharts legend. Figure 2 As shown, the following steps are included: 1. Before implementing the present invention, you must first draw an ECharts chart. Whether it is a native project or using front-end frameworks such as vue, react, etc., to create an ECharts chart instance, you must follow the following steps: (1) Import the Echanrts file; (2) Create a container (set the width to 100% and the height to an initial height); (3) Get the DOM element (container) and initialize the ECharts instance; (4) Specify the configuration items and data of the chart; (5) Use the configuration items and data to render the chart (render it into the container).

[0050] 2. From the created ECharts chart, get the option object maintained in the current ECharts chart instance through the getOption() method. The returned option object contains the configuration items and data obtained by the user's multiple setOption merges, and also records the status of user interaction, so you can restore from the obtained option object or get a new identical instance.

[0051] 3. The legend property of ECharts is the related configuration of the legend component. There can be multiple legend components in a single ECharts chart instance, which will facilitate the layout of multiple legends. Therefore, according to the option object set obtained in the previous step, the legends array with multiple legends is obtained. Further judgment is made whether the legends object set is an empty array. If it is an empty array, it means there is no legend legend, and the ECharts chart has no data. It ends directly and the output legend box is 0. If the obtained legends array is not an empty array, the corresponding legend component legend is obtained according to your needs.

[0052] 4. According to the legend configuration obtained in the previous step, get the distance between the legend component and the left side of the container left (legend.left), the distance between the legend component and the right side of the container right (legend.right), the width of the legend component chartWidth (legend.width || $(charDOM).width()-left-right), the legend padding (legend.padding || 0), the interval between each legend item itemGap (legend.itemGap), and set the interval between the left and right sides of the legend graphic icongap (legend.icongap), etc., to provide attribute data for the next step of component simulation of the legend box. You can also get the legend icon height iconHeight (legend.itemHeight), legend icon width iconWidth (legend.itemWidth), legend name font size fontSize (legend.textStyle.fontSize || 12), legend name text thickness fontWeight (legend.textStyle.fontWeight || 'normal'), etc., to provide attribute data for drawing a single legend.

[0053] 5. Dynamically create an invisible simulation box legendBox, where "simulation" is implemented using the creatElement() method, and the box is set to the class name legend-simulate-box, and the code is document.createElement('div').setAttribute('class', 'legend-simulate-box'). "Invisibility" is controlled using CSS styles, with relative positioning position: absolute, stacking order z-index:-1, and opacity set to 0. Finally, according to the data obtained in step 4, the box width (chartWidth of the legend component + the interval between each legend item), padding, and overflow:hidden that hides the part beyond the content are set. Insert (appendTo) the created simulation box legendBox to the body element. In order to avoid positioning problems, components such as pop-up windows / drop-downs are usually inserted under the body first.

[0054] 6. In step 5, the legendBox box has been prepared. You need to draw the legend and add it to the legendBox box. Draw a single legend. Each legend contains an icon $icon and legend text $item. First, draw the legend icon element. Use the createElement() method to create a span element and set its attributes to an inline block element to facilitate setting the width and height attributes of the chart element. According to the single legend attribute data obtained in step 4, set the width and height of the icon $icon, and set the left and right inner margins of the icon to padding. Draw the legend name element. Also use the createElement() method to create a div element, set the attributes to an inline block element (display: 'inline-block'), left float ('float': 'left', right margin and bottom margin are all set to itemGap, and set the legend name font size to fontSize and the legend name text thickness to fontWeight. The legend contains multiple data. The forEach method is used to loop through all the legend label information and insert it into the simulation box legendBox. Finally, the simulation box legendBox that is the same as the ECharts chart legend is obtained. It is almost a one-to-one restoration. It is worth noting that the border in ECharts does not occupy the width of the component after rendering, and ECharts will try to make odd values ​​even when rendering certain components. For example, setting the legend's itemHeight to 5 and itemHeight to 6 will render the same effect.

[0055] 7. There is no way to get the height of the legend in the ECharts chart. There is no such property. However, you can get the height of the simulated box legendBox according to step 6 and use the offsetHeight property method to get it. However, when creating each legend, the bottom margin itemGap is set, which causes the legendBox to have an extra itemGap height. Finally, to get the height of the legendBox, you need to subtract itemGap to get the height of the legend component of the ECharts chart.

[0056] 8. After getting the height of the legend component of the ECharts chart, the simulation box legendBox is useless and needs to be deleted dynamically. Use the remove() method to reduce code redundancy and memory usage.

[0057] 9. Finally, set the height of the ECharts chart. If the data is known, the height of the ECharts legend container can be set directly. Because the data is unknown in the present invention, the height of the legend legend is obtained, the canvas is cleared, and the ECharts chart is redrawn. The reason for clearing the canvas and redrawing is that ECharts uses canvas for drawing. After initialization, the size of the canvas cannot be changed. The only way is to clear the drawing and use the dispose() method to destroy the previous ECharts instance. Because all ECharts instances have responsive functions, when the browser resizes, it triggers the ECharts resize event, sets the ECharts chart height, and redraws the canvas to achieve chart responsive display. This setting sets the height of the entire ECharts chart to be the sum of the legend and the ECharts chart.

[0058] The key technical points of the method for fully expanding the ECharts legend proposed in the present invention are: 1. Get the configuration items and data of the current chart in ECharts through the getOption() method. Then extract the relevant configuration of legend from the returned configuration object, and get the distance between the legend component and the left side of the container (left(legend.left), the distance between the legend component and the right side of the container (right(legend.right), the width of the legend component (chartWidth||$(charDOM).width()-left-right), the padding of the legend (legend.padding||0), the interval between each legend item (itemGap), and the interval between the left and right sides of the legend (icongap)).

[0059] 2. Dynamically create an invisible simulation box (legendBox) to simulate the legend part. In order to avoid positioning problems, it will be inserted under the body first. Get the height of the legend component of the ECharts chart, dynamically delete (remove()) the simulation box (legendBox) to reduce code redundancy and memory usage.

[0060] 3. Use ECharts.resize() to make the chart adapt when the window is scaled.

[0061] Figure 3A system 300 for fully expanding an ECharts legend provided by the present invention is shown, comprising an ECharts creation module 310 , a data acquisition module 320 , a height acquisition module 330 and a height setting module 340 .

[0062] The ECharts creation module 310 is used to create ECharts; The data acquisition module 320 is used to acquire option configuration based on the ECharts, and acquire legend attributes of the ECharts based on the option; and, according to the configuration of the legend, obtain data constituting the legend component; The height acquisition module 330 is used to simulate drawing a single legend and acquire the height of the simulated legend; The height setting module 340 is used to dynamically set the ECharts height based on the simulated legend height.

[0063] See also Figure 4 The embodiment of the present disclosure further provides an electronic device 40, the electronic device comprising: 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 fully expanding the ECharts legend in the aforementioned method embodiment.

[0064] The embodiment of the present disclosure also 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 method of fully expanding the ECharts legend in the aforementioned method embodiment.

[0065] The embodiments of the present disclosure also provide 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 fully expanding the ECharts legend in the aforementioned method embodiment.

[0066] Reference below Figure 4, which shows a schematic diagram of the structure of an electronic device 40 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-mounted terminals (such as vehicle-mounted 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.

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

[0068] Typically, the following devices may be connected to the I / O interface 405: input devices 406 including, for example, a touch screen, a touchpad, a keyboard, a mouse, an image sensor, a microphone, an accelerometer, a gyroscope, etc.; output devices 407 including, for example, a liquid crystal display (LCD), a speaker, a vibrator, etc.; storage devices 408 including, for example, a magnetic tape, a hard disk, etc.; and communication devices 409. The communication device 409 may allow the electronic device 40 to communicate with other devices wirelessly or by wire to exchange data. Although the electronic device 40 with various devices is shown in the figure, 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 alternatively.

[0069] 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 contains program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from the network through the communication device 409, or installed from the storage device 408, or installed from the ROM 402. When the computer program is executed by the processing device 401, the above-mentioned functions defined in the method of the embodiment of the present disclosure are executed.

[0070] It should be noted that the computer-readable medium mentioned above in the present disclosure may be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present disclosure, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, device or device. In the present disclosure, a computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, which carries a computer-readable program code. This propagated data signal may take a variety of forms, including but not limited to an electromagnetic signal, an optical signal, or any suitable combination of the above. Computer readable signal media may also be any computer readable medium other than computer readable storage media, which may send, propagate or transmit a program for use by or in conjunction with an instruction execution system, apparatus or device. The program code contained on the computer readable medium may be transmitted using any appropriate medium, including but not limited to: wires, optical cables, RF (radio frequency), etc., or any suitable combination of the above.

[0071] The computer-readable medium may be included in the electronic device, or may exist independently without being incorporated into the electronic device.

[0072] The computer-readable medium carries one or more programs. When the one or more programs are executed by the electronic device, the electronic device: obtains at least two Internet Protocol addresses; sends a node evaluation request including the at least two Internet Protocol addresses to a node evaluation device, wherein the node evaluation device selects an Internet Protocol address from the at least two Internet Protocol addresses and returns it; receives the Internet Protocol address returned by the node evaluation device; wherein the obtained Internet Protocol address indicates an edge node in a content distribution network.

[0073] Alternatively, the computer-readable medium carries one or more programs, and when the one or more programs are executed by the electronic device, the electronic device: receives a node evaluation request including at least two Internet Protocol addresses; selects an Internet Protocol address from the at least two Internet Protocol addresses; and returns the selected Internet Protocol address; wherein the received Internet Protocol address indicates an edge node in a content distribution network.

[0074] Computer program code for performing the operations of the present disclosure may be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, C++, and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a separate software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0075] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present disclosure. In this regard, each square box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the module, the program segment or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some implementations as replacements, the functions marked in the square box can also occur in a sequence different from that marked in the accompanying drawings. For example, two square boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each square box in the block diagram and / or flow chart, and the combination of the square boxes in the block diagram and / or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0076] The units involved in the embodiments described in the present disclosure may be implemented by software or hardware. The name of a unit does not limit the unit itself in some cases. For example, the first acquisition unit may also be described as a "unit for acquiring at least two Internet Protocol addresses".

[0077] It should be understood that various parts of the present disclosure may be implemented in hardware, software, firmware, or a combination thereof.

[0078] The above is only a specific implementation of the present disclosure, but the protection scope of the present disclosure 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 in the present disclosure should be included in the protection scope of the present disclosure. Therefore, the protection scope of the present disclosure should be based on the protection scope of the claims.

Claims

1. A method for fully expanding ECharts legends, characterized in that: The method comprises the following steps: Create ECharts; Get option configuration based on the ECharts, and get legend attributes of the ECharts based on the option; According to the configuration of the legend, data constituting the legend component is obtained; Simulate drawing a single legend and get the height of the simulated legend; Dynamically set ECharts height based on the simulated legend height.

2. The method for fully expanding the ECharts legend according to claim 1, characterized in that: The creation of ECharts includes: Import ECharts file; Create a DOM container, set the width to 100%, and the height to the preset initial height; Get the DOM container and initialize ECharts; Specify ECharts configuration items and data; Render the ECharts into a container based on the configuration items and data.

3. The method for fully expanding the ECharts legend according to claim 1, characterized in that: The obtaining option configuration based on the ECharts includes: Get option configuration through ECharts's getOption() method.

4. The method for fully expanding the ECharts legend according to claim 1, characterized in that: The step of obtaining data constituting a legend component according to the configuration of the legend includes: Get the distance of the legend component from the left and right sides of the container, the inner margin of the legend, the interval between each item of the legend, and the width and height data of the graphic marked by the legend.

5. The method for fully expanding the ECharts legend according to claim 1, characterized in that: The method of simulating drawing a single legend and obtaining the height of the simulated legend includes: Dynamically create invisible simulation boxes; Simulate drawing a single legend; the legend includes a small legend icon and a legend name; According to the total number of legends, the legend components of the entire simulation are drawn in a loop, and the legend components are inserted into the simulation box to obtain the simulation height, and the simulation legends are dynamically deleted.

6. The method for fully expanding the ECharts legend according to claim 1, characterized in that: The dynamically setting the ECharts height based on the simulated legend height includes: Clear the canvas, redraw the ECharts chart, trigger the ECharts resize event, set the ECharts chart height, redraw the canvas, and achieve responsive display of the chart.

7. A system for fully expanding ECharts legends, characterized in that: The system comprises: ECharts creation module, configured to create ECharts; A data acquisition module, configured to acquire option configuration based on the ECharts, and acquire legend attributes of the ECharts based on the option; And, according to the configuration of the legend, obtaining data constituting the legend component; A height acquisition module is configured to simulate drawing a single legend and acquire the height of the simulated legend; The height setting module is configured to dynamically set the ECharts height based on the simulated legend height.

8. An electronic device, characterized in that: The electronic device includes: 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 when the instructions are executed by the at least one processor, the at least one processor executes the method for fully expanding the ECharts legend as described in any one of claims 1 to 6.

9. A computer program product, characterized in that The computer program product 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 is caused to execute the method for fully expanding the ECharts legend as described in any one of claims 1 to 6.

Images