CN112416304B - Method for expanding echarts into html standard component - Google Patents
Method for expanding echarts into html standard component Download PDFInfo
- Publication number
- CN112416304B CN112416304B CN202011317859.7A CN202011317859A CN112416304B CN 112416304 B CN112416304 B CN 112416304B CN 202011317859 A CN202011317859 A CN 202011317859A CN 112416304 B CN112416304 B CN 112416304B
- Authority
- CN
- China
- Prior art keywords
- component
- echarts
- configuration
- attribute
- components
- 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.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
- G06F8/24—Object-oriented
-
- 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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
Abstract
A method of extending echarts to html standard components, comprising the steps of: dividing the components in echarts into three classes, establishing a corresponding html Component and a mapping relation for each Component through a Web Component standard, and realizing a corresponding configuration method and default configuration of the Component in the html Component; writing a html component tree, receiving configuration items of internal components of the component tree by using a message bus, and generating an echarts chart in a group through the configuration items; according to the invention, the echarts chart is directly created, the development difficulty of the echarts chart is reduced, related JavaScript knowledge is not needed, the chart style designed by the designer is not needed to be converted into complicated JavaScript codes one by one, the design of the user can be accurately expressed, the responsibility division is more clear, and the development efficiency is improved.
Description
Technical Field
The invention belongs to the technical field of computer web development, and particularly relates to a method for expanding echarts into an html standard component.
Background
In the big data era, data analysis becomes an essential link for enterprise production and operation. Charts are the most important way to present the results of data analysis. echarts is a de-sourced diagram component, which is popular with developers due to its beauty and powerful functions. Using echarts requires a certain JavaScript knowledge, which requires developers to write complex echarts configuration items to generate diagrams according to the design of the art designer.
With the proposal of the Web Components standard, the Web development enters a new era, and a plurality of functions which originally need to be used by writing complex JavaScript can be directly created by the Web Components just like writing html. Through the Web Components standard, the development of the Web is more convenient, the expansibility and the flexibility are stronger, the code structure is clearer, and the Web can be developed without JavaScript knowledge. No attempt is currently made as to how to use echarts via the Web Components standard.
Disclosure of Invention
In order to overcome the defects of the prior art, the invention aims to provide a method for expanding echarts into html standard Components, which classifies main Components of echarts, creates corresponding html Components by the main Components through the standard of Web Components, and generates an echarts chart by writing a html component tree.
In order to achieve the purpose, the invention adopts the scheme that:
a method of extending echarts to html standard components, comprising the steps of:
the components in the echarts are divided into three categories: the first type is root component 1, the root of the entire graph; the second type is assembly component 2, including yAxis, series; the third category is specific component 3, including title, legend, line; the root component 1 may include both the aggregate component 2 and the specific component 3; a plurality of specific components 3 may be included in the aggregate component 2; for each component, establishing a corresponding html component and a mapping relation; realizing a corresponding configuration method and default configuration of the component in the html component;
(II) when the browser parses and creates the root component 1, the root component 1 establishes an echarts instance, a message bus 4 and a configuration assembler 5 in the root component 1; and then the browser analyzes and creates all the components inside the root component 1, namely the aggregate component 2 and the specific component 3, the configuration information generated when the aggregate component 2 or the specific component 3 is added, deleted and changed is sent to the root component 1 through the message bus 4, then the configuration assembler 5 combines and converts all the collected configuration information into standard echarts configuration items, and finally, a corresponding chart is created through an echarts instance.
The step (II) is specifically as follows:
step (1): analyzing and creating a root component 1, and creating an echarts instance, a message bus 4 and a configuration assembler 5 in the root component 1 after the root component 1 is created; the echarts instance is used for creating a chart, the message bus 4 is used for receiving configuration items sent by the collection component 2 and the specific component 3, and the configuration assembler 5 is used for combining and converting the configuration items into standard echarts configuration items;
step (2): each aggregate component 2, concrete component 3 has three types of attributes: core attribute, option attribute, echarts item attribute; the core attribute is the internal content of the component, usually text or data; the option attribute is the integral attribute of the component, and the integral configuration item can be transmitted by using the attribute, and the option attribute is usually the default configuration and does not need to be modified; the echarts item attribute is to map the attribute of the component in the echarts separately, and when the configuration item needs to be modified separately, the attribute is used for modifying the specific component 3; the priority of the core attribute and the echarts item attribute is higher than that of the option attribute, and the attribute which is the same as the core attribute and the echarts item attribute in the option can be covered;
when all the assembly components 2 and the specific components 3 in the root component 1 are analyzed and created, the components generate configuration items according to the three types of attributes, and if the attributes are not configured in the components, the components use self-default configuration items; then the component transmits the configuration item of the component to the parent component through the message bus 4, and the configuration item is uploaded step by step until the root component 1 obtains the configuration information;
and (3): after receiving the configuration items, the root component 1 firstly caches the configuration items and judges whether all the sub-components are loaded through a counter; after all the loads are completed, the root component 1 uses a configuration assembler 5 to combine all the configuration items and generate standard echarts configuration items, assigns the configuration items to echarts examples built in the root component, and generates a chart by a setOption method of the echarts;
and (4): based on WebComponent standard, three callback functions of attenbechangedCallback, connected Callback and disconnected Callback are provided for components to inform the components of three states of property change, addition and removal, when the three states are triggered, the root component 1 obtains corresponding information and modifies configuration items, then the modified configuration items are sent to the root component 1 through a message bus 4, the root component 1 modifies echarts configuration items by using a configuration assembler 5 and assigns the configuration items to echarts instances built in the root component 1, and the chart is updated by a setOption method of echarts.
The invention has the following effects:
(1) The invention realizes the main Components of echarts through the standard of Web Components, and can define the concrete presentation of the diagram by writing the html component tree, thereby not only automatically analyzing the configuration of all the Components in the component tree and generating the diagram, but also dynamically modifying the attribute of the Components and adding and deleting the Components.
(2) The invention reduces the development difficulty of echarts charts; related JavaScript knowledge is not needed, and a chart can be created just through an html component like writing an html page; for developers, the complex JavaScript codes are not required to be converted one by one according to the chart style designed by the art designer; for the art designer, the echarts chart is directly created, and the design of the engineer can be accurately expressed; the responsibility division is more definite, and the development efficiency is improved.
Drawings
FIG. 1 is a concrete form of an html component tree.
FIG. 2 is a diagram creation process.
FIG. 3 is a specific way to set component properties.
FIG. 4 is configuration item content generated by a component.
Detailed Description
The present invention will be described in detail with reference to the accompanying drawings.
A method for expanding echarts into html standard Components, which is characterized in that the echarts main Components are classified, the main Components are used for creating corresponding html Components through Web Components, a chart is created by writing a html component tree, and the method comprises the following specific steps:
the components in echarts are divided into three categories: the first type is the root component 1, the root of the entire graph; the second type is assembly component 2, including yAxis, series; the third category is specific component 3, including title, legend, line; the root component 1 may include both the aggregate component 2 and the specific component 3; a plurality of specific components 3 may be included in the aggregate component 2; for each component, establishing a corresponding html component and a mapping relation; the corresponding configuration method and default configuration of the component can be realized in the html component;
(II) when the browser parses and creates the root component 1, the root component 1 establishes an echarts instance, a message bus 4 and a configuration assembler 5 in the root component 1; the browser then parses and creates all components inside the root component 1, including the aggregate component 2 and the concrete component 3. Referring to fig. 2, configuration information generated when an aggregate component 2 or a specific component 3 is added, deleted, or changed is sent to a root component 1 through a message bus 4, then a configuration assembler 5 combines and converts all collected configuration information into standard echarts configuration items, and finally creates a corresponding chart through an echarts instance.
The step (II) is specifically as follows:
step (1): analyzing and creating a root component 1, and creating an echarts instance, a message bus 4 and a configuration assembler 5 in the root component 1 after the root component 1 is created; the echarts instance is used for creating a chart, the message bus 4 is used for receiving configuration items sent by the collection component 2 and the specific component 3, and the configuration assembler 5 is used for combining and converting the configuration items into standard echarts configuration items.
Step (2): referring to FIG. 2, each component (aggregate component 2, concrete component 3) has three types of properties: core attribute, option attribute, echarts item attribute; the core attribute is the internal content of the component, usually text or data; the option attribute is the overall attribute of the component, and the overall configuration item can be transmitted by using the attribute, and the default configuration can be met under the normal condition without modifying the option attribute; the echarts item attribute is to map the attribute of the component in the echarts separately, and when the configuration item needs to be modified separately, the attribute is used for modifying the specific component 3; the core attribute and the attributes of the echarts items have a higher priority than the option attribute, and will override the same attribute in the option.
When all components inside the root component 1 are parsed and created, the components generate configuration items with the above-described three types of attributes, as shown in fig. 4. If the properties are not configured in the component, the component uses its own default configuration items. The component then transmits its configuration entries to the parent component via the message bus 4. This is uploaded stage by stage until the root element 1 acquires the configuration information.
And (3): after receiving the configuration item, the root component 1 first caches the configuration item, and determines whether all the sub-components are loaded through a counter. After all the loads are completed, the root component 1 uses the configuration assembler 5 to combine all the configuration items and generate standard echarts configuration items, assigns the configuration items to echarts instances built in the root component, and generates a chart through a setOption method of the echarts.
And (4): based on the Web Components standard, three callback functions of attembutchangedcallback, connected Callback and disconnected Callback are provided for the Components to inform the Components of three states of attribute change, addition and removal; when the three states are triggered, the root component obtains corresponding information and modifies the configuration items in time; the modified configuration items are then sent to the root component 1 through the message bus 4, the root component 1 modifies the echarts configuration items using the configuration assembler 5 and assigns the configuration items to echarts instances built inside the root component, and the chart is updated by the setOption method of echarts.
Claims (1)
1. A method of extending echarts to html standard components, comprising the steps of:
the components in echarts are divided into three categories: the first type is the root component (1), the root of the entire graph; the second type is an assembly component (2) comprising yAxis, series; the third category is specific components (3) including title, legend, line; the root component (1) may include either the collective component (2) or the specific component (3); a plurality of specific components (3) can be contained in the assembly component (2); for each component, establishing a corresponding html component and a mapping relation; the corresponding configuration method and default configuration of the html component are realized inside the html component;
(II) when the browser analyzes and creates the root component (1), the root component (1) establishes an echarts instance, a message bus (4) and a configuration assembler (5) in the root component (1), then the browser analyzes and creates all components in the root component (1), namely an aggregation component (2) and a specific component (3), configuration information generated when the aggregation component (2) or the specific component (3) is added, deleted and changed is sent to the root component (1) through the message bus (4), then the configuration assembler (5) combines and converts all collected configuration information into standard echarts configuration items, and finally a corresponding chart is created through the echarts instance;
the step (II) is specifically as follows:
step (1): analyzing and creating a root component (1), creating an echarts instance, a message bus (4) and a configuration assembler (5) in the root component (1) after the root component (1) is created, wherein the echarts instance is used for creating a chart, the message bus (4) is used for receiving configuration items sent by the aggregation component (2) and the specific component (3), and the configuration assembler (5) is used for merging and converting the configuration items into standard echarts configuration items;
step (2): each aggregate component (2), concrete component (3) has three types of attributes: core attribute, option attribute, echarts item attribute; the core attribute is the internal content of the component, usually text or data; the option attribute is the integral attribute of the component, and the integral configuration item can be transmitted by using the attribute, and the option attribute is usually the default configuration and does not need to be modified; the echarts item attribute is to map the attribute of the component in the echarts separately, and when the configuration item needs to be modified separately, the attribute is used for modifying the specific component (3); the priority of the core attribute and the echarts item attribute is higher than that of the option attribute, and the attribute which is the same as the core attribute and the echarts item attribute in the option can be covered;
when all the set components (2) and the specific components (3) in the root component (1) are analyzed and created, the components generate configuration items according to the three types of attributes, if the attributes are not configured in the components, the components use default configuration items, then the components transmit the configuration items to the parent component through a message bus (4), and the configuration items are uploaded step by step until the root component (1) acquires configuration information;
and (3): after receiving the configuration items, the root component (1) firstly caches the configuration items and judges whether all sub-components are loaded through a counter; after all the loads are completed, the root component (1) uses a configuration assembler (5) to combine all the configuration items and generate standard echarts configuration items, assigns the configuration items to echarts instances built in the root component, and generates a chart through a setOption method of echarts;
and (4): based on Web Components standard, providing three callback functions of attembutechangedCallback, connected Callback and disconnected Callback for the component to inform the component of three states of attribute change, addition and removal, and when the three states are triggered, acquiring corresponding information of the assembly (2) or the specific assembly (3) and modifying the configuration item in time; and then sending the modified configuration items to the root component (1) through a message bus (4), modifying the echarts configuration items by the root component (1) by using a configuration assembler (5), assigning the configuration items to echarts examples built in the root component, and updating the chart by a setOption method of the echarts.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011317859.7A CN112416304B (en) | 2020-11-23 | 2020-11-23 | Method for expanding echarts into html standard component |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011317859.7A CN112416304B (en) | 2020-11-23 | 2020-11-23 | Method for expanding echarts into html standard component |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112416304A CN112416304A (en) | 2021-02-26 |
| CN112416304B true CN112416304B (en) | 2022-11-25 |
Family
ID=74777862
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011317859.7A Active CN112416304B (en) | 2020-11-23 | 2020-11-23 | Method for expanding echarts into html standard component |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112416304B (en) |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106780656A (en) * | 2016-12-30 | 2017-05-31 | 中国民航信息网络股份有限公司 | Chart output intent and device |
| CN106843844A (en) * | 2016-12-26 | 2017-06-13 | 南威软件股份有限公司 | A kind of exhibiting device of self-defined view |
| CN107704239A (en) * | 2017-10-09 | 2018-02-16 | 武汉斗鱼网络科技有限公司 | Configuration generating method, device and electronic equipment |
| CN108228169A (en) * | 2017-12-08 | 2018-06-29 | 平安科技（深圳）有限公司 | Chart production method, apparatus, equipment and medium based on eCharts tools |
| CN109358851A (en) * | 2018-07-19 | 2019-02-19 | 平安科技（深圳）有限公司 | Creation method, device and the computer readable storage medium of chart components |
| CN111124372A (en) * | 2019-12-26 | 2020-05-08 | 福建福诺移动通信技术有限公司 | Design method and system for front end and back end of simplified development chart |
| CN111522565A (en) * | 2020-04-21 | 2020-08-11 | 北京邮电大学 | Real-time data updating visualization large-screen method and system based on componentization |
| CN111562912A (en) * | 2020-04-08 | 2020-08-21 | 北京邮电大学 | Front-end component development method and system for data visualization |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9495879B2 (en) * | 2014-12-10 | 2016-11-15 | Airbus Operations Sas | Systems and methods for providing optimized taxiing path operation for an aircraft |
-
2020
- 2020-11-23 CN CN202011317859.7A patent/CN112416304B/en active Active
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106843844A (en) * | 2016-12-26 | 2017-06-13 | 南威软件股份有限公司 | A kind of exhibiting device of self-defined view |
| CN106780656A (en) * | 2016-12-30 | 2017-05-31 | 中国民航信息网络股份有限公司 | Chart output intent and device |
| CN107704239A (en) * | 2017-10-09 | 2018-02-16 | 武汉斗鱼网络科技有限公司 | Configuration generating method, device and electronic equipment |
| CN108228169A (en) * | 2017-12-08 | 2018-06-29 | 平安科技（深圳）有限公司 | Chart production method, apparatus, equipment and medium based on eCharts tools |
| CN109358851A (en) * | 2018-07-19 | 2019-02-19 | 平安科技（深圳）有限公司 | Creation method, device and the computer readable storage medium of chart components |
| CN111124372A (en) * | 2019-12-26 | 2020-05-08 | 福建福诺移动通信技术有限公司 | Design method and system for front end and back end of simplified development chart |
| CN111562912A (en) * | 2020-04-08 | 2020-08-21 | 北京邮电大学 | Front-end component development method and system for data visualization |
| CN111522565A (en) * | 2020-04-21 | 2020-08-11 | 北京邮电大学 | Real-time data updating visualization large-screen method and system based on componentization |
Non-Patent Citations (4)
| Title |
|---|
| ECharts: A declarative framework for rapid construction of web-based visualization;Li D et al.;《Visual Informatics》;20180531;全文 * |
| Web Components 入门实例教程;阮一峰;《阮一峰的网络日志 https://www.ruanyifeng.com/blog/2019/08/web_components.html》;20190806;全文 * |
| 基于ECharts的数据可视化分析组件设计实现;王子毅 等;《微型机与应用》;20140725;第35卷(第14期);全文 * |
| 组件化可视化图表 - Recharts;流形;《知乎 https://zhuanlan.zhihu.com/p/20641029》;20160421;全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112416304A (en) | 2021-02-26 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US8700682B2 (en) | Systems, methods and articles for template based generation of markup documents to access back office systems | |
| WO2018095261A1 (en) | Page rendering method, device, and data storage medium | |
| CN111767254B (en) | Multi-file reading device and method based on format data stream file technology | |
| US7779398B2 (en) | Methods and systems for extracting information from computer code | |
| US20040031015A1 (en) | System and method for manipulation of software | |
| US20080002218A1 (en) | Method and system for an xml-driven document conversion service | |
| JP2004510254A (en) | Network server | |
| JPH11272667A (en) | Method and device for preparing structured document and storage medium stored with program for preparing structured document | |
| CN110333856A (en) | Serviceization can layout online template generating system and method | |
| JP2009515244A (en) | Method, system, and computer program for dynamically creating a user interface for data management and data rendering (dynamic creation of a user interface for data management and data rendering) | |
| CN109710250B (en) | Visualization engine system and method for constructing user interface | |
| CN110333863A (en) | A kind of method and device for generating, showing the small routine page | |
| CN114115883B (en) | Method for quickly constructing front-end application by using middle station service capability | |
| CN113094042B (en) | Browser-based realization and analysis method for custom component of power automation system | |
| CN111562919A (en) | Method, system and storage medium for generating front-end webpage code based on PSD file | |
| CN112269576A (en) | Component display method and device, server and storage medium | |
| US6832365B1 (en) | System and method for interacting with computer programming languages at semantic level | |
| US20090327323A1 (en) | Integrating Data Resources by Generic Feed Augmentation | |
| CN111078217A (en) | Brain graph generation method, apparatus and computer-readable storage medium | |
| CN112416304B (en) | Method for expanding echarts into html standard component | |
| KR102490941B1 (en) | An online report creation system using Excel tool | |
| Sheng et al. | Techniques on developing context‐aware web services | |
| KR100850021B1 (en) | System and Method for Changing Web Document Style | |
| CN115065945B (en) | Short message link generation method and device, electronic equipment and storage medium | |
| CN115756448A (en) | Method, device, equipment and medium for acquiring vehicle cloud data acquisition system architecture |
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 |