CN112416304B - 一种将echarts扩展为html标准组件的方法 - Google Patents

一种将echarts扩展为html标准组件的方法 Download PDF

Info

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
Application number
CN202011317859.7A
Other languages
English (en)
Other versions
CN112416304A (zh
Inventor
刘鹏飞
王毅
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Xian TPRI Power Station Information Technology Co Ltd
Original Assignee
Xian TPRI Power Station Information Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Xian TPRI Power Station Information Technology Co Ltd filed Critical Xian TPRI Power Station Information Technology Co Ltd
Priority to CN202011317859.7A priority Critical patent/CN112416304B/zh
Publication of CN112416304A publication Critical patent/CN112416304A/zh
Application granted granted Critical
Publication of CN112416304B publication Critical patent/CN112416304B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

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

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • Stored Programmes (AREA)

Abstract

一种将echarts扩展为html标准组件的方法，包括以下步骤：将echarts中组件分为三类，对于每个组件，通过Web Component标准建立相应的html组件以及映射关系，在html组件内部实现该组件的相应配置方法以及默认配置；通过编写一颗html的组件树，使用消息总线来接收组件树内部组件的配置项，并组中通过这些配置项生成echarts图表；通过本发明，直接去创建echarts图表，降低了echarts图表的开发难度，不需要相关的JavaScript知识，不再需要根据美工设计的图表风格一一去转化为繁琐的JavaScript代码，可以将自己的设计精准的表现出来，职责分工更加明确，提高开发效率。

Description

一种将echarts扩展为html标准组件的方法
技术领域
本发明属于计算机web开发技术领域，具体涉及一种将echarts扩展为html标准组件的方法。
背景技术
大数据时代，数据分析已经成为企业生产经营必不可少的环节。图表则是展现数据分析结果的最重要的方式。echarts是一款开源的图表组件，以其美观和强大的功能，深受开发者喜爱。使用echarts需要有一定的JavaScript知识，这就需要开发人员根据美工的设计去编写复杂的echarts配置项来生成图表。
随着Web Components标准的提出，web开发进入了新的纪元，很多原来需要通过编写复杂的JavaScript才能使用的功能，现在直接就可以像写html一样通过Web Component创建出来。通过Web Components标准，使web的开发更加便利，扩展性以及灵活性更加强大，代码结构更加清晰，不需要JavaScript知识也可以进行web的开发。如何通过WebComponents标准来使用echarts，目前还没有进行过尝试。
发明内容
为了克服上述现有技术的缺陷，本发明的目的在于提供了一种将echarts扩展为html标准组件的方法，将echarts的主要组件分类，并且将这些主要组件通过WebComponents的标准创建相应的html组件，通过编写一颗html的组件树来生成echarts图表。
为了实现上述目的，本发明采用的方案是：
一种将echarts扩展为html标准组件的方法，包括以下步骤：
(一)将echarts中组件分为三类：第一类是根组件1，即整个图表的根；第二类是集合组件2，包括yAxis、series；第三类是具体组件3，包括title、legend、line；根组件1既可以包含集合组件2，也可以包含具体组件3；集合组件2中可以包含多个具体组件3；对于每个组件，都会建立相应的html组件以及映射关系；在html组件内部实现该组件的相应配置方法以及默认配置；
(二)当浏览器解析和创建根组件1时，根组件1在其内部建立一个echarts实例、消息总线4以及配置装配器5；之后浏览器解析和创建根组件1内部的所有组件，即集合组件2和具体组件3，集合组件2或具体组件3发生添加、删除、变更时产生的配置信息通过消息总线4发送给根组件1，然后配置装配器5将所有收集来的配置信息组合并转换为标准的echarts配置项，最终通过echarts实例创建相应的图表。
所述的步骤(二)具体为：
步骤(1)：解析并创建根组件1，当根组件1创建后，在其内部创建echarts实例、消息总线4以及配置装配器5；echarts实例用来创建图表，消息总线4用来接收集合组件2和具体组件3所发送的配置项，配置装配器5用来将这些配置项合并、转化为标准的echarts配置项；
步骤(2)：每一个集合组件2、具体组件3有三种类型的属性：核心属性、option属性、echarts项属性；核心属性就是该组件的内部内容，通常为文字或者数据；option属性就是这个组件的整体属性，使用这个属性，能够传入整体的配置项，通常情况下是默认的配置不需要修改option属性；echarts项属性就是将echarts中该组件的属性单独映射出来，当需要单独修改配置项时，使用该属性来修改具体组件3；核心属性和echarts项属性的优先级比option属性的高，会覆盖option中与它相同的属性；
当解析并创建根组件1内部的所有集合组件2、具体组件3时，组件将上述的三种类型的属性生成配置项，如果没有在组件中配置属性，则组件使用自己默认的配置项；然后组件将自己的配置项通过消息总线4传给父组件，就这样逐级上传，直到根组件1获取到配置信息；
步骤(3)：根组件1接收到配置项后，首先将配置项缓存起来，并通过一个计数器来判断子组件是否全部加载完成；当全部加载完成后，根组件1使用配置装配器5，将所有的配置项组合并生成标准的echarts配置项，并且将配置项赋值给其内部建立的echarts实例，通过echarts的setOption方法生成图表；
步骤(4)：基于WebComponent标准，向组件提供attributeChangedCallback、connectedCallback、disconnectedCallback三个回调函数，用来通知组件属性发生变更、被添加、被移除的三种状态，当这三种状态被触发后，根组件1获得相应的信息，并且修改配置项，然后通过消息总线4将修改后的配置项发送给根组件1，根组件1使用配置装配器5修改echarts配置项，并且将配置项赋值给其内部建立的echarts实例，通过echarts的setOption方法更新图表。
本发明的效果：
(1)本发明将echarts的主要组件通过Web Components的标准实现，通过编写html组件树，就可以定义图表的具体呈现，不仅可以自动解析组件树中所有的组件的配置并生成图表，而且可以动态的修改组件的属性以及增加和删除组件。
(2)本发明降低了echarts图表的开发难度；不需要相关的JavaScript知识，可以像写html页面一样，仅仅通过html组件即可创建图表；对于开发人员来说，不再需要根据美工设计的图表风格一一去转化为繁琐的JavaScript代码；而对于美工来说，直接去创建echarts图表，可以将自己的设计精准的表现出来；职责分工更加明确，提高开发效率。
附图说明
图1是html组件树的具体形式。
图2是图表的创建过程。
图3是设置组件属性的具体方式。
图4是组件生成的配置项内容。
具体实施方式
下面结合附图对本发明做详细叙述。
一种将echarts扩展为html标准组件的方法，它的核心是将echarts的主要组件分类，并且将这些主要组件通过Web Components的标准创建相应的html组件，通过编写一颗html的组件树来创建图表，具体步骤为：
(一)将echarts中组件分为三类：第一类是根组件1，即整个图表的根；第二类是集合组件2，包括yAxis、series；第三类是具体组件3，包括title、legend、line；根组件1既可以包含集合组件2，也可以包含具体组件3；集合组件2中可以包含多个具体组件3；对于每个组件，都会建立相应的html组件以及映射关系；在html组件内部都会实现该组件的相应配置方法以及默认配置；
(二)当浏览器解析和创建根组件1时，根组件1在其内部建立一个echarts实例、消息总线4以及配置装配器5；之后浏览器解析和创建根组件1内部的所有组件，包括集合组件2和具体组件3。参照图2，集合组件2或具体组件3发生添加、删除、变更时产生的配置信息会通过消息总线4发送给根组件1，然后配置装配器5将所有收集来的配置信息组合并转换为标准的echarts配置项，最终通过echarts实例创建相应的图表。
所述的步骤(二)具体为：
步骤(1)：解析并创建根组件1，当根组件1创建后，在其内部创建echarts实例、消息总线4以及配置装配器5；echarts实例用来创建图表，消息总线4用来接收集合组件2和具体组件3所发送的配置项，配置装配器5用来将这些配置项合并、转化为标准的echarts配置项。
步骤(2)：参见图2，每一个组件(集合组件2、具体组件3)都有三种类型的属性：核心属性、option属性、echarts项属性；核心属性就是该组件的内部内容，通常为文字或者数据；option属性就是这个组件的整体属性，使用这个属性，可以传入整体的配置项，通常情况下默认的配置既可以满足，不需要修改option属性；echarts项属性就是将echarts中该组件的属性单独映射出来，当需要单独修改配置项时，使用该属性来修改具体组件3；核心属性和echarts项属性的优先级比option属性的高，会覆盖option中与它相同的属性。
当解析并创建根组件1内部的所有的组件时，组件将上述的三种类型的属性生成配置项，如图4所示。如果没有在组件中配置属性，则组件使用自己默认的配置项。然后组件将自己的配置项通过消息总线4传给父组件。就这样逐级上传，直到根组件1获取到配置信息。
步骤(3)：根组件1接收到配置项后，首先将配置项缓存起来，并通过一个计数器来判断子组件是否全部加载完成。当全部加载完成后，根组件1使用配置装配器5，将所有的配置项组合并生成标准的echarts配置项，并且将配置项赋值给其内部建立的echarts实例，通过echarts的setOption方法生成图表。
步骤(4)：基于Web Components标准，向组件提供attributeChangedCallback、connectedCallback、disconnectedCallback三个回调函数，用来通知组件属性发生变更、被添加、被移除的三种状态；当这三种状态被触发后，根组件获得相应的信息，并且及时修改配置项；然后通过消息总线4将修改后的配置项发送给根组件1，根组件1使用配置装配器5修改echarts配置项，并且将配置项赋值给其内部建立的echarts实例，通过echarts的setOption方法更新图表。

Claims (1)

1.一种将echarts扩展为html标准组件的方法，其特征在于，包括以下步骤：
(一)将echarts中组件分为三类：第一类是根组件(1)，即整个图表的根；第二类是集合组件(2)，包括yAxis、series；第三类是具体组件(3)，包括title、legend、line；根组件(1)既可以包含集合组件(2)，也可以包含具体组件(3)；集合组件(2)中可以包含多个具体组件(3)；对于每个组件，都会建立相应的html组件以及映射关系；在html组件内部都会实现该组件的相应配置方法以及默认配置；
(二)当浏览器解析和创建根组件(1)时，根组件(1)在其内部建立一个echarts实例、消息总线(4)以及配置装配器(5)，之后浏览器解析和创建根组件(1)内部的所有组件，即集合组件(2)和具体组件(3)，集合组件(2)或具体组件(3)发生添加、删除、变更时产生的配置信息通过消息总线(4)发送给根组件(1)，然后配置装配器(5)将所有收集来的配置信息组合并转换为标准的echarts配置项，最终通过echarts实例创建相应的图表；
所述的步骤(二)具体为：
步骤(1)：解析并创建根组件(1)，当根组件(1)创建后，在其内部创建echarts实例、消息总线(4)以及配置装配器(5)，echarts实例用来创建图表，消息总线(4)用来接收集合组件(2)和具体组件(3)所发送的配置项，配置装配器(5)用来将这些配置项合并、转化为标准的echarts配置项；
步骤(2)：每一个集合组件(2)、具体组件(3)都有三种类型的属性：核心属性、option属性、echarts项属性；核心属性就是该组件的内部内容，通常为文字或者数据；option属性就是这个组件的整体属性，使用这个属性，能够传入整体的配置项，通常情况下是默认的配置不需要修改option属性；echarts项属性就是将echarts中该组件的属性单独映射出来，当需要单独修改配置项时，使用该属性来修改具体组件(3)；核心属性和echarts项属性的优先级比option属性的高，会覆盖option中与它相同的属性；
当解析并创建根组件(1)内部的所有的集合组件(2)、具体组件(3)时，组件将上述的三种类型的属性生成配置项，如果没有在组件中配置属性，则组件会使用自己默认的配置项，然后组件将自己的配置项通过消息总线(4)传给父组件，就这样逐级上传，直到根组件(1)获取到配置信息；
步骤(3)：根组件(1)接收到配置项后，首先将配置项缓存起来，并通过一个计数器来判断子组件是否全部加载完成；当全部加载完成后，根组件(1)使用配置装配器(5)，将所有的配置项组合并生成标准的echarts配置项，并且将配置项赋值给其内部建立的echarts实例，通过echarts的setOption方法生成图表；
步骤(4)：基于Web Components标准，向组件提供attributeChangedCallback、connectedCallback、disconnectedCallback三个回调函数，用来通知组件属性发生变更、被添加、被移除的三种状态，当这三种状态被触发后，集合组件(2)或具体组件(3)获得相应的信息，并且及时修改配置项；然后通过消息总线(4)将修改后的配置项发送给根组件(1)，根组件(1)使用配置装配器(5)修改echarts配置项，将配置项赋值给其内部建立的echarts实例，通过echarts的setOption方法更新图表。
CN202011317859.7A 2020-11-23 2020-11-23 一种将echarts扩展为html标准组件的方法 Active CN112416304B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011317859.7A CN112416304B (zh) 2020-11-23 2020-11-23 一种将echarts扩展为html标准组件的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011317859.7A CN112416304B (zh) 2020-11-23 2020-11-23 一种将echarts扩展为html标准组件的方法

Publications (2)

Publication Number Publication Date
CN112416304A CN112416304A (zh) 2021-02-26
CN112416304B true CN112416304B (zh) 2022-11-25

Family

ID=74777862

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011317859.7A Active CN112416304B (zh) 2020-11-23 2020-11-23 一种将echarts扩展为html标准组件的方法

Country Status (1)

Country Link
CN (1) CN112416304B (zh)

Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106780656A (zh) * 2016-12-30 2017-05-31 中国民航信息网络股份有限公司 图表输出方法及装置
CN106843844A (zh) * 2016-12-26 2017-06-13 南威软件股份有限公司 一种自定义视图的展示装置
CN107704239A (zh) * 2017-10-09 2018-02-16 武汉斗鱼网络科技有限公司 配置生成方法、装置及电子设备
CN108228169A (zh) * 2017-12-08 2018-06-29 平安科技（深圳）有限公司 基于eCharts工具的图表制作方法、装置、设备及介质
CN109358851A (zh) * 2018-07-19 2019-02-19 平安科技（深圳）有限公司 图表组件的创建方法、装置及计算机可读存储介质
CN111124372A (zh) * 2019-12-26 2020-05-08 福建福诺移动通信技术有限公司 一种简化开发图表前后端设计方法及***
CN111522565A (zh) * 2020-04-21 2020-08-11 北京邮电大学 基于组件化的实时更新数据可视化大屏方法及***
CN111562912A (zh) * 2020-04-08 2020-08-21 北京邮电大学 面向数据可视化的前端组件化开发方法及***

Family Cites Families (1)

* Cited by examiner, † Cited by third party
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

Patent Citations (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106843844A (zh) * 2016-12-26 2017-06-13 南威软件股份有限公司 一种自定义视图的展示装置
CN106780656A (zh) * 2016-12-30 2017-05-31 中国民航信息网络股份有限公司 图表输出方法及装置
CN107704239A (zh) * 2017-10-09 2018-02-16 武汉斗鱼网络科技有限公司 配置生成方法、装置及电子设备
CN108228169A (zh) * 2017-12-08 2018-06-29 平安科技（深圳）有限公司 基于eCharts工具的图表制作方法、装置、设备及介质
CN109358851A (zh) * 2018-07-19 2019-02-19 平安科技（深圳）有限公司 图表组件的创建方法、装置及计算机可读存储介质
CN111124372A (zh) * 2019-12-26 2020-05-08 福建福诺移动通信技术有限公司 一种简化开发图表前后端设计方法及***
CN111562912A (zh) * 2020-04-08 2020-08-21 北京邮电大学 面向数据可视化的前端组件化开发方法及***
CN111522565A (zh) * 2020-04-21 2020-08-11 北京邮电大学 基于组件化的实时更新数据可视化大屏方法及***

Non-Patent Citations (4)

* Cited by examiner, † Cited by third party
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 (zh) 2021-02-26

Similar Documents

Publication Publication Date Title
CN111767254B (zh) 基于版式数据流文件技术的多文件阅读装置及其方法
US8700682B2 (en) Systems, methods and articles for template based generation of markup documents to access back office systems
US7908594B2 (en) External programmatic interface for IOS CLI compliant routers
WO2018133452A1 (zh) 一种网页渲染方法及相关设备
CN103389895B (zh) 一种前端页面的生成方法及***
US7779398B2 (en) Methods and systems for extracting information from computer code
US20080002218A1 (en) Method and system for an xml-driven document conversion service
CN110333856A (zh) 服务化可编排的在线模板生成***及方法
JP2004510254A (ja) ネットワークサーバ
JPH11272667A (ja) 構造化文書作成方法、構造化文書作成装置及び構造化文書作成用プログラムを格納した記憶媒体
CN111562919A (zh) 基于psd文件生成前端网页代码的方法、***及存储介质
CN109710250B (zh) 一种用于构建用户界面的可视化引擎***及方法
CN114115883B (zh) 一种使用中台业务能力快速构建前端应用的方法
CN110333863A (zh) 一种生成、显示小程序页面的方法及装置
JP2009515244A (ja) データ管理及びデータ・レンダリング用ユーザ・インターフェースを動的に作成する方法、システム、及びコンピュータ・プログラム（データ管理及びデータ・レンダリング用ユーザ・インターフェースの動的作成）
CN113094042A (zh) 一种基于浏览器的电力自动化***自定义组件的实现与解析方法
CN112269576A (zh) 一种组件展示方法、装置、服务器和存储介质
Jiang et al. Towards reengineering web sites to web-services providers
CN102455903B (zh) 一种用户应用界面的生成方法
US6832365B1 (en) System and method for interacting with computer programming languages at semantic level
CN112162751A (zh) 一种接口文档自动生成方法及***
CN111078217A (zh) 脑图生成方法、装置和计算机可读存储介质
CN112416304B (zh) 一种将echarts扩展为html标准组件的方法
KR102490941B1 (ko) 엑셀 도구를 이용한 온라인 보고서 작성 시스템
CN101794240B (zh) 一种聚合数据内容的方法和***

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