CN111553129A - SVG and echarts graph fusion method based on canvas - Google Patents
SVG and echarts graph fusion method based on canvas Download PDFInfo
- Publication number
- CN111553129A CN111553129A CN202010316157.0A CN202010316157A CN111553129A CN 111553129 A CN111553129 A CN 111553129A CN 202010316157 A CN202010316157 A CN 202010316157A CN 111553129 A CN111553129 A CN 111553129A
- Authority
- CN
- China
- Prior art keywords
- power distribution
- distribution room
- wiring diagram
- graph
- tree structure
- 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
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F40/00—Handling natural language data
- G06F40/10—Text processing
- G06F40/12—Use of codes for handling textual entities
- G06F40/14—Tree-structured documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/953—Querying, e.g. by the use of web search engines
- G06F16/9538—Presentation of query results
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T5/00—Image enhancement or restoration
- G06T5/50—Image enhancement or restoration by the use of more than one image, e.g. averaging, subtraction
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T2207/00—Indexing scheme for image analysis or image enhancement
- G06T2207/20—Special algorithmic details
- G06T2207/20212—Image combination
- G06T2207/20221—Image fusion; Image merging
Abstract
The embodiment of the invention discloses a canvas-based svg and echarts graph fusion method, which comprises the following steps: step 100, analyzing the primary wiring diagram of the power distribution room, recalculating the graphic layout, and reconstructing the primary wiring diagram of the power distribution room into a virtual DOM tree structure in a memory; 200, automatically generating and binding an event clicked by a mouse by a web end according to a virtual DOM tree structure, carrying out data query on the clicked event in a server nodejs through set condition parameters, and rendering and initializing the server nodejs by using a native echarts component according to queried power distribution room data to generate a visual curve graph; step 300, after acquiring the visual curve graph, the web end redraws the visual curve graph in a canvas label in a virtual DOM tree structure, and redraws an interface, so that the fusion of a primary and secondary wiring diagram of a power distribution room and the display of a web dynamic function are realized; the invention aims to solve the problem that primary equipment and monitoring data of a power distribution room cannot be displayed in a Web system in a fusion mode.
Description
Technical Field
The embodiment of the invention relates to the technical field, in particular to a svg and echarts graph fusion method based on canvas.
Background
The power distribution room is the most important power supply node in the distribution network, and as the power distribution rooms are numerous and are distributed very dispersedly and widely in regions, the workload of artificial daily operation and maintenance is reduced by applying an intelligent means, and the construction of the intelligent power distribution room for improving the operation and maintenance level and the power supply reliability is great tendency.
In order to realize the state monitoring of equipment in a power distribution room, the real-time monitoring of the environment and the safety control of behaviors, the aim that the development of the distribution network technology is smoothly realized towards the full-element and multi-field comprehensive promotion of the digital, lean and intelligent transformation and driving of the equipment control of the power distribution room is achieved, and a visual display method which accords with the dynamic association characteristics of the electrical primary and secondary information is needed.
The existing visual display scheme:
(1) based on a C/S (client/server) framework, the method has the defects of overstaffed content, complex structure, great engineering maintenance difficulty and easy non-uniformity of local and remote interface styles;
(2) based on the B/S framework, the primary wiring diagram is separated from the equipment data display interface, namely the svg diagram displays the primary wiring diagram, the echarts component displays the data interface, the two are distinct and have weak logical association, and the visualized information of the intelligent power distribution room dynamically associated with the primary information and the secondary information cannot be vividly displayed.
Disclosure of Invention
Therefore, the embodiment of the invention provides a method for displaying monitoring data of a power distribution room in a Web system.
In order to achieve the above object, an embodiment of the present invention provides the following:
a svg and echarts graph fusion method based on canvas comprises the following steps:
step 100, analyzing the primary wiring diagram of the power distribution room, recalculating the graphic layout on the basis of the analysis result, reconstructing the primary wiring diagram of the power distribution room into a virtual DOM tree structure in a memory, and returning to the web end for displaying;
200, automatically generating and binding an event clicked by a mouse by a web end according to a virtual DOM tree structure, carrying out data query on the clicked event in a server nodejs through set condition parameters, rendering and initializing the server nodejs by using a native echarts component according to queried power distribution room data to generate a visual curve graph, and returning the graph to the web end;
step 300, after the web side obtains the visual curve graph, redrawing the visual curve graph in a canvas label in the virtual DOM tree structure, and redrawing an interface, so that the fusion of a primary and secondary wiring diagram of the power distribution room and the display of a web dynamic function are realized.
In a preferred embodiment of the present invention, the power distribution room primary wiring diagram is drawn by a configuration tool according to the g language format standard.
As a preferred aspect of the present invention, in step 100, the specific step of analyzing the primary wiring diagram of the power distribution room is: the method comprises the steps of obtaining a power distribution room primary wiring diagram drawn by a configuration tool, analyzing primitive data and graphic data according to rules, storing the primitive data and the graphic data in a symbol label, obtaining a remote signaling ID and a remote signaling ID from a database, rewriting the primitive data in the symbol label to an actual primitive according to a reference relation, deleting a symbol node, and eliminating reference.
As a preferred scheme of the invention, the specific steps of reconstructing the virtual DOM tree structure are as follows: according to the type and the number of the telemetering IDs and the telecommands IDs of the power distribution room primary wiring diagram, the graph layout is recalculated by combining a database, a canvas tag area is added to the power distribution room primary wiring diagram after the graph layout, the width and the height are set, the power distribution room primary wiring diagram is reconstructed into a virtual DOM tree structure in a memory according to the set width and height, and the virtual DOM tree structure is returned to the web end for displaying.
As a preferred scheme of the invention, the specific steps of generating the visual curve graph according to the virtual DOM tree structure are as follows:
acquiring related primitives of the remote sensing ID and the remote signaling ID according to the virtual DOM tree structure, and automatically generating and binding a mouse click event corresponding to the related primitives by the web end;
clicking a corresponding associated primitive on the Web end, and inquiring monitoring data through a remote signaling ID and a remote sensing ID indicated by the associated primitive and a condition parameter;
the server nodejs receives the data query of the click event with the condition parameters;
and the server nodejss uses the native echarts component to render rules and initialize option according to the inquired power distribution room data to generate a visual curve graph and returns the graph to the browser.
The embodiment of the invention has the following advantages:
the invention realizes the monitoring of the power distribution room, realizes better fusion display of primary equipment and monitoring data of the power distribution room in a Web system based on the canvas svg and echarts graph fusion method, supports the transformation of a power distribution room comprehensive management system to digitalization and intellectualization, and can fully display the power distribution room visual information dynamically associated with primary and secondary information.
Drawings
In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the embodiments or the prior art will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments of the present invention, and for those skilled in the art, other drawings can be obtained according to these drawings without inventive exercise.
FIG. 1 is a schematic view of the overall structure of an embodiment of the present invention;
fig. 2 is a schematic flow chart of analysis and reconstruction of a primary wiring diagram of a power distribution room in the embodiment of the present invention;
FIG. 3 is a schematic flow chart of visualization curve generation according to an embodiment of the present invention;
fig. 4 is a schematic flow chart of a secondary system fusion in the embodiment of the invention.
Detailed Description
In order to make the objects, features and advantages of the present invention more obvious and understandable, the technical solutions in the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present invention, and it is obvious that the embodiments described below are only a part of the embodiments of the present invention, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present invention.
The technical scheme of the invention is further explained by the specific implementation mode in combination with the attached drawings.
In the description of the present invention, it is to be understood that the terms "upper", "lower", "top", "bottom", "inner", "outer", and the like, indicate orientations or positional relationships based on those shown in the drawings, and are used only for convenience in describing the present invention and for simplicity in description, and do not indicate or imply that the referenced devices or elements must have a particular orientation, be constructed and operated in a particular orientation, and thus, are not to be construed as limiting the present invention.
The Canvas refers to a Canvas background in the Java language, and when processing an image file, a series of operations are performed by using the Canvas, that is, the Canvas is understood as an image background. Svg is scalable vector graphics, Echarts is a pure Javascript diagram library, can smoothly run on PC and mobile equipment, and is compatible with most current browsers and the like.
As shown in fig. 1 to 4, the present invention provides a canvas-based svg and echarts graph fusion method, which includes the following steps:
step 100, analyzing the primary wiring diagram of the power distribution room, recalculating the graphic layout on the basis of the analysis result, reconstructing the primary wiring diagram of the power distribution room into a virtual DOM tree structure in a memory, and returning to the web end for displaying;
200, automatically generating and binding an event clicked by a mouse by a web end according to a virtual DOM tree structure, carrying out data query on the clicked event in a server nodejs through set condition parameters, rendering and initializing the server nodejs by using a native echarts component according to queried power distribution room data to generate a visual curve graph, and returning the graph to the web end;
step 300, after the web side obtains the visual curve graph, redrawing the visual curve graph in a canvas label in the virtual DOM tree structure, and redrawing an interface, so that the fusion of a primary and secondary wiring diagram of the power distribution room and the display of a web dynamic function are realized.
And the power distribution room primary wiring diagram is drawn by a configuration tool according to the g language format standard.
In step 100, the specific steps of analyzing the primary wiring diagram of the power distribution room are as follows: the method comprises the steps of obtaining a power distribution room primary wiring diagram drawn by a configuration tool, analyzing primitive data and graphic data according to rules, storing the primitive data and the graphic data in a symbol label, obtaining a remote signaling ID and a remote signaling ID from a database, rewriting the primitive data in the symbol label to an actual primitive according to a reference relation, deleting a symbol node, and eliminating reference.
The specific steps of reconstructing the virtual DOM tree structure are as follows: according to the type and the number of the telemetering IDs and the telecommands IDs of the power distribution room primary wiring diagram, the graph layout is recalculated by combining a database, a canvas tag area is added to the power distribution room primary wiring diagram after the graph layout, the width and the height are set, the power distribution room primary wiring diagram is reconstructed into a virtual DOM tree structure in a memory according to the set width and height, and the virtual DOM tree structure is returned to the web end for displaying.
The specific steps of generating the visual curve graph according to the virtual DOM tree structure are as follows:
acquiring related primitives of the remote sensing ID and the remote signaling ID according to the virtual DOM tree structure, and automatically generating and binding a mouse click event corresponding to the related primitives by the web end;
clicking a corresponding associated primitive on the Web end, and inquiring monitoring data through a remote signaling ID and a remote sensing ID indicated by the associated primitive and a condition parameter;
the server nodejs receives the data query of the click event with the condition parameters;
and the server nodejss uses the native echarts component to render rules and initialize option according to the inquired power distribution room data to generate a visual curve graph and returns the graph to the browser.
The invention realizes the monitoring of the power distribution room, realizes better fusion display of primary equipment and monitoring data of the power distribution room in a Web system based on the canvas svg and echarts graph fusion method, supports the transformation of a power distribution room comprehensive management system to digitalization and intellectualization, and can fully display the power distribution room visual information dynamically associated with primary and secondary information.
It is noted that, herein, relational terms such as first and second, and the like may be used solely to distinguish one entity or action from another entity or action without necessarily requiring or implying any actual such relationship or order between such entities or actions. Also, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus 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 apparatus.
Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that changes, modifications, substitutions and alterations can be made in these embodiments without departing from the principles and spirit of the invention, the scope of which is defined in the appended claims and their equivalents.
The above-mentioned embodiments are only used for illustrating the technical solutions of the present invention, and not for limiting the same; although the present invention has been described in detail with reference to the foregoing embodiments, it will be understood by those of ordinary skill in the art that: the technical solutions described in the foregoing embodiments may still be modified, or some technical features may be equivalently replaced; and such modifications or substitutions do not depart from the spirit and scope of the corresponding technical solutions of the embodiments of the present invention.
Claims (5)
1. A svg and echarts graph fusion method based on canvas is characterized by comprising the following steps:
step 100, analyzing the primary wiring diagram of the power distribution room, recalculating the graphic layout on the basis of the analysis result, reconstructing the primary wiring diagram of the power distribution room into a virtual DOM tree structure in a memory, and returning to the web end for displaying;
200, automatically generating and binding an event clicked by a mouse by a web end according to a virtual DOM tree structure, carrying out data query on the clicked event in a server nodejs through set condition parameters, rendering and initializing the server nodejs by using a native echarts component according to queried power distribution room data to generate a visual curve graph, and returning the graph to the web end;
step 300, after the web side obtains the visual curve graph, redrawing the visual curve graph in a canvas label in the virtual DOM tree structure, and redrawing an interface, so that the fusion of a primary and secondary wiring diagram of the power distribution room and the display of a web dynamic function are realized.
2. The canvas-based svg and echarts graphic fusion method as claimed in claim 1, wherein the distribution room primary wiring diagram is drawn by a configuration tool according to g language format standard.
3. The canvas-based svg and echarts graph fusion method as claimed in claim 1, wherein in step 100, the specific steps of analyzing the primary wiring diagram of the power distribution room are as follows: the method comprises the steps of obtaining a power distribution room primary wiring diagram drawn by a configuration tool, analyzing primitive data and graphic data according to rules, storing the primitive data and the graphic data in a symbol label, obtaining a remote signaling ID and a remote signaling ID from a database, rewriting the primitive data in the symbol label to an actual primitive according to a reference relation, deleting a symbol node, and eliminating reference.
4. The canvas-based svg and echarts graph fusion method according to claim 3, wherein the specific steps of reconstructing into the virtual DOM tree structure are as follows: according to the type and the number of the telemetering IDs and the telecommands IDs of the power distribution room primary wiring diagram, the graph layout is recalculated by combining a database, a canvas tag area is added to the power distribution room primary wiring diagram after the graph layout, the width and the height are set, the power distribution room primary wiring diagram is reconstructed into a virtual DOM tree structure in a memory according to the set width and height, and the virtual DOM tree structure is returned to the web end for displaying.
5. The canvas-based svg and echarts graph fusion method as claimed in claim 1, wherein the specific steps of generating the visual curve graph according to the virtual DOM tree structure are as follows:
acquiring related primitives of the remote sensing ID and the remote signaling ID according to the virtual DOM tree structure, and automatically generating and binding a mouse click event corresponding to the related primitives by the web end;
clicking a corresponding associated primitive on the Web end, and inquiring monitoring data through a remote signaling ID and a remote sensing ID indicated by the associated primitive and a condition parameter;
the server nodejs receives the data query of the click event with the condition parameters;
and the server nodejss uses the native echarts component to render rules and initialize option according to the inquired power distribution room data to generate a visual curve graph and returns the graph to the browser.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010316157.0A CN111553129B (en) | 2020-04-21 | 2020-04-21 | SVG and echarts graph fusion method based on canvas |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010316157.0A CN111553129B (en) | 2020-04-21 | 2020-04-21 | SVG and echarts graph fusion method based on canvas |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN111553129A true CN111553129A (en) | 2020-08-18 |
| CN111553129B CN111553129B (en) | 2023-02-24 |
Family
ID=72004304
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010316157.0A Active CN111553129B (en) | 2020-04-21 | 2020-04-21 | SVG and echarts graph fusion method based on canvas |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111553129B (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112817651A (en) * | 2021-01-14 | 2021-05-18 | 许继集团有限公司 | Canvas-based graph generation method and Canvas-based graph generation system |
| CN114648603A (en) * | 2022-05-19 | 2022-06-21 | 杭州比智科技有限公司 | Method and system for realizing fly-line dynamic effect based on canvas and echarts |
| CN116244776A (en) * | 2023-02-03 | 2023-06-09 | 杭州比智科技有限公司 | Method and system for displaying workshop equipment state in real time based on SVG and echorts |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20050204253A1 (en) * | 2004-03-11 | 2005-09-15 | Nortel Networks Limited | Algebraic low-density parity check code design for variable block sizes and code rates |
| US7225131B1 (en) * | 2002-06-14 | 2007-05-29 | At&T Corp. | System and method for accessing and annotating electronic medical records using multi-modal interface |
| US20100017223A1 (en) * | 2008-03-03 | 2010-01-21 | Amy Johnson | Electronic donor medical records management system |
| CN106649452A (en) * | 2016-09-22 | 2017-05-10 | 广东电网有限责任公司电力调度控制中心 | Method of generating template graphics |
| CN109766502A (en) * | 2018-12-13 | 2019-05-17 | 平安普惠企业管理有限公司 | Page improved method, device, computer equipment and storage medium |
| CN110071824A (en) * | 2019-03-28 | 2019-07-30 | 杭州电子科技大学 | A kind of distribution network topological building and method for visualizing automatically |
| CN110232460A (en) * | 2018-03-05 | 2019-09-13 | 中国电力科学研究院有限公司 | A kind of wind-powered electricity generation water power synthetic operation method for visualizing based on wind power prediction |
| CN110413681A (en) * | 2019-08-01 | 2019-11-05 | 上海胜泰信息技术有限公司 | A Web end group is in the visualized data processing method of big data technology |
-
2020
- 2020-04-21 CN CN202010316157.0A patent/CN111553129B/en active Active
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US7225131B1 (en) * | 2002-06-14 | 2007-05-29 | At&T Corp. | System and method for accessing and annotating electronic medical records using multi-modal interface |
| US20050204253A1 (en) * | 2004-03-11 | 2005-09-15 | Nortel Networks Limited | Algebraic low-density parity check code design for variable block sizes and code rates |
| US20100017223A1 (en) * | 2008-03-03 | 2010-01-21 | Amy Johnson | Electronic donor medical records management system |
| CN106649452A (en) * | 2016-09-22 | 2017-05-10 | 广东电网有限责任公司电力调度控制中心 | Method of generating template graphics |
| CN110232460A (en) * | 2018-03-05 | 2019-09-13 | 中国电力科学研究院有限公司 | A kind of wind-powered electricity generation water power synthetic operation method for visualizing based on wind power prediction |
| CN109766502A (en) * | 2018-12-13 | 2019-05-17 | 平安普惠企业管理有限公司 | Page improved method, device, computer equipment and storage medium |
| CN110071824A (en) * | 2019-03-28 | 2019-07-30 | 杭州电子科技大学 | A kind of distribution network topological building and method for visualizing automatically |
| CN110413681A (en) * | 2019-08-01 | 2019-11-05 | 上海胜泰信息技术有限公司 | A Web end group is in the visualized data processing method of big data technology |
Non-Patent Citations (2)
| Title |
|---|
| R.MEENAKSHI 等: "Visualization with Charting Library Based on SVG for Amrita Dynamic Dashboard" * |
| 章锐 等: "基于ECharts的电网Web可视化研究及应用" * |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112817651A (en) * | 2021-01-14 | 2021-05-18 | 许继集团有限公司 | Canvas-based graph generation method and Canvas-based graph generation system |
| CN114648603A (en) * | 2022-05-19 | 2022-06-21 | 杭州比智科技有限公司 | Method and system for realizing fly-line dynamic effect based on canvas and echarts |
| CN114648603B (en) * | 2022-05-19 | 2022-08-05 | 杭州比智科技有限公司 | Method and system for realizing fly-line dynamic effect based on canvas and echarts |
| CN116244776A (en) * | 2023-02-03 | 2023-06-09 | 杭州比智科技有限公司 | Method and system for displaying workshop equipment state in real time based on SVG and echorts |
Also Published As
| Publication number | Publication date |
|---|---|
| CN111553129B (en) | 2023-02-24 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111553129B (en) | SVG and echarts graph fusion method based on canvas | |
| CN104216691B (en) | A kind of method and device for creating application | |
| US8321806B2 (en) | Visualization of process control data | |
| CN109254771B (en) | Monitoring page generation method and device | |
| CN103631578B (en) | Method for exhibiting data in a kind of distribution automation system | |
| US11644810B2 (en) | Hybrid rendering HMI terminal device | |
| CN112100550A (en) | Page construction method and device | |
| CN111950066A (en) | Digital twin data driving system based on BIM and GIS technology | |
| CN110532047B (en) | Power grid graph standardization system for regulating and controlling cloud platform | |
| CN108256127A (en) | A kind of weather-map system of customizable pattern | |
| CN104166549A (en) | Meteorological element contour surface analysis platform and construction method | |
| CN112817651A (en) | Canvas-based graph generation method and Canvas-based graph generation system | |
| CN115080886A (en) | Three-dimensional medical model GLB file analysis and display method based on mobile terminal | |
| CN110119272A (en) | A kind of human-machine interface configuration design method and device | |
| CN114647409A (en) | Large-screen visualization application creation platform, method, computing device and storage medium | |
| CN116245052A (en) | Drawing migration method, device, equipment and storage medium | |
| CN107203503B (en) | Method for monitoring form in real time applied to SVG interface | |
| CN113220381A (en) | Click data display method and device | |
| CN115981625A (en) | Extensible power system wiring diagram interface modeling method and system | |
| CN113838157A (en) | Track traffic map drawing system, method, electronic device and storage medium | |
| CN110362614B (en) | Information visualization system based on data driving | |
| CN107092663B (en) | Water level early warning map drawing system and method based on GIS | |
| CN111507861A (en) | Power utilization data processing and visualization method and system | |
| CN112269960B (en) | Webpage updating method, system, equipment and storage medium based on associated report | |
| CN114419197B (en) | SVG-based function definition system, method and computer equipment |
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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |