CN111142984A - Visualized data display method, system, equipment and computer readable storage medium - Google Patents
Visualized data display method, system, equipment and computer readable storage medium Download PDFInfo
- Publication number
- CN111142984A CN111142984A CN201911185830.5A CN201911185830A CN111142984A CN 111142984 A CN111142984 A CN 111142984A CN 201911185830 A CN201911185830 A CN 201911185830A CN 111142984 A CN111142984 A CN 111142984A
- Authority
- CN
- China
- Prior art keywords
- data
- legend
- echarts
- background data
- time points
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/448—Execution paradigms, e.g. implementations of programming paradigms
- G06F9/4488—Object-oriented
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
- G06F9/45504—Abstract machines for programme code execution, e.g. Java virtual machine [JVM], interpreters, emulators
- G06F9/45529—Embedded in an application, e.g. JavaScript in a Web browser
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention relates to the technical field of data visualization and discloses a visualized data display method, a visualized data display system, visualized data display equipment and a computer readable storage medium. The method comprises the following steps: the parent component receives the background data and displays the background data in the first display area; the parent component transmits the background data to the Echarts-vue component through a tips interface; the Echarts-vue component generates an Echarts legend from the background data and displays the Echarts legend in the second display area; when the Echarts-vue component monitors a legend click event triggered based on an Echarts legend, target data corresponding to the legend click event is displayed in the first display area, and the target data is data corresponding to a legend element corresponding to the legend click event in background data. The invention realizes the function of bidirectional linkage of the legend, so that the interaction is more vivid and the display of visual data is clearer.
Description
Technical Field
The present invention relates to the field of data visualization technologies, and in particular, to a visualized data display method, system, device, and computer-readable storage medium.
Background
web front-end native technology may use the canvas of html5 for drawing charts. However, for some complex graphic displays, if the complex graphic displays are realized by canvases, a large amount of complex codes need to be written, and both the time cost and the labor cost are large. The advent of Echarts solved this problem well.
Echarts is an open source visualization library realized by JavaScript, can run on PC and mobile equipment smoothly, and is compatible with most current browsers.
In the prior art, a common method is to secondarily encapsulate an Echarts-vue component by combining the componentization characteristic of vueJs on the basis of an Echarts plug-in. However, the encapsulated Echarts-vue component can only control the display of the legend by controlling the parent component data, but cannot control the display of the parent component data by controlling the displayed legend.
Disclosure of Invention
The invention mainly aims to provide a visual data display method, a visual data display system, a visual data display device and a computer readable storage medium, and aims to solve the technical problem that in the prior art, only the display of a legend can be controlled by controlling the data of a parent component but not by controlling the displayed legend by a purely packaged Echarts-vue component.
In order to achieve the above object, the present invention provides a visual data display method, which is applied to a visual data display system, wherein the visual data display system includes a parent component and an Echarts-vue component, and the visual data display method includes:
the parent component receives background data and displays the background data in a first display area;
the parent component transmits the background data to the Echarts-vue component through a tips interface;
the Echarts-vue component generates an Echarts legend according to the background data and displays the Echarts legend in a second display area;
when the Echarts-vue component monitors a legend click event triggered based on the Echarts legend, displaying target data corresponding to the legend click event in the first display area, where the target data is data corresponding to a legend element corresponding to the legend click event in the background data.
In addition, to achieve the above object, the present invention also provides a visualized data display system including: parent and Echarts-vue components,
the parent component is used for receiving background data and displaying the background data in a first display area;
passing the background data to an Echarts-vue component through a tips interface;
the Echarts-vue component is configured to generate an Echarts legend according to the background data, and display the Echarts legend in a second display area;
when a legend clicking event triggered based on the Echarts legend is monitored, displaying target data corresponding to the legend clicking event in the first display area, wherein the target data is data corresponding to a legend element corresponding to the legend clicking event in the background data.
Further, to achieve the above object, the present invention also provides a visualized data display apparatus comprising: a memory, a processor and a visualization data display program stored on the memory and executable on the processor, which visualization data display program, when executed by the processor, implements the steps of the visualization data display method as described above.
Further, to achieve the above object, the present invention also provides a computer-readable storage medium having stored thereon a visualized data display program which, when executed by a processor, implements the steps of the visualized data display method as described above.
In the invention, the parent component receives background data and displays the background data in a first display area; the parent component transmits the background data to the Echarts-vue component through a tips interface; the Echarts-vue component generates an Echarts legend according to the background data and displays the Echarts legend in a second display area; when the Echarts-vue component monitors a legend click event triggered based on the Echarts legend, displaying target data corresponding to the legend click event in the first display area, where the target data is data corresponding to a legend element corresponding to the legend click event in the background data. According to the method and the device, the displayed legend is controlled, so that the technical effect of controlling the display of the data of the parent component is achieved, namely, the bidirectional linkage function of the legend is achieved, the interaction is more vivid, and the display of the visual data is clearer and clearer.
Drawings
Fig. 1 is a schematic structural diagram of a visualized data display device of a hardware operating environment according to an embodiment of the present invention;
FIG. 2 is a flowchart illustrating a visualized data displaying method according to an embodiment of the present invention;
FIG. 3 is a scene illustration of displaying background data in a first display area according to an embodiment of the visualized data displaying method of the present invention;
FIG. 4 is a schematic view of a scene displaying an Echarts legend in a second display area according to an embodiment of the visualized data displaying method of the present invention;
FIG. 5 is a scene diagram illustrating a click event in an embodiment of a visualization data display method of the present invention;
FIG. 6 is a schematic view of a scene displaying background data in a first display area according to another embodiment of the visualized data displaying method of the present invention;
FIG. 7 is a schematic diagram of an Echarts legend generated according to background data on a coordinate axis with a zero scale on the y-axis at a preset height according to an embodiment of the visual data display method of the present invention;
FIG. 8 is a functional block diagram of a visual data display system according to an embodiment of the present invention.
The implementation, functional features and advantages of the objects of the present invention will be further explained with reference to the accompanying drawings.
Detailed Description
It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.
As shown in fig. 1, fig. 1 is a schematic structural diagram of a visualized data display device of a hardware operating environment according to an embodiment of the present invention.
As shown in fig. 1, the visual data display apparatus may include: a processor 1001, such as a CPU, a network interface 1004, a user interface 1003, a memory 1005, a communication bus 1002. Wherein a communication bus 1002 is used to enable connective communication between these components. The user interface 1003 may include a Display screen (Display), an input unit such as a Keyboard (Keyboard), and the optional user interface 1003 may also include a standard wired interface, a wireless interface. The network interface 1004 may optionally include a standard wired interface, a wireless interface (e.g., WI-FI interface). The memory 1005 may be a high-speed RAM memory or a non-volatile memory (e.g., a magnetic disk memory). The memory 1005 may alternatively be a storage device separate from the processor 1001.
Those skilled in the art will appreciate that the configuration of the visual data display apparatus shown in FIG. 1 does not constitute a limitation of visual data display apparatus and may include more or fewer components than shown, or some components may be combined, or a different arrangement of components.
As shown in fig. 1, a memory 1005, which is a kind of computer storage medium, may include therein an operating system, a network communication module, a user interface module, and a visualized data display program.
In the visual data display device shown in fig. 1, the network interface 1004 is mainly used for connecting to a backend server and communicating with the backend server; the user interface 1003 is mainly used for connecting a client (user side) and performing data communication with the client; and the processor 1001 may be configured to call the visualized data display program stored in the memory 1005 and perform the operations of the following various embodiments of the visualized data display method.
Referring to fig. 2, fig. 2 is a schematic flowchart of a visualized data display method according to an embodiment of the present invention.
In one embodiment, the visual data display method is applied to a visual data display system, the visual data display system comprises a parent component and an Echarts-vue component, and the visual data display method comprises the following steps:
step S10, the parent component receives background data and displays the background data in a first display area;
in this embodiment, the Echarts-vue component is obtained by performing secondary packaging on the basis of an Echarts plug-in combination with the componentization characteristic of vueJs. The parent component is the concept in vue, and the Echarts-vue component is the sub-component corresponding to the parent component. The parent component can receive background data sent by the webpage and display the background data in the first display area. The background data may be displayed in a parent component element of the first display area, and the parent component element may be a table.
As shown in fig. 3, fig. 3 is a schematic view of a scene in which background data is displayed in a first display area according to an embodiment of the visualized data display method of the present invention. As shown in FIG. 3, the background data is displayed in parent element (table) of the first display area, and in one embodiment, the background data is sales data for three stores (A, B, C) at three points in time (T1, T2, T3).
Step S20, the parent component transmits the background data to the Echarts-vue component through a tips interface;
in this embodiment, data of the parent component needs to be delivered to the child component through prop, and prop is a unique interface for the child component (Echarts-vue component) to access data of the parent component. And the parent component transmits the background data to the Echarts-vue component through a tips interface so that the Echarts-vue component receives the background data for subsequent legend rendering.
Step S30, the Echarts-vue component generates an Echarts legend according to the background data and displays the Echarts legend in a second display area;
in this embodiment, the Echarts-vue component renders the legend according to the received background data, generates an Echarts legend, and displays the Echarts legend in the second display area.
Fig. 4 is a schematic view of a scene in which an Echarts legend is displayed in the second display area according to an embodiment of the visual data display method of the present invention. In practical applications, the second display area and the first display area may be on the same interface of the display.
Step S40, when the Echarts-vue component monitors a legend click event triggered based on the Echarts legend, displaying target data corresponding to the legend click event in the first display area, where the target data is data corresponding to a legend element corresponding to the legend click event in the background data.
In this embodiment, a callback method callback is stored in the tips interface, and when the Echarts-vue component monitors an legend click event triggered based on an Echarts legend, the callback method callback bound to the legend click event is triggered and executed, so that target data corresponding to the legend click event is displayed in the first display area.
In this embodiment, the callback method callback is specifically a section of packaged code, and after being triggered, the callback method callback first determines a legend element corresponding to a legend click event. As shown in fig. 4, i.e., determining which column or columns in fig. 4 were clicked. For example, if the user clicks the column corresponding to the sales data of three ABC stores at time T1, the clicked column is the portion enclosed by the dotted line in the graph. Referring to fig. 5, fig. 5 is a scene diagram illustrating a click event in an embodiment of a visualized data display method according to the present invention. And then further determining that the target data corresponding to the clicked column (namely, the legend element corresponding to the legend clicking event) is the first line of data displayed in the parent component element, and controlling the data displayed in the first display area to be changed into the first line of data of the background data, so that the displayed legend is controlled, and the display of the parent component data is controlled. Fig. 6 is a schematic view of a scene in which background data is displayed in a first display area according to another embodiment of the visualized data display method of the present invention, as shown in fig. 6. That is, the content displayed in the first display area is changed from fig. 3 to fig. 6.
In the embodiment, the parent component receives background data and displays the background data in the first display area; the parent component transmits the background data to the Echarts-vue component through a tips interface; the Echarts-vue component generates an Echarts legend according to the background data and displays the Echarts legend in a second display area; when the Echarts-vue component monitors a legend click event triggered based on the Echarts legend, triggering a callback method, so as to display target data corresponding to the legend click event in the first display area. Through this embodiment, realized controlling the legend that shows to the technological effect of the demonstration of control father's subassembly data has realized the two-way linkage function of legend promptly, makes the interaction more lively, and is more clear to the demonstration of visual data.
Further, in an embodiment of the visualized data display method of the present invention, the displaying the target data corresponding to the legend click event in the first display area includes:
triggering a call-back method according to a monitored legend clicking event triggered based on the Echarts legend, determining legend elements corresponding to the legend clicking event according to the call-back method, and determining data corresponding to the legend elements in the background data as target data; and changing the data displayed in the first display area from the background data to the target data.
In this embodiment, the callback method callback is specifically a section of packaged code, and after being triggered, the callback method callback first determines a legend element corresponding to a legend click event. As shown in fig. 4, i.e., determining which column or columns in fig. 4 were clicked. For example, if the user clicks the column corresponding to the sales data of three ABC stores at time T1, the clicked column is the portion enclosed by the dotted line in the graph. Referring to fig. 5, fig. 5 is a scene diagram illustrating a click event in an embodiment of a visualized data display method according to the present invention. And then further determining that the target data corresponding to the clicked column (namely, the legend element corresponding to the legend clicking event) is the first line of data displayed in the parent component element, and controlling the data displayed in the first display area to be changed into the first line of data of the background data, so that the displayed legend is controlled, and the display of the parent component data is controlled. Fig. 6 is a schematic view of a scene in which background data is displayed in a first display area according to another embodiment of the visualized data display method of the present invention, as shown in fig. 6. That is, the content displayed in the first display area is changed from fig. 3 to fig. 6. Through this embodiment, realized controlling the legend that shows to the technological effect of the demonstration of control father's subassembly data has realized the two-way linkage function of legend promptly, makes the interaction more lively, and is more clear to the demonstration of visual data.
Further, in an embodiment of the visual data display method of the present invention, the Echarts-vue component detects whether the number of time points corresponding to the background data is less than or equal to a preset threshold; and if the number of the time points corresponding to the background data is less than or equal to a preset threshold, generating an Echarts legend according to the background data, and displaying the Echarts legend in a second display area.
In this embodiment, since the display range is limited, the number of displayable time points needs to be preset according to the actual situation. In an embodiment, the preset threshold is set to 12, that is, whether the number of time points corresponding to the background data is less than or equal to 12 is detected.
In an optional embodiment, if the background data is sales of a certain store in 16 to 18 years and each month, the number of time points corresponding to the background data is 36, and the preset threshold value is exceeded. In another optional embodiment, if the background data is the 16-year monthly sales of a certain store, the number of time points corresponding to the background data is 12, and the condition that the number of time points is smaller than or equal to the preset threshold is met, the Echarts-vue component renders the legend according to the background data to obtain an Echarts legend, and displays the Echarts legend in the second display area.
Through the embodiment, if the background data is more, the data points are selected according to the rule of the embodiment because the display range is limited, and the selected data points can be ensured to be displayed completely.
Further, in an embodiment of the visualized data display method of the present invention, the step of generating an Echarts legend according to the background data, and displaying the Echarts legend in the second display area includes:
and when the background data is detected to comprise data with the vertical axis being zero, generating an Echarts legend according to the background data on the coordinate axis with the vertical axis zero scale being a preset height, and displaying the Echarts legend in a second display area.
In this embodiment, if the background data includes data whose ordinate axis (y axis) is zero, if the legend rendering is performed in a conventional manner, the data whose y axis is zero in the generated Echarts legend falls on the x axis, which affects the viewing experience. Therefore, in this embodiment, when the background data includes data with a y-axis of zero, the legend is rendered on the coordinate axis with the y-axis zero scale at the preset height according to the background data to generate the Echarts legend, and the Echarts legend is displayed in the second display area. As shown in fig. 7, fig. 7 is a schematic diagram of an Echarts legend generated according to background data on a coordinate axis with a y-axis zero scale as a preset height in an embodiment of the visualized data display method of the present invention.
In this embodiment, when the background data includes data with a zero y-axis, an Echarts legend is generated according to the background data on a coordinate axis with a zero y-axis scale at a preset height, so that when the Echarts legend is displayed, the UI display interface is more friendly to the user, and the viewing experience of the user is improved.
Further, in an embodiment of the visualized data display method of the present invention, if the number of time points corresponding to the background data is greater than a preset threshold, a time selection window is displayed; receiving a set time point input based on the time selection window; determining data to be rendered from the background data according to the set time point and the preset threshold; and generating an Echarts legend according to the data to be rendered, and displaying the Echarts legend in a second display area.
In this embodiment, if the background data is the monthly sales amount of a certain store from 16 years to 18 years, the number of time points corresponding to the background data is 36, and exceeds the preset threshold (set to 12), at this time, a time selection window is popped up for the user to input a time point.
In this embodiment, the user may input the set time point by mouse clicking or keyboard typing. The specific manner in which the user input sets the time point is not limited herein.
In this embodiment, the set time point is input by the user as needed, and if the set time point is the same as one of the valid time points corresponding to the background data, the data to be rendered is determined from the background data according to the set time point and a preset threshold. The method specifically comprises the following steps: for example, if the time point is set to 2017.12, data at time points 2017.1, 2017.2, 2017.3, 2017.4, 2017.5, 2017.6, 2017.7, 2017.8, 2017.9, 2017.10, 2017.11, and 2017.12 are selected from background data as data to be rendered. For example, if the time point is set to 2016.10, 2016.1, 2016.2, 2016.3, 2016.4, 2016.5, 2016.6, 2016.7, 2016.8, 2016.9, and 2016.10 data at these time points are selected from background data as data to be rendered.
In this embodiment, the number of the selected data to be rendered does not exceed the preset threshold, and it is ensured that the legend rendering can be performed normally, that is, the normal generation of the Echarts legend is ensured. And the user only needs to input a set time, the data required by the legend can be automatically selected, the rendering work is automatically completed, the user operation is simplified, and the legend generation efficiency is improved.
Further, in an embodiment of the method for displaying visualized data according to the present invention, step S305 includes:
detecting whether a time point which is the same as the set time point exists in the effective time points corresponding to the background data; if the effective time points corresponding to the background data have the time points same as the set time points, sequentially selecting the effective time points from the set time points in the effective time points until the number of the selected effective time points is equal to a preset threshold or no effective time points are selected; and determining the data to be rendered corresponding to the selected effective time point from the background data.
In this embodiment, the set time point is input by the user as needed, and if the set time point is the same as one of the valid time points corresponding to the background data, the data to be rendered is determined from the background data according to the set time point and a preset threshold. The method specifically comprises the following steps: for example, if the time point is set to 2017.12, data at time points 2017.1, 2017.2, 2017.3, 2017.4, 2017.5, 2017.6, 2017.7, 2017.8, 2017.9, 2017.10, 2017.11, and 2017.12 are selected from background data as data to be rendered. For example, if the time point is set to 2016.10, 2016.1, 2016.2, 2016.3, 2016.4, 2016.5, 2016.6, 2016.7, 2016.8, 2016.9, and 2016.10 data at these time points are selected from background data as data to be rendered.
Further, in an embodiment of the visualized data display method of the present invention, after the step of detecting whether there is a time point that is the same as the set time point in the valid time points corresponding to the background data, the method further includes:
if the effective time points corresponding to the background data do not have the time point same as the set time point, searching the time point with the minimum time interval with the set time point from the effective time points corresponding to the background data as a new set time point; sequentially selecting effective time points from the newly set time point in the effective time points until the number of the selected effective time points is equal to a preset threshold or no effective time point is selected; and determining the data to be rendered corresponding to the selected effective time point from the background data.
In this embodiment, for example, when the set time point is 2019.2, and there is no time point that is the same as the set time point among the valid time points corresponding to the background data, 2018.12 is set as a new set time point, and data to be rendered corresponding to the valid time points 2018.12, 2018.11, 2018.10, 2018.9, 2018.8, 2018.7, 2018.6, 2018.5, 2018.4, 2018.3, 2018.2, and 2018.1 are sequentially selected from the background data from 2018.12.
In addition, the embodiment of the invention also provides a visual data display system. Fig. 8 is a functional module schematic diagram of an embodiment of a visual data display system according to the present invention, as shown in fig. 8.
The visual data display system includes:
the parent component 10 is configured to receive background data and display the background data in a first display area;
passing the background data to an Echarts-vue component through a tips interface;
the Echarts-vue component 20 is configured to generate an Echarts legend according to the background data, and display the Echarts legend in a second display area;
when a legend clicking event triggered based on the Echarts legend is monitored, displaying target data corresponding to the legend clicking event in the first display area, wherein the target data is data corresponding to a legend element corresponding to the legend clicking event in the background data.
Further, the Echarts-vue assembly 20 is configured to:
the Echarts-vue component detects whether the number of time points corresponding to the background data is less than or equal to a preset threshold value;
and if the number of the time points corresponding to the background data is less than or equal to a preset threshold, generating an Echarts legend according to the background data, and displaying the Echarts legend in a second display area.
Further, the Echarts-vue assembly 20 is configured to:
and when the background data is detected to comprise data with the vertical axis being zero, generating an Echarts legend according to the background data on the coordinate axis with the vertical axis zero scale being a preset height, and displaying the Echarts legend in a second display area.
Further, the Echarts-vue assembly 20 is configured to:
if the number of the time points corresponding to the background data is larger than a preset threshold value, displaying a time selection window;
receiving a set time point input based on the time selection window;
determining data to be rendered from the background data according to the set time point and the preset threshold;
and generating an Echarts legend according to the data to be rendered, and displaying the Echarts legend in a second display area.
Further, the Echarts-vue assembly 20 is configured to:
detecting whether a time point which is the same as the set time point exists in the effective time points corresponding to the background data;
if the effective time points corresponding to the background data have the time points same as the set time points, sequentially selecting the effective time points from the set time points in the effective time points until the number of the selected effective time points is equal to a preset threshold or no effective time points are selected;
and determining the data to be rendered corresponding to the selected effective time point from the background data.
Further, the Echarts-vue assembly 20 is configured to:
if the effective time points corresponding to the background data do not have the time point same as the set time point, searching the time point with the minimum time interval with the set time point from the effective time points corresponding to the background data as a new set time point;
sequentially selecting effective time points from the newly set time point in the effective time points until the number of the selected effective time points is equal to a preset threshold or no effective time point is selected;
and determining the data to be rendered corresponding to the selected effective time point from the background data.
Further, the Echarts-vue assembly 20 is configured to:
triggering a call-back method according to a monitored legend clicking event triggered based on the Echarts legend, determining legend elements corresponding to the legend clicking event according to the call-back method, and determining data corresponding to the legend elements in the background data as target data;
and changing the data displayed in the first display area from the background data to the target data.
The specific embodiment of the visualized data display device is basically the same as the embodiments of the visualized data display method, and details are not repeated here.
Furthermore, an embodiment of the present invention further provides a computer-readable storage medium, where a visualized data display program is stored, and when being executed by a processor, the visualized data display program implements the steps of the above visualized data display method in each embodiment.
The specific embodiment of the computer-readable storage medium of the present invention is substantially the same as the embodiments of the visualized data display method, and is not described herein again.
It should be noted that, in this document, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or system that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or system. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or system that comprises the element.
The above-mentioned serial numbers of the embodiments of the present invention are merely for description and do not represent the merits of the embodiments.
Through the above description of the embodiments, those skilled in the art will clearly understand that the method of the above embodiments can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware, but in many cases, the former is a better implementation manner. Based on such understanding, the technical solution of the present invention may be embodied in the form of a software product, which is stored in a storage medium (e.g., ROM/RAM, magnetic disk, optical disk) as described above and includes instructions for enabling a terminal device (e.g., a mobile phone, a computer, a server, or a network device) to execute the method according to the embodiments of the present invention.
The above description is only a preferred embodiment of the present invention, and not intended to limit the scope of the present invention, and all modifications of equivalent structures and equivalent processes, which are made by using the contents of the present specification and the accompanying drawings, or directly or indirectly applied to other related technical fields, are included in the scope of the present invention.
Claims (10)
1. A visual data display method is applied to a visual data display system, the visual data display system comprises a parent component and an Echarts-vue component, and the visual data display method comprises the following steps:
the parent component receives background data and displays the background data in a first display area;
the parent component transmits the background data to the Echarts-vue component through a tips interface;
the Echarts-vue component generates an Echarts legend according to the background data and displays the Echarts legend in a second display area;
when the Echarts-vue component monitors a legend click event triggered based on the Echarts legend, displaying target data corresponding to the legend click event in the first display area, where the target data is data corresponding to a legend element corresponding to the legend click event in the background data.
2. The method of claim 1, wherein the Echarts-vue generating an Echarts legend according to the background data and displaying the Echarts legend in a second display area comprises:
the Echarts-vue component detects whether the number of time points corresponding to the background data is less than or equal to a preset threshold value;
and if the number of the time points corresponding to the background data is less than or equal to a preset threshold value, generating an Echarts legend according to the background data, and displaying the Echarts legend in a second display area.
3. The method according to claim 2, wherein the step of generating an Echarts legend according to the background data and displaying the Echarts legend in a second display area comprises:
and when detecting that the coordinate system in the background data comprises data with a vertical axis being zero, generating an Echarts legend according to the background data on the coordinate axis with a vertical axis zero scale being a preset height, and displaying the Echarts legend in a second display area.
4. The visualized data display method according to claim 2, wherein after the step of detecting whether the number of time points corresponding to the background data by the Echarts-vue component is less than or equal to the preset threshold, the method further comprises:
if the number of the time points corresponding to the background data is larger than a preset threshold value, displaying a time selection window;
receiving a set time point input based on the time selection window;
determining data to be rendered from the background data according to the set time point and the preset threshold;
and generating an Echarts legend according to the data to be rendered, and displaying the Echarts legend in a second display area.
5. The visualized data display method according to claim 4, wherein the step of determining the data to be rendered from the background data according to the set time point and the preset threshold comprises:
detecting whether a time point which is the same as the set time point exists in the effective time points corresponding to the background data;
if the effective time points corresponding to the background data have the time points same as the set time points, sequentially selecting the effective time points from the set time points in the effective time points until the number of the selected effective time points is equal to a preset threshold or no effective time points are selected;
and determining the data to be rendered corresponding to the selected effective time point from the background data.
6. The visualized data displaying method according to claim 5, wherein after the step of detecting whether the same time point as the set time point exists in the valid time points corresponding to the background data, the method further comprises:
if the effective time points corresponding to the background data do not have the time point same as the set time point, searching the time point with the minimum time interval with the set time point from the effective time points corresponding to the background data as a new set time point;
sequentially selecting effective time points from the newly set time point in the effective time points until the number of the selected effective time points is equal to a preset threshold or no effective time point is selected;
and determining the data to be rendered corresponding to the selected effective time point from the background data.
7. A visualized data display method according to any one of claims 1 to 6 wherein said displaying target data corresponding to said legend click event in said first display area comprises:
triggering a call-back method according to a monitored legend clicking event triggered based on the Echarts legend, determining legend elements corresponding to the legend clicking event according to the call-back method, and determining data corresponding to the legend elements in the background data as target data;
and changing the data displayed in the first display area from the background data to the target data.
8. A visual data display system, comprising: parent and Echarts-vue components,
the parent component is used for receiving background data and displaying the background data in a first display area;
passing the background data to an Echarts-vue component through a tips interface;
the Echarts-vue component is configured to generate an Echarts legend according to the background data, and display the Echarts legend in a second display area;
when a legend clicking event triggered based on the Echarts legend is monitored, displaying target data corresponding to the legend clicking event in the first display area, wherein the target data is data corresponding to a legend element corresponding to the legend clicking event in the background data.
9. A visual data display device, characterized in that it comprises: memory, processor and visualization data display program stored on the memory and executable on the processor, which visualization data display program, when executed by the processor, carries out the steps of the visualization data display method according to one of claims 1 to 7.
10. A computer-readable storage medium, characterized in that a visualized data display program is stored thereon, which when executed by a processor implements the steps of the visualized data display method according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911185830.5A CN111142984A (en) | 2019-11-27 | 2019-11-27 | Visualized data display method, system, equipment and computer readable storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201911185830.5A CN111142984A (en) | 2019-11-27 | 2019-11-27 | Visualized data display method, system, equipment and computer readable storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111142984A true CN111142984A (en) | 2020-05-12 |
Family
ID=70517317
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201911185830.5A Pending CN111142984A (en) | 2019-11-27 | 2019-11-27 | Visualized data display method, system, equipment and computer readable storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111142984A (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111984177A (en) * | 2020-07-08 | 2020-11-24 | 福建亿能达信息技术股份有限公司 | Graph configuration method, device, equipment and medium based on vue |
| CN113434590A (en) * | 2021-07-21 | 2021-09-24 | 中国工商银行股份有限公司 | Lightweight data visualization method and device |
| CN113918257A (en) * | 2021-09-30 | 2022-01-11 | 百融至信(北京)征信有限公司 | Vue-based echarts performance optimization method and system |
-
2019
- 2019-11-27 CN CN201911185830.5A patent/CN111142984A/en active Pending
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111984177A (en) * | 2020-07-08 | 2020-11-24 | 福建亿能达信息技术股份有限公司 | Graph configuration method, device, equipment and medium based on vue |
| CN113434590A (en) * | 2021-07-21 | 2021-09-24 | 中国工商银行股份有限公司 | Lightweight data visualization method and device |
| CN113918257A (en) * | 2021-09-30 | 2022-01-11 | 百融至信(北京)征信有限公司 | Vue-based echarts performance optimization method and system |
| CN113918257B (en) * | 2021-09-30 | 2024-04-26 | 百融至信(北京)科技有限公司 | Method and system for optimizing echarts performance based on Vue |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8907990B2 (en) | Display system, display method, program, and recording medium | |
| US20230111594A1 (en) | Simplified website creation, configuration, and customization system | |
| CN111142984A (en) | Visualized data display method, system, equipment and computer readable storage medium | |
| US20160132201A1 (en) | Contextual tabs in mobile ribbons | |
| US20190278824A1 (en) | Systems and methods for providing a user interface with grid view | |
| CN106874519B (en) | Page display method and device | |
| US20090172516A1 (en) | Providing Enhanced Information When a Pointing Device Points to a Specific Area In a Graphical User Interface | |
| US20140380178A1 (en) | Displaying interactive charts on devices with limited resources | |
| US20150220496A1 (en) | Dynamic sprite based theme switching | |
| CN105488051B (en) | Webpage processing method and device | |
| CN111259284A (en) | Page lazy loading method and device, storage medium and processor | |
| CN107045546B (en) | Webpage processing method and device and intelligent terminal | |
| CN110990431A (en) | Method for realizing synchronous linkage carousel of China map and line graph data | |
| CN111782106B (en) | Method and device for displaying page menu bar, electronic equipment and readable medium | |
| CN108933947B (en) | Bullet screen display method and device | |
| US20150242084A1 (en) | Display controlling device, display device, display method and recording medium | |
| CN116719456A (en) | Icon style switching method and device, electronic equipment and storage medium | |
| CN110968991A (en) | Method and related device for editing characters | |
| CN110764762A (en) | Page forming method and device, computer readable storage medium and terminal | |
| CN106775790B (en) | Control calling method and device | |
| CN114048401A (en) | Page jump method and device, electronic equipment and storage medium | |
| CN112835665A (en) | Dynamic preview method, system, device and storage medium for taskbar application | |
| CN113688345A (en) | Page switching method and device and computing equipment | |
| US10002114B2 (en) | Generating interactive electronic documents | |
| CN115964588A (en) | Webpage display method and device, electronic equipment and storage medium |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |