CN108829381A - Data visualization method and device - Google Patents
Data visualization method and device Download PDFInfo
- Publication number
- CN108829381A CN108829381A CN201810554647.7A CN201810554647A CN108829381A CN 108829381 A CN108829381 A CN 108829381A CN 201810554647 A CN201810554647 A CN 201810554647A CN 108829381 A CN108829381 A CN 108829381A
- Authority
- CN
- China
- Prior art keywords
- component
- user
- data
- presented
- chart
- 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
- 238000013079 data visualisation Methods 0.000 title claims abstract description 35
- 238000000034 method Methods 0.000 title claims abstract description 32
- 230000002452 interceptive effect Effects 0.000 claims abstract description 67
- 238000012800 visualization Methods 0.000 claims abstract description 32
- 230000006870 function Effects 0.000 claims description 49
- 238000004891 communication Methods 0.000 claims description 17
- 230000001960 triggered effect Effects 0.000 claims description 14
- 238000009877 rendering Methods 0.000 claims description 10
- 238000006243 chemical reaction Methods 0.000 claims description 9
- 230000002159 abnormal effect Effects 0.000 claims description 8
- 230000005540 biological transmission Effects 0.000 claims description 8
- 238000003475 lamination Methods 0.000 claims description 6
- 238000011161 development Methods 0.000 abstract description 7
- 230000000750 progressive effect Effects 0.000 abstract 1
- 230000000007 visual effect Effects 0.000 description 5
- 230000008901 benefit Effects 0.000 description 4
- 230000000694 effects Effects 0.000 description 3
- 230000008569 process Effects 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 238000007405 data analysis Methods 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 238000012423 maintenance Methods 0.000 description 2
- 239000000523 sample Substances 0.000 description 2
- 238000005056 compaction Methods 0.000 description 1
- 230000001747 exhibiting effect Effects 0.000 description 1
- 230000002349 favourable effect Effects 0.000 description 1
- 230000006872 improvement Effects 0.000 description 1
- 238000009434 installation Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 239000007787 solid Substances 0.000 description 1
- 230000008961 swelling Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention provides a data visualization method and a data visualization device, wherein the data visualization method comprises the following steps: pre-building a progressive frame vue frame; defining a function corresponding to at least one component in the vue framework; defining an interactive interface between each component and a preset database; receiving a visualization request sent by a user; displaying each component to the user according to the visualization request and the function corresponding to each component; determining a component to be displayed selected by the user from each displayed component; acquiring data corresponding to the component to be displayed from the database according to the interactive interface corresponding to the component to be displayed; and building a chart according to the data, and displaying the chart to the user. The scheme can reduce the development difficulty of data visualization.
Description
Technical field
The present invention relates to field of computer technology, in particular to a kind of data visualization method and device.
Background technique
The arrival of big data era makes more and more enterprises start to probe into the data visualization side suitable for this enterprise
Case.Traditional data form will often take a substantial amount of time cost and manpower output.The appearance of data visualization, grazioso
It solves this pain spot, by intuitive and various data exhibition method, sufficiently illustrates the various change and connection of data,
Important function has been risen to data analysis, has improved the efficiency of data analysis.
Currently, it is to be generally required developer based on some plug-in units and edited a large amount of swelling that traditional data visualization exploitation is mostly
Swell complicated code, and therefore, the requirement to developer is very high.
As can be seen from the above description, the prior art develops data visualization, developer is needed to edit a large amount of too fat to move complexity
Code, it is big so as to cause the development difficulty of data visualization.
Summary of the invention
The embodiment of the invention provides a kind of data visualization method and device, the exploitation that can reduce data visualization is difficult
Degree.
In a first aspect, the embodiment of the invention provides a kind of data visualization methods, including：
Gradual frame vue frame is built in advance；
Define the corresponding function of at least one component in the vue frame；
Define the interactive interface of each component and preset database；
Receive the visualization request that user sends；
According to visualization request function corresponding with component described in each, each described component is showed into institute
State user；
Determine the user from each described component of displaying, selected component to be presented；
According to the corresponding interactive interface of the component to be presented, the component pair to be presented is obtained from the database
The data answered；
Chart is built according to the data, and gives the diagrammatic representation to the user.
Preferably, each of described described vue frame of definition corresponding function of component, including：
The corresponding function register content of component described in each of described vue frame is defined respectively；
According to the corresponding function register content of component described in each, it is corresponding that each described component is defined respectively
Component property, wherein the component property, including：The block elements of the component show pattern and ways of presentation；
Then,
It is described according to visualization request function corresponding with component described in each, each described component is shown
To the user, including：
Each institute is shown according to the corresponding component property of component described in each according to the visualization request
State component.
Preferably, before the visualization request that the reception user sends, further comprise：
Asynchronous interactive code is set, wherein the asynchronous interactive code, including：Axios code or ajax code；
It is described according to the corresponding interactive interface of the component to be presented, obtain described to be presented group from the database
The corresponding data of part, including：
Using the asynchronous interactive code, by the corresponding interactive interface of the component to be presented, to the data
Library sends data application；
The database root is obtained according to the data application, the corresponding data of the component to be presented of return.
Preferably, described by the diagrammatic representation to before the user, further comprise：
Precompile language is parsed, and is lamination style sheet CSS by the precompile language conversion after parsing；
It is described to build chart according to the data, and give the diagrammatic representation to the user, including：
The corresponding chart of the data is built using third party library, wherein the third party library, including：echarts.js
Or d3.js；
Render the vision area where the chart；
By the vision area after rendering, the user is showed according to the CSS.
Preferably, it is described build gradual frame vue frame in advance after, further comprise：
Each described component corresponding state is recorded in the vuex in the vue frame, wherein the state,
Including：Be triggered duration and/or the number that is triggered of the component；
In the determination user from each described component of displaying, after selected component to be presented, into one
Step includes：
Determine whether the corresponding state of the component to be presented is abnormal；
If so, sending warning message to the user.
Second aspect, the embodiment of the invention provides a kind of data visualization devices, including：
Frame builds unit, for building gradual frame vue frame in advance；
Component definition unit, it is corresponding for defining at least one component that the frame is built in vue frame described in unit
Function；Define the interactive interface of each component and preset database；
Communications processor element, for receiving the visualization request of user's transmission；According to the visualization request and described group
The corresponding function of each described component that part definition unit defines, shows the user for each described component；It determines
The user is from each described component of displaying, selected component to be presented；According to the corresponding institute of the component to be presented
Interactive interface is stated, obtains the corresponding data of the component to be presented from the database；
Chart builds unit, and the data for being obtained according to the communications processor element build chart, and will be described
Diagrammatic representation gives the user.
Preferably, the component definition unit, it is corresponding for defining component described in each of described vue frame respectively
Function register content；According to the corresponding function register content of component described in each, each described group is defined respectively
The corresponding component property of part, wherein the component property, including：The block elements of the component show pattern and the side of showing
Formula；
The communications processor element is used for according to the visualization request, corresponding described according to component described in each
Component property shows each described component.
Preferably, the component definition unit is further used for that asynchronous interactive code is arranged, wherein the asynchronous interactive
Code, including：Axios code or ajax code；
The communications processor element passes through for the asynchronous interactive code using component definition unit setting
The corresponding interactive interface of the component to be presented sends data application to the database；Obtain the database root evidence
The data application, the corresponding data of the component to be presented of return.
Preferably, the component definition unit is further used for parsing precompile language, and will prelist described in after parsing
Translating language conversion is lamination style sheet CSS；
The chart builds unit, for building the corresponding chart of the data using third party library, wherein the third
Fang Ku, including：Echarts.js or d3.js；Render the vision area where the chart；By the vision area after rendering, according to institute
It states the CSS that component definition unit determines and shows the user.
Preferably, the communications processor element is further used for the corresponding state of each component being recorded in institute
It states in the vuex in vue frame, wherein the state, including：Be triggered duration and/or the number that is triggered of the component；Really
Whether abnormal determine the corresponding state of the component to be presented；If so, sending warning message to the user.
In embodiments of the present invention, by building vue frame, the function of various components in definition vue frame can be passed through
And interactive interface, the data in database are bound, after user determines component to be presented, can be obtained from database
The corresponding data of component to be presented, and chart is built according to data, data are can be realized into user in the diagrammatic representation after building
Visualization edits the code of a large amount of too fat to move complexity without developer, can not only realize irredundant code, can also reduce
The development difficulty of data visualization.
Detailed description of the invention
In order to more clearly explain the embodiment of the invention or the technical proposal in the existing technology, to embodiment or will show below
There is attached drawing needed in technical description to be briefly described, it should be apparent that, the accompanying drawings in the following description is the present invention
Some embodiments for those of ordinary skill in the art without creative efforts, can also basis
These attached drawings obtain other attached drawings.
Fig. 1 is a kind of flow chart for data visualization method that one embodiment of the invention provides；
Fig. 2 is the flow chart for another data visualization method that one embodiment of the invention provides；
Fig. 3 is a kind of structural schematic diagram for data visualization device that one embodiment of the invention provides；
Fig. 4 is the structural schematic diagram for another data visualization device that one embodiment of the invention provides.
Specific embodiment
In order to make the object, technical scheme and advantages of the embodiment of the invention clearer, below in conjunction with the embodiment of the present invention
In attached drawing, technical scheme in the embodiment of the invention is clearly and completely described, it is clear that described embodiment is
A part of the embodiment of the present invention, instead of all the embodiments, based on the embodiments of the present invention, those of ordinary skill in the art
Every other embodiment obtained without making creative work, shall fall within the protection scope of the present invention.
As shown in Figure 1, the embodiment of the invention provides a kind of data visualization methods, including：
Step 101：Gradual frame vue frame is built in advance；
Step 102：Define the corresponding function of at least one component in the vue frame；
Step 103：Define the interactive interface of each component and preset database；
Step 104：Receive the visualization request that user sends；
Step 105：According to visualization request function corresponding with component described in each, by each component
Show the user；
Step 106：Determine the user from each described component of displaying, selected component to be presented；
Step 107：According to the corresponding interactive interface of the component to be presented, obtained from the database described wait open up
Show the corresponding data of component；
Step 108：Chart is built according to the data, and gives the diagrammatic representation to the user.
In embodiments of the present invention, by building vue frame, the function of various components in definition vue frame can be passed through
And interactive interface, the data in database are bound, after user determines component to be presented, can be obtained from database
The corresponding data of component to be presented, and chart is built according to data, data are can be realized into user in the diagrammatic representation after building
Visualization edits the code of a large amount of too fat to move complexity without developer, can not only realize irredundant code, can also reduce
The development difficulty of data visualization.
In an embodiment of the present invention, each of described described vue frame of definition corresponding function of component, including：
The corresponding function register content of component described in each of described vue frame is defined respectively；
According to the corresponding function register content of component described in each, it is corresponding that each described component is defined respectively
Component property, wherein the component property, including：The block elements of the component show pattern and ways of presentation；
Then,
It is described according to visualization request function corresponding with component described in each, each described component is shown
To the user, including：
Each institute is shown according to the corresponding component property of component described in each according to the visualization request
State component.
In embodiments of the present invention, by defining the corresponding function register content of various components, various components can be determined
The content for being included, and binding function registration content define the corresponding component property of various components, that is, define the mould for needing to show
Block element shows pattern and exhibition method, so that after the visualization request for receiving user's transmission, it is corresponding according to various components
Component property show each component, to improve the visual experience and usage experience of user.
In an embodiment of the present invention, before the visualization request that the reception user sends, further comprise：
Asynchronous interactive code is set, wherein the asynchronous interactive code, including：Axios code or ajax code；
It is described according to the corresponding interactive interface of the component to be presented, obtained from preset database described wait open up
Show the corresponding data of component, including：
Using the asynchronous interactive code, by the corresponding interactive interface of the component to be presented, to the data
Library sends data application；
The database root is obtained according to the data application, the corresponding data of the component to be presented of transmission.
In embodiments of the present invention, by setting axios code or the asynchronous interactive code of ajax code, and according to industry
Business logic requirement defines the interactive interface of various components and database, can make user after selecting component to be presented, that is, touch
After sending out component to be presented, by axios code or ajax code, component corresponding data to be presented can be obtained from database,
To develop interactive interface, i.e. the displaying data to be checked of user, and then the purpose that realization improves the user experience.
In an embodiment of the present invention, described by the diagrammatic representation to before the user, further comprise：
Precompile language is parsed, and is lamination style sheet CSS by the precompile language conversion after parsing；
It is described to build chart according to the data, and give the diagrammatic representation to the user, including：
The corresponding chart of the data is built using third party library, wherein the third party library, including：echarts.js
Or d3.js；
Render the vision area where the chart；
By the vision area after rendering, the user is showed according to the CSS.
In embodiments of the present invention, precompile language is parsed by means such as conversion compiler babel, further according to
Displaying demand is converted into CSS, and after getting the corresponding data of component to be presented in database, passes through third party library
Echarts.js or d3.js carries out chart and builds and show, in conjunction with the data of asynchronous acquisition, can render to vision area,
So that user can see vivid chart, to realize the purpose for improving the usage experience of user.
In an embodiment of the present invention, it is described build gradual frame vue frame in advance after, further comprise：
Each described component corresponding state is recorded in the vuex in the vue frame, wherein the state,
Including：Be triggered duration and/or the number that is triggered of the component；
In the determination user from each described component of displaying, after selected component to be presented, into one
Step includes：
Determine whether the corresponding state of the component to be presented is abnormal；
If so, sending warning message to the user.
In embodiments of the present invention, by the corresponding state of record various components, can when user misoperation cause to
When the abnormal state of component exhibiting, warning message is sent to user, to prompt user to stop maloperation, maloperation is avoided to cause
The occupancy of more resources.
For example, presetting the various components number that is triggered in 2s is 2 times；
The number of to be presented component of the user in 2s internal trigger component is 5 times, then sends and triggered frequently to user
Warning message.
In order to which what is be more clear illustrates technical solution of the present invention and advantage, below to one kind provided in an embodiment of the present invention
Data visualization method is described in detail, and specifically includes following steps：
Step 201：Gradual frame vue frame is built in advance.
Specifically, by building vue frame, the simple light weight of vue frame, favorable expandability is can use, be easy to develop, across flat
The characteristics such as platform, realization are managed data bandwagon effect, interface layout, thus realize the quick exploitation for not depending on programming, with
Shorten exploitation duration, reduce workload, exploitation threshold is reduced, to reduce data visualization development difficulty.
Step 202：The corresponding function register content of each of vue frame component is defined respectively.
Specifically, after building vue frame, that is, it can define the corresponding function of various components in vue frame, so that receiving
After the digitization request sent to user, data can be showed into user according to function register content.
For example, vue frame includes：Component a, component b and component c；
The function register content of definitions component a is：Enterprise's gross income in 2017；
The function register content of definitions component b is：Enterprise investment total value in 2017；
The function register content of definitions component c is：Corporate spending total value in 2017.
Step 203：According to the corresponding function register content of each component, the corresponding component of each component is defined respectively
Attribute, wherein component property, including：The block elements of component show pattern and ways of presentation.
Specifically, after defining the corresponding function register content of various components, the corresponding component of definitions component respectively is needed
Attribute, i.e. definitions component need show block elements, definition show pattern, and define exhibition method so that receiving
After the digitization request that user sends, various components are showed into user according to component property, so as to visually embody each
Effect, form and the function and usage of component.
For example, the block elements of definitions component a be yellow, show pattern, ways of presentation is gradual displaying；
The block elements of definitions component b are blue, show the gradual displaying of pattern, ways of presentation；
The block elements of definitions component c be green, show pattern, ways of presentation is directly shown.
Step 204：Define various components interactive interface corresponding with preset database.
Specifically, the front and back end interactive interface of definitions component and database can to determine component to be presented in user
Afterwards, using the corresponding interactive interface of component to be presented, data are obtained from database, so that partial data is shown.
For example, the interactive interface of definitions component a is interactive interface a；
The interactive interface of definitions component b is interactive interface b；
The interactive interface of definitions component c is interactive interface c.
Step 205：Precompile language is parsed, and is CSS by the precompile language conversion after parsing.
Specifically, precompile language is parsed by means such as third party's tools, such as babel, and according to displaying
It needs to be converted into CSS, so that according to CSS display data.
Step 206：When receiving the visualization request of user's transmission, according to the corresponding component property of each component,
Show each component.
Specifically, it after the visualization request for receiving user's transmission, needs to show each component according to component property,
Each component is showed in a manner of most prominent, most noticeable, so that can be embodied in visual performance function
Effect, form and the function and usage of various components.
Step 207：Determine user from each component of displaying, selected component to be presented.
Specifically, user can according to actual needs, the component to be presented selected from various components triggers to be presented
Component, so as to obtain the corresponding data of component to be presented.
For example, component a, component b and component c are showed into user according to corresponding component property respectively, and determined
The component to be presented that user selectes from the component a, component b and component c of displaying is component c.
Step 208：Using the asynchronous interactive code of setting, by the corresponding interactive interface of component to be presented, to database
Send data application.
Specifically, after receiving user and triggering and instructed caused by component to be presented, i.e., using asynchronous interactive code,
For example, axios or ajax is to database application component corresponding data to be presented, so as to show that component to be presented is corresponding to user
Data.
For example, using asynchronous interactive code axios, data application is sent to database by interactive interface c.
Step 209：Database root is obtained according to data application, the corresponding data of component to be presented of return.
Specifically, by the asynchronous interactive code of axios or ajax, the component pair to be presented of database return can be obtained
The data answered, so as to be pre-processed to data, and data show user by treated.
For example, using asynchronous interactive code axios, the corporate spending that database returns is obtained by interactive interface c
The data of total value.
Step 210：The corresponding chart of data is built using third party library, wherein third party library, including：echarts.js
Or d3.js.
Specifically, after getting the corresponding data of component to be presented, third party library, such as echarts.js can be passed through
Or d3.js, chart is built according to data, so as to convert data to intuitive, vivid Visual Chart.And it is expressed with icon each
Kind of data information, can allow the data that user is apparent, processing more efficiently is cumbersome, to help user quick and intuitive
The content of performance is wanted to data.
For example, it is corporate spending total value according to data using third party library echarts.js, builds chart.
Step 211：Render the vision area where chart.
Specifically, by rendering to vision area, the vision area shown to user can be made vivider lively, so as to improve
The usage experience of user.
Step 212：By the vision area after rendering, user is showed according to CSS.
Specifically, after carrying out vision area rendering, can according to data representation by diagrammatic representation to user.
For example, after rendering to vision area, chart is shown according to CSS.
To sum up, a kind of data visualization method provided in an embodiment of the present invention has pole in exploitation web application field
Big advantage, possess the language of flexible light weight, graceful component definition schema, high scalability, later maintenance low complex degree,
MVVM frame is absorbed in view layer, is interface definition abundant, a variety of periphery tools and plug-in unit, popularity, code compaction, automatic
Task, npm packet rely on numerous characteristics such as support.Meanwhile a kind of data visualization method provided in an embodiment of the present invention, purpose
It is that user is allowed to have better usage experience, compared to too fat to move project, the achievable lightweight deployment of this method removes duplicated code,
Realize the multiplexing of code height.It is small to reach deployment file, performance is high, and the load time is short, and user is greatly improved in the purpose of irredundant code
Experience.By this method can convenient expanded application, maintenance when only corresponding component is modified or is added, and
And component can be multiplexed, and reached and once defined nonexpondable purpose.A kind of data visualization side provided in an embodiment of the present invention
Method can be applied for web, therefore can use in any platform for possessing available browser, multiple without building environment, installation service etc.
Miscellaneous step.
As shown in figure 3, the embodiment of the invention provides a kind of data visualization devices, including：
Frame builds unit 301, for building gradual frame vue frame in advance；
Component definition unit 302 builds at least one of vue frame group described in unit 301 for defining the frame
The corresponding function of part；Define the interactive interface of each component and preset database；
Communications processor element 303, for receiving the visualization request of user's transmission；According to the visualization request and described
The corresponding function of each of the definition of component definition unit 302 component, shows the user for each described component；
Determine the user from each described component of displaying, selected component to be presented；It is corresponding according to the component to be presented
The interactive interface, obtain the corresponding data of the component to be presented from the database；
Chart builds unit 304, and the data for being obtained according to the communications processor element 303 build chart, and
Give the diagrammatic representation to the user.
In embodiments of the present invention, vue frame is built by frame unit, vue can be defined by component definition unit
The function and interactive interface of various components, bind the data in database in frame, use when communications processor element determines
After component to be presented is selected at family, the corresponding data of component to be presented can be obtained from database, and unit is built by chart
Chart is built according to the data that communications processor element obtains, data visualization is can be realized into user in the diagrammatic representation after building
Change, the code of a large amount of too fat to move complexity is edited without developer, irredundant code can not only be realized, data can also be reduced
Visual development difficulty.
In an embodiment of the present invention, the component definition unit, for defining each of described vue frame respectively
The corresponding function register content of the component；According to the corresponding function register content of component described in each, define respectively
The corresponding component property of each described component, wherein the component property, including：The block elements of the component show sample
Formula and ways of presentation；
The communications processor element is used for according to the visualization request, corresponding described according to component described in each
Component property shows each described component.
In an embodiment of the present invention, the component definition unit is further used for that asynchronous interactive code is arranged, wherein
The asynchronous interactive code, including：Axios code or ajax code；
The communications processor element passes through for the asynchronous interactive code using component definition unit setting
The corresponding interactive interface of the component to be presented sends data application to the database；Obtain the database root evidence
The data application, the corresponding data of the component to be presented of return.
Based on a kind of data visualization device shown in Fig. 3, as shown in figure 4, in an embodiment of the present invention, the component
Definition unit 302 is further used for parsing precompile language, and is lamination pattern by the precompile language conversion after parsing
Table CSS；
The chart builds unit 304, for building the corresponding chart of the data using third party library, wherein described
Third party library, including：Echarts.js or d3.js；Render the vision area where the chart；By the vision area after rendering, press
The CSS determined according to the component definition unit 302 shows the user.
In an embodiment of the present invention, the communications processor element is further used for each component is corresponding
State is recorded in the vuex in the vue frame, wherein the state, including：The component be triggered duration and/or
Be triggered number；Determine whether the corresponding state of the component to be presented is abnormal；It is alerted if so, being sent to the user
Information.
The each embodiment of the present invention at least has the advantages that：
It 1, can be by defining various components in vue frame in an embodiment of the present invention, by building vue frame
Function and interactive interface bind the data in database, can be from database after user determines component to be presented
The corresponding data of component to be presented are obtained, and build chart according to data, the diagrammatic representation after building can be realized to user
Data visualization edits the code of a large amount of too fat to move complexity without developer, can not only realize irredundant code, can be with
Reduce the development difficulty of data visualization.
2, it in an embodiment of the present invention, by defining the corresponding function register content of various components, can determine each
The content that component is included, and binding function registration content define the corresponding component property of various components, i.e. definition needs to show
Block elements, show pattern and exhibition method so that after the visualization request for receiving user's transmission, according to various components
Corresponding component property shows each component, to improve the visual experience and usage experience of user.
3, in an embodiment of the present invention, pass through setting axios code or the asynchronous interactive code of ajax code, Yi Jigen
According to the interactive interface of service logic requirement definition various components and database, it can make user after selecting component to be presented,
After triggering component to be presented, by axios code or ajax code, component to be presented can be obtained from database and corresponds to number
According to, to develop interactive interface, i.e. the displaying data to be checked of user, and then the purpose that realization improves the user experience.
4, in an embodiment of the present invention, precompile language is parsed by means such as conversion compiler babel, then
It is converted into CSS according to displaying demand, and after getting the corresponding data of component to be presented in database, passes through third party
Library echarts.js or d3.js carry out chart and build and show, in conjunction with the data of asynchronous acquisition, can carry out wash with watercolours to vision area
Dye, so that user can see vivid chart, to realize the purpose for improving the usage experience of user.
5, it in an embodiment of the present invention, by the corresponding state of record various components, can be led when user misoperation
When causing the abnormal state of component to be presented, warning message is sent to user, to prompt user to stop maloperation, maloperation is avoided to make
At the occupancy of excess resource.
It should be noted that, in this document, such as first and second etc relational terms are used merely to an entity
Or operation is distinguished with another entity or operation, is existed without necessarily requiring or implying between these entities or operation
Any actual relationship or order.Moreover, the terms "include", "comprise" or its any other variant be intended to it is non-
It is exclusive to include, so that the process, method, article or equipment for including a series of elements not only includes those elements,
It but also including other elements that are not explicitly listed, or further include solid by this process, method, article or equipment
Some elements.In the absence of more restrictions, the element limited by sentence " including one ", is not arranged
Except there is also other identical factors in the process, method, article or apparatus that includes the element.
Finally, it should be noted that：The foregoing is merely presently preferred embodiments of the present invention, is merely to illustrate skill of the invention
Art scheme, is not intended to limit the scope of the present invention.Any modification for being made all within the spirits and principles of the present invention,
Equivalent replacement, improvement etc., are included within the scope of protection of the present invention.
Claims (10)
1. a kind of data visualization method, which is characterized in that including：
Gradual frame vue frame is built in advance；
Define the corresponding function of at least one component in the vue frame；
Define the interactive interface of each component and preset database；
Receive the visualization request that user sends；
According to visualization request function corresponding with component described in each, each described component is showed into the use
Family；
Determine the user from each described component of displaying, selected component to be presented；
According to the corresponding interactive interface of the component to be presented, it is corresponding that the component to be presented is obtained from the database
Data；
Chart is built according to the data, and gives the diagrammatic representation to the user.
2. the method according to claim 1, wherein
Each of the definition vue frame corresponding function of component, including：
The corresponding function register content of component described in each of described vue frame is defined respectively；
According to the corresponding function register content of component described in each, the corresponding component of each described component is defined respectively
Attribute, wherein the component property, including：The block elements of the component show pattern and ways of presentation；
Then,
It is described according to visualization request function corresponding with component described in each, each described component is showed into institute
User is stated, including：
Each described group is shown according to the corresponding component property of component described in each according to the visualization request
Part.
3. the method according to claim 1, wherein
Before the visualization request that the reception user sends, further comprise：
Asynchronous interactive code is set, wherein the asynchronous interactive code, including：Axios code or ajax code；
It is described according to the corresponding interactive interface of the component to be presented, obtain the component pair to be presented from the database
The data answered, including：
Using the asynchronous interactive code, by the corresponding interactive interface of the component to be presented, sent out to the database
Send data application；
The database root is obtained according to the data application, the corresponding data of the component to be presented of return.
4. the method according to claim 1, wherein
It is described by the diagrammatic representation to before the user, further comprise：
Precompile language is parsed, and is lamination style sheet CSS by the precompile language conversion after parsing；
It is described to build chart according to the data, and give the diagrammatic representation to the user, including：
The corresponding chart of the data is built using third party library, wherein the third party library, including：Echarts.js or
d3.js；
Render the vision area where the chart；
By the vision area after rendering, the user is showed according to the CSS.
5. according to claim 1 to any method in 4, which is characterized in that
It is described build gradual frame vue frame in advance after, further comprise：
Each described component corresponding state is recorded in the vuex in the vue frame, wherein the state, packet
It includes：Be triggered duration and/or the number that is triggered of the component；
In the determination user from each described component of displaying, after selected component to be presented, further wrap
It includes：
Determine whether the corresponding state of the component to be presented is abnormal；
If so, sending warning message to the user.
6. a kind of data visualization device, which is characterized in that including：
Frame builds unit, for building gradual frame vue frame in advance；
Component definition unit builds the corresponding function of at least one component in vue frame described in unit for defining the frame
Energy；Define the interactive interface of each component and preset database；
Communications processor element, for receiving the visualization request of user's transmission；It is fixed according to the visualization request and the component
The corresponding function of each described component that adopted unit defines, shows the user for each described component；Described in determination
User is from each described component of displaying, selected component to be presented；According to the corresponding friendship of the component to be presented
Mutual interface obtains the corresponding data of the component to be presented from the database；
Chart builds unit, and the data for being obtained according to the communications processor element build chart, and by the chart
Show the user.
7. device according to claim 6, which is characterized in that
The component definition unit, for defining the corresponding function register of component described in each of described vue frame respectively
Content；According to the corresponding function register content of component described in each, each corresponding group of described component is defined respectively
Part attribute, wherein the component property, including：The block elements of the component show pattern and ways of presentation；
The communications processor element is used for according to the visualization request, according to the corresponding component of component described in each
Attribute shows each described component.
8. device according to claim 6, which is characterized in that
The component definition unit is further used for that asynchronous interactive code is arranged, wherein the asynchronous interactive code, including：
Axios code or ajax code；
The communications processor element, for the asynchronous interactive code using component definition unit setting, by described
The corresponding interactive interface of component to be presented sends data application to the database；The database root is obtained described in
Data application, the corresponding data of the component to be presented of return.
9. device according to claim 6, which is characterized in that
The component definition unit is further used for parsing precompile language, and by the precompile language conversion after parsing
For lamination style sheet CSS；
The chart builds unit, for building the corresponding chart of the data using third party library, wherein the third party
Library, including：Echarts.js or d3.js；Render the vision area where the chart；By the vision area after rendering, according to described
CSS shows the user.
10. according to the device any in claim 6 to 9, which is characterized in that
The communications processor element is further used for for the corresponding state of each component being recorded in the vue frame
Vuex in, wherein the state, including：Be triggered duration and/or the number that is triggered of the component；It determines described wait open up
Show whether the corresponding state of component is abnormal；If so, sending warning message to the user.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810554647.7A CN108829381A (en) | 2018-06-01 | 2018-06-01 | Data visualization method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810554647.7A CN108829381A (en) | 2018-06-01 | 2018-06-01 | Data visualization method and device |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN108829381A true CN108829381A (en) | 2018-11-16 |
Family
ID=64146726
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810554647.7A Pending CN108829381A (en) | 2018-06-01 | 2018-06-01 | Data visualization method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108829381A (en) |
Cited By (10)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109871524A (en) * | 2019-02-21 | 2019-06-11 | 腾讯科技（深圳）有限公司 | A kind of chart generation method and device |
| CN109885226A (en) * | 2019-02-21 | 2019-06-14 | 山东浪潮云信息技术有限公司 | A method of secondary navigation menu is realized based on Vue.js |
| CN110018821A (en) * | 2019-04-09 | 2019-07-16 | 苏州浪潮智能科技有限公司 | A kind of method and device handling webpage information |
| CN110531976A (en) * | 2019-09-02 | 2019-12-03 | 浪潮云信息技术有限公司 | The method of charting is matched in modularization in a kind of visualization large-size screen monitors |
| CN110688115A (en) * | 2019-09-24 | 2020-01-14 | 珠海格力电器股份有限公司 | Method and device for generating interface |
| CN110908894A (en) * | 2019-10-11 | 2020-03-24 | 苏宁云计算有限公司 | Visual report tool automatic testing method and device based on vuex |
| CN111312345A (en) * | 2019-09-06 | 2020-06-19 | 北京交通大学 | Intelligent visualization method and device for medical data |
| CN111813402A (en) * | 2020-07-07 | 2020-10-23 | 北京亚鸿世纪科技发展有限公司 | Dragging development component and event interaction definer for data visualization development |
| CN112688992A (en) * | 2020-12-15 | 2021-04-20 | 金现代信息产业股份有限公司 | vue method and device for displaying flow chart auditing state |
| CN113641926A (en) * | 2021-07-21 | 2021-11-12 | 深圳市六度人和科技有限公司 | Information display method, device and storage medium |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104376068A (en) * | 2014-11-07 | 2015-02-25 | 北京思特奇信息技术股份有限公司 | Data representation system and method based on dynamic report template |
| CN106302008A (en) * | 2016-08-05 | 2017-01-04 | 腾讯科技（深圳）有限公司 | Data-updating method and device |
| CN107491528A (en) * | 2017-08-18 | 2017-12-19 | 深圳易嘉恩科技有限公司 | A kind of Tree control that visualized operation is carried out for data assets basic platform |
| CN107577515A (en) * | 2017-10-10 | 2018-01-12 | 北京小度信息科技有限公司 | Extended method, device, electronic equipment and the storage medium of visualization component |
| CN107832038A (en) * | 2017-10-27 | 2018-03-23 | 中航信移动科技有限公司 | The implementation method and device of Component Gallery |
-
2018
- 2018-06-01 CN CN201810554647.7A patent/CN108829381A/en active Pending
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104376068A (en) * | 2014-11-07 | 2015-02-25 | 北京思特奇信息技术股份有限公司 | Data representation system and method based on dynamic report template |
| CN106302008A (en) * | 2016-08-05 | 2017-01-04 | 腾讯科技（深圳）有限公司 | Data-updating method and device |
| CN107491528A (en) * | 2017-08-18 | 2017-12-19 | 深圳易嘉恩科技有限公司 | A kind of Tree control that visualized operation is carried out for data assets basic platform |
| CN107577515A (en) * | 2017-10-10 | 2018-01-12 | 北京小度信息科技有限公司 | Extended method, device, electronic equipment and the storage medium of visualization component |
| CN107832038A (en) * | 2017-10-27 | 2018-03-23 | 中航信移动科技有限公司 | The implementation method and device of Component Gallery |
Non-Patent Citations (1)
| Title |
|---|
| 易泽顺: "基于Web的数据可视化工具设计与实现", 《中国优秀硕士学位论文全文数据库 信息科技辑》 * |
Cited By (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109871524A (en) * | 2019-02-21 | 2019-06-11 | 腾讯科技（深圳）有限公司 | A kind of chart generation method and device |
| CN109885226A (en) * | 2019-02-21 | 2019-06-14 | 山东浪潮云信息技术有限公司 | A method of secondary navigation menu is realized based on Vue.js |
| CN109885226B (en) * | 2019-02-21 | 2021-06-11 | 浪潮云信息技术股份公司 | Method for realizing secondary navigation menu based on Vue |
| CN110018821A (en) * | 2019-04-09 | 2019-07-16 | 苏州浪潮智能科技有限公司 | A kind of method and device handling webpage information |
| CN110531976A (en) * | 2019-09-02 | 2019-12-03 | 浪潮云信息技术有限公司 | The method of charting is matched in modularization in a kind of visualization large-size screen monitors |
| CN111312345A (en) * | 2019-09-06 | 2020-06-19 | 北京交通大学 | Intelligent visualization method and device for medical data |
| CN110688115A (en) * | 2019-09-24 | 2020-01-14 | 珠海格力电器股份有限公司 | Method and device for generating interface |
| CN110908894A (en) * | 2019-10-11 | 2020-03-24 | 苏宁云计算有限公司 | Visual report tool automatic testing method and device based on vuex |
| CN111813402A (en) * | 2020-07-07 | 2020-10-23 | 北京亚鸿世纪科技发展有限公司 | Dragging development component and event interaction definer for data visualization development |
| CN112688992A (en) * | 2020-12-15 | 2021-04-20 | 金现代信息产业股份有限公司 | vue method and device for displaying flow chart auditing state |
| CN113641926A (en) * | 2021-07-21 | 2021-11-12 | 深圳市六度人和科技有限公司 | Information display method, device and storage medium |
| CN113641926B (en) * | 2021-07-21 | 2024-05-07 | 深圳市六度人和科技有限公司 | Information display method, device and storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108829381A (en) | Data visualization method and device | |
| CN108491205A (en) | A kind of front end web development methods and system based on component tree | |
| CN103197930B (en) | The method that automobile diagnostic software automatically generates | |
| CN102184184B (en) | Method for acquiring webpage dynamic information | |
| CN106843835A (en) | A kind of application systems software constructing system of meta data customizing, system constituting method | |
| CN106648690A (en) | Code automatic generation method and apparatus | |
| CN104484216A (en) | Method and device for generating service interface document and on-line test tool | |
| CN104380280A (en) | System and method for dynamically converting webpage, and computer-readable recording medium | |
| CN101082865A (en) | Automatically generating method based on data driving interface | |
| CN102737022B (en) | Method and device for acquiring and searching relevant knowledge information | |
| CN105653597A (en) | Method and device for synchronously playing files at multiple terminals | |
| CN101567030A (en) | Method of constructing virtual preservation and restoration system for wooden structure of ancient architecture | |
| CN109271561A (en) | A kind of profile information search method and device | |
| CN110704047A (en) | Dynamic visual configuration system and operation management method based on same | |
| CN111324390A (en) | Device and method for realizing APP content configuration and real-time update | |
| CN106557410A (en) | User behavior analysis method and apparatus based on artificial intelligence | |
| CN107436785B (en) | Revit software information interaction system and interaction method based on information system | |
| CN103595742B (en) | A method and an apparatus for debugging webpage CSS | |
| CN108897530A (en) | A kind of education development system based on assembly module | |
| CN110020261A (en) | Document converts sharing method, device, equipment and readable storage medium storing program for executing | |
| CN108959439B (en) | Data template generation method and system | |
| CN103109289A (en) | Web-based script language editing method, system and web client | |
| CN107239291A (en) | Method for templated query configuration in mobile application | |
| CN112306622B (en) | Construction method and device of VNF template | |
| CN102567066B (en) | Business system development method, business system |
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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20181116 |
|
| RJ01 | Rejection of invention patent application after publication |