CN109656530A - 一种图表组件化方法 - Google Patents
一种图表组件化方法 Download PDFInfo
- Publication number
- CN109656530A CN109656530A CN201811433740.9A CN201811433740A CN109656530A CN 109656530 A CN109656530 A CN 109656530A CN 201811433740 A CN201811433740 A CN 201811433740A CN 109656530 A CN109656530 A CN 109656530A
- Authority
- CN
- China
- Prior art keywords
- chart
- class
- diagrammatic representation
- application
- responsible
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
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
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明涉及WEB前端图表处理技术领域，特别是一种图表组件化方法。本发明的方法是将图表的代码划分为图表核心类、图表实现类、图表应用类和图表展示类；其中，图表核心类负责图表通用事件，图表实现类负责图表配置项，图表应用类负责获取图表数据，图表展示类负责控制加载顺序；建立图表核心类后，将图表核心类派生出图表实现类；建立图表应用类，在图表展示类引用多个图表应用类；图表展示类根据用户阅读的优先级，依次调用各个图表应用类获取图表数据。本发明将图表组件分为4层，每层各司其职，既能轻易派生出各式各样的图表，还拥有友好的用户体验；可以用于WEB前端图表处理。
Description
技术领域
本发明涉及WEB前端图表处理技术领域，特别是一种图表组件化方法。
技术背景
在WEB前端的图表领域里，有各式各样的组件化方案，一般有以下几种情况：
第一种情况，组件将图表事件、图表配置项、获取图表数据等动作囊括于一身，不便于维护、不便于扩展。
第二种情况，每个组件并发获取图表数据，没有分先后，导致页面出现卡顿或者崩溃。
发明内容
本发明解决的技术问题在于提供一种图表组件化方法，既能轻易派生出各式各样的图表，还拥有友好的用户体验。
本发明解决上述技术问题的技术方案是：
所述的方法是将图表的代码划分为图表核心类、图表实现类、图表应用类和图表展示类；其中，图表核心类负责图表通用事件，图表实现类负责图表配置项，图表应用类负责获取图表数据，图表展示类负责控制加载顺序；建立图表核心类后，将图表核心类派生出图表实现类；建立图表应用类，在图表展示类引用多个图表应用类；图表展示类根据用户阅读的优先级，依次调用各个图表应用类获取图表数据。
所述的建立图表核心类后，定义四个图表通用事件：图表配置项的生成方法、根据图表配置项绘制图表的方法、浏览器窗口尺寸改变时调整图表尺寸的方法和图表数据改变时重绘图表的方法，其中，图表配置项的生成方法是抽象方法，没有任何动作，需要在图表实现类对图表配置项的生成方法进行实现。
所述的每个图表实现类根据各自的配置需要，分别实现图表配置项的生成方法。
所述的建立图表应用类后，定义一个获取图表数据的方法供图表展示类调用，图表应用类获取到图表数据之后，图表应用类将图表数据作为参数，调用图表实现类。
所述图表核心类，是指图表的公共类；
所述图表实现类，是指图表的实例，包括饼图、折线图、柱状图；
所述图表应用类，是指图表实例的应用，包括云服务器状态饼图、网站访问量折线图；
所述图表展示类，是指将图表组合起来的页面，包括首页。
本发明将图表组件分为4层，每层各司其职，既能轻易派生出各式各样的图表，还拥有友好的用户体验。
附图说明
下面结合附图对本发明进一步说明：
图1为本发明的方法流程图。
具体实施方式
见图1所示，本发明的基本流程如下：
1、将图表的代码进行划分：图表核心类负责图表通用事件、图表实现类负责图表配置项、图表应用类负责获取图表数据、图表展示类负责控制加载顺序；
2、建立图表核心类，并且定义4个图表通用事件：图表配置项的生成方法、根据图表配置项绘制图表的方法、浏览器窗口尺寸改变时调整图表尺寸的方法、图表数据改变时重绘图表的方法，其中，图表配置项的生成方法是抽象方法，没有任何动作，需要在图表实现类对图表配置项的生成方法进行实现；
3、将图表核心类派生出图表实现类，并且，每个图表实现类根据各自的配置需要，分别实现图表配置项的生成方法；
4、建立图表应用类，并且定义1个获取图表数据的方法供图表展示类调用，图表应用类获取到图表数据之后，图表应用类将图表数据作为参数，调用图表实现类；
5、在图表展示类引用多个图表应用类，图表展示类根据用户阅读的优先级，依次调用各个图表应用类的获取图表数据的方法；
Claims (5)
1.一种图表组件化方法，其特征在于：所述的方法是将图表的代码划分为图表核心类、图表实现类、图表应用类和图表展示类；其中，图表核心类负责图表通用事件，图表实现类负责图表配置项，图表应用类负责获取图表数据，图表展示类负责控制加载顺序；建立图表核心类后，将图表核心类派生出图表实现类；建立图表应用类，在图表展示类引用多个图表应用类；图表展示类根据用户阅读的优先级，依次调用各个图表应用类获取图表数据。
2.根据权利要求1所述的方法，其特征在于：所述的建立图表核心类后，定义四个图表通用事件：图表配置项的生成方法、根据图表配置项绘制图表的方法、浏览器窗口尺寸改变时调整图表尺寸的方法和图表数据改变时重绘图表的方法，其中，图表配置项的生成方法是抽象方法，没有任何动作，需要在图表实现类对图表配置项的生成方法进行实现。
3.根据权利要求1所述的方法，其特征在于：所述的每个图表实现类根据各自的配置需要，分别实现图表配置项的生成方法。
4.根据权利要求1所述的方法，其特征在于：所述的建立图表应用类后，定义一个获取图表数据的方法供图表展示类调用，图表应用类获取到图表数据之后，图表应用类将图表数据作为参数，调用图表实现类。
5.根据权利要求1至4任一项所述的方法，其特征在于：
所述图表核心类，是指图表的公共类；
所述图表实现类，是指图表的实例，包括饼图、折线图、柱状图；
所述图表应用类，是指图表实例的应用，包括云服务器状态饼图、网站访问量折线图；
所述图表展示类，是指将图表组合起来的页面，包括首页。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811433740.9A CN109656530A (zh) | 2018-11-28 | 2018-11-28 | 一种图表组件化方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811433740.9A CN109656530A (zh) | 2018-11-28 | 2018-11-28 | 一种图表组件化方法 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109656530A true CN109656530A (zh) | 2019-04-19 |
Family
ID=66111722
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811433740.9A Pending CN109656530A (zh) | 2018-11-28 | 2018-11-28 | 一种图表组件化方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109656530A (zh) |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103761288A (zh) * | 2014-01-14 | 2014-04-30 | 国家电网公司 | 可视化图表自定义生成系统及方法 |
| US20150040041A1 (en) * | 2013-07-30 | 2015-02-05 | Business Objects Software Ltd. | Descriptive framework for data visualization |
| CN105589909A (zh) * | 2014-12-31 | 2016-05-18 | 中国银联股份有限公司 | 数据可视化实现系统及方法 |
| CN107562509A (zh) * | 2017-10-10 | 2018-01-09 | 郑州云海信息技术有限公司 | 一种组件显示方法及装置 |
| CN108446381A (zh) * | 2018-03-19 | 2018-08-24 | 武汉华大国家数字化学习工程技术有限公司 | 一种基于Web的数据可视化系统与方法 |
| CN108492346A (zh) * | 2018-03-19 | 2018-09-04 | 苏州思必驰信息科技有限公司 | 实现图表组件的方法及装置 |
-
2018
- 2018-11-28 CN CN201811433740.9A patent/CN109656530A/zh active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150040041A1 (en) * | 2013-07-30 | 2015-02-05 | Business Objects Software Ltd. | Descriptive framework for data visualization |
| CN103761288A (zh) * | 2014-01-14 | 2014-04-30 | 国家电网公司 | 可视化图表自定义生成系统及方法 |
| CN105589909A (zh) * | 2014-12-31 | 2016-05-18 | 中国银联股份有限公司 | 数据可视化实现系统及方法 |
| CN107562509A (zh) * | 2017-10-10 | 2018-01-09 | 郑州云海信息技术有限公司 | 一种组件显示方法及装置 |
| CN108446381A (zh) * | 2018-03-19 | 2018-08-24 | 武汉华大国家数字化学习工程技术有限公司 | 一种基于Web的数据可视化系统与方法 |
| CN108492346A (zh) * | 2018-03-19 | 2018-09-04 | 苏州思必驰信息科技有限公司 | 实现图表组件的方法及装置 |
Non-Patent Citations (4)
| Title |
|---|
| CHOSENWU: "Vue系列--在vue项目中使用echarts", 《CSDN,HTTPS://BLOG.CSDN.NET/MR_WUCH/ARTICLE/DETAILS/70225364》 * |
| WEIXIN_30681121: "vue echarts大小自适应", 《博客园，HTTPS://WWW.CNBLOGS.COM/XIANHUIWANG/P/8865277.HTML》 * |
| 刘翔宇: "基于Vue的数据可视化系统的设计与实现", 《中国优秀硕士学位论文全文数据库 信息科技辑》 * |
| 翟敏1201: "vue采坑记之echarts动态数据刷新", 《CSDN,HTTPS://BLOG.CSDN.NET/CHAITONG2204/ARTICLE/DETAILS/81976112》 * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| DE202016001513U1 (de) | Vorrichtung und Benutzerschnittstelle zur Verarbeitung einer Intensität von Berührungskontakten | |
| CN105205117A (zh) | 一种数据表迁移方法和装置 | |
| DE102017121697A1 (de) | Steuern von Eingabe und Ausgabe auf mehreren Seiten einer Computervorrichtung | |
| DE112019003150T5 (de) | Elektronisches Gerät mit einem eine asymmetrische Serviceschleife für einen flexiblen Bildschirm definierenden Scharnier sowie entsprechende Systeme und Verfahren | |
| DE202015005999U1 (de) | Benutzerschnittstelle zum Einschränken von Meldungen und Alarmen | |
| DE202015006142U1 (de) | Elektronische Touch-Kommunikation | |
| DE202013012233U1 (de) | Vorrichtung und grafische Benutzerschnittstelle zum Anzeigen zusätzlicher Informationen in Antwort auf einen Benutzerkontakt | |
| DE202014004544U1 (de) | Vorrichtung und graphische Benutzerschnittstelle zum Bereitstellen von Navigations- und Suchfunktionalitäten | |
| CN105843480A (zh) | 桌面图标调整方法及装置 | |
| DE202015003891U1 (de) | Vorgefertigte Antworten in Nachrichten | |
| DE112011102650T5 (de) | Eingabe in gesperrtes Computergerät | |
| DE102006054075A1 (de) | Verfahren zur Steuerung einer Touchscreen-Benutzeroberfläche und Vorrichtung dafür | |
| DE212006000076U1 (de) | Vorrichtung, Computerprogrammprodukt und Benutzerschnittstelle zum Scrollen durch Listen als Reaktion auf die Bewegung eines Kontakts über eine Liste von Indexsymbolen | |
| DE112013002412T5 (de) | Vorrichtung, Verfahren und grafische Benutzeroberfläche zum Bereitstellen von Rückmeldung für das Wechseln von Aktivierungszuständen eines Benutzerschnittstellenobjekts | |
| CN102364460B (zh) | 基于移动终端的页面自动放大方法和系统 | |
| CN106293427B (zh) | 用户界面调整方法及电子装置 | |
| CN107247540A (zh) | 应用图标的调整方法及装置 | |
| EP2994806A1 (de) | Gerät, system mit solchen geräten, verfahren zum realisieren des systems und computerprogrammprodukt zum realisieren des verfahrens | |
| DE112013002384T5 (de) | Informationenverarbeitungsvorrichtung, Verfahren zum Steuern der Informationenverarbeitungsvorrichtung und Speichermedium | |
| CN106469000A (zh) | 一种屏幕内容放大方法及终端设备 | |
| US20170123604A1 (en) | Enhanced group discovery | |
| DE102020105074A1 (de) | Verfahren und Systeme zur Applikations-Steuerung bei einem klappbaren elektronischen Gerät | |
| CN105930052A (zh) | 一种截图方法及装置 | |
| CN103870254A (zh) | 一种动态表单的实现方法、客户端及服务器 | |
| CN104410768A (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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190419 |