A method for realizing custom display panels based on an ECharts map component

Abstract

The application provides a method for realizing self-defined display panel based on ECharts map component, which comprises creating an intermediate agent of ECharts component, intercepting and modifying the initialization function of ECharts component through the intermediate agent, and adding layout on the original ECharts component instance object, which specifically shows that: creating an instance object of ECharts class to intercept the initialization setting of ECharts component; adding a self-defined panel buffer area on the instance object of ECharts component; providing an external interface of self-defined panel and adjusting the callback function of self-defined panel layout; processing the self-defined panel code into canvas and storing it in the buffer area; calculating the page pixel coordinates of the self-defined panel and displaying it on the map page. The application can solve the problem that the existing presentation method cannot meet the diversified needs of users, so as to realize self-defined display panel on the existing map component conveniently and without affecting the execution of the original function.

Description

Technical Field

[0001] This invention relates to the field of data visualization technology, and more specifically to a method for implementing a custom display panel based on the ECharts map component. Background Technology

[0002] ECharts is a widely used open-source charting library. However, during development, each page that uses ECharts basically needs to regenerate its configuration and configure each property individually, resulting in a lot of repetitive work and code redundancy. This causes great inconvenience to project development and maintenance, and further reduces the efficiency of development, maintenance, and page operation.

[0003] With the rise of big data and data analytics, data visualization has become increasingly important. Geographic information visualization, in particular, is a crucial application within the visualization field, involving the presentation of massive amounts of rich data on map components. ECharts, an open-source data visualization project based on web front-end technology, is widely used in the data visualization industry and includes map components related to geographic information visualization. Data dashboards, a common form of map data display, can be configured in ECharts map components using the `label` attribute of scatter points to create data tooltips.

[0004] Therefore, for page rendering performance considerations, ECharts only provides the `label` property to display text-based tooltips, and the `rich` property of the `label` can be used to enrich the displayed text. However, this presentation method cannot meet the diverse needs of users, such as displaying images, table lists, and other common HTML layouts in the display panel. Summary of the Invention

[0005] In order to overcome the shortcomings of the prior art, the purpose of this invention is to provide a method for implementing a custom display panel based on the ECharts map component. This method can solve the problem that the presentation method in the prior art cannot meet the diverse needs of users, and can easily implement a custom display panel on the existing map component without affecting the execution of the original functions.

[0006] To solve the above problems, the technical solution adopted by the present invention is as follows:

[0007] A method for implementing a custom display panel based on the ECharts map component includes the following steps: creating an intermediate proxy for the ECharts component, intercepting and modifying the initialization function of the ECharts component through the intermediate proxy, adding a layout to the original ECharts component instance object, specifically: creating an instance object of the ECharts class to intercept the initialization settings of the ECharts component; adding a custom panel cache area to the instance object of the ECharts component; providing an external interface for the custom panel and adjusting the callback function of the custom panel layout; processing the custom panel code into a canvas and storing it in the cache area; calculating the page pixel coordinates of the custom panel and displaying it on the map page.

[0008] A further approach involves the following steps: by listening for map zoom events in real time on instances of the ECharts component, when a zoom parameter for the custom panel is matched, a callback function to adjust the layout of the custom panel is called to dynamically show and hide the custom panel. Additionally, by listening to the ECharts map container, the method responds in real time to positional offsets caused by changes in the size of the ECharts map container.

[0009] A further solution is to convert the latitude and longitude coordinates of the custom panel into page pixel coordinates using the convertToPixel method after responding in real time to the position offset caused by changes in the size of the ECharts map container, so as to adjust the position of the custom panel.

[0010] A further approach is to define the parameters of the custom panel, including the panel's HTML code, the panel's coordinates on the map, the map zoom level, whether to use a cached panel, and the user-defined panel ID.

[0011] A further proposed solution is that the callback function for adjusting the custom panel layout includes adjusting the position of the custom panel and determining whether to show or hide the custom panel based on the zoom level when the ECharts map is zoomed or the size of the ECharts map container changes. Specifically, when adjusting the position of the custom panel, the zoom level of the map object is read. If a zoom level matching the custom panel is found, the step of converting the latitude and longitude coordinates of the map object to page pixel coordinates is executed again, and the panel position is adjusted based on the newly obtained page pixel coordinates. If no zoom level matching the custom panel is found, the current panel is removed.

[0012] A further solution is to process the custom panel code into a canvas, which includes: when the browser renders the page, it uses DOM elements as vector graphics for rendering, wherein the custom panel is designed using HTML tags, and all HTML tags in the custom panel are drawn as a single canvas element.

[0013] A further approach is to create an off-screen div container and a canvas element when rendering all HTML tags in the custom panel as a single canvas element. The panel's HTML code is then injected into the off-screen div container and mounted to the current page document. By recursively traversing the DOM tree of the current container, data for each level of nodes is obtained, and layered data is generated. Based on the browser's rules for rendering layered data, the DOM elements are rendered layer by layer into the canvas element of the off-screen div container using the render method of the CanvasRenderer class.

[0014] A further approach is to store the generated canvas object in a cache after it is generated, and remove the temporary container from the page document; when the user specifies a panel ID and the cache is used, the panel object is found directly from the cache; if the cache is not used, the panel object under the current ID is updated.

[0015] A further step is to implement the following steps: respond to user actions through the external interface, create panel information corresponding to the user actions based on the modified custom panel definition; convert the panel information into a canvas and store it in the cache; and convert the latitude and longitude into page pixel coordinates and add them to the ECharts map container.

[0016] A further approach involves adjusting the properties of ECharts components in a custom panel. This includes adjusting the basic properties, title, viewport, X-axis, Y-axis, legend, tooltips, and tools of ECharts components through an editing panel, and listing the existing properties of ECharts components in each category of properties within the editing panel.

[0017] Therefore, compared with the existing technology, the present invention constructs a method for implementing a custom display panel based on the ECharts map component, which has the following beneficial effects:

[0018] 1. This invention uses a proxy method to flexibly and securely add new interfaces to ECharts without relying on Option configuration files, and directly calls the interfaces to add custom panels.

[0019] 2. Users of this invention can use any HTML element to design and develop the panel. Compared with the traditional ECharts map information panel, which can only support simple text display, this invention has better scalability.

[0020] 3. Users of this invention can design complex display panels and optimize rendering performance by converting the panels into canvases.

[0021] 4. This invention supports users to customize the map zoom level to display the panel, and only displays it at the appropriate map zoom level. This can avoid panel overlap and obstruction when the data volume is large, so as to better present the data.

[0022] The present invention will now be described in further detail with reference to the accompanying drawings and specific embodiments. Attached Figure Description

[0023] Figure 1 This is a schematic diagram of an embodiment of the method for implementing a custom display panel based on the ECharts map component according to the present invention.

[0024] Figure 2 This is a flowchart of an embodiment of a method for implementing a custom display panel based on the ECharts map component according to the present invention.

[0025] Figure 3 This is a schematic diagram illustrating the principle of processing the custom panel code into a canvas in an embodiment of a method for implementing a custom display panel based on the ECharts map component of the present invention.

[0026] Figure 4 This is a flowchart illustrating how a method for implementing a custom display panel based on the ECharts map component of the present invention responds to user operations through an external interface.

[0027] Figure 5 This is a flowchart illustrating the method embodiment of the present invention for implementing a custom display panel based on the ECharts map component, specifically regarding adjusting the position of the custom panel.

[0028] Figure 6 This is a schematic diagram of a system embodiment of the present invention that implements a custom display panel based on the ECharts map component. Detailed Implementation

[0029] An example of a method for implementing a custom display panel based on the ECharts map component:

[0030] like Figure 1 and Figure 2 As shown, a method for implementing a custom display panel based on the ECharts map component includes:

[0031] Step S0: Create an intermediate proxy for the ECharts component. This intermediate proxy intercepts and modifies the ECharts component's initialization function, adding a layout to the existing ECharts component instance object. Specifically, this includes:

[0032] Step S1: Create an instance of the ECharts class to intercept the initialization settings of the ECharts component.

[0033] Step S2: Add a custom panel cache to the instance object of the ECharts component.

[0034] Step S3: Provide an external interface for the custom panel and adjust the callback function for the custom panel layout.

[0035] Step S4: Process the custom panel code into a canvas and store it in the cache; calculate the page pixel coordinates of the custom panel and display it on the map page.

[0036] In this embodiment, the method also performs the following: by listening to map zoom events in real time on the instance object of the ECharts component, when the zoom parameters of the custom panel are matched, calling the callback function to adjust the layout of the custom panel, dynamically showing and hiding the custom panel, and by listening to the ECharts map container, responding in real time to the position offset caused by the change in the size of the ECharts map container.

[0037] After responding in real time to the positional shift caused by changes in the size of the ECharts map container, the latitude and longitude coordinates of the custom panel are converted to page pixel coordinates using the convertToPixel method to adjust the position of the custom panel.

[0038] In this embodiment, the parameters for defining a custom panel specifically include the panel's HTML code, the panel's coordinates on the map, the map zoom level, whether to use a cached panel, and the user-defined panel ID. Therefore, a custom panel in this embodiment contains five parameters: the panel's HTML code (including HTML code with complex layouts), the panel's coordinates on the map, the map zoom level (the panel is only displayed at this zoom level), whether to use a cached panel (to optimize rendering speed), and the user-defined panel ID.

[0039] In steps S1 and S2 above, this embodiment uses a Proxy interceptor to create a proxy for an ECharts map object. This proxy interceptor intercepts the properties and methods of the proxy object, as well as extends the interface for adding custom panels. This embodiment creates a proxy object through the ECharts class, intercepts the ECharts initialization method, adds a panel cache to the ECharts instance object, provides an interface for adding panels and callback functions for adjusting panel layout, and then processes the panel code into a canvas and displays it on the map. The cache is used to fully utilize resources; the canvas data after converting the HTML panel is stored in the cache for easy retrieval later, shortening rendering time.

[0040] In step S3 above, the callback function for adjusting the custom panel layout includes adjusting the position of the custom panel and determining whether to show or hide the custom panel based on the zoom level when the ECharts map is zoomed or the size of the ECharts map container changes. For example... Figure 5 As shown, when adjusting the position of a custom panel, the zoom level of the map object is read. When a zoom level of the custom panel is matched, the step of converting the latitude and longitude coordinates of the map object to page pixel coordinates is executed again to calculate the panel pixel coordinates. The panel position is adjusted according to the newly obtained page pixel coordinates, and the canvas is added to the page. If no zoom level of the custom panel is matched, the current panel is removed.

[0041] In step S4 above, the custom panel code is processed into a canvas, such as... Figure 3 As shown, this includes: when the browser renders the page, it uses DOM elements as vector graphics for rendering. In this case, a custom panel is designed using HTML tags, and all HTML tags in the custom panel are drawn as a single canvas element.

[0042] When rendering all HTML tags in a custom panel as a single canvas element, create an off-screen div container and a canvas element, inject the panel's HTML code into the off-screen div container, and mount it to the current page document.

[0043] Then, by recursively accessing the DOM tree of the current container, the data of each node is obtained and the layered data is generated. According to the browser's rules for rendering layered data, the DOM elements are rendered layer by layer into the canvas element of the off-screen div container through the render method of the CanvasRenderer class.

[0044] In this embodiment, after generating the canvas object, the generated result is stored in the cache area, and the temporary container in the page document is removed.

[0045] When the user specifies a panel ID and caching is used, the panel object is found directly from the cache; if caching is not used, the panel object under the current ID is updated.

[0046] Specifically, when a browser renders a page, DOM elements are rendered as vector graphics. The margins of each DOM element need to be processed individually, and the browser needs to convert them all into pixels before outputting them to the screen, resulting in a massive computational burden. When there is a large amount of content on the page and a large number of DOM elements, the rendering speed becomes very slow. This invention can use any HTML tag to design a panel and optimizes the DOM's memory-resident loading mode by drawing all HTML tags in the panel as a single canvas element, thereby improving page rendering performance. Specifically, it works as follows: an off-screen div container and a canvas element are created using `document.createElement`. The panel's HTML code is injected into a temporary container and mounted to the current page document. Then, by recursively traversing the DOM tree of the current container, data for each level of nodes is obtained, and layered data is generated. According to the browser's rules for rendering layered data, the `render` method of the `CanvasRenderer` class renders the DOM elements layer by layer into the off-screen canvas element. Therefore, this embodiment converts all content in the panel's HTML into a single canvas object, stores it in a cache, and finally removes the temporary container from the page document. In subsequent rendering, only a single canvas object can be manipulated, improving rendering performance.

[0047] Therefore, this invention incorporates a caching mode. Since converting a panel to a canvas consumes some performance, caching can be enabled when adding a panel to filter out unnecessary operations. In the canvas generation operation described above, this embodiment stores the generation result in a cache. In subsequent operations, if the user specifies an ID and caching is used, the panel object is directly retrieved from the cache for fast display. If caching is not used, the panel object under the current ID will be updated.

[0048] In this embodiment, the method also performs the following: adjusting the properties of the ECharts component on the custom panel, adjusting the basic properties, title, viewport, X-axis, Y-axis, legend, tooltip, and tools of the ECharts component through the editing panel, and listing the existing properties of the ECharts component in each type of property in the editing panel.

[0049] In practical applications, to ensure ease of use and maintain original functionality, this invention utilizes a middleware mechanism to proxy the ECharts component, extending the interface for adding custom data panels. Users can use HTML-encoded data panels, converting the panel content into a canvas through the provided external interface and storing it in the cache (optimizing data display). Latitude and longitude coordinates are converted into page pixel coordinates and added to the ECharts map container. Furthermore, by listening to map zoom events, panels are dynamically shown and hidden, and by listening to the ECharts map container, the invention responds in real-time to positional shifts caused by changes in container size.

[0050] In this embodiment, the method further performs the following: responding to user operations through an external interface, creating panel information corresponding to the user operations based on the modified custom panel definition; converting the panel information into a canvas and storing it in the cache area; converting the latitude and longitude into page pixel coordinates and adding it to the ECharts map container, such as... Figure 4 As shown, its implementation process includes:

[0051] Add panel data (such as html, coordinate, zoom, useCache, and id), check the panel ID, and determine if the panel ID is correct. If correct, determine if the user specified that the ID should be cached. If correct, find the panel object directly from the cache and return the user's panel ID. If not, determine if the panel ID is in the cache. If not, load the panel code into the Div container, generate a canvas, store it in the cache, and determine if it matches the map zoom level of the panel. If correct, calculate the panel's pixel coordinates, add the canvas to the page, update the panel object under the current ID, and return the user's panel ID.

[0052] Furthermore, since the panel size does not change with map zoom, large amounts of data can cause panels to overlap and obscure each other. This invention can display panels based on the map zoom level, reducing the display of unnecessary panels for better data presentation. By listening to the map zoom event georoam on the ECharts object, when the panel's zoom parameters are matched, the method to adjust the panel layout is called to dynamically show or hide the panel. ResizeObserver is used to listen to the ECharts container, responding in real-time to positional offsets caused by changes in container size. Finally, the map's convertToPixel method is used to convert the panel's latitude and longitude coordinates to page pixel coordinates, thereby adjusting the panel's position.

[0053] A system implementation example of a custom display panel based on ECharts map components:

[0054] A system for implementing a custom display panel based on ECharts map components, such as Figure 6 As shown, the system includes:

[0055] The main processing unit 10 is used to create an intermediate proxy for the ECharts component. This intermediate proxy intercepts and modifies the initialization function of the ECharts component, adding layout to the existing ECharts component instance object. Specifically, this includes:

[0056] Create module 11, which creates an instance of the ECharts class to intercept the initialization settings of the ECharts component.

[0057] Cache module 12 adds a custom panel cache area to the instance object of the ECharts component.

[0058] Layout module 13 provides an external interface for custom panels and allows adjustment of callback functions for custom panel layouts.

[0059] Display module 14 processes the custom panel code into a canvas and stores it in the cache; it calculates the page pixel coordinates of the custom panel and displays it on the map page.

[0060] In this embodiment, it also includes: listening to map zoom events in real time on the instance object of the ECharts component; when the zoom parameters of the custom panel are matched, calling the callback function to adjust the layout of the custom panel to dynamically show and hide the custom panel; and listening to the ECharts map container to respond in real time to the position offset caused by the change in the size of the ECharts map container.

[0061] After responding in real time to the positional shift caused by changes in the size of the ECharts map container, the latitude and longitude coordinates of the custom panel are converted to page pixel coordinates using the convertToPixel method to adjust the position of the custom panel.

[0062] In this embodiment, the parameters for defining a custom panel specifically include the panel's HTML code, the panel's coordinates on the map, the map zoom level, whether to use a cached panel, and the user-defined panel ID.

[0063] In module 11 and caching module 12, this embodiment uses a Proxy interceptor to create a proxy for an ECharts map object. This proxy object's properties and methods are intercepted, and the interface for adding custom panels is extended. This embodiment creates a proxy object through the ECharts class, intercepts the ECharts initialization method, adds a panel cache to the ECharts instance object, provides an interface for adding panels and callback functions for adjusting panel layout, and then processes the panel code into a canvas and displays it on the map. The cache, in order to fully utilize resources, stores the canvas data after converting the HTML panel in the cache for easy retrieval later, shortening rendering time.

[0064] In layout module 13, the callback function for adjusting the layout of the custom panel includes adjusting the position of the custom panel and determining whether to show or hide the custom panel based on the zoom level when the ECharts map is zoomed or the size of the ECharts map container changes. Specifically, when adjusting the position of the custom panel, the zoom level of the map object is read. If a zoom level of the custom panel is matched, the step of converting the latitude and longitude coordinates of the map object to page pixel coordinates is executed again to calculate the panel pixel coordinates. The panel position is adjusted based on the newly obtained page pixel coordinates, and the canvas is added to the page. If no zoom level of the custom panel is matched, the current panel is removed.

[0065] In display module 14, the custom panel code is processed into a canvas, including: when the browser renders the page, it uses DOM elements as vector graphics for rendering, where the custom panel is designed using HTML tags, and all HTML tags in the custom panel are drawn as a single canvas element.

[0066] When rendering all HTML tags in a custom panel as a single canvas element, create an off-screen div container and a canvas element, inject the panel's HTML code into the off-screen div container, and mount it to the current page document.

[0067] Then, by recursively accessing the DOM tree of the current container, the data of each node is obtained and layered data is generated. Based on the browser's rules for rendering layered data, the DOM elements are rendered layer by layer into the canvas element of the off-screen div container through the render method of the CanvasRenderer class.

[0068] In this embodiment, after generating the canvas object, the generated result is stored in the cache area, and the temporary container in the page document is removed.

[0069] When the user specifies a panel ID and caching is used, the panel object is found directly from the cache; if caching is not used, the panel object under the current ID is updated.

[0070] In this embodiment, the method further includes: responding to user operations through an external interface, creating panel information corresponding to the user operations based on the modified custom panel definition; converting the panel information into a canvas and storing it in the Cache cache area; and converting the latitude and longitude into page pixel coordinates and adding them to the ECharts map container.

[0071] In this embodiment, the method also includes: adjusting the properties of the ECharts component on the custom panel; adjusting the basic properties, title, viewport, X-axis, Y-axis, legend, tooltip, and tools of the ECharts component through the editing panel; and listing the existing properties of the ECharts component in each type of property in the editing panel.

[0072] Therefore, the present invention constructs a system for implementing a custom display panel based on ECharts map components. The system, consisting of a main processing unit 10, a creation module 11, a caching module 12, a layout module 13, and a display module 14, completes the custom display of the panel. It can conveniently implement a custom display panel on existing map components without affecting the execution of the original functions.

[0073] As can be seen, the various embodiments in this specification are described in a progressive manner, with each embodiment focusing on its differences from other embodiments. Similar or identical parts between embodiments can be referred to interchangeably. For system embodiments, since they are basically similar to method embodiments, the description is relatively simple; relevant parts can be referred to the descriptions in the method embodiments.

[0074] This application is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (devices), and computer program products according to embodiments of this application. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0075] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0076] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0077] The methods and systems provided in this application have been described in detail above. Specific examples have been used to illustrate the principles and implementation methods of this application. The descriptions of the above embodiments are only for the purpose of helping to understand the methods and core ideas of this application. At the same time, for those skilled in the art, there will be changes in the specific implementation methods and application scope based on the ideas of this application. Therefore, the content of this specification should not be construed as a limitation of this application.

[0078] The above embodiments are merely preferred embodiments of the present invention and should not be construed as limiting the scope of protection of the present invention. Any non-substantial changes and substitutions made by those skilled in the art based on the present invention shall fall within the scope of protection claimed by the present invention.

Claims

1. A method for implementing a custom display panel based on the ECharts map component, characterized in that, Includes the following steps: An intermediate proxy for the ECharts component is created. This proxy intercepts and modifies the ECharts component's initialization function, adding layout to the existing ECharts component instance object. Specifically, this is manifested as follows: Create an instance of the ECharts class to intercept the initialization settings of the ECharts component; Add a custom panel cache to the instance object of the ECharts component; Provides an external interface for custom panels and a callback function for adjusting the layout of custom panels; The custom panel code is processed into a canvas and stored in the cache; the page pixel coordinates of the custom panel are calculated and displayed on the map page; The method also performs the following: by listening to map zoom events in real time on the instance object of the ECharts component, when the zoom parameters of the custom panel are matched, calling the callback function to adjust the layout of the custom panel, dynamically showing and hiding the custom panel, and by listening to the ECharts map container, responding in real time to the position offset caused by changes in the size of the ECharts map container. The callback function for adjusting the layout of the custom panel includes adjusting the position of the custom panel and determining whether to show or hide the custom panel based on the zoom level when the ECharts map is zoomed or the size of the ECharts map container changes. Specifically, when adjusting the position of the custom panel, the zoom level of the map object is read. If a zoom level of the custom panel is matched, the step of converting the latitude and longitude coordinates of the map object to page pixel coordinates is executed again, and the panel position is adjusted according to the newly obtained page pixel coordinates. If no zoom level of the custom panel is matched, the current panel is removed. The parameters for defining a custom panel include the panel's HTML code, the panel's coordinates on the map, the map zoom level, whether to use a cached panel, and the user-defined panel ID. The process of converting the custom panel code into a canvas includes: when the browser renders the page, it uses DOM elements as vector graphics for rendering, wherein the custom panel is designed using HTML tags, and all HTML tags in the custom panel are drawn as a single canvas element.

2. The method according to claim 1, characterized in that: After responding in real time to the positional shift caused by changes in the size of the ECharts map container, the latitude and longitude coordinates of the custom panel are converted to page pixel coordinates using the convertToPixel method to adjust the position of the custom panel.

3. The method according to claim 1, characterized in that: When drawing all HTML tags in a custom panel as a single canvas element, create an off-screen div container and a canvas element, inject the panel's HTML code into the off-screen div container, and mount it to the current page document; By recursively accessing the DOM tree of the current container, data for each level of nodes is obtained, and layered data is generated. Based on the browser's rules for rendering layered data, the DOM elements are rendered layer by layer into the canvas element of the off-screen div container using the render method of the CanvasRenderer class.

4. The method according to claim 3, characterized in that: After generating the canvas object, the generated result is stored in the cache, and the temporary container in the page document is removed; When the user specifies a panel ID and uses caching, the panel object is found directly from the cache. If caching is not used, update the panel object under the current ID.

5. The method according to claim 1, characterized in that: The method also performs the following: responding to user operations through the external interface, creating panel information corresponding to the user operation based on the modified custom panel definition; converting the panel information into a canvas and storing it in the cache area; and converting the latitude and longitude into page pixel coordinates and adding them to the ECharts map container.

6. The method according to any one of claims 1 to 5, characterized in that: The method also performs the following: adjusting the properties of ECharts components on the custom panel; adjusting the basic properties, title, viewport, X-axis, Y-axis, legend, tooltip, and tools of ECharts components through the editing panel; and listing the existing properties of ECharts components in each type of property in the editing panel.

Images