一种Echarts图表组件的封装方法及设备

技术领域

本申请涉及计算机领域，尤其涉及一种Echarts图表组件的封装方法及设备。

背景技术

开发一个H5或统计或汇总等类型页面，页面上需要以过多图进行展示时，因每种图在Echarts技术领域所涉及的数据参数也不同，因此需要一个一个的去配置图表相关属性，进行配置时比较费时费力；另外，在移动终端领域，如手机、ipad等智能终端进行横竖转换时，程序又不能很好的去动态的改变图表的大小来适应终端的改变，即页面上的图表无法根据屏幕的宽度进行动态改变图表的大小，需要重新绘制图表且还需要关心PC端浏览器的兼容和移动端的适配问题。

发明内容

本申请的一个目的是提供一种Echarts图表组件的封装方法及设备，解决现有技术中图表在不同分辨率或不同宽度的时候展示铺不满全屏的问题以及不同系统的移动终端或PC电脑上的兼容展示和自适应大小的问题。

根据本申请的一个方面，提供了一种Echarts图表组件的封装方法，该方法包括：

基于Echarts组件对入参数据的校验结果，构造函数以实例化Echarts对象；

为实例化后的对象对应的图表绑定Echarts事件，基于绑定的Echarts事件对所述图表进行渲染；

基于外部传入的Echarts的配置数据进行渲染后的图表展示。

进一步地，基于外部传入的Echarts的配置数据进行渲染后的图表展示，包括：

判断渲染后的图表是否需要更新，若是，则将新的数据更新到图表上，基于外部传入Echarts的配置数据进行更新后的图表展示；

若否，则直接基于外部传入的Echarts的配置数据进行渲染后的图表展示。

进一步地，基于Echarts组件对入参数据的校验结果，构造函数以实例化Echarts对象，包括：

基于Echarts组件对外部传入的入参数据与所述Echarts组件所支持的数据类型进行比对，以完成校验，若校验成功，则构造函数以实例化Echarts对象。

进一步地，所述外部传入的入参包括：所有实例的图表配置项、图表完成后的回调函数、图表的加载状态、点击图表触发的事件、自定义图表的样式、图表的显示像素、图表延迟更新的支持信息以及图表的内部样式定义。

进一步地，为实例化后的对象对应的图表绑定Echarts事件，包括：

将图表点击事件、组件销毁事件及图表重置事件中任一种或任几种组合的Echarts事件绑定至实例化后的对象对应的图表。

进一步地，基于绑定的Echarts事件对所述图表进行渲染，包括：

基于绑定的Echarts事件将Echarts实例底层进行图表的绘画，得到svg格式的图片；或，

基于绑定的Echarts事件在画布上进行绘制所配置的图形，并查询页面上的标识信息为容器的唯一标识信息的图表容器，将所述画布放入至所述图表容器中。

进一步地，判断渲染后的图表是否需要更新，包括：

判断渲染后的图表的组件属性是否需要更新，其中，所述组件属性包括画布尺寸或svg图片配置、图表的点击事件、图表配置项、图表的主题风格、控制图表的加载状态以及数据入参变更校验。

进一步地，将新的数据更新到图表上之后，包括：

渲染更新后的图表的dom元素，将渲染dom元素后的图表放至指定的图表容器上，并设置所述图表容器的最小高度。

根据本申请又一个方面，还提供了Echarts图表组件的封装的设备，所述设备包括：

一个或多个处理器；以及

存储有计算机可读指令的存储器，所述计算机可读指令在被执行时使所述处理器执行如前述所述方法的操作。

根据本申请再一个方面，还提供了一种计算机可读介质，其上存储有计算机可读指令，所述计算机可读指令可被处理器执行以实现如前述所述的方法。

与现有技术相比，本申请通过基于Echarts组件对入参数据校验的结果，构造函数以实例化Echarts对象；为实例化后的对象对应的图表绑定Echarts事件，基于绑定的Echarts事件对所述图表进行渲染；基于外部传入的Echarts的配置数据进行渲染后的图表展示。从而提高了前端研发人员的研发效率，缩短了企业投入的研发成本，降低了图表在跨平台兼容性的问题。同时，移动端在进行横竖转换时，图表可以进行自适应改变大小，达到页面的美观程度。

附图说明

通过阅读参照以下附图所作的对非限制性实施例所作的详细描述，本申请的其它特征、目的和优点将会变得更明显：

图1示出根据本申请的一个方面提供的一种Echarts图表组件的封装方法的流程示意图；

图2示出本申请一具体实施例中Echarts图表组件的封装流程示意图；

图3示出本申请一实施例中图表数据进行更新的示意图。

附图中相同或相似的附图标记代表相同或相似的部件。

具体实施方式

下面结合附图对本申请作进一步详细描述。

在本申请一个典型的配置中，终端、服务网络的设备和可信方均包括一个或多个处理器(例如中央处理器(Central Processing Unit，CPU))、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RandomAccess Memory，RAM)和/或非易失性内存等形式，如只读存储器(Read Only Memory，ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(Phase-Change RAM，PRAM)、静态随机存取存储器(Static Random Access Memory，SRAM)、动态随机存取存储器(Dynamic RandomAccess Memory，DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(Electrically Erasable Programmable Read-Only Memory，EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(Compact Disc Read-Only Memory，CD-ROM)、数字多功能光盘(Digital Versatile Disk，DVD)或其他光学存储、磁盒式磁带，磁带磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括非暂存电脑可读媒体(transitorymedia)，如调制的数据信号和载波。

图1示出根据本申请的一个方面提供的一种Echarts图表组件的封装方法的流程示意图，该方法包括：步骤S11～步骤S13，

在步骤S11中，基于Echarts组件对入参数据的校验结果，构造函数以实例化Echarts对象；在此，Echarts组件依赖npm包Echarts主模块，依赖了npm包的尺寸感应插件(size-sensor)用来监听文档对象模型(dom)结构发生改变后进行图表绘制，Echarts主模块包含各类图表、图例、主题设置等功能，比如柱状图、饼图、折线图、关系图等图形类别，其功能是对图表进行实例化，在本申请实施例中以Echarts主模块为底层实现图表原理。进行封装时，首先进行组件对入参的校验，当校验通过后构造函数去实例化Echarts对象。

在步骤S12中，为实例化后的对象对应的图表绑定Echarts事件，基于绑定的Echarts事件对所述图表进行渲染；在此，进行实例化后，为图表绑定Echarts事件，该Echarts事件用于对图表的属性进行操作的事件，当图表具有实质的数据属性后，进行渲染绘制该图表。

在步骤S13中，基于外部传入的Echarts的配置数据进行渲染后的图表展示。在此，渲染后的图表需要在页面上进行展示，根据外部传入的Echarts的配置数据，将该渲染后的图表在页面上进行展示，外部传入的Echarts的配置数据为数据样例，比如各种图表的属性信息、主题风格、自定义样式等。

本申请基于现有技术中存在的问题衍生出一个图表组件的封装，将图表配置等工作进行处理，研发人员只需要关注业务所需的图表样子即可。具体地，本申请通过基于Echarts开源技术为基础再进行的一层封装(即组件)，该组件会对入参数据进行校验，随后执行构造函数以实例化Echarts对象，为实例化后的图表对象绑定操作事件，基于图表准备工作完成后对所述图表进行渲染，基于外部传入的配置数据进行渲染后的图表展示。从而提高了前端开发人员在绘制图表时的研发效率，缩短了企业需要投入的研发成本，降低了研发人员需要在跨平台时考虑兼容性的处理问题。同时，移动终端在进行横竖屏转换时，图表可以进行自适应改变大小，以达到页面的美观程度。

在本申请一实施例中，在步骤S13中，判断渲染后的图表是否需要更新，若是，则将新的数据更新到图表上，基于外部传入Echarts的配置数据进行更新后的图表展示；若否，则直接基于外部传入的Echarts的配置数据进行渲染后的图表展示。在此，判断渲染的图表是否需要更新，即比对图表数据是否发生了变化，若是，则需要新的数据更新到图表上，从而重新渲染图表将更新后的图表进行展示，若否，则直接进行图表展示。图2示出本申请一具体实施例，此实例数据为组件必填项，从Echarts官网上获得已有的实例模板，将这些实例数据传入到本申请的组件中，首先判断入参是否正确，若是，则实例化Echarts对象，绑定相关图表Echarts事件，图表准备好后进行渲染，判断渲染后的图表是否需要若否则获取外部传入的Echarts配置数据进行图表展示，若是，则对图表进行重绘大小并兼容多端情况；其中，多端包括PC端、移动端等。在图表所有实例准备完成之前监听移动终端的渲染图表的容器大小是否发生改变，如果发生改变，需要根据渲染图表的容器的最新的宽高进行图表重新绘制，并考虑图表在多端上的展示效果。本图表组件适用于所有涉及到图表展示、数据汇报、数据对比等需要以图像形式展示的网页或ios或安卓系统的移动终端中都可以引入封装好的组件，将组件所需的数据格式(如开源公共基本配置格式)传入即可展示，通过引入封装的图表组件进行开发业务功能，可以有效的提高前端研发人员的研发效率，也缩短了企业投入的研发成本，也解决了前端研发人员在开发图表所处理的跨平台兼容性等问题。同时，也支持在移动终端进行横竖屏转换时，图表组件可以进行图表的自适应大小的改变。

在本申请一实施例中，在步骤S12中，基于Echarts组件对外部传入的入参数据与所述Echarts组件所支持的数据类型进行比对，以完成校验，若校验成功，则构造函数以实例化Echarts对象。在此，所述外部传入的入参包括：所有实例的图表配置项、图表完成后的回调函数、图表的加载状态、点击图表触发的事件、自定义图表的样式、图表的显示像素、图表延迟更新的支持信息以及图表的内部样式定义。进行组件对外抛出的入参校验以及组件设计的默认的入参值，以防止图表展示错误或异常导致程序崩溃，出现白屏问题。具体地，在组件内部对外部传入的数据类型进行校验，判断传入的类型和组件所支持的类型是否相同，相同则认为校验通过；外部传入的入参包括所有实例的图表配置项(option)、图表完成后的回调函数、图表的加载状态(是/否)、点击图表触发的事件(onEvents)、自定义图表的样式(可以外部重新自定义图表的样式，包括宽、高、颜色、位置等)、图表的显示像素、图表延迟更新的支持信息以及图表的内部样式定义，其中，图表的显示像素(Opts)可以配置图表的显示像素(如高分辨率屏和低分辨率屏)、宽、高，展示通过画布或图片的方式展现给用户等配置；图表延迟更新的支持信息为是否支持图表的延迟更新。从而可以按照组件规定的传入的数据类型灵活配置适合自己企业的内容。

在本申请一实施例中，在步骤S12中，将图表点击事件、组件销毁事件及图表重置事件中任一种或任几种组合的Echarts事件绑定至实例化后的对象对应的图表。在此，为图表绑定相应的属性，即绑定触发这些属性生成的Echarts事件，比如图表点击、组件销毁、图表重置等。

接上述实施例，在步骤S12中，基于绑定的Echarts事件将Echarts实例底层进行图表的绘画，得到svg格式的图片；或，基于绑定的Echarts事件在画布上进行绘制所配置的图形，并查询页面上的标识信息为容器的唯一标识信息的图表容器，将所述画布放入至所述图表容器中。在此，将Echarts实例底层进行图表的绘画，绘画出一个虚拟的图片，该图片是svg格式，或者在画布(canvas)上进行绘制所配置的图形，绘制完成后将该画布放到指定的图形容器上，呈现给用户；该指定的图形容器是divDom，可以自定义控制大小以及设定放置在页面的什么位置等，组件对外抛出的自定义图表样式参数以及图表的内部样式定义参数可以灵活的配置到该指定的divDom上，div为装载程序虚拟画出来的图表的容器，组件根据传入的图表配置参数去准备图表，图表准备完成后指定到某一个div上，该容器的格式为dom结构元素；例如，