An event handling method and apparatus based on Echarts

By optimizing Echarts' event handling through the establishment of an indexed data structure, the problems of misjudgment of click events and response delays were solved, achieving efficient chart interaction and performance improvement.

CN119828936BActive Publication Date: 2025-12-02RESVENT MEDICAL TECH CO LTD
View PDF 2 Cites 0 Cited by

Patent Information

Application Number
CN202411880019.X
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2024-12-19
Publication Date
2025-12-02
Estimated Expiration
2044-12-19

AI Technical Summary

Technical Problem

When Echarts processes charts with a large number of data points, click events may be misjudged, response latency is high, and the event handling logic is not optimized enough under complex chart layouts, leading to confusion and inconsistency.

Method used

Establish an index data structure, including data type identifiers, region coordinate information, and data point information. Determine the target data point by triggering the coordinate information and type, and respond based on the target data point to optimize the event propagation path and reduce unnecessary redrawing operations.

Benefits of technology

It improves the smoothness of chart interaction, enhances the efficiency of users' data exploration and analysis, reduces the number of chart redraws and overhead, and improves the performance of Echarts pages.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN119828936B_ABST
    Figure CN119828936B_ABST
Patent Text Reader

Abstract

This application discloses an event handling method and apparatus based on Echarts, relating to the field of data visualization technology. The method includes: acquiring all data points bound to Echarts and the data types included in all data points; establishing an index data structure for all data points based on their data types; acquiring the trigger coordinate information and trigger type corresponding to the event trigger command; determining the target data type identifier corresponding to the event trigger command based on the trigger coordinate information and the index data structure; determining the corresponding target data point based on the trigger type, trigger coordinate information, and data point information corresponding to the target data type identifier; and responding to the event trigger command based on the target data point. In this application, by optimizing the event propagation path and reducing unnecessary redrawing operations, users can easily perform various operations on the chart, improving the efficiency and satisfaction of data exploration and analysis.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] This application relates to the field of data visualization technology, and in particular to an event processing method and apparatus based on Echarts. Background Technology

[0002] Echarts is a widely used JavaScript library for data visualization, designed to help users display complex data through intuitive charts. It supports various chart types and boasts powerful interactive features, suitable for visualization needs on both web and mobile devices. It supports a variety of basic chart types, such as line charts, bar charts, pie charts, scatter plots, and radar charts, as well as dynamic and composite charts, such as funnel charts, relationship diagrams, and candlestick charts. Furthermore, it can handle large amounts of data, using Canvas rendering technology to ensure efficient graph drawing and updates. It features virtual scrolling, data sharding, and other functionalities to improve performance in scenarios with large datasets, and provides interactive features such as mouse click, hover, and zoom event responses.

[0003] However, as the amount of data increases and the complexity of charts rises, Echarts' original event handling algorithm has gradually revealed some problems in terms of performance and response accuracy. For example, when processing charts with a large number of data points, click events may be misjudged, resulting in high response latency and impacting user experience. Furthermore, in complex chart layouts, the logic for event propagation and processing is not optimized, leading to issues such as chaotic and inconsistent event handling. Summary of the Invention

[0004] The purpose of this application is to address at least one of the aforementioned technical deficiencies.

[0005] On the one hand, embodiments of this application provide an event handling method based on Echarts, the method comprising:

[0006] Get all data points bound to Echarts and the data types included in all data points;

[0007] An index data structure is built for all data points based on the data types they include. The index data structure includes the identifier of each data type, the area coordinate information corresponding to each data type identifier, and the data point information corresponding to each data type identifier.

[0008] Receive event triggering instructions and obtain the trigger coordinate information and trigger type corresponding to the event triggering instructions;

[0009] Based on the trigger coordinate information and the area coordinate information corresponding to each data type identifier in the index data structure, determine the target data type identifier corresponding to the event trigger instruction;

[0010] Based on the trigger type, trigger coordinate information, and target data type identifier, the target data point corresponding to the event trigger command is determined, and the event trigger command is responded to based on the target data point to obtain the response display result.

[0011] Optionally, all data points include global data points and local data points, and the index data structure includes a first index data structure and a second index data structure;

[0012] An indexed data structure is built for all data points based on the data types they encompass, including:

[0013] A first index data structure is established for the global data points based on the first data type included in the global data points. The first index data structure includes the identifier of each first data type, the area coordinate information corresponding to each first data type identifier, and the data point information corresponding to each first data type identifier.

[0014] A second index data structure is established for the local data points based on the second data type included within the local data points. The second index data structure includes the identifier of each second data type, the region coordinate information corresponding to each second data type identifier, and the data point information corresponding to each second data type identifier.

[0015] Optionally, based on the trigger coordinate information and the region coordinate information corresponding to each data type identifier in the index data structure, the target data type identifier corresponding to the event triggering instruction is determined, including:

[0016] Based on the trigger coordinate information, the area coordinate information corresponding to each first data type identifier and the area coordinate information corresponding to each second data type identifier, the target data type identifier corresponding to the trigger instruction is determined from each first data type identifier and each second data type identifier.

[0017] Optionally, the data point information includes the coordinate information of the data point, and the trigger type is either click trigger or hover trigger. Based on the trigger type, trigger coordinate information, and the data point information corresponding to the target data type identifier, the target data point corresponding to the event trigger instruction is determined, including:

[0018] If the trigger type is click trigger, then the distance between the event trigger instruction and each data point is determined based on the trigger coordinate information and the coordinate information of the data point corresponding to the target data type identifier, and the data point whose distance meets the requirements is taken as the target data point corresponding to the event trigger instruction;

[0019] If the trigger type is a hover trigger type, then based on the trigger coordinate information and the coordinate information of the data point corresponding to the target data type identifier, the data point within the set distance range of the event trigger instruction is determined, and the data point within the set range is taken as the target data point corresponding to the event trigger instruction.

[0020] Optionally, the target data points include information data points and rendering data points. The system responds to event triggering commands based on the target data points to obtain the response display results, including:

[0021] Determine the data information to be displayed based on the information data points;

[0022] The data to be displayed is rendered based on the rendering data points, and the response display result of the event trigger command is obtained. The response display result includes one of the following: displaying data, updating the interface display size, and interface panning.

[0023] Optionally, responding to event-triggered commands based on target data points includes:

[0024] Obtain the number of target data points;

[0025] Based on the number of target data points, determine the number of times to process the target data points and the target data points to be processed each time;

[0026] The system responds to event triggering commands based on the number of times the target data points are processed and the target data points that need to be processed each time.

[0027] Optionally, the data type includes at least one of the following: oral and nasal airflow data type, snoring data type, respiratory effort data type, pulse rate data type, blood oxygen data type, and body position data type; the event triggering command is one of the following: waveform magnification command, waveform zoom-out command, add event command, delete event command, event information display command, and event update command; the data information includes at least one of the following: obstructive sleep apnea information, central sleep apnea information, mixed sleep apnea information, Cheyne-Stokes respiratory information, hypoventilation information, flow restriction information, and respiratory effort-related micro-arousal information.

[0028] Optionally, after responding to the event trigger command based on the target data point and obtaining the response display result, it also includes:

[0029] Determine the number of times the event trigger command is triggered;

[0030] If the number of triggers exceeds the preset number, the target data point and the response display result will be stored.

[0031] Optionally, the method further includes:

[0032] Determine whether the total number of data points exceeds the quantity threshold;

[0033] If the total number of data points exceeds the threshold, the data downsampling rate function event is executed.

[0034] On one hand, embodiments of this application provide an event handling apparatus based on Echarts, including:

[0035] The data acquisition module is used to acquire all data points bound to Echarts and the data types included in all data points;

[0036] The index building module is used to build an index data structure for all data points based on the data types included in all data points. The index data structure includes the identifier of each data type, the area coordinate information corresponding to each data type identifier, and the data point information corresponding to each data type identifier.

[0037] The event receiving module is used to receive event triggering instructions and obtain the trigger coordinate information and trigger type corresponding to the event triggering instructions.

[0038] The event response module is used to determine the target data type identifier corresponding to the event trigger instruction based on the trigger coordinate information and the area coordinate information corresponding to each data type identifier in the index data structure; and to determine the target data point corresponding to the event trigger instruction based on the trigger type, trigger coordinate information and the data point information corresponding to the target data type identifier, and to respond to the event trigger instruction based on the target data point to obtain the response display result.

[0039] In another aspect, embodiments of this application provide an electronic device, including a processor and a memory:

[0040] The memory is configured to store machine-readable instructions that, when executed by the processor, cause the processor to perform any one of the event handling methods based on Echarts.

[0041] The beneficial effects of the technical solutions provided in this application include at least the following:

[0042] In this embodiment, the target data type identifier corresponding to the event triggering instruction can be determined based on the index data structure. Then, according to the trigger type, trigger coordinate information, and data point information corresponding to the target data type identifier, the target data point corresponding to the event triggering instruction is determined, and the event triggering instruction can be responded to only based on the target data point. At this point, it is unnecessary to process data other than the target data point, optimizing the event propagation path and reducing unnecessary redrawing operations. This makes chart interaction incredibly smooth, allowing users to easily perform various operations on the chart, thereby improving the efficiency and satisfaction of user data exploration and analysis.

[0043] In this embodiment, the number of times the target data points can be processed can be determined based on the number of target data points. Then, the target data points can be processed in batches according to the determined number of times to respond to event-triggered commands. At this time, for the information update of a large number of data points, a batch update method is adopted instead of updating one by one, thus reducing the number of chart redraws and the overhead.

[0044] In this embodiment of the application, the total number of data points bound to Echarts can also be determined, and then the determined number is compared with the set number threshold. If the total number of data points exceeds the number threshold, the data downsampling rate function event is executed, thereby reducing the data sampling rate and improving the performance of the Echarts page.

[0045] In this embodiment, the number of times the event trigger command is executed can be determined. If the number of triggers exceeds a preset number, it indicates that the event is triggered frequently. In this case, the target data point and the response display result can be stored. Correspondingly, when the same event trigger command occurs again and the event parameters are similar within a certain range, the previous event response result can be directly retrieved from the cache, avoiding repeated calculations and processing and improving response speed. Attached Figure Description

[0046] To more clearly illustrate the technical solutions in the embodiments of this application, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0047] Figure 1a A schematic diagram of an event handling process based on Echarts provided for an embodiment of this application;

[0048] Figure 1b This is a schematic diagram of an index data structure provided in an embodiment of this application;

[0049] Figure 2 A schematic diagram of the global waveform provided in an embodiment of this application;

[0050] Figure 3 A schematic diagram of a partial waveform provided in an embodiment of this application;

[0051] Figure 4 A schematic diagram of an Echarts interface provided for an embodiment of this application;

[0052] Figure 5 A schematic diagram of another Echarts interface provided for an embodiment of this application;

[0053] Figure 6A schematic diagram of another Echarts interface provided in an embodiment of this application;

[0054] Figure 7 A schematic diagram of an interface for adding an event command provided in an embodiment of this application;

[0055] Figure 8 This application provides a schematic diagram of code for implementing a stored event instruction.

[0056] Figure 9 This application provides a code diagram illustrating an event that executes a data downsampling rate function.

[0057] Figure 10 A schematic diagram of the structure of an event handling device based on Echarts provided in an embodiment of this application;

[0058] Figure 11 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Detailed Implementation

[0059] The embodiments of this application are described in detail below. Examples of these embodiments are shown in the accompanying drawings, wherein the same or similar reference numerals denote the same or similar elements or elements having the same or similar functions throughout. The embodiments described below with reference to the accompanying drawings are exemplary and are only used to explain this application, and should not be construed as limiting the invention.

[0060] Those skilled in the art will understand that, unless specifically stated otherwise, the singular forms “a,” “an,” “the,” and “the” used herein may also include the plural forms. It should be further understood that the term “comprising” as used in this application means the presence of the stated features, integers, steps, operations, elements, and / or components, but does not exclude the presence or addition of one or more other features, integers, steps, operations, elements, components, and / or groups thereof. It should be understood that when we say an element is “connected” or “coupled” to another element, it can be directly connected or coupled to the other element, or there may be intermediate elements. Furthermore, “connected” or “coupled” as used herein can include wireless connections or wireless coupling. The term “and / or” as used herein includes all or any units and all combinations of one or more associated listed items.

[0061] To make the objectives, technical solutions, and advantages of this application clearer, the embodiments of this application will be described in further detail below with reference to the accompanying drawings.

[0062] The technical solution of this application and how the technical solution of this application solves the above-mentioned technical problems are described in detail below with specific embodiments. These specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described again in some embodiments. The embodiments of this application will now be described with reference to the accompanying drawings.

[0063] Specifically, such as Figure 1a As shown, the method may include:

[0064] Step S101: Obtain all data points bound to Echarts and the data types included in all data points.

[0065] Optionally, all data points bound to Echarts refer to the data points used to display information in the current Echarts interface. These data points can be divided into different data types. In this embodiment of the application, the data types can refer to data types such as airflow from the mouth and nose, snoring, breathing effort, pulse rate, blood oxygen, and body position in the field of medical data.

[0066] Step S102: Establish an index data structure for all data points based on the data types they include. The index data structure includes the identifier of each data type, the region coordinate information corresponding to each data type identifier, and the data point information corresponding to each data type identifier.

[0067] Optionally, an indexed data structure can be built by classifying all data points (specifically, as shown in the example). Figure 1b The index data structure shown includes the identifier of each data type, the coordinate information of the region included by all data points under that data type, and the data point information of each data point belonging to that data type. For example, an index data structure may include the identifier of the mouth and nose type, the location of the data point belonging to the mouth and nose type (this location can be represented by coordinates), and the region information occupied by all data points belonging to the mouth and nose type, etc.

[0068] In optional embodiments of this application, all data points include global data points and local data points, and the index data structure includes a first index data structure and a second index data structure;

[0069] An indexed data structure is built for all data points based on the data types they encompass, including:

[0070] A first index data structure is established for the global data points based on the first data type included in the global data points. The first index data structure includes the identifier of each first data type, the area coordinate information corresponding to each first data type identifier, and the data point information corresponding to each first data type identifier.

[0071] A second index data structure is established for the local data points based on the second data type included within the local data points. The second index data structure includes the identifier of each second data type, the region coordinate information corresponding to each second data type identifier, and the data point information corresponding to each second data type identifier.

[0072] Optionally, all bound data points can include global data points and local data points. Global data points refer to the data points used to display all data from the start time to the end time of the waveform (i.e., the global waveform). For example, the global waveform can be like this: Figure 2 As shown, a local data point refers to a data point (i.e., a local waveform) used to display all data for half an hour after the start time of the global waveform. For example, this local waveform can be displayed as follows: Figure 3 As shown.

[0073] for

[0074] Correspondingly, both global and local data points include their respective data types (i.e., the first data type and the second data type). For example, global data points include data types such as airflow through the mouth and nose, snoring, breathing effort, pulse rate, blood oxygen, and body position. Local data points also include data types such as airflow through the mouth and nose, snoring, breathing effort, pulse rate, blood oxygen, and body position. In other words, the first data type and the second data type are the same data type.

[0075] Furthermore, for global data points, a corresponding first index data structure can be established based on the first data type included within the global data point. This first index data structure includes the identifiers of each first data type included within the global data point, the region coordinate information corresponding to each first data type identifier, and the data point information corresponding to each first data type identifier. For local data points, a corresponding second index data structure can also be established based on the second data type included within the local data point. This second index data structure includes the identifiers of each second data type included within the local data point, the region coordinate information corresponding to each second data type identifier, and the data point information corresponding to each second data type identifier.

[0076] Step S103: Receive the event trigger command and obtain the trigger coordinate information and the trigger type corresponding to the event trigger command.

[0077] Optionally, when personnel want to modify the Echarts interface or view chart data, they can trigger event trigger commands. Correspondingly, upon receiving an event trigger command, the trigger coordinate information and the trigger type can be obtained. The trigger coordinate information refers to the location information where the event trigger command is received, which can be represented by coordinates. The trigger type refers to how the command is triggered, which can include click trigger types and hover trigger types. A click trigger type refers to triggering the command by clicking the mouse, while a hover trigger type refers to triggering the command by hovering the mouse over a specific location.

[0078] Step S104: Determine the target data type identifier corresponding to the event triggering instruction based on the trigger coordinate information and the area coordinate information corresponding to each data type identifier in the index data structure.

[0079] Optionally, after obtaining the trigger coordinate information, the system can determine which data type the event triggering instruction is triggered on based on the trigger coordinate information and the area coordinate information corresponding to each data type identifier in the index data structure, that is, determine the target data type identifier corresponding to the event triggering instruction.

[0080] In an optional embodiment of this application, the target data type identifier corresponding to the event triggering instruction is determined based on the triggering coordinate information and the region coordinate information corresponding to each data type identifier in the index data structure, including:

[0081] Based on the trigger coordinate information, the area coordinate information corresponding to each first data type identifier and the area coordinate information corresponding to each second data type identifier, the target data type identifier corresponding to the trigger instruction is determined from each first data type identifier and each second data type identifier.

[0082] Optionally, since the Echarts interface contains global and local waveforms, and both global and local waveforms have their own corresponding index data structures, when determining the target data type identifier corresponding to the trigger instruction, the trigger coordinate information can be compared with the area coordinate information of the data type identifier in the first and second index data structures, respectively, and the target data type identifier corresponding to the event trigger instruction can be determined from each first data type identifier and each second data type identifier.

[0083] Step S105: Based on the trigger type, trigger coordinate information, and data point information corresponding to the target data type identifier, determine the target data point corresponding to the trigger command, and respond to the event trigger command according to the target data point to obtain the response display result.

[0084] Optionally, after knowing the trigger type, trigger coordinate information, and target data type of the event trigger command, the target data point corresponding to the target data type identifier can be further determined based on the data point information corresponding to the target data type identifier. That is, it can be determined which specific data points the event trigger command targets. Accordingly, after knowing the specific data point targeted by the event trigger command (i.e., the target data point), the event trigger command can be responded to based on the target data point to obtain the response display result.

[0085] In optional embodiments of this application, the data point information includes the coordinate information of the data point, and the trigger type is either a click trigger type or a hover trigger type. Based on the trigger type, trigger coordinate information, and the data point information corresponding to the target data type identifier, the target data point corresponding to the event trigger instruction is determined, including:

[0086] If the trigger type is click trigger, then the distance between the event trigger instruction and each data point is determined based on the trigger coordinate information and the coordinate information of the data point corresponding to the target data type identifier, and the data point whose distance meets the requirements is taken as the target data point corresponding to the event trigger instruction;

[0087] If the trigger type is a hover trigger type, then based on the trigger coordinate information and the coordinate information of the data point corresponding to the target data type identifier, the data point within the set distance range of the event trigger instruction is determined, and the data point within the set range is taken as the target data point corresponding to the event trigger instruction.

[0088] Optionally, the data point information corresponding to the data type identifier can refer to the coordinate information of the data points. Based on this coordinate information, the specific location of each data point included under each data type can be determined. In this case, the method for determining the target data point corresponding to the event trigger instruction is also different for different trigger types. Specifically, when the trigger type of the event trigger instruction is click trigger, the distance between the trigger instruction and each data point can be determined based on the coordinates of the event trigger instruction and the coordinates of each data point in the target data type identifier. Then, the data points whose distance meets the requirements are taken as the target data points corresponding to the event trigger instruction. When the trigger type is hover trigger, the set distance range around the coordinates of the event trigger instruction is determined based on the coordinates of the event trigger instruction. Then, the data points within the set range are determined based on the coordinates of each data point in the target data type identifier, and the data points within the set range are taken as the target data points corresponding to the event trigger instruction.

[0089] For example, such as Figure 4 As shown, when the mouse is placed Figure 4When the coordinates of the event trigger command are within the start and end range (i.e., the coordinates of the event trigger command are within the start and end range), all data points within the start and end range are considered data points within the set range. Therefore, the data points within the start and end range are the target data points corresponding to the event trigger command.

[0090] In an optional embodiment of this application, the target data point includes information data points and rendering data points. The response to the event triggering command is based on the target data point to obtain a response display result, including:

[0091] Determine the data information to be displayed based on the information data points;

[0092] The data to be displayed is rendered based on the rendering data points, and the response display result of the event trigger command is obtained. The response display result includes one of the following: displaying data, updating the interface display size, and interface panning.

[0093] Optionally, the determined target data points may include information data points and rendering data points. Information data points are the data points needed to display the data information, while rendering data points are the data points needed to render and display the data information. Accordingly, after determining the target data points, the data information to be displayed can be determined based on the information data points within the target data points. Then, the data information is rendered based on the rendering data points to respond to event trigger commands, obtain the response display result, and then display the result on the interface. For example, when the mouse hovers over... Figure 4 When the data is within the start and end range, the data to be displayed is determined based on the information data points. Figure 4 The information within the black rectangle can then be rendered based on the rendering data points, thus displaying the information within the black rectangle.

[0094] Optionally, the response display results may include display data, updating the interface display size, and interface panning. Updating the interface display size refers to zooming in or out of the global or local waveform; for example, when the event trigger command is in... Figure 5 The position of the upward arrow within the red rectangle indicates a magnified display of the global waveform. When the event trigger command is in... Figure 5 The position of the down arrow within the red rectangle indicates a scaled-down display of the global waveform. Interface panning refers to shifting the entire interface to display new data. For example, when an event trigger command is in... Figure 6 When the area within the red rectangle is shifted left or right, the resulting response is the left or right shift of the global waveform.

[0095] In optional embodiments of this application, the data type includes at least one of the following: nasal and oral airflow data type, snoring data type, respiratory effort data type, pulse rate data type, blood oxygen data type, and body position data type; the event triggering instruction is one of the following: waveform magnification instruction, waveform zoom-out instruction, new event instruction, deleted event instruction, event information display instruction, and event update instruction; the data information includes at least one of the following: obstructive apnea (OA) information, central apnea (CA) information, mixed apnea (MA) information, Chern-Scholes respiration (CSR) information, hypoventilation (H) information, flow restriction (FL) information, and respiratory effort-related awakening (RERA). For example, as... Figure 7 As shown, when the mouse clicks Figure 7 The event triggering command within the red rectangle is a newly added event command, at which point the following can appear: Figure 7 The data information type is within the white rectangle; then select the desired data information type and add it. Figure 7 Within the red rectangle.

[0096] In an optional embodiment of this application, responding to an event triggering command based on a target data point includes:

[0097] Obtain the number of target data points;

[0098] Based on the number of target data points, determine the number of times to process the target data points and the target data points to be processed each time;

[0099] The system responds to event triggering commands based on the number of times the target data points are processed and the target data points that need to be processed each time.

[0100] Optionally, during the event response process, operations that may affect chart rendering performance may involve a relatively large number of target points. In this case, the number of times to process the target data points can be determined based on the number of target data points, and then the target data points can be processed in batches according to the determined number of times to respond to the event trigger command. In this embodiment of the application, for updating information of a large number of data points, a batch update method is adopted instead of updating one by one, reducing the number of chart redraws and overhead.

[0101] In an optional embodiment of this application, after responding to the event triggering command based on the target data point and obtaining the response display result, the method further includes:

[0102] Determine the number of times the event trigger command is triggered;

[0103] If the number of triggers exceeds the preset number, the target data point and the response display result will be stored.

[0104] Optionally, after responding to the event trigger command based on the target data point and obtaining the response display result, the number of times the event trigger command corresponds to can be determined. If the number of triggers exceeds a preset number, it indicates that the event is triggered frequently, and in this case, the target data point and the response display result can be stored. Correspondingly, when the same event trigger command occurs again and the event parameters (such as coordinate position, data point attributes, etc.) are similar within a certain range, the previous event response result can be directly retrieved from the cache, avoiding repeated calculations and processing and improving response speed. For example, in practical applications, it can be based on... Figure 8 The code in the document implements storage.

[0105] In optional embodiments of this application, the method further includes:

[0106] Determine whether the total number of data points exceeds the quantity threshold;

[0107] If the total number of data points exceeds the threshold, the data downsampling rate function event is executed.

[0108] Yes, this application can also determine the total number of data points bound to Echarts, and then compare the determined number with a set threshold. If the total number of data points exceeds the threshold, the data downsampling rate function event is executed (in practical applications, this can be based on...). Figure 9 (The code implementation) reduces the data sampling rate and improves the performance of Echarts pages.

[0109] Furthermore, this application allows for localized data processing based on data type, thus improving the consistency of the interactive experience across multiple devices (such as computer monitors with different resolutions and mobile device screens). It also adapts to the characteristics of different devices, maintaining good interactive performance across various devices. Functions that were previously difficult to implement or performed poorly with complex charts or large amounts of data can now work normally and efficiently.

[0110] This application provides an event handling device based on Echarts, such as... Figure 10 As shown, the device may include: a data acquisition module 901, an index building module 902, an event receiving module 903, and an event response module 904, wherein,

[0111] The data acquisition module is used to acquire all data points bound to Echarts and the data types included in all data points;

[0112] The index building module is used to build an index data structure for all data points based on the data types included in all data points. The index data structure includes the identifier of each data type, the area coordinate information corresponding to each data type identifier, and the data point information corresponding to each data type identifier.

[0113] The event receiving module is used to receive event triggering instructions and obtain the trigger coordinate information and trigger type corresponding to the event triggering instructions.

[0114] The event response module is used to determine the target data type identifier corresponding to the event trigger instruction based on the trigger coordinate information and the area coordinate information corresponding to each data type identifier in the index data structure; and to determine the target data point corresponding to the event trigger instruction based on the trigger type, trigger coordinate information and the data point information corresponding to the target data type identifier, and to respond to the event trigger instruction based on the target data point to obtain the response display result.

[0115] Optionally, all data points include global data points and local data points, and the index data structure includes a first index data structure and a second index data structure;

[0116] When the index building module builds an index data structure for all data points based on the data types included in all data points, it is specifically used for:

[0117] A first index data structure is established for the global data points based on the first data type included in the global data points. The first index data structure includes the identifier of each first data type, the area coordinate information corresponding to each first data type identifier, and the data point information corresponding to each first data type identifier.

[0118] A second index data structure is established for the local data points based on the second data type included within the local data points. The second index data structure includes the identifier of each second data type, the region coordinate information corresponding to each second data type identifier, and the data point information corresponding to each second data type identifier.

[0119] Optionally, when determining the target data type identifier corresponding to the event triggering instruction based on the trigger coordinate information and the region coordinate information corresponding to each data type identifier in the index data structure, the event response module is specifically used for:

[0120] Based on the trigger coordinate information, the area coordinate information corresponding to each first data type identifier and the area coordinate information corresponding to each second data type identifier, the target data type identifier corresponding to the trigger instruction is determined from each first data type identifier and each second data type identifier.

[0121] Optionally, the data point information includes the coordinate information of the data point, and the trigger type is either click trigger or hover trigger. When the event response module determines the target data point corresponding to the event trigger command based on the trigger type, trigger coordinate information, and the data point information corresponding to the target data type identifier, it is specifically used for:

[0122] If the trigger type is click trigger, then the distance between the event trigger instruction and each data point is determined based on the trigger coordinate information and the coordinate information of the data point corresponding to the target data type identifier, and the data point whose distance meets the requirements is taken as the target data point corresponding to the event trigger instruction;

[0123] If the trigger type is a hover trigger type, then based on the trigger coordinate information and the coordinate information of the data point corresponding to the target data type identifier, the data point within the set distance range of the event trigger instruction is determined, and the data point within the set range is taken as the target data point corresponding to the event trigger instruction.

[0124] Optionally, the target data points include information data points and rendering data points. When the event response module responds to the event triggering command based on the target data points and obtains the response display result, it is specifically used for:

[0125] Determine the data information to be displayed based on the information data points;

[0126] The data to be displayed is rendered based on the rendering data points, and the response display result of the event trigger command is obtained. The response display result includes one of the following: displaying data, updating the interface display size, and interface panning.

[0127] Optionally, when the event response module responds to the event triggering command based on the target data point, it is specifically used for:

[0128] Obtain the number of target data points;

[0129] Based on the number of target data points, determine the number of times to process the target data points and the target data points to be processed each time;

[0130] The system responds to event triggering commands based on the number of times the target data points are processed and the target data points that need to be processed each time.

[0131] Optionally, the data type includes at least one of the following: oral and nasal airflow data type, snoring data type, respiratory effort data type, pulse rate data type, blood oxygen data type, and body position data type; the event triggering command is one of the following: waveform magnification command, waveform zoom-out command, add event command, delete event command, event information display command, and event update command; the data information includes at least one of the following: obstructive sleep apnea information, central sleep apnea information, mixed sleep apnea information, Cheyne-Stokes respiratory information, hypoventilation information, flow restriction information, and respiratory effort-related micro-arousal information.

[0132] Optionally, the device also includes an event storage device, specifically used for:

[0133] After responding to the event trigger command based on the target data point and obtaining the response display result, determine the number of times the event trigger command is triggered.

[0134] If the number of triggers exceeds the preset number, the target data point and the response display result will be stored.

[0135] Optionally, the event storage device is also used for:

[0136] Determine whether the total number of data points exceeds the quantity threshold;

[0137] If the total number of data points exceeds the threshold, the data downsampling rate function event is executed.

[0138] The event handling device based on Echarts in this embodiment can execute the event handling method based on Echarts shown in the embodiment of this application. The implementation principle is similar and will not be described again here.

[0139] This application provides an electronic device, which includes: a processor; and a memory configured to store machine-readable instructions that, when executed by the processor, cause the processor to perform an Echarts-based event handling method.

[0140] This application provides an electronic device, such as... Figure 11 As shown, Figure 11 The illustrated electronic device includes a processor 2001 and a memory 2003. The processor 2001 and the memory 2003 are connected, for example, via a bus 2002. Optionally, the electronic device 2000 may further include a transceiver 2004. It should be noted that in practical applications, the transceiver 2004 is not limited to one type, and the structure of this electronic device 2000 does not constitute a limitation on the embodiments of this application.

[0141] Processor 2001 may be a CPU, a general-purpose processor, a DSP, an ASIC, an FPGA, or other programmable logic device, transistor logic device, hardware component, or any combination thereof. It may implement or execute the various exemplary logic blocks, modules, and circuits described in conjunction with the disclosure of this application. Processor 2001 may also be a combination that implements computational functions, such as including one or more microprocessor combinations, a combination of a DSP and a microprocessor, etc.

[0142] Bus 2002 may include a pathway for transmitting information between the aforementioned components. Bus 2002 may be a PCI bus or an EISA bus, etc. Bus 2002 can be divided into address bus, data bus, control bus, etc. For ease of representation, Figure 11 The bus is represented by a single thick line, but this does not mean that there is only one bus or one type of bus.

[0143] The memory 2003 may be ROM or other type of static storage device capable of storing static information and instructions, RAM or other type of dynamic storage device capable of storing information and instructions, or EEPROM, CD-ROM or other optical disc storage, optical disc storage (including compressed optical discs, laser discs, optical discs, digital universal optical discs, Blu-ray discs, etc.), magnetic disk storage media or other magnetic storage devices, or any other medium capable of carrying or storing desired program code in the form of instructions or data structures and accessible by a computer, but not limited thereto.

[0144] The memory 2003 stores the application code that executes the scheme of this application, and its execution is controlled by the processor 2001. The processor 2001 executes the application code stored in the memory 2003 to implement... Figure 10 The illustrated embodiment provides an action of an event handling device based on Echarts.

[0145] It should be understood that although the steps in the flowcharts of the accompanying figures are shown sequentially as indicated by the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowcharts of the accompanying figures may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily completed at the same time, but can be executed at different times, and their execution order is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the sub-steps or stages of other steps.

[0146] The above description is only a partial embodiment of the present invention. It should be noted that those skilled in the art can make various improvements and modifications without departing from the principle of the present invention, and these improvements and modifications should also be considered within the scope of protection of the present invention.

Claims

1. An event handling method based on Echarts, characterized in that, include: Retrieve all data points bound to Echarts and the data types included in all data points; An index data structure is established for all data points based on the data types they include. The index data structure includes an identifier for each data type, the region coordinate information corresponding to each data type identifier, and the data point information corresponding to each data type identifier. Receive an event trigger command and obtain the trigger coordinate information corresponding to the event trigger command and the trigger type corresponding to the event trigger command; Based on the trigger coordinate information and the region coordinate information corresponding to each data type identifier in the index data structure, the target data type identifier corresponding to the event triggering instruction is determined; Based on the trigger type, the trigger coordinate information, and the data point information corresponding to the target data type identifier, the target data point corresponding to the event trigger instruction is determined, and the event trigger instruction is responded to based on the target data point to obtain the response display result; The total data points include global data points and local data points, and the index data structure includes a first index data structure and a second index data structure; the global data points are used to display all data from the start time to the end time of the waveform, and the local data points are used to display all data for half an hour after the start time of the global waveform; The step of establishing an index data structure for all data points based on the data types included in all data points includes: A first index data structure is established for the global data points based on the first data type included in the global data points. The first index data structure includes each first data type identifier, the region coordinate information corresponding to each first data type identifier, and the data point information corresponding to each first data type identifier. A second index data structure is established for the local data points based on the second data types included in the local data points. The second index data structure includes each second data type identifier, the region coordinate information corresponding to each second data type identifier, and the data point information corresponding to each second data type identifier. The data type includes at least one of the following: oral and nasal airflow data type, snoring data type, breathing effort data type, pulse rate data type, blood oxygen data type, and body position data type; the event triggering instruction is one of the following: waveform zoom-in instruction, waveform zoom-out instruction, add event instruction, delete event instruction, event information display instruction, and event update instruction.

2. The method according to claim 1, characterized in that, The step of determining the target data type identifier corresponding to the event triggering instruction based on the triggering coordinate information and the region coordinate information corresponding to each data type identifier in the index data structure includes: Based on the trigger coordinate information, the area coordinate information corresponding to each first data type identifier and the area coordinate information corresponding to each second data type identifier, the target data type identifier corresponding to the trigger instruction is determined from each first data type identifier and each second data type identifier.

3. The method according to claim 1, characterized in that, The data point information includes the coordinate information of the data points, and the trigger type is a click trigger type and a hover trigger type. Determining the target data point corresponding to the event trigger instruction based on the trigger type, the trigger coordinate information, and the data point information corresponding to the target data type identifier includes: If the trigger type is a click trigger type, then the distance between the event trigger instruction and each data point is determined based on the trigger coordinate information and the coordinate information of the data point corresponding to the target data type identifier, and the data point whose distance meets the requirements is taken as the target data point corresponding to the event trigger instruction; If the trigger type is a hover trigger type, then based on the trigger coordinate information and the coordinate information of the data point corresponding to the target data type identifier, the data point within the set distance range of the event trigger instruction is determined, and the data point within the set distance range is taken as the target data point corresponding to the event trigger instruction.

4. The method according to claim 1, characterized in that, The target data points include information data points and rendering data points. The step of responding to the event triggering command based on the target data points to obtain a response display result includes: The data information to be displayed is determined based on the aforementioned data points; The data information to be displayed is rendered based on the rendering data points to obtain the response display result of the event triggering command. The response display result includes one of displaying data, updating the interface display size, and interface panning.

5. The method according to claim 1, characterized in that, The step of responding to the event triggering command based on the target data point includes: Obtain the number of the target data points; Based on the number of target data points, determine the number of times to process the target data points and the target data points to be processed each time; The event triggering command is responded to based on the number of times the target data points are processed and the target data points that need to be processed each time.

6. The method according to claim 4, characterized in that, The data information includes at least one of the following: obstructive apnea information, central apnea information, mixed apnea information, Cheyne-Stokes respiratory information, hypoventilation information, flow restriction information, and respiratory effort-related microarousal information.

7. The method according to claim 1, characterized in that, After responding to the event triggering command based on the target data point and obtaining the response display result, the process further includes: Determine the number of times the event triggering command is triggered; If the number of triggers exceeds the preset number, the target data point and the response display result will be stored.

8. The method according to claim 1, characterized in that, The method further includes: Determine whether the total number of all data points exceeds a certain threshold; If the total number of data points exceeds the threshold, the data downsampling rate function event is executed.

9. An event handling device based on Echarts, characterized in that, include: The data acquisition module is used to acquire all data points bound to Echarts and the data types included in all data points; The index building module is used to build an index data structure for all data points according to the data types included in all data points. The index data structure includes each data type identifier, the region coordinate information corresponding to each data type identifier, and the data point information corresponding to each data type identifier. The event receiving module is used to receive event triggering instructions and obtain the triggering coordinate information and the triggering type corresponding to the event triggering instructions. The event response module is used to determine the target data type identifier corresponding to the event triggering instruction based on the trigger coordinate information and the area coordinate information corresponding to each data type identifier in the index data structure; and to determine the target data point corresponding to the event triggering instruction based on the trigger type, the trigger coordinate information and the data point information corresponding to the target data type identifier, and to respond to the event triggering instruction based on the target data point to obtain the response display result; The total data points include global data points and local data points, and the index data structure includes a first index data structure and a second index data structure; the global data points are used to display all data from the start time to the end time of the waveform, and the local data points are used to display all data for half an hour after the start time of the global waveform; The step of establishing an index data structure for all data points based on the data types included in all data points includes: A first index data structure is established for the global data points based on the first data type included in the global data points. The first index data structure includes each first data type identifier, the region coordinate information corresponding to each first data type identifier, and the data point information corresponding to each first data type identifier. A second index data structure is established for the local data points based on the second data types included in the local data points. The second index data structure includes each second data type identifier, the region coordinate information corresponding to each second data type identifier, and the data point information corresponding to each second data type identifier. The data type includes at least one of the following: oral and nasal airflow data type, snoring data type, breathing effort data type, pulse rate data type, blood oxygen data type, and body position data type; the event triggering instruction is one of the following: waveform zoom-in instruction, waveform zoom-out instruction, add event instruction, delete event instruction, event information display instruction, and event update instruction.

Citation Information

Patent Citations

  • Statistical data display method and apparatus

    CN105554799A

  • Method for realizing synchronous linkage carousel of Chinese map and broken line graph data

    CN110990431A