CN109697254A - 一种前端页面图表组件化的方法 - Google Patents

一种前端页面图表组件化的方法 Download PDF

Info

Publication number
CN109697254A
CN109697254A CN201811474872.6A CN201811474872A CN109697254A CN 109697254 A CN109697254 A CN 109697254A CN 201811474872 A CN201811474872 A CN 201811474872A CN 109697254 A CN109697254 A CN 109697254A
Authority
CN
China
Prior art keywords
chart
component
sub
data source
initialization
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.)
Withdrawn
Application number
CN201811474872.6A
Other languages
English (en)
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.)
G Cloud Technology Co Ltd
Original Assignee
G Cloud 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 G Cloud Technology Co Ltd filed Critical G Cloud Technology Co Ltd
Priority to CN201811474872.6A priority Critical patent/CN109697254A/zh
Publication of CN109697254A publication Critical patent/CN109697254A/zh
Withdrawn legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F40/00—Handling natural language data
    • G06F40/10—Text processing
    • G06F40/166—Editing, e.g. inserting or deleting
    • G06F40/177—Editing, e.g. inserting or deleting of tables; using ruled lines
    • G06F40/18—Editing, e.g. inserting or deleting of tables; using ruled lines of spreadsheets

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Health & Medical Sciences (AREA)
  • Artificial Intelligence (AREA)
  • Audiology, Speech & Language Pathology (AREA)
  • Computational Linguistics (AREA)
  • General Health & Medical Sciences (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本发明涉及前端页面图表制作技术领域，尤其是一种前端页面图表组件化的方法。本发明方法将定义图表数据源的装配、图表初始化、图表监听以及图表的重绘和销毁等通用事件组件化为子组件；在父组件中获取后台返回的数据，将自定义的图表配置参数以及数据封装成一个对象作为传入子组件的数据源；把父组件已经封装好的数据源对象以父子组件通信的具体形式传递给子组件进一步处理；子组件接收传入的参数并加入默认配置，最后再次对其进行装配成一个新的对象；子组件将已装配好的对象传给初始化图表事件处理，同时在初始化图表事件中加入图表的重绘和销毁事件；然后向父组件返回结果。本发明使得在制作图表时能调用组件简化操作，使各图表更易于维护，能更有效的降低前端开发的工作量。

Description

一种前端页面图表组件化的方法
技术领域
本发明涉及前端页面图表制作技术领域，尤其是一种前端页面图表组件化的方法。
背景技术
在大数据时代的背景下，越来越多庞大的数据需要在页面上展示；通过图表的形式展示数据是如今最常用的形式。页面图表制作是前端页面开发的一项十分重要的技术，它解决了用户在一个页面同时展示大量数据的需求；因此前端开发人员需要考虑在不同的大量数据下，使用不同形式的图表展示不同的数据。
在一个页面中，往往有许多相同样式或不同样式的图表，在具体实现时，各个图表往往需要配置一些大同小异的配置项；就会存在大量相同代码且变得十分紊乱，降低了代码的可读性，加大了后期维护的难度。
发明内容
本发明解决的技术问题在于提供一种前端页面图表组件化的方法，解决在页面中有大量图表时出现大量配置项导致页面存在有大量相同代码且十分紊乱、可读性差等问题。
本发明解决上述技术问题的技术方案是：
所述方法包括：
步骤1：将定义图表数据源的装配、图表初始化、图表监听以及图表的重绘和销毁等通用事件组件化为子组件；
步骤2：在父组件中获取后台返回的数据，将自定义的图表配置参数以及数据封装成一个对象作为传入子组件的数据源；
步骤3：把父组件已经封装好的数据源对象以父子组件通信的具体形式传递给子组件进一步处理；
步骤4：子组件接收传入的参数并加入默认配置，最后再次对其进行装配成一个新的对象；
步骤5：子组件将已装配好的对象传给初始化图表事件处理，同时在初始化图表事件中加入图表的重绘和销毁事件以保证在触发监听事件重绘或销毁图表时，图表的内容能及时清空再重绘或销毁，然后向父组件返回结果。
所述图表配置是指图表的展现形式、颜色、图表和字体大小、图表位置、提示框。
所述的图表监听是监听浏览器窗口大小变更并重绘图表，使图表能依据当前窗口大小来改变尺寸、用watch监听父组件中数据源的变化并重绘图表。
所述的步骤4是指对传入子组件的数据源进行处理并得到所需的数据形式，最终传入到其所对应的初始化图表事件中去进行图表初始化操作。
所述的方法自定义一套统一的图表配置，然后只需传入各个图表不相同的配置，在装配时通过遍历来识别是否定义了与默认配置不同的配置项；若不同，则替换默认配置项；若相同或没有配置，则使用默认配置项。
本发明将图表常用配置项和通用方法与自定义内容分离为父子组件关系，使前端开发人员在制作图表时能调用组件简化操作且达到自定义图表内容的目的，并且在组件化图表后使得各个图表更易于维护，能更有效的降低前端开发的工作量。实现了对各页面众多图表的统一管理。
附图说明
下面结合附图对本发明进一步说明：
图1为本发明方法的流程图。
具体实施方式
本发明有多种实现形式，为了更清楚的说明本发明的用途和优点，下面的例子将基于Vue框架和Echarts图表库来进一步说明其中一种实现方法，流程图如图1所示，具体实施过程如下：
1、将定义图表的数据源的装配、图表初始化、图表监听以及图表的重绘和销毁等通用事件组件化为子组件。其中，图表监听指的是将监听浏览器窗口大小变更并重绘图表，使图表能依据当前窗口大小来改变尺寸、用watch监听父组件中数据源的变化并重绘图表(子组件监听option中的装有图表数据的series，当父组件的数据改变时，子组件接受的到数据也发生改变，将改变后的数据源中的series赋值给装配好的option对象中的series，改变后再触发初始化图表事件从而达到在父组件的接口数据改变时刷新图表，同时这里也具有一定的拓展性，可以控制图表定时刷新等等)；
2、在父组件中获取后台返回的数据，按具体需求定义所需图表的配置参数并将其按照echarts的配置项形式封装成一个option对象作为传入子组件的数据源；
3、把父组件已经封装好的数据源对象以父子组件通信的具体形式(父组件通过props向下传递数据给子组件)传递给子组件进一步处理；
4、子组件接收传入的参数进行装配(将父组件传入的数据源加入子组件设置好的默认配置)，最后再次对其按照需要的格式名称进行封装成一个option对象；
5、子组件将已装配好的option对象传给初始化图表事件(指的是图表库的初始化方法)，同时在初始化图表事件中加入图表的重绘和销毁事件以保证在触发监听事件重绘或销毁图表时，图表的内容能及时清空再重绘或销毁，然后向父组件返回结果。

Claims (7)

1.一种前端页面图表组件化的方法，其特征在于，所述方法包括：
步骤1：将定义图表数据源的装配、图表初始化、图表监听以及图表的重绘和销毁通用事件组件化为子组件；
步骤2：在父组件中获取后台返回的数据，将自定义的图表配置参数以及数据封装成一个对象作为传入子组件的数据源；
步骤3：把父组件已经封装好的数据源对象以父子组件通信的形式传递给子组件进一步处理；
步骤4：子组件接收传入的参数并加入默认配置，再次对其进行装配成一个新的对象；
步骤5：子组件将已装配好的对象传给初始化图表事件处理，同时在初始化图表事件中加入图表的重绘和销毁事件以保证在触发监听事件重绘或销毁图表时，图表的内容能及时清空再重绘或销毁，然后向父组件返回结果。
2.根据权利要求1所述的方法，其特征在于：所述图表配置是指图表的展现形式、颜色、图表和字体大小、图表位置、提示框。
3.根据权利要求1所述的方法，其特征在于：所述的图表监听是监听浏览器窗口大小变更并重绘图表，使图表能依据当前窗口大小来改变尺寸、用watch监听父组件中数据源的变化并重绘图表。
4.根据权利要求2所述的方法，其特征在于：所述的图表监听是监听浏览器窗口大小变更并重绘图表，使图表能依据当前窗口大小来改变尺寸、用watch监听父组件中数据源的变化并重绘图表。
5.根据权利要求1至4任一项所述的方法，其特征在于：所述的步骤4是指对传入子组件的数据源进行处理并得到所需的数据形式，最终传入到其所对应的初始化图表事件中去进行图表初始化操作。
6.根据权利要求1至4任一项所述的方法，其特征在于：所述的方法自定义一套统一的图表配置，然后只需传入各个图表不相同的配置，在装配时通过遍历来识别是否定义了与默认配置不同的配置项；若不同，则替换默认配置项；若相同或没有配置，则使用默认配置项。
7.根据权利要求5所述的方法，其特征在于：所述的方法自定义一套统一的图表配置，然后只需传入各个图表不相同的配置，在装配时通过遍历来识别是否定义了与默认配置不同的配置项；若不同，则替换默认配置项；若相同或没有配置，则使用默认配置项。
CN201811474872.6A 2018-12-04 2018-12-04 一种前端页面图表组件化的方法 Withdrawn CN109697254A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201811474872.6A CN109697254A (zh) 2018-12-04 2018-12-04 一种前端页面图表组件化的方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201811474872.6A CN109697254A (zh) 2018-12-04 2018-12-04 一种前端页面图表组件化的方法

Publications (1)

Publication Number Publication Date
CN109697254A true CN109697254A (zh) 2019-04-30

Family

ID=66230342

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201811474872.6A Withdrawn CN109697254A (zh) 2018-12-04 2018-12-04 一种前端页面图表组件化的方法

Country Status (1)

Country Link
CN (1) CN109697254A (zh)

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111273984A (zh) * 2020-01-20 2020-06-12 深圳震有科技股份有限公司 一种数值控件的扩展方法、存储介质及终端设备
CN111274329A (zh) * 2020-01-10 2020-06-12 深圳震有科技股份有限公司 一种数据处理方法、智能终端及存储介质
CN111291283A (zh) * 2020-01-17 2020-06-16 深圳震有科技股份有限公司 基于vue的导航条显示方法、存储介质及终端设备
CN112433726A (zh) * 2020-12-04 2021-03-02 上海悦易网络信息技术有限公司 一种Echarts图表组件的封装方法及设备
CN114239841A (zh) * 2021-11-24 2022-03-25 浪潮集团有限公司 投影实时变化的可视化展示方法、系统及量子计算云平台
CN114840203A (zh) * 2022-07-04 2022-08-02 金现代信息产业股份有限公司 页面元素的动态创建方法及系统

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8392877B1 (en) * 2004-02-12 2013-03-05 Raju Chiluvuri System and method of application development using replaceable self-contained components (RSCCS)
CN105183466A (zh) * 2015-08-27 2015-12-23 国云科技股份有限公司 一种简化echarts调用的封装方法
CN105335159A (zh) * 2015-11-03 2016-02-17 浪潮软件集团有限公司 一种anychart图表展示方法
CN108492346A (zh) * 2018-03-19 2018-09-04 苏州思必驰信息科技有限公司 实现图表组件的方法及装置

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8392877B1 (en) * 2004-02-12 2013-03-05 Raju Chiluvuri System and method of application development using replaceable self-contained components (RSCCS)
CN105183466A (zh) * 2015-08-27 2015-12-23 国云科技股份有限公司 一种简化echarts调用的封装方法
CN105335159A (zh) * 2015-11-03 2016-02-17 浪潮软件集团有限公司 一种anychart图表展示方法
CN108492346A (zh) * 2018-03-19 2018-09-04 苏州思必驰信息科技有限公司 实现图表组件的方法及装置

Cited By (7)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111274329A (zh) * 2020-01-10 2020-06-12 深圳震有科技股份有限公司 一种数据处理方法、智能终端及存储介质
CN111291283A (zh) * 2020-01-17 2020-06-16 深圳震有科技股份有限公司 基于vue的导航条显示方法、存储介质及终端设备
CN111273984A (zh) * 2020-01-20 2020-06-12 深圳震有科技股份有限公司 一种数值控件的扩展方法、存储介质及终端设备
CN112433726A (zh) * 2020-12-04 2021-03-02 上海悦易网络信息技术有限公司 一种Echarts图表组件的封装方法及设备
CN114239841A (zh) * 2021-11-24 2022-03-25 浪潮集团有限公司 投影实时变化的可视化展示方法、系统及量子计算云平台
CN114840203A (zh) * 2022-07-04 2022-08-02 金现代信息产业股份有限公司 页面元素的动态创建方法及系统
CN114840203B (zh) * 2022-07-04 2022-09-16 金现代信息产业股份有限公司 页面元素的动态创建方法及系统

Similar Documents

Publication Publication Date Title
CN109697254A (zh) 一种前端页面图表组件化的方法
US8229576B2 (en) Field device management apparatus and field device management system
US20180097873A1 (en) Method for providing data for a mobile device from a field device, computer program and arrangement for executing same
US20150106753A1 (en) Human-machine interface (hmi) system having elements styles with centrally managed and distributed graphic styles
US9547291B2 (en) Human machine interface (HMI) system having a symbol wizard creator
CN107766043B (zh) 一种基于大屏数据可视化的实现方法及系统
CN109032587B (zh) 一种数据流管理框架、方法、终端设备及存储介质
US9612588B2 (en) Human machine interface (HMI) system having elements with alarm border animation
CN103312814B (zh) 云管理平台和虚拟机终端用户间vnc隐通道的建立方法
US10152051B2 (en) Human-machine interface (HMI) system having elements with aggregated alarms
US9599982B2 (en) Human-machine interface (HMI) system having process trend visualization (trend pen)
CN109255046A (zh) 矢量图元的动态实现方法
CN103150198A (zh) 一种组态软件的显示方法
CN114080593A (zh) Scada网页hmi系统及hmi客户端
CN108139949B (zh) 计算机程序产品和计算机实现方法
CN103034503B (zh) 一种脚本执行方法、系统及浏览器
CN111079045A (zh) 一种定制化页面的全屏显示方法及储存介质、系统
CN113515275A (zh) 一种所见即所得的云端工业组态软件系统及其开发方法
EP2853968B1 (en) An alarm management system and a method thereof
US20200073371A1 (en) Universal data access across devices
CN104063219A (zh) 一种web系统的表格开发方法及系统
CN104486149A (zh) 一种用于地面测试的有限状态机方法
WO2006114880A1 (ja) 情報連携ウィンドウシステム
CN101976190B (zh) 基于DirectUI的界面生成系统及方法
WO2014097233A2 (en) Control system and method of an automatic machine

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
WW01 Invention patent application withdrawn after publication
WW01 Invention patent application withdrawn after publication

Application publication date: 20190430