CN109815239A - A kind of method of combination ECharts creation relation map - Google Patents
A kind of method of combination ECharts creation relation map Download PDFInfo
- Publication number
- CN109815239A CN109815239A CN201910072297.5A CN201910072297A CN109815239A CN 109815239 A CN109815239 A CN 109815239A CN 201910072297 A CN201910072297 A CN 201910072297A CN 109815239 A CN109815239 A CN 109815239A
- Authority
- CN
- China
- Prior art keywords
- node
- data
- line
- echarts
- association map
- 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.)
- Granted
Links
Classifications
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
- Processing Or Creating Images (AREA)
Abstract
The invention discloses a kind of methods that combination ECharts creates association map, belong to field of computer technology.The method of combination ECharts creation association map of the invention, comprising the following steps: S1, according to querying condition finds first node and all data to be shown；S2, since first node, find all with first related data of node；S3, all data to be shown are recycled, searches related node respectively；S4, the nodal information for obtaining each level, calculate node, obtain node coordinate；S5, the institute that node is obtained from all data to be shown are relevant；S6, line, creation association map are carried out according to the incidence relation of node.The method of the combination ECharts creation association map of the invention can showing numerous and complicated clear data, while free dragging is carried out to node, with good application value.
Description
Technical field
The present invention relates to field of computer technology, specifically provide a kind of method of combination ECharts creation association map.
Background technique
The abbreviation of ECharts, that is, Enterprise Charts is business level data drawing list, is a use
The open source that JavaScript is realized visualizes library, smooth can operate on PC and mobile device, the compatible current overwhelming majority
Browser (IE8/9/10/11, Chrome, Firefox, Safari etc.), bottom rely on the appropriate shape library of lightweight
ZRender, provides intuitive, and interaction is abundant, can height personalized customization data visualization chart.The graph figure of ECharts can
For constructing map, default has ring arrangement, power guidance two kinds of layout type of layout, but both layout type can not be intuitive
The hierarchical relationship shown between data, require further improvement.
Summary of the invention
Technical assignment of the invention is that in view of the above problems, providing one kind can be by numerous and complicated clear data
Show, while free dragging is carried out to node, increases the combination ECharts creation associated diagram of bandwagon effect flexibility
The method of spectrum.
To achieve the above object, the present invention provides the following technical scheme that
A kind of method of combination ECharts creation association map, this method specifically includes the following steps:
S1, according to querying condition, find first node and all data to be shown；
S2, since first node, find all with first related data of node；
S3, all data to be shown are recycled, searches related node respectively；
S4, the nodal information for obtaining each level, calculate node, obtain node coordinate；
S5, the institute that node is obtained from all data to be shown are relevant；
S6, line, creation association map are carried out according to the incidence relation of node.
According to querying condition, first node L1 and all data ListData to be shown are found.
Since first node L1, find all and related data of L1, be denoted as respectively L1.1, L1.2,
L1.3……L1.n。
To L1.1, L1.2, L1.3 ..., L1.n is recycled, and is searched related node, such as m-th respectively, is then looked for
L1.m.1 ... L1.m.n out, and therefrom remove the node that front occurred.
The nodal information for obtaining each level, calculates node, obtains node coordinate (x, y).
Node coordinate is obtained to be divided into from left to right distribution and be distributed from top to bottom.
The process being from left to right distributed are as follows:
1) height and width for wanting the page of display data are obtained, are denoted as height and width respectively.
2) by all data ListData to be shown, total level Lc of egress is obtained, is got between layers
Distance: Lcl=width/Lc, if Lcl < 100, we are assignment Lcl=100, so that let us ensure that data in transverse direction
Upper display will not be too crowded, and can be uniformly distributed when the data number of plies is less；Then the abscissa x=node of each node
Level * Lcl.
3) this node layer is shown to the processing of each hierarchy node hierarchical by all data ListData to be shown
Total Cs, obtain the distance Csl=height/Cs between adjacent node at the same level, if Csl < 60, we assignment Csl=60,
To let us ensure that data show in the longitudinal direction will not be too crowded, and can be uniformly distributed when the data number of plies is less；
Then the ordinate y=node sequence * Csl of each node.
4) coordinate (x, y) of each node is obtained.
Distributed process from top to bottom are as follows:
1) height and width for wanting the page of display data are obtained, are denoted as height and width respectively.
2) this node layer is shown to the processing of each hierarchy node hierarchical by all data ListData to be shown
Total Cs, to obtain the distance between adjacent node at the same level Csl=width/Cs, if Csl < 100, our assignment
Csl=100, thus let us ensure that data horizontally show will not be too crowded, and the energy when the data number of plies is less
It is uniformly distributed；Then the abscissa x=node sequence * Csl of each node.
3) by all data ListData to be shown, obtain total level Lc of egress, obtain between layers away from
From Lcl=height/Lc, if Lcl < 60, we are assignment Lcl=60, so that let us ensure that data are shown in the longitudinal direction
That shows will not be too crowded, and can be uniformly distributed when the data number of plies is less；Then the ordinate y=node layer of each node
Grade * Lcl.
4) coordinate (x, y) of each node is obtained.
The institute that node is obtained from ListData is relevant, is denoted as (Ln, Lm, value), indicates node Ln to node
The value relationship of Lm.
Line, creation association map are carried out according to the incidence relation of node.If there is a plurality of line between node, line is set
Radian for camber line, every camber line is different, guarantees that line does not repeat between node.If node is in different levels, and level is poor
Greater than 1, then line uses camber line, guarantees that line is not overlapped with node.If node is in same level, and intermediate across other nodes,
Then line uses camber line, guarantees that line is not overlapped with node.
The method for combining ECharts creation association map reduces ECharts and needs largely to calculate when node is put
The hierarchical structure for having exhibition method that cannot embody data with time needed for balance nodes, the primitive for solving ECharts is asked
Topic, and node is pulled, so that numerous and complicated data be shown with clearly tree, make to close between data
Be it is very clear, increase the flexibility of displaying.
Preferably, searching related node in step S3, and therefrom remove the node that front occurred.
Preferably, calculate in step S4 node, obtain node coordinate be divided into from left to right distribution and on to
Lower distribution.
Preferably, the process being from left to right distributed are as follows:
1) height and width for wanting the page of display data are obtained；
2) by all data to be shown, total level of egress is obtained, distance between layers is got, obtained each
The abscissa of a node；
3) is obtained by the sum of this node layer, is obtained for the processing of each hierarchy node hierarchical by all data to be shown
The distance between adjacent node at the same level is taken, obtains the ordinate of each node；
4) coordinate of each node is obtained.
Preferably, the process being distributed from top to bottom are as follows:
1) height and width for wanting the page of display data are obtained；
2) sum of this node layer is shown to the processing of each hierarchy node hierarchical by all data to be shown, from
The distance between and obtain adjacent node at the same level, obtain the abscissa of each node；
3) by all data to be shown, total level of egress is obtained, distance between layers is obtained, is obtained each
The ordinate of node；
4) coordinate of each node is obtained.
Preferably, in step S6, during carrying out line creation association map according to node incidence relation, if node it
Between have a plurality of line, then it is camber line that line, which is arranged, and the radian of every camber line is different, guarantees that line does not repeat between node.
Preferably, in step S6, during carrying out line creation association map according to node incidence relation, if node exists
Different levels, and level difference is greater than 1, then line uses camber line, guarantees that line is not overlapped with node.
Preferably, in step S6, during carrying out line creation association map according to node incidence relation, if node exists
Same level, and it is intermediate across other nodes, then line guarantees that line is not overlapped with node using camber line.
Compared with prior art, the method for combination ECharts of the invention creation association map has with following prominent
Beneficial effect: the method for the combination ECharts creation association map reduces ECharts and needs largely to calculate when node is put
The hierarchical structure for having exhibition method that cannot embody data with time needed for balance nodes, the primitive for solving ECharts is asked
Topic, and node is pulled, so that numerous and complicated data be shown with clearly tree, make to close between data
Be it is very clear, increase the flexibility of displaying, have good application value.
Detailed description of the invention
Fig. 1 is the process schematic of the method for combination ECharts creation association map of the present invention.
Specific embodiment
Below in conjunction with drawings and examples, the method for combination ECharts creation association map of the invention is made into one
Step is described in detail.
Embodiment
As shown in Figure 1, the method for combination ECharts creation association map of the invention mainly comprises the steps that
S1, according to querying condition, find first node and all data to be shown.
According to querying condition, first node L1 and all data ListData to be shown are found.
S2, since first node, find all with first related data of node.
Since first node L1, find all and related data of L1, be denoted as respectively L1.1, L1.2,
L1.3……L1.n。
S3, all data to be shown are recycled, searches related node respectively.
To L1.1, L1.2, L1.3 ..., L1.n is recycled, and is searched related node, such as m-th respectively, is then looked for
L1.m.1 ... L1.m.n out, and therefrom remove the node that front occurred.
S4, the nodal information for obtaining each level, calculate node, obtain node coordinate.
Node is calculated, node coordinate is obtained and is divided into from left to right distribution and is distributed from top to bottom.
The process being from left to right distributed are as follows:
1) height and width for wanting the page of display data are obtained, are denoted as height and width respectively.
2) by all data ListData to be shown, total level Lc of egress is obtained, is got between layers
Distance: Lcl=width/Lc, if Lcl < 100, we are assignment Lcl=100, so that let us ensure that data in transverse direction
Upper display will not be too crowded, and can be uniformly distributed when the data number of plies is less；Then the abscissa x=node of each node
Level * Lcl.
3) this node layer is shown to the processing of each hierarchy node hierarchical by all data ListData to be shown
Total Cs, obtain the distance Csl=height/Cs between adjacent node at the same level, if Csl < 60, we assignment Csl=60,
To let us ensure that data show in the longitudinal direction will not be too crowded, and can be uniformly distributed when the data number of plies is less；
Then the ordinate y=node sequence * Csl of each node.
4) coordinate (x, y) of each node is obtained.
Distributed process from top to bottom are as follows:
1) height and width for wanting the page of display data are obtained, are denoted as height and width respectively.
2) this node layer is shown to the processing of each hierarchy node hierarchical by all data ListData to be shown
Total Cs, to obtain the distance between adjacent node at the same level Csl=width/Cs, if Csl < 100, our assignment
Csl=100, thus let us ensure that data horizontally show will not be too crowded, and the energy when the data number of plies is less
It is uniformly distributed；Then the abscissa x=node sequence * Csl of each node.
3) by all data ListData to be shown, obtain total level Lc of egress, obtain between layers away from
From Lcl=height/Lc, if Lcl < 60, we are assignment Lcl=60, so that let us ensure that data are shown in the longitudinal direction
That shows will not be too crowded, and can be uniformly distributed when the data number of plies is less；Then the ordinate y=node layer of each node
Grade * Lcl.
4) coordinate (x, y) of each node is obtained.
S5, the institute that node is obtained from all data to be shown are relevant, are denoted as (Ln, Lm, value), indicate
The value relationship of node Ln to node Lm.
S6, line, creation association map are carried out according to the incidence relation (Ln, Lm, value) of node.
If there is a plurality of line between node, it is camber line that line, which is arranged, and the radian of every camber line is different, guarantees to connect between node
Line does not repeat.If node is in different levels, and level difference is greater than 1, then line uses camber line, guarantees that line is not weighed with node
It closes.If node is in same level, and centre across other nodes, then line uses camber line, guarantees that line is not overlapped with node.Except upper
It states outside situation, remaining uses straight line line.
Embodiment described above, the only present invention more preferably specific embodiment, those skilled in the art is at this
The usual variations and alternatives carried out within the scope of inventive technique scheme should be all included within the scope of the present invention.
Claims (8)
1. a kind of method of combination ECharts creation association map, it is characterised in that: this method specifically includes the following steps:
S1, according to querying condition, find first node and all data to be shown；
S2, since first node, find all with first related data of node；
S3, all data to be shown are recycled, searches related node respectively；
S4, the nodal information for obtaining each level, calculate node, obtain node coordinate；
S5, the institute that node is obtained from all data to be shown are relevant；
S6, line, creation association map are carried out according to the incidence relation of node.
2. the method for combination ECharts creation association map according to claim 1, it is characterised in that: in step S3, look into
Related node is looked for, and therefrom removes the node that front occurred.
3. the method for combination ECharts creation association map according to claim 1 or 2, it is characterised in that: step S4
In, node is calculated, node coordinate is obtained and is divided into from left to right distribution and is distributed from top to bottom.
4. the method for combination ECharts creation association map according to claim 3, it is characterised in that:
The process being from left to right distributed are as follows:
1) height and width for wanting the page of display data are obtained；
2) by all data to be shown, total level of egress is obtained, distance between layers is got, obtains each section
The abscissa of point；
3) sum of this node layer is shown to the processing of each hierarchy node hierarchical by all data to be shown, obtained same
Distance between grade adjacent node, obtains the ordinate of each node；
4) coordinate of each node is obtained.
5. the method for combination ECharts creation association map according to claim 3, it is characterised in that:
The process being distributed from top to bottom are as follows:
1) height and width for wanting the page of display data are obtained；
2) sum of this node layer is obtained, to obtain to the processing of each hierarchy node hierarchical by all data to be shown
The distance between adjacent node at the same level is taken, obtains the abscissa of each node；
3) by all data to be shown, total level of egress is obtained, distance between layers is obtained, obtains each node
Ordinate；
4) coordinate of each node is obtained.
6. the method for combination ECharts creation association map according to claim 4 or 5, it is characterised in that: step S6
In, during carrying out line creation association map according to node incidence relation, if there is a plurality of line between node, line, which is arranged, is
The radian of camber line, every camber line is different, guarantees that line does not repeat between node.
7. the method for combination ECharts creation association map according to claim 4 or 5, it is characterised in that: step S6
In, during carrying out line creation association map according to node incidence relation, if node, in different levels, and level difference is greater than
1, then line uses camber line, guarantees that line is not overlapped with node.
8. the method for combination ECharts creation association map according to claim 4 or 5, it is characterised in that: step S6
In, it is and intermediate across other sections if node is in same level during carrying out line creation association map according to node incidence relation
Point, then line uses camber line, guarantees that line is not overlapped with node.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910072297.5A CN109815239B (en) | 2019-01-25 | 2019-01-25 | Method for creating relationship map by combining ECharts |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910072297.5A CN109815239B (en) | 2019-01-25 | 2019-01-25 | Method for creating relationship map by combining ECharts |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109815239A true CN109815239A (en) | 2019-05-28 |
| CN109815239B CN109815239B (en) | 2023-05-12 |
Family
ID=66605081
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910072297.5A Active CN109815239B (en) | 2019-01-25 | 2019-01-25 | Method for creating relationship map by combining ECharts |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109815239B (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111008022A (en) * | 2019-12-04 | 2020-04-14 | 浙江大搜车软件技术有限公司 | Relationship graph generation method and device, computer equipment and storage medium |
| CN113094517A (en) * | 2021-04-27 | 2021-07-09 | 中国美术学院 | Method and system for constructing product knowledge unit |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110119311A1 (en) * | 2008-03-26 | 2011-05-19 | Kazuma Fukuda | Map data creating device and map drawing device |
| CN106445931A (en) * | 2015-08-04 | 2017-02-22 | 阿里巴巴集团控股有限公司 | Database node association relationship display method and apparatus |
| CN106557323A (en) * | 2016-11-09 | 2017-04-05 | 北京锐安科技有限公司 | A kind of network visual layout method and device |
-
2019
- 2019-01-25 CN CN201910072297.5A patent/CN109815239B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20110119311A1 (en) * | 2008-03-26 | 2011-05-19 | Kazuma Fukuda | Map data creating device and map drawing device |
| CN106445931A (en) * | 2015-08-04 | 2017-02-22 | 阿里巴巴集团控股有限公司 | Database node association relationship display method and apparatus |
| CN106557323A (en) * | 2016-11-09 | 2017-04-05 | 北京锐安科技有限公司 | A kind of network visual layout method and device |
Non-Patent Citations (1)
| Title |
|---|
| 党执政等: "信息系统应用关系分析器", 《计算机系统应用》 * |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111008022A (en) * | 2019-12-04 | 2020-04-14 | 浙江大搜车软件技术有限公司 | Relationship graph generation method and device, computer equipment and storage medium |
| CN111008022B (en) * | 2019-12-04 | 2023-12-12 | 浙江大搜车软件技术有限公司 | Relationship diagram generation method, device, computer equipment and storage medium |
| CN113094517A (en) * | 2021-04-27 | 2021-07-09 | 中国美术学院 | Method and system for constructing product knowledge unit |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109815239B (en) | 2023-05-12 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9164965B2 (en) | Interactive topological views of combined hardware and software systems | |
| US7627599B2 (en) | Method, apparatus, and program product for visualizing tree structured information | |
| US8605092B2 (en) | Method and apparatus of animation planning for a dynamic graph | |
| CN102394778B (en) | The display methods and device of network topology | |
| US9128998B2 (en) | Presentation of data object hierarchies | |
| US8903867B2 (en) | Method for exploring a catalog of digital information contents | |
| US20140059488A1 (en) | System and method for viewing selected descendant nodes in a tree hierarchy displayed in tabular form | |
| US11580127B1 (en) | User interfaces for database visualizations | |
| BR112020007205A2 (en) | use of a heterogeneous data object model to facilitate the construction of data visualizations | |
| KR101778737B1 (en) | Image processing device and image processing program | |
| CN103761276B (en) | Methods of exhibiting and device that a kind of tree structure data compares | |
| US20100060643A1 (en) | Algorithm For Drawing Directed Acyclic Graphs | |
| US20140304214A1 (en) | Navigable semantic network definition, modeling, and use | |
| CN105760500A (en) | System, method and computer program for creating and manipulating data structures using an interactive graphical interface | |
| CN105138526A (en) | Method and system used for automatically generating semantic mapping for relational databases | |
| CN102904751A (en) | Network topology view generating method and device | |
| CN107729396B (en) | Data dynamic query method and device | |
| CN109815239A (en) | A kind of method of combination ECharts creation relation map | |
| CN103699648A (en) | Tree-form data structure used for quick retrieval and implementation method of tree-form data structure | |
| CN110567459A (en) | Path planning method and device | |
| CN111177497A (en) | Visual processing method, server and storage medium for incidence relation of hierarchical data | |
| CN104331516B (en) | A kind of contract type management system | |
| JP2009134520A (en) | Social network display system, method, and program | |
| US8924385B2 (en) | Query-based diagrammatic presentation of data | |
| CN110366723A (en) | The position of graphical user-interface element is indicated with layered identification symbol |
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 | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20230413 Address after: 250000 Langchao Science Park, No. 1036, Langchao Road, high tech Zone, Jinan, Shandong Applicant after: Inspur Software Technology Co.,Ltd. Address before: 250100 First Floor of R&D Building 2877 Kehang Road, Sun Village Town, Jinan High-tech Zone, Shandong Province Applicant before: SHANDONG INSPUR BUSINESS SYSTEM Co.,Ltd. |
|
| TA01 | Transfer of patent application right | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |