Method and device for customizing legend function of ECharts chart

Abstract

The embodiment of the present invention provides a method, device and electronic device for customizing the legend function of an ECharts chart, which belongs to the field of data processing technology. The method includes: receiving the configuration parameter P of the custom legend through props; using the useState hook of React to create a state variable Snt; sorting the original data D corresponding to the ECharts chart through the sort function to generate new sorted data D'=sort(D); traversing the legend data L of the ECharts chart through the generateLegend function, and creating a corresponding legend item for each legend item. HTML tags; define callback events through handleClick function, perform additional operations when the user clicks a specific area on the chart, monitor the change of data D based on updateOnDataChange function, update state S1 to S2 and re-render chart Chart2 to Chart3. The present invention improves the flexibility of ECharts chart interaction.

Description

Technical Field

[0001] The present invention relates to the field of data processing technology, and in particular to a method, device and electronic device for a custom legend function of an ECharts chart. Background Art

[0002] ECharts is an open source visualization library based on JavaScript. It provides a variety of chart types and configuration options, which can help developers quickly create high-quality, interactive data visualization charts. ECharts supports a variety of chart types, including but not limited to line charts, bar charts, scatter charts, pie charts, candlestick charts, maps, etc., and has good cross-platform compatibility and can run smoothly on PCs and mobile devices.

[0003] ECharts can be integrated into any web page and can be easily used with modern front-end frameworks such as Vue, React, Angular, etc. Due to its excellent performance and ease of use, ECharts has become one of the choices for many companies and individual developers when building data visualization solutions.

[0004] The prior art has the following problems when using ECharts charts:

[0005] 1. Insufficient flexibility: ECharts has limited default legend layout and style options, making it difficult to implement some complex custom requirements, and unable to accurately control the position and spacing of legend items.

[0006] 2. Limited interactivity: The click interaction of the default legend is relatively simple, and can only switch the display / hide of the series. It is difficult to achieve more complex interactive effects, such as drag-and-drop sorting, multiple selection, etc.

[0007] 3. Limitations of style customization: Although some style configurations are provided, they may not be sufficient for some special design requirements.

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

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

[0010] In a first aspect, an embodiment of the present invention provides a method for customizing a legend function of an ECharts chart, comprising:

[0011] Receive the configuration parameter P of the custom legend through props, perform initial operation on the custom legend through the initialization function init(), and obtain the legend initial configuration parameter C0 and the legend initial state parameter S0, (S0, C0) = init(P);

[0012] Use React's useState hook to create a state variable Snt. The state variable Snt completes the initialization state Snt=useState(S0) through S0. The state variable Snt is updated in real time during the component life cycle. Use the useRef hook to create a reference object ref=useRef(). The reference object ref saves references to DOM nodes and non-rendering dependencies to maintain state consistency across renderings.

[0013] The original data D corresponding to the ECharts chart is sorted by the sort function to generate new sorted data D'=sort(D). The configureChart function uses the basic configuration C0 and the sorted data D' to set the detailed properties of the ECharts chart Chart0=configureChart(C0,D');

[0014] The generateLegend function traverses the legend data L of the ECharts chart and creates a corresponding HTML tag, use handleHover function to handle mouse hover event E. When the user hovers the mouse over the legend item of legend data L, change the presentation of the legend item and its associated data. Write handleLegendClick function to handle legend item click event E, update the current state Snt to S1 and change chart Chart0 to Chart1 accordingly.

[0015] Define a callback event through the handleClick function to perform additional operations when the user clicks a specific area on the chart. Define the applyEmphasis function to apply a highlight effect to Chart1 when the mouse hovers over it, and generate Chart2. Set the conditionalRender function to decide whether to display the paginator element based on the data volume D and the responsive design rule R, optimize the display effect of small data sets, monitor the changes of data D based on the updateOnDataChange function, update the state S1 to S2, and re-render Chart2 to Chart3.

[0016] According to a specific implementation of the embodiment of the present disclosure, the configuration parameter P of the custom legend is received through props, and the custom legend is initially operated through the initialization function init() to obtain the legend initial configuration parameter C0 and the legend initial state parameter S0, including:

[0017] Various configuration parameters P are received through props, and the configuration parameters P include: chartID, color scheme and data type.

[0018] According to a specific implementation of an embodiment of the present disclosure, the configuration parameter P of the custom legend is received through props, and the custom legend is initially operated through the initialization function init() to obtain the legend initial configuration parameter C0 and the legend initial state parameter S0, and further includes:

[0019] The init() function parses all configuration parameters P received through props to identify the specified color, font size, and legend item layout information;

[0020] For parameters that are not explicitly specified but are required in actual use, default values ​​are automatically set for them through the init() function;

[0021] Determine the initial configuration parameters C0 of the legend, including: determine the position and arrangement of the legend items, set the color, shape and text label of each legend item, specify whether to support clicking to select / unselect the legend item to control the display of the corresponding data series, and configure the spacing between legend items;

[0022] Determine the legend initial state parameters S0: including: determining the default activated legend item, whether there is a filter condition, the current page number when displaying multiple pages, and the state of the search filter.

[0023] According to a specific implementation of the embodiment of the present disclosure, the original data D corresponding to the ECharts chart is sorted by the sort function to generate new sorted data D'=sort(D), and the detailed properties of the ECharts chart are set by the configureChart function using the basic configuration C0 and the sorted data D', Chart0=configureChart(C0,D'), including:

[0024] Use the sort function to traverse the original data D, and according to the preset sorting criteria, compare and adjust the positions of the data items in the original data D one by one to generate a new sorted data set D′.

[0025] According to a specific implementation of the embodiment of the present disclosure, the original data D corresponding to the ECharts chart is sorted by the sort function to generate new sorted data D'=sort(D), and the detailed properties of the ECharts chart are set by the configureChart function using the basic configuration C0 and the sorted data D', Chart0=configureChart(C0,D'), which also includes:

[0026] According to the configuration in C0, set the title text and style of the chart, define the type of each graphic element in the chart, set the style attributes of each graphic element, configure the position and display mode of the legend, and the label and color of each legend item;

[0027] Define the specific content displayed by the tooltip when the mouse hovers over a specific position on the chart, and set the appearance of the tooltip;

[0028] Map the sorted data D′ to the corresponding chart series, and integrate all configuration items together to form a complete chart configuration object Chart0. The Chart0 object contains all the visual and behavioral properties of the chart.

[0029] According to a specific implementation of the embodiment of the present disclosure, the legend data L of the ECharts chart is traversed through the generateLegend function, and a corresponding HTML tags, including:

[0030] Extract the legend data L from the ECharts instance. The legend data L contains the names of all series in the chart and related information.

[0031] Create an empty DOM fragment to store all the generated Tag, the empty DOM fragment serves as a wrapping element outside the example;

[0032] Loop through the legend data L, and for the traversed legend items, build a new one based on the information of the legend items Tags, in Add a color block or icon representing the legend inside the label, and add a text label next to the color block to display the specific name of the legend item;

[0033] For each Add a click event listener to the label. When the user clicks a legend item, the ECharts chart is controlled by JavaScript to hide or display the corresponding data series.

[0034] Include all The complete HTML structure of the label is inserted into the list area below or on the side of the chart.

[0035] According to a specific implementation of the embodiment of the present disclosure, the handleHover function is used to process the mouse hover event E, and when the user hovers the mouse over the legend item of the legend data L, the presentation form of the legend item and its associated data is changed, including:

[0036] Define the handleHover function, which receives two parameters: the event type and the information of the currently hovered legend item;

[0037] For each generated Legend items, add listeners for mouseover and mouseout events;

[0038] Inside the handleHover function, decide how to respond based on the type of event received: if it is a mouseover event, update the style of the legend item to highlight it; if it is a mouseout event, restore the legend item and associated data series to the default style;

[0039] Use the setOption method provided by ECharts to adjust the presentation of the corresponding data series in the chart, and use the dispatchAction method to send actions to the chart to highlight the preset series or set the content of the prompt box;

[0040] Cancel the previous highlight effect in the mouseout event processing and restore it to the initial state.

[0041] According to a specific implementation of the embodiment of the present disclosure, monitoring the change of data D based on the updateOnDataChange function, updating the state S1 to S2 and re-rendering the chart Chart2 to Chart3 includes:

[0042] Use the updateOnDataChange function to monitor the operations of adding, deleting or modifying entries in data D;

[0043] Inside the updateOnDataChange function, when it is detected that the data D has changed, the chart is redrawn according to the new state S2 and the updated data, and the chart of Chart2 is updated to Chart3.

[0044] In a second aspect, an embodiment of the present invention provides a device for a custom legend function of an ECharts chart, comprising:

[0045] The initial module receives the configuration parameter P of the custom legend through props, performs initial operation on the custom legend through the initialization function init(), and obtains the legend initial configuration parameter C0 and the legend initial state parameter S0, (S0, C0) = init(P);

[0046] Create a module, use React's useState hook to create a state variable Snt, the state variable Snt completes the initialization state Snt=useState(S0) through S0, the state variable Snt is updated in real time during the component life cycle, use the useRef hook to create a reference object ref=useRef(), the reference object ref saves references to DOM nodes and non-rendering dependencies to maintain state consistency across rendering;

[0047] The sorting module sorts the original data D corresponding to the ECharts chart through the sort function to generate new sorted data D'=sort(D), and uses the configureChart function to use the basic configuration C0 and the sorted data D' to set the detailed properties of the ECharts chart Chart0=configureChart(C0,D');

[0048] Traverse the module, traverse the legend data L of the ECharts chart through the generateLegend function, and create a corresponding HTML tag, use handleHover function to handle mouse hover event E. When the user hovers the mouse over the legend item of legend data L, change the presentation of the legend item and its associated data. Write handleLegendClick function to handle legend item click event E, update the current state Snt to S1 and change chart Chart0 to Chart1 accordingly.

[0049] Update the module, define the callback event through the handleClick function, perform additional operations when the user clicks a specific area on the chart, define the applyEmphasis function to apply the highlight effect to the chart Chart1 when the mouse hovers, and generate Chart2, set the conditionalRender function to decide whether to display the paginator element based on the data volume D and the responsive design rule R, optimize the display effect of small data sets, monitor the changes of data D based on the updateOnDataChange function, update the state S1 to S2 and re-render the chart Chart2 to Chart3.

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

[0051] at least one processor; and,

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

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

[0054] In a fourth aspect, an embodiment of the present invention further provides a non-transitory computer-readable storage medium, which stores computer instructions, and the computer instructions are used to enable the computer to execute the method of the ECharts chart custom legend function in the aforementioned first aspect or any implementation of the first aspect.

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

[0056] The solution of the ECharts chart custom legend function in the embodiment of the present invention includes: receiving the configuration parameter P of the custom legend through props, performing initial operation on the custom legend through the initialization function init(), and obtaining the legend initial configuration parameter C0 and the legend initial state parameter S0, (S0, C0) = init(P);

[0057] Use React's useState hook to create a state variable Snt. The state variable Snt completes the initialization state Snt=useState(S0) through S0. The state variable Snt is updated in real time during the component life cycle. Use the useRef hook to create a reference object ref=useRef(). The reference object ref saves references to DOM nodes and non-rendering dependencies to maintain state consistency across renderings. Use the sort function to sort the original data D corresponding to the ECharts chart to generate new sorted data D'=sort(D). Use the configureChart function to use the basic configuration C0 and sorted data D' to set the detailed properties of the ECharts chart Chart0=configureChart(C0,D'). Use the generateLegend function to traverse the legend data L of the ECharts chart and create corresponding legend items for each legend item. HTML tags, use handleHover function to handle mouse hover event E, when the user hovers the mouse over the legend item of legend data L, change the presentation form of legend item and its associated data, write handleLegendClick function to handle legend item click event E, update current state Snt to S1 and change chart Chart0 to Chart1 accordingly; define callback event through handleClick function, perform additional operations when user clicks on specific area on chart, define applyEmphasis function to apply highlight effect to chart Chart1 when mouse hovers, and generate Chart2, set conditionalRender function to decide whether to display paginator element according to data volume D and responsive design rule R, optimize the display effect of small-scale data set, monitor the change of data D based on updateOnDataChange function, update state S1 to S2 and re-render chart Chart2 to Chart3. Through the scheme of this application, the legend of ECharts chart is not displayed, and the custom legend is written by simulating ECharts legend using dom structure, thereby improving the flexibility of ECharts chart interaction. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0059] Figure 1 A schematic diagram of a method flow of a custom legend function for an ECharts chart provided by an embodiment of the present invention;

[0060] Figure 2 A schematic diagram of another method flow of a custom legend function for an ECharts chart provided by an embodiment of the present invention;

[0061] Figure 3 A schematic diagram of the device structure of the ECharts chart custom legend function provided by an embodiment of the present invention;

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

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

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

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

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

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

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

[0069] See also Figure 1 and Figure 2 , the embodiment of the present disclosure provides a method for customizing the legend function of an ECharts chart, including:

[0070] S101, receiving the configuration parameter P of the custom legend through props, performing initial operation on the custom legend through the initialization function init(), and obtaining the legend initial configuration parameter C0 and the legend initial state parameter S0, (S0, C0) = init(P).

[0071] In the component definition, first define props to receive external configuration parameters. These props may include but are not limited to chart ID, color scheme, data type, layout mode of legend items (horizontal or vertical), whether to enable interactive functions, etc.

[0072] Next, you can create the initialization function init(). The initialization function init() is the most critical part of the whole process. It is responsible for generating the initial configuration C0 and initial state S0 of the legend according to the passed props parameter P.

[0073] Inside the init() function, first parse the props parameter P received. This step involves understanding and validating each parameter, ensuring that they conform to the expected format and type. For those parameters that are not explicitly specified in the props but are required, set reasonable default values. For example, if no color scheme is provided, a set of predefined colors can be used; if the layout of the legend items is not specified, the default horizontal layout can be used.

[0074] Construct the initial configuration C0 of the legend based on the parsed props parameter P and the default values ​​set. This configuration can include:

[0075] Color scheme for the legend;

[0076] How the legend items are laid out (horizontally or vertically);

[0077] The text style of the legend items, such as font size, color, etc.;

[0078] Whether to enable the click event of the legend item to control the display of the corresponding data series;

[0079] Other visual and behavioral properties, such as spacing, margins, etc.

[0080] Based on the props parameter P and other relevant factors, the initial state S0 of the legend can be determined, including:

[0081] The currently selected legend item (if there is a default selected item);

[0082] If paging is supported, the current page number;

[0083] Any other state information relevant to the legend, such as the state of the search filter, etc.

[0084] Finally, the init() function returns two objects: one is the initial configuration C0 that describes the appearance and behavior of the legend, and the other is S0 that reflects the initial state of the legend. After receiving C0 and S0, the component can use this information to initialize the legend and render the chart and legend according to these configurations and states.

[0085] By following the above steps, you can create a flexible and configurable custom legend component that can dynamically adjust its appearance and behavior based on the props parameter P provided externally, while maintaining good default settings to ensure that it works properly even when some configuration is missing.

[0086] S102, use React's useState hook to create a state variable Snt, the state variable Snt completes the initialization state Snt=useState(S0) through S0, the state variable Snt is updated in real time during the component life cycle, and useRef hook is used to create a reference object ref=useRef(), the reference object ref saves references to DOM nodes and non-rendering dependencies to maintain state consistency across rendering.

[0087] In a React component, useState and useRef hooks are used to create and manage state variables Snt and reference objects ref, including the following steps:

[0088] S1021. Create state variable Snt.

[0089] A state variable Snt is created through the useState hook, and its initial value is set to the initial state S0 returned from the init() function. useState returns an array, where the first element is the current state Snt, and the second element is a function used to update the state. Whenever the state needs to be updated, you can trigger a re-rendering of the component by calling this function and passing in the new state value.

[0090] S1022. Use the useState hook.

[0091] When the component is first rendered, Snt will be initialized to S0. During the life cycle of the component, Snt can be updated based on user interaction, data changes, or other logic. Each state update will cause the component to be re-rendered, and the latest state value will be reflected in the UI.

[0092] S1023. Create a reference object ref.

[0093] A reference object ref can be created through the useRef hook. This reference object can be used to save references to DOM nodes or any other non-rendering dependencies. Unlike the state, the reference object ref remains unchanged throughout the life cycle of the component. This means that the same reference object can be accessed and modified between different renderings without causing the component to re-render.

[0094] S1024. Use the useRef hook.

[0095] Ref is used to get a reference to a DOM element. For example, if there is a button, you can use ref to get the DOM node of this button and operate it (such as focusing, scrolling, etc.). In addition to DOM nodes, ref can also be used to save some data or objects that do not need to trigger re-rendering. For example, it can be used to save timer IDs, WebSocket instances, etc.

[0096] The state Snt is used to manage data that affects the rendering of the component. Whenever the state changes, React will automatically re-render the component. The reference ref is used to manage data or objects that do not affect the rendering of the component. They remain consistent during the life cycle of the component and will not trigger re-rendering.

[0097] When the component is first loaded, the state Snt is initialized to S0 and a reference ref is created. As the user interacts or the data changes, the state Snt can be updated to reflect these changes. At the same time, the reference ref can be used to handle operations that do not require re-rendering. When the component is uninstalled, if some resources (such as timers or network connections) are saved in the reference ref, you need to ensure that these resources are properly cleaned up to avoid memory leaks.

[0098] In this way, the state and references of React components can be managed effectively, ensuring that components can respond to user interactions and data changes while maintaining good performance and consistency.

[0099] S103, sorting the original data D corresponding to the ECharts chart through the sort function to generate new sorted data D'=sort(D), and setting the detailed properties of the ECharts chart Chart0=configureChart(C0,D') by using the configureChart function with the basic configuration C0 and the sorted data D'.

[0100] In order to sort the original data D corresponding to the ECharts chart through the sort function and generate new sorted data D', and then use the configureChart function to use the basic configuration C0 and the sorted data D' to set the detailed properties of the ECharts chart Chart0, you can follow the steps below:

[0101] S1031. Data sorting.

[0102] Define a sort function to process the original data D. This function will sort the data according to specific sorting rules (such as by time, numerical size, alphabetical order, etc.).

[0103] Determine how to sort the data. For example, if D is a series of sales data, you can choose to sort it by sales from high to low; if it is time series data, you can choose to sort it in chronological order. Call the sort function, pass in the original data D and sort it according to the set sorting criteria. After the sorting is completed, the new sorted data D' is generated.

[0104] S1032. Configure ECharts chart.

[0105] Define a configureChart function that receives two parameters: the base configuration C0 and the sorted data D'. In the configureChart function, first apply the base configuration C0 obtained from the init() function. This includes setting the basic properties of the chart, such as the title, legend position, color scheme, etc. Integrate the sorted data D' into the chart configuration. Map D' to the data series of the chart to ensure that the data for each series is correct.

[0106] According to the configuration in C0 and the content of D', further set the detailed properties of the chart, including:

[0107] Graphic elements: define the type of each graphic element (such as bar chart, line chart, pie chart, etc.) and its style attributes (such as color, width, fill, etc.);

[0108] Tooltip: Configure the content and style of the tooltip so that users can see specific data information when hovering;

[0109] Legend: Set the legend position, display mode, and label and color of each legend item;

[0110] Other advanced properties: You can set more advanced properties as needed, such as data point style, animation effects, interactive behaviors, etc.

[0111] S1033. Generate final configuration.

[0112] At the end of the configureChart function, a chart configuration object Chart0 containing all detailed properties is returned. This configuration object contains all the visual and behavioral properties of the chart and can be directly used for ECharts instantiation and rendering.

[0113] S1034. Apply configuration and render chart.

[0114] Use the ECharts library to create a new ECharts instance and bind it to a DOM element in the page. Pass the generated chart configuration Chart0 to the setOption method of the ECharts instance to apply these configurations and render the chart.

[0115] Through the above steps, you can sort the ECharts chart data and generate detailed chart configurations based on the sorted data and initial configurations, thereby creating a visual chart that meets your needs. This not only improves data readability and analysis efficiency, but also enhances user experience.

[0116] S104, traverse the legend data L of the ECharts chart through the generateLegend function, and create a corresponding HTML tag, use handleHover function to handle mouse hover event E, when the user hovers the mouse over the legend item of legend data L, change the presentation of the legend item and its associated data, write handleLegendClick function to handle legend item click event E, update the current state Snt to S1 and change chart Chart0 to Chart1 accordingly.

[0117] In order to implement the generateLegend function to traverse the legend data L of the ECharts chart and create a corresponding HTML tags, and use the handleHover function to handle the mouse hover event E and the handleLegendClick function to handle the legend item click event E. You can follow the steps below:

[0118] S1041. Generate legend items.

[0119] Define the generateLegend function, which is responsible for traversing the legend data L and creating a legend for each legend item. HTML tags.

[0120] Traverse the legend data and loop through the legend data L. For each item in the array (that is, each legend item), perform the following operations:

[0121] create Tags: Construct a new legend item based on the information of the current legend item. Label.

[0122] Add a color block or icon: Add a color block or icon representing the legend inside the label so that users can intuitively associate the legend with the corresponding part on the chart.

[0123] Add text label: Add a text label next to the color block to display the specific name of the legend item.

[0124] Add event listeners: for each The tag adds listeners for the mouseover and mouseout events and binds them to the handleHover function; it also adds a listener for the click event and binds it to the handleLegendClick function.

[0125] S1042. Process mouse hover events.

[0126] Define the handleHover function, which receives two parameters, one is the event type (such as mouseover or mouseout), and the other is the information of the currently hovered legend item.

[0127] Handle mouseover events, including: when the mouse hovers over a legend item, change the style of the legend item to highlight it (for example, change the background color, font color, etc.). Find the data series related to the legend item through the EChartsAPI and visually emphasize it. This may include increasing the line width, changing the fill color or the color of the point, etc.

[0128] Handle mouseout events, including: restoring the legend item style. When the mouse leaves the legend item, restore the legend item and its associated data series to the default style.

[0129] S1043. Process the legend item click event.

[0130] Define the handleLegendClick function: This function receives two parameters, one is the event object, and the other is the information of the currently clicked legend item. According to the clicked legend item, update the current state Snt to the new state S1. This can be done by calling the setSnt function returned by the useState hook. According to the new state S1, adjust the chart configuration Chart0 to the new configuration Chart1. This may include hiding or displaying the corresponding data series, changing the state of the legend item, etc. Use the setOption method of the ECharts instance to apply the new chart configuration Chart1 to the chart, thereby updating the chart display.

[0131] Through the above steps, you can implement an interactive custom legend component that supports mouse hover highlighting and click switching chart data. This not only improves the user experience, but also allows for better display and analysis of data.

[0132] S105, defines a callback event through the handleClick function, performs additional operations when the user clicks a specific area on the chart, defines the applyEmphasis function to apply a highlight effect to the chart Chart1 when the mouse hovers over it, and generates Chart2, sets the conditionalRender function to decide whether to display the paginator element based on the data volume D and the responsive design rule R, optimizes the display effect of small-scale data sets, monitors the changes of data D based on the updateOnDataChange function, updates the state S1 to S2 and re-renders the chart Chart2 to Chart3.

[0133] To achieve the described functionality, the following steps can be followed to define and implement the various functions. These steps will ensure that the chart is dynamically responsive to user interaction and is optimized based on the amount of data and responsive design rules.

[0134] S1051. Define handleClick function.

[0135] Create a function called handleClick that receives an event object E as a parameter. Inside the handleClick function, perform the appropriate action based on the specific location of the click. For example, if the user clicks a specific area on the chart (such as a data point or area), you can trigger a custom action such as displaying detailed information, opening a pop-up window, or triggering other business logic.

[0136] S1052. Define applyEmphasis function.

[0137] Create a function called applyEmphasis that receives the current chart configuration Chart1 and the event object E as parameters. Inside the applyEmphasis function, use the dispatchAction method of ECharts or other related APIs to apply the highlight effect. For example, when the mouse hovers over a data point, you can change the color, size, or add animation effects to the data point. Generate a new chart configuration Chart2 based on the updated chart configuration with the highlight effect.

[0138] S1053. Define conditionalRender function.

[0139] Create a function called conditionalRender that receives the amount of data D and the responsive design rule R as parameters. Based on the amount of data D and the responsive design rule R, decide whether to display the pager element. For example, if the amount of data is small, you may not need to display the pager; if the amount of data is large, you need to display the pager to optimize the user experience. Based on the above judgment, return the optimized UI elements. This may include showing or hiding the pager, adjusting the layout, etc.

[0140] S1054. Define updateOnDataChange function.

[0141] Create a function called updateOnDataChange that receives the current state S1 and data D as parameters. Inside the updateOnDataChange function, check whether the data D has changed. If the data has changed, update the current state S1 to the new state S2.

[0142] According to the new state S2 and data D, update the chart configuration Chart2 to the new chart configuration Chart3. Then, use the setOption method of the ECharts instance to apply the new configuration Chart3 to the chart to complete the re-rendering of the chart.

[0143] Through the above steps, you can realize a highly interactive and responsive ECharts chart component, which supports mouse hover highlighting, legend item click switching, custom click event processing, conditional rendering, and dynamic update when data changes. This not only improves the user experience, but also better displays and analyzes data.

[0144] According to a specific implementation of the embodiment of the present disclosure, the configuration parameter P of the custom legend is received through props, and the custom legend is initially operated through the initialization function init() to obtain the legend initial configuration parameter C0 and the legend initial state parameter S0, including:

[0145] Various configuration parameters P are received through props, and the configuration parameters P include: chartID, color scheme and data type.

[0146] According to a specific implementation of an embodiment of the present disclosure, the configuration parameter P of the custom legend is received through props, and the custom legend is initially operated through the initialization function init() to obtain the legend initial configuration parameter C0 and the legend initial state parameter S0, and further includes:

[0147] The init() function parses all configuration parameters P received through props to identify the specified color, font size, and legend item layout information;

[0148] For parameters that are not explicitly specified but are required in actual use, default values ​​are automatically set for them through the init() function;

[0149] Determine the initial configuration parameters C0 of the legend, including: determine the position and arrangement of the legend items, set the color, shape and text label of each legend item, specify whether to support clicking to select / unselect the legend item to control the display of the corresponding data series, and configure the spacing between legend items;

[0150] Determine the legend initial state parameters S0: including: determining the default activated legend item, whether there is a filter condition, the current page number when displaying multiple pages, and the state of the search filter.

[0151] According to a specific implementation of the embodiment of the present disclosure, the original data D corresponding to the ECharts chart is sorted by the sort function to generate new sorted data D'=sort(D), and the detailed properties of the ECharts chart are set by the configureChart function using the basic configuration C0 and the sorted data D', Chart0=configureChart(C0,D'), including:

[0152] Use the sort function to traverse the original data D, and according to the preset sorting criteria, compare and adjust the positions of the data items in the original data D one by one to generate a new sorted data set D′.

[0153] According to a specific implementation of the embodiment of the present disclosure, the original data D corresponding to the ECharts chart is sorted by the sort function to generate new sorted data D'=sort(D), and the detailed properties of the ECharts chart are set by the configureChart function using the basic configuration C0 and the sorted data D', Chart0=configureChart(C0,D'), which also includes:

[0154] According to the configuration in C0, set the title text and style of the chart, define the type of each graphic element in the chart, set the style attributes of each graphic element, configure the position and display mode of the legend, and the label and color of each legend item;

[0155] Define the specific content displayed by the tooltip when the mouse hovers over a specific position on the chart, and set the appearance of the tooltip;

[0156] Map the sorted data D′ to the corresponding chart series, and integrate all configuration items together to form a complete chart configuration object Chart0. The Chart0 object contains all the visual and behavioral properties of the chart.

[0157] According to a specific implementation of the embodiment of the present disclosure, the legend data L of the ECharts chart is traversed through the generateLegend function, and a corresponding HTML tags, including:

[0158] Extract the legend data L from the ECharts instance. The legend data L contains the names of all series in the chart and related information.

[0159] Create an empty DOM fragment to store all the generated Tag, the empty DOM fragment serves as a wrapping element outside the example;

[0160] Loop through the legend data L, and for the traversed legend items, build a new one based on the information of the legend items Tags, in Add a color block or icon representing the legend inside the label, and add a text label next to the color block to display the specific name of the legend item;

[0161] For each Add a click event listener to the label. When the user clicks a legend item, the ECharts chart is controlled by JavaScript to hide or display the corresponding data series.

[0162] Include all The complete HTML structure of the label is inserted into the list area below or on the side of the chart.

[0163] According to a specific implementation of the embodiment of the present disclosure, the handleHover function is used to process the mouse hover event E, and when the user hovers the mouse over the legend item of the legend data L, the presentation form of the legend item and its associated data is changed, including:

[0164] Define the handleHover function, which receives two parameters: the event type and the information of the currently hovered legend item;

[0165] For each generated Legend items, add listeners for mouseover and mouseout events;

[0166] Inside the handleHover function, decide how to respond based on the type of event received: if it is a mouseover event, update the style of the legend item to highlight it; if it is a mouseout event, restore the legend item and associated data series to the default style;

[0167] Use the setOption method provided by ECharts to adjust the presentation of the corresponding data series in the chart, and use the dispatchAction method to send actions to the chart to highlight the preset series or set the content of the prompt box;

[0168] Cancel the previous highlight effect in the mouseout event processing and restore it to the initial state.

[0169] According to a specific implementation of the embodiment of the present disclosure, monitoring the change of data D based on the updateOnDataChange function, updating the state S1 to S2 and re-rendering the chart Chart2 to Chart3 includes:

[0170] Use the updateOnDataChange function to monitor the operations of adding, deleting or modifying entries in data D;

[0171] Inside the updateOnDataChange function, when it is detected that the data D has changed, the chart is redrawn according to the new state S2 and the updated data, and the chart of Chart2 is updated to Chart3.

[0172] Corresponding to the above method embodiment, see Figure 3 The embodiment of the present invention also discloses a device 30 for customizing the legend function of an ECharts chart, including:

[0173] The initial module 301 receives the configuration parameter P of the custom legend through props, performs initial operation on the custom legend through the initialization function init(), and obtains the legend initial configuration parameter C0 and the legend initial state parameter S0, (S0, C0) = init(P);

[0174] Create module 302, use React's useState hook to create a state variable Snt, the state variable Snt completes the initialization state Snt=useState(S0) through S0, the state variable Snt is updated in real time during the component life cycle, use the useRef hook to create a reference object ref=useRef(), the reference object ref saves references to DOM nodes and non-rendering dependencies to maintain state consistency across renderings;

[0175] The sorting module 303 sorts the original data D corresponding to the ECharts chart through the sort function to generate new sorted data D'=sort(D), and uses the configureChart function to use the basic configuration C0 and the sorted data D' to set the detailed properties of the ECharts chart Chart0=configureChart(C0,D');

[0176] The traversal module 304 traverses the legend data L of the ECharts chart through the generateLegend function and creates a corresponding HTML tag, use handleHover function to handle mouse hover event E. When the user hovers the mouse over the legend item of legend data L, change the presentation of the legend item and its associated data. Write handleLegendClick function to handle legend item click event E, update the current state Snt to S1 and change chart Chart0 to Chart1 accordingly.

[0177] Update module 305, define a callback event through the handleClick function, perform additional operations when the user clicks a specific area on the chart, define the applyEmphasis function to apply a highlight effect to the chart Chart1 when the mouse hovers, and generate Chart2, set the conditionalRender function to decide whether to display the paginator element based on the data volume D and the responsive design rule R, optimize the display effect of small-scale data sets, monitor the changes of data D based on the updateOnDataChange function, update the state S1 to S2 and re-render the chart Chart2 to Chart3.

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

[0179] at least one processor; and,

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

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

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

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

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

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

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

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

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

Claims

1. A method for customizing the legend function of an ECharts chart, characterized in that: include: Receive the configuration parameter P of the custom legend through props, perform initial operation on the custom legend through the initialization function init(), and obtain the legend initial configuration parameter C0 and the legend initial state parameter S0, (S0, C0) = init(P); Use React's useState hook to create a state variable Snt. The state variable Snt completes the initialization state Snt=useState(S0) through S0. The state variable Snt is updated in real time during the component life cycle. Use the useRef hook to create a reference object ref=useRef(). The reference object ref saves references to DOM nodes and non-rendering dependencies to maintain state consistency across renderings. The original data D corresponding to the ECharts chart is sorted by the sort function to generate new sorted data D'=sort(D). The detailed properties of the ECharts chart are set by the configureChart function using the initial configuration parameter C0 and the sorted data D'. The generateLegend function traverses the legend data L of the ECharts chart and creates a corresponding HTML tag, use handleHover function to handle mouse hover event E. When the user hovers the mouse over the legend item of legend data L, change the presentation of the legend item and its associated data. Write handleLegendClick function to handle the legend item click event, update the current state Snt to S1 and change the chart configuration object Chart0 to Chart1 accordingly. The handleClick function is used to define callback events, and additional operations are performed when the user clicks a specific area on the chart. The applyEmphasis function is defined to apply a highlight effect to the chart configuration object Chart1 when the mouse hovers over it, and Chart2 is generated. The conditionalRender function is set to decide whether to display the pager element based on the data volume and the responsive design rule R, and the display effect of small-scale data sets is optimized. Based on the updateOnDataChange function, the changes of data D are monitored, the state S1 is updated to S2, and the chart configuration object Chart2 is re-rendered to Chart3; The generateLegend function traverses the legend data L of the ECharts chart and creates a corresponding HTML tags, including: Extract the legend data L from the ECharts instance. The legend data L contains the names of all series in the chart and related information. Create an empty DOM fragment to store all the generated Tag, the empty DOM fragment serves as a wrapping element outside the example; Loop through the legend data L, and for the traversed legend items, build a new one based on the information of the legend items Tags, in Add a color block or icon representing the legend inside the label, and add a text label next to the color block to display the specific name of the legend item; For each Add a click event listener to the label. When the user clicks a legend item, the ECharts chart is controlled by JavaScript to hide or display the corresponding data series. Include all The complete HTML structure of the label is inserted into the list area below or on the side of the chart.

2. The method according to claim 1, characterized in that The configuration parameter P of the custom legend is received through props, and the initialization function init() is used to perform initial operation on the custom legend to obtain the legend initial configuration parameter C0 and the legend initial state parameter S0, including: Various configuration parameters P are received through props, and the configuration parameters P include: chartID, color scheme and data type.

3. The method according to claim 2, characterized in that The configuration parameter P of the custom legend is received through props, and the initialization function init() is used to perform initial operation on the custom legend to obtain the legend initial configuration parameter C0 and the legend initial state parameter S0, and further includes: The init() function parses all configuration parameters P received through props to identify the specified color, font size, and legend item layout information; For parameters that are not explicitly specified but are required in actual use, default values ​​are automatically set for them through the init() function; Determine the initial configuration parameters C0 of the legend, including: determine the position and arrangement of the legend items, set the color, shape and text label of each legend item, specify whether to support clicking to select / unselect the legend item to control the display of the corresponding data series, and configure the spacing between legend items; Determine the legend initial state parameters S0: including: determining the default activated legend item, whether there is a filter condition, the current page number when displaying multiple pages, and the state of the search filter.

4. The method according to claim 3, characterized in that The original data D corresponding to the ECharts chart is sorted by the sort function to generate new sorted data D'=sort(D), and the detailed properties of the ECharts chart are set by the configureChart function using the initial configuration parameter C0 and the sorted data D', including: Use the sort function to traverse the original data D, and according to the preset sorting criteria, compare and adjust the positions of the data items in the original data D one by one to generate a new sorted data set D′.

5. The method according to claim 4, characterized in that The method of sorting the original data D corresponding to the ECharts chart by the sort function to generate new sorted data D'=sort(D), and setting the detailed properties of the ECharts chart by using the initial configuration parameter C0 and the sorted data D' by the configureChart function, further includes: According to the configuration in C0, set the title text and style of the chart, define the type of each graphic element in the chart, set the style attributes of each graphic element, configure the position and display mode of the legend, and the label and color of each legend item; Define the specific content displayed by the tooltip when the mouse hovers over a specific position on the chart, and set the appearance of the tooltip; Map the sorted data D′ to the corresponding chart series, and integrate all configuration items together to form a complete chart configuration object Chart0. The Chart0 object contains all the visual and behavioral properties of the chart.

6. The method according to claim 1, characterized in that The handleHover function is used to process the mouse hover event E. When the user hovers the mouse over the legend item of the legend data L, the presentation form of the legend item and its associated data is changed, including: Define the handleHover function, which receives two parameters: the event type and the information of the currently hovered legend item; For each generated Tag, add listeners for mouseover and mouseout events; Inside the handleHover function, decide how to respond based on the type of event received: if it is a mouseover event, update the style of the legend item to highlight it; if it is a mouseout event, restore the legend item and associated data series to the default style; Use the setOption method provided by ECharts to adjust the presentation of the corresponding data series in the chart, and use the dispatchAction method to send actions to the chart to highlight the preset series or set the content of the prompt box; Cancel the previous highlight effect in the mouseout event processing and restore it to the initial state.

7. The method according to claim 6, characterized in that The updateOnDataChange function is used to monitor the change of data D, update the state S1 to S2, and re-render the chart configuration object Chart2 to Chart3, including: Use the updateOnDataChange function to monitor the operations of adding, deleting or modifying entries in data D; Inside the updateOnDataChange function, when it is detected that the data D has changed, the chart is redrawn according to the new state S2 and the updated data, and the chart configuration object of Chart2 is updated to Chart3.

8. A device for customizing the legend function of ECharts chart, characterized in that: include: The initial module receives the configuration parameter P of the custom legend through props, performs initial operation on the custom legend through the initialization function init(), and obtains the legend initial configuration parameter C0 and the legend initial state parameter S0, (S0, C0) = init(P); Create a module, use React's useState hook to create a state variable Snt, the state variable Snt completes the initialization state Snt=useState(S0) through S0, the state variable Snt is updated in real time during the component life cycle, use the useRef hook to create a reference object ref=useRef(), the reference object ref saves references to DOM nodes and non-rendering dependencies to maintain state consistency across rendering; The sorting module sorts the original data D corresponding to the ECharts chart through the sort function, generates new sorted data D'=sort(D), and uses the configureChart function to set the detailed properties of the ECharts chart using the initial configuration parameters C0 and the sorted data D'; Traverse the module, traverse the legend data L of the ECharts chart through the generateLegend function, and create a corresponding HTML tag, use handleHover function to handle mouse hover event E. When the user hovers the mouse over the legend item of legend data L, change the presentation of the legend item and its associated data. Write handleLegendClick function to handle the legend item click event, update the current state Snt to S1 and change the chart configuration object Chart0 to Chart1 accordingly. Update module, define callback events through handleClick function, perform additional operations when the user clicks on a specific area on the chart, define applyEmphasis function to apply highlight effect to chart configuration object Chart1 when the mouse hovers, and generate Chart2, set conditionalRender function to decide whether to display paginator elements according to data volume and responsive design rule R, optimize the display effect of small-scale data sets, monitor the change of data D based on updateOnDataChange function, update state S1 to S2 and re-render chart configuration object Chart2 to Chart3; The generateLegend function traverses the legend data L of the ECharts chart and creates a corresponding HTML tags, including: Extract the legend data L from the ECharts instance. The legend data L contains the names of all series in the chart and related information. Create an empty DOM fragment to store all the generated Tag, the empty DOM fragment serves as a wrapping element outside the example; Loop through the legend data L, and for the traversed legend items, build a new one based on the information of the legend items Tags, in Add a color block or icon representing the legend inside the label, and add a text label next to the color block to display the specific name of the legend item; For each Add a click event listener to the label. When the user clicks a legend item, the ECharts chart is controlled by JavaScript to hide or display the corresponding data series. Include all The complete HTML structure of the label is inserted into the list area below or on the side of the chart.

9. An electronic device, characterized in that: The electronic device comprises: at least one processor; and, a memory communicatively connected to the at least one processor; wherein, The memory stores instructions that can be executed by the at least one processor, and the instructions are executed by the at least one processor to enable the at least one processor to execute the method for the ECharts chart custom legend function as described in any one of claims 1 to 7.

Images