CN112433726A - 一种Echarts图表组件的封装方法及设备 - Google Patents
一种Echarts图表组件的封装方法及设备 Download PDFInfo
- Publication number
- CN112433726A CN112433726A CN202011403436.7A CN202011403436A CN112433726A CN 112433726 A CN112433726 A CN 112433726A CN 202011403436 A CN202011403436 A CN 202011403436A CN 112433726 A CN112433726 A CN 112433726A
- Authority
- CN
- China
- Prior art keywords
- chart
- echarts
- data
- component
- charts
- 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
- 238000000034 method Methods 0.000 title claims abstract description 38
- 238000004806 packaging method and process Methods 0.000 title description 7
- 238000010586 diagram Methods 0.000 claims abstract description 17
- 238000009877 rendering Methods 0.000 claims abstract description 14
- 230000008859 change Effects 0.000 claims abstract description 11
- 230000006870 function Effects 0.000 claims description 20
- 230000015654 memory Effects 0.000 claims description 17
- 238000012795 verification Methods 0.000 claims description 8
- 230000003111 delayed effect Effects 0.000 claims description 6
- 238000005538 encapsulation Methods 0.000 claims description 4
- 230000001960 triggered effect Effects 0.000 claims description 4
- 238000013479 data entry Methods 0.000 claims description 3
- 238000012827 research and development Methods 0.000 abstract description 13
- 238000006243 chemical reaction Methods 0.000 abstract description 5
- 230000000875 corresponding effect Effects 0.000 description 9
- 238000004590 computer program Methods 0.000 description 4
- 230000005291 magnetic effect Effects 0.000 description 4
- 238000012986 modification Methods 0.000 description 3
- 230000004048 modification Effects 0.000 description 3
- 230000003044 adaptive effect Effects 0.000 description 2
- 238000012544 monitoring process Methods 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 238000002360 preparation method Methods 0.000 description 2
- 230000006978 adaptation Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 230000006378 damage Effects 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000012858 packaging process Methods 0.000 description 1
- 238000012545 processing Methods 0.000 description 1
- 238000011160 research Methods 0.000 description 1
- 230000003068 static effect Effects 0.000 description 1
- 230000001052 transient effect Effects 0.000 description 1
- 230000003936 working memory Effects 0.000 description 1
Images
Classifications
-
- 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
- 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/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Processing Or Creating Images (AREA)
Abstract
本申请的目的是提供一种Echarts图表组件的封装方法及设备，本申请通过基于Echarts组件对入参数据校验的结果，构造函数以实例化Echarts对象；为实例化后的对象对应的图表绑定Echarts事件，基于绑定的Echarts事件对所述图表进行渲染；基于外部传入的Echarts的配置数据进行渲染后的图表展示。从而提高了前端研发人员的研发效率，缩短了企业投入的研发成本，降低了图表在跨平台兼容性的问题。同时，移动端在进行横竖转换时，图表可以进行自适应改变大小，达到页面的美观程度。
Description
技术领域
本申请涉及计算机领域，尤其涉及一种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结构元素；例如，<div id＝“容器唯一id”/>，需要显示的图表准备好后，找到页面上id为“容器的唯一id”的div容器，将需要显示的图表放到该div容器上，需要显示的图表的数据结构为dom结构，该dom结构(document object model，文档对象模型)为一种用于HTML和XML文档的编程接口，给文档提供一种结构化的表示方法，可以改变文档的内容和呈现方式。
在本申请一实施例中，可以判断渲染后的图表的组件属性是否需要更新，其中，所述组件属性包括画布尺寸或svg图片配置、图表的点击事件、图表配置项、图表的主题风格、控制图表的加载状态以及数据入参变更校验。在此，当组件的属性发生改变，则需要对图表数据进行更新，并重新绘制图形，其中可以使用npm包的size-sensor来监听dom结构是否发生了变化，比如在手机横屏或竖屏旋转的时候，手机屏幕展示的长和宽都被改变了，对应的图表组件也会自动根据屏幕的长和宽自动适应适合的展示内容。组件属性包括opts(画布的宽、高，或svg图片等配置)、onEvents(图表的点击事件)、option(主要图表属性)、notMerge(默认不进行数据合并)、lazyUpate(使图表进行延迟更新)、showloading(控制图表的加载中状态)以及theme(图表的的主题风格，可进行自定义主题)。如图3所示，为趋势图的实例option，更新图表数据为将series数组里面的数据进行更新，xAxirs表示X轴的数据是周一到周天，series表示周一到周天的7天数据值，当接口数据没有返回时，数据为空，当接口数据返回以后，只需要在外部给数据赋值即可，封装的组件会自动比较本次和上一次的option属性是否一致，若不一样，则进行图表重新绘制。
在本申请一实施例中，将新的数据更新到图表上之后，渲染更新后的图表的dom元素，将渲染dom元素后的图表放至指定的图表容器上，并设置所述图表容器的最小高度。在此，渲染图表的dom元素，渲染到指定的div上，设置最小高度，支持外部样式的改变；其中，渲染dom元素是指对option和loading(加载状态)进行调整，当option对象内有data数据，封装的组件的loading状态就会取消，从而展示最终需要展示的内容。需要说明的是，请求接口包括请求前中后的时间差，请求前开始loading和传入的option参数准备工作，比如需要绘制什么类型的图、大小、图例和颜色等，此时data里没有接口的数据，等到接口请求完，给option里面的data赋值，组件里自动比较这一次和上一次的option是否一样，展示绘制的图表，再将loading状态取消掉，展示需要展示的内容。设置最小高度为最外层的div唯一容器的高度，容器的大小决定图表的大小，可以为默认宽度100％，高度250个像素，也可以是自定义传入的参数，如设置400个像素，也可以使用组件默认的高度。从而只需要引入封装的组件所支持的配置数据即可，该配置数据可到echart官网上直接获取，为想要的图表配置数据，随后，请求接口拿到实际接口数据进行图表属性options合并，然后传入组件便可以展示。
此外，本申请实施例还提供了一种计算机可读介质，其上存储有计算机可读指令，所述计算机可读指令可被处理器执行以实现前述一种Echarts图表组件的封装方法。
在本申请一实施例中，还提供了一种Echarts图表组件的封装的设备，所述设备包括：
一个或多个处理器；以及
存储有计算机可读指令的存储器，所述计算机可读指令在被执行时使所述处理器执行如前述所述方法的操作。
例如，计算机可读指令在被执行时使所述一个或多个处理器：
基于Echarts组件对入参数据校验的结果，构造函数以实例化Echarts对象；
为实例化后的对象对应的图表绑定Echarts事件，基于绑定的Echarts事件对所述图表进行渲染；
基于外部传入的Echarts的配置数据进行渲染后的图表展示。
显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。
需要注意的是，本申请可在软件和/或软件与硬件的组合体中被实施，例如，可采用专用集成电路(ASIC)、通用目的计算机或任何其他类似硬件设备来实现。在一个实施例中，本申请的软件程序可以通过处理器执行以实现上文所述步骤或功能。同样地，本申请的软件程序(包括相关的数据结构)可以被存储到计算机可读记录介质中，例如，RAM存储器，磁或光驱动器或软磁盘及类似设备。另外，本申请的一些步骤或功能可采用硬件来实现，例如，作为与处理器配合从而执行各个步骤或功能的电路。
另外，本申请的一部分可被应用为计算机程序产品，例如计算机程序指令，当其被计算机执行时，通过该计算机的操作，可以调用或提供根据本申请的方法和/或技术方案。而调用本申请的方法的程序指令，可能被存储在固定的或可移动的记录介质中，和/或通过广播或其他信号承载媒体中的数据流而被传输，和/或被存储在根据所述程序指令运行的计算机设备的工作存储器中。在此，根据本申请的一个实施例包括一个装置，该装置包括用于存储计算机程序指令的存储器和用于执行程序指令的处理器，其中，当该计算机程序指令被该处理器执行时，触发该装置运行基于前述根据本申请的多个实施例的方法和/或技术方案。
对于本领域技术人员而言，显然本申请不限于上述示范性实施例的细节，而且在不背离本申请的精神或基本特征的情况下，能够以其他的具体形式实现本申请。因此，无论从哪一点来看，均应将实施例看作是示范性的，而且是非限制性的，本申请的范围由所附权利要求而不是上述说明限定，因此旨在将落在权利要求的等同要件的含义和范围内的所有变化涵括在本申请内。不应将权利要求中的任何附图标记视为限制所涉及的权利要求。此外，显然“包括”一词不排除其他单元或步骤，单数不排除复数。第一，第二等词语用来表示名称，而并不表示任何特定的顺序。
Claims (10)
1.一种Echarts图表组件的封装方法，其特征在于，所述方法包括：
基于Echarts组件对入参数据校验的结果，构造函数以实例化Echarts对象；
为实例化后的对象对应的图表绑定Echarts事件，基于绑定的Echarts事件对所述图表进行渲染；
基于外部传入的Echarts的配置数据进行渲染后的图表展示。
2.根据权利要求1所述的方法，其特征在于，基于外部传入的Echarts的配置数据进行渲染后的图表展示，包括：
判断渲染后的图表是否需要更新，若是，则将新的数据更新到图表上，基于外部传入Echarts的配置数据进行更新后的图表展示；
若否，则直接基于外部传入的Echarts的配置数据进行渲染后的图表展示。
3.根据权利要求1所述的方法，其特征在于，基于Echarts组件对入参数据校验的结果，构造函数以实例化Echarts对象，包括：
基于Echarts组件对外部传入的入参数据与所述Echarts组件所支持的数据类型进行比对，以完成校验，若校验成功，则构造函数以实例化Echarts对象。
4.根据权利要求3所述的方法，其特征在于，所述外部传入的入参包括：所有实例的图表配置项、图表完成后的回调函数、图表的加载状态、点击图表触发的事件、自定义图表的样式、图表的显示像素、图表延迟更新的支持信息以及图表的内部样式定义。
5.根据权利要求1所述的方法，其特征在于，为实例化后的对象对应的图表绑定Echarts事件，包括：
将图表点击事件、组件销毁事件及图表重置事件中任一种或任几种组合的Echarts事件绑定至实例化后的对象对应的图表。
6.根据权利要求1或5所述的方法，其特征在于，基于绑定的Echarts事件对所述图表进行渲染，包括：
基于绑定的Echarts事件将Echarts实例底层进行图表的绘画，得到svg格式的图片；或，
基于绑定的Echarts事件在画布上进行绘制所配置的图形，并查询页面上的标识信息为容器的唯一标识信息的图表容器，将所述画布放入至所述图表容器中。
7.根据权利要求2所述的方法，其特征在于，判断渲染后的图表是否需要更新，包括：
判断渲染后的图表的组件属性是否需要更新，其中，所述组件属性包括画布尺寸或svg图片配置、图表的点击事件、图表配置项、图表的主题风格、控制图表的加载状态以及数据入参变更校验。
8.根据权利要求2或7所述的方法，其特征在于，将渲染后的图表的数据进行更新之后，包括：
渲染更新后的图表的dom元素，将渲染dom元素后的图表放至指定的图表容器上，并设置所述图表容器的最小高度。
9.一种Echarts图表组件的封装的设备，其特征在于，所述设备包括：
一个或多个处理器；以及
存储有计算机可读指令的存储器，所述计算机可读指令在被执行时使所述处理器执行如权利要求1至8中任一项所述方法的操作。
10.一种计算机可读介质，其上存储有计算机可读指令，所述计算机可读指令可被处理器执行以实现如权利要求1至8中任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011403436.7A CN112433726A (zh) | 2020-12-04 | 2020-12-04 | 一种Echarts图表组件的封装方法及设备 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011403436.7A CN112433726A (zh) | 2020-12-04 | 2020-12-04 | 一种Echarts图表组件的封装方法及设备 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112433726A true CN112433726A (zh) | 2021-03-02 |
Family
ID=74691616
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011403436.7A Pending CN112433726A (zh) | 2020-12-04 | 2020-12-04 | 一种Echarts图表组件的封装方法及设备 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112433726A (zh) |
Cited By (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113325977A (zh) * | 2021-05-27 | 2021-08-31 | 天津安捷物联科技股份有限公司 | 一种能源设备关系的动态配置与图谱展现方法 |
| CN113434232A (zh) * | 2021-06-28 | 2021-09-24 | 青岛海尔科技有限公司 | 图表的显示方法、装置、存储介质及处理器 |
| CN113971053A (zh) * | 2021-10-26 | 2022-01-25 | 北京字节跳动网络技术有限公司 | 一种组件配置方法、装置、计算机设备及存储介质 |
| CN115328486A (zh) * | 2022-10-17 | 2022-11-11 | 北京安盟信息技术股份有限公司 | 基于动态传入数据的echarts调用封装方法、装置、介质及设备 |
| CN115857906A (zh) * | 2023-02-02 | 2023-03-28 | 中电信数字城市科技有限公司 | 低代码图表生成的方法、系统、电子设备及介质 |
| CN115857951A (zh) * | 2023-02-27 | 2023-03-28 | 南昌国讯信息技术股份有限公司 | 基于商业智能的数据处理方法及电子设备和存储介质 |
| CN116212398A (zh) * | 2023-03-10 | 2023-06-06 | 广州三七极耀网络科技有限公司 | 一种基于数据中台的游戏管理方法、装置、设备及介质 |
| CN117687737A (zh) * | 2024-02-01 | 2024-03-12 | 成都数之联科技股份有限公司 | 一种Echarts图表显示优化方法及系统 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105183466A (zh) * | 2015-08-27 | 2015-12-23 | 国云科技股份有限公司 | 一种简化echarts调用的封装方法 |
| CN108492346A (zh) * | 2018-03-19 | 2018-09-04 | 苏州思必驰信息科技有限公司 | 实现图表组件的方法及装置 |
| CN109697254A (zh) * | 2018-12-04 | 2019-04-30 | 国云科技股份有限公司 | 一种前端页面图表组件化的方法 |
| CN109918604A (zh) * | 2019-03-07 | 2019-06-21 | 智慧芽信息科技(苏州)有限公司 | 网页绘图方法、装置、设备及存储介质 |
-
2020
- 2020-12-04 CN CN202011403436.7A patent/CN112433726A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105183466A (zh) * | 2015-08-27 | 2015-12-23 | 国云科技股份有限公司 | 一种简化echarts调用的封装方法 |
| CN108492346A (zh) * | 2018-03-19 | 2018-09-04 | 苏州思必驰信息科技有限公司 | 实现图表组件的方法及装置 |
| CN109697254A (zh) * | 2018-12-04 | 2019-04-30 | 国云科技股份有限公司 | 一种前端页面图表组件化的方法 |
| CN109918604A (zh) * | 2019-03-07 | 2019-06-21 | 智慧芽信息科技(苏州)有限公司 | 网页绘图方法、装置、设备及存储介质 |
Non-Patent Citations (4)
| Title |
|---|
| DAXIAN1996: "Vue项目中封装Echarts", 《博客园，HTTPS://WWW.CNBLOGS.COM/XUDAXIAN/P/12714427.HTML》, pages 1 - 5 * |
| 大前端分享: "echarts常用功能封装_抽象为mixin", 《知乎，HTTPS://ZHUANLAN.ZHIHU.COM/P/268532089》, pages 1 - 2 * |
| 猩猿亿码: "图形报表ECharts快速使用--入门", 《CSDN, HTTPS://BLOG.CSDN.NET/QQ_44316726/ARTICLE/DETAILS/107675290》, vol. 1, pages 182 - 184 * |
| 谈财富密码: "封装echarts 工具", 《知乎，HTTPS://ZHUANLAN.ZHIHU.COM/P/263556147》, pages 1 - 5 * |
Cited By (14)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113325977B (zh) * | 2021-05-27 | 2022-06-03 | 天津安捷物联科技股份有限公司 | 一种能源设备关系的动态配置与图谱展现方法 |
| CN113325977A (zh) * | 2021-05-27 | 2021-08-31 | 天津安捷物联科技股份有限公司 | 一种能源设备关系的动态配置与图谱展现方法 |
| CN113434232B (zh) * | 2021-06-28 | 2023-06-16 | 青岛海尔科技有限公司 | 图表的显示方法、装置、存储介质及处理器 |
| CN113434232A (zh) * | 2021-06-28 | 2021-09-24 | 青岛海尔科技有限公司 | 图表的显示方法、装置、存储介质及处理器 |
| CN113971053A (zh) * | 2021-10-26 | 2022-01-25 | 北京字节跳动网络技术有限公司 | 一种组件配置方法、装置、计算机设备及存储介质 |
| CN115328486A (zh) * | 2022-10-17 | 2022-11-11 | 北京安盟信息技术股份有限公司 | 基于动态传入数据的echarts调用封装方法、装置、介质及设备 |
| CN115328486B (zh) * | 2022-10-17 | 2023-02-03 | 北京安盟信息技术股份有限公司 | 基于动态传入数据的echarts调用封装方法、装置、介质及设备 |
| CN115857906A (zh) * | 2023-02-02 | 2023-03-28 | 中电信数字城市科技有限公司 | 低代码图表生成的方法、系统、电子设备及介质 |
| CN115857906B (zh) * | 2023-02-02 | 2023-05-12 | 中电信数字城市科技有限公司 | 低代码图表生成的方法、系统、电子设备及介质 |
| CN115857951A (zh) * | 2023-02-27 | 2023-03-28 | 南昌国讯信息技术股份有限公司 | 基于商业智能的数据处理方法及电子设备和存储介质 |
| CN116212398A (zh) * | 2023-03-10 | 2023-06-06 | 广州三七极耀网络科技有限公司 | 一种基于数据中台的游戏管理方法、装置、设备及介质 |
| CN116212398B (zh) * | 2023-03-10 | 2023-11-03 | 广州三七极耀网络科技有限公司 | 一种基于数据中台的游戏管理方法、装置、设备及介质 |
| CN117687737A (zh) * | 2024-02-01 | 2024-03-12 | 成都数之联科技股份有限公司 | 一种Echarts图表显示优化方法及系统 |
| CN117687737B (zh) * | 2024-02-01 | 2024-04-12 | 成都数之联科技股份有限公司 | 一种Echarts图表显示优化方法及系统 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112433726A (zh) | 一种Echarts图表组件的封装方法及设备 | |
| US10726195B2 (en) | Filtered stylesheets | |
| TWI700638B (zh) | 混合視圖的顯示方法及裝置 | |
| CN113190776B (zh) | 弹窗展示方法与系统 | |
| US20110167403A1 (en) | Methods for platform-agnostic definitions and implementations of applications | |
| CN107577509A (zh) | 一种加载应用界面的方法、终端及计算机可读存储介质 | |
| CN107122301A (zh) | 界面测试方法及装置 | |
| CN103793224A (zh) | 一种窗口的显示方法和装置 | |
| CN112667330A (zh) | 一种页面显示方法及计算机设备 | |
| US9035948B2 (en) | Methods and systems for drawing graphics into a data chart | |
| CN111833417A (zh) | 安卓应用程序实现黑白模式的方法及系统 | |
| CN107506483A (zh) | 页面加载方法、装置、电子设备及存储介质 | |
| CN112068911A (zh) | 电子表单的生成方法、装置、系统、设备以及介质 | |
| CN115309516A (zh) | 一种应用生命周期的检测方法、装置及计算机设备 | |
| CN114444478A (zh) | 一种凭证可视化方法、装置、电子设备及存储介质 | |
| CN111367518A (zh) | 页面布局方法、装置、计算设备及计算机存储介质 | |
| CN111240678B (zh) | 弹出窗口的设置方法及装置、电子设备、存储介质 | |
| CN113449502A (zh) | 基于动态数据的文档生成方法与系统 | |
| CN112765505A (zh) | 数据加载方法、装置及存储介质 | |
| CN111324347A (zh) | 组件构造方法、装置、系统、页面生成方法、设备及介质 | |
| CN110825365A (zh) | 一种定制webview特性的方法、装置、设备和介质 | |
| CN111399836A (zh) | 修改页面属性的方法及装置 | |
| CN110020285B (zh) | 柱状图的处理方法及装置 | |
| CN112068828A (zh) | 标题控件的生成方法、装置、系统、设备以及介质 | |
| CN112416268B (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 | ||
| CB02 | Change of applicant information |
Address after: Room 1101-1103, No. 433, Songhu Road, Yangpu District, Shanghai Applicant after: Shanghai wanwansheng Environmental Protection Technology Group Co.,Ltd. Address before: Room 1101-1103, No. 433, Songhu Road, Yangpu District, Shanghai Applicant before: SHANGHAI YUEYI NETWORK INFORMATION TECHNOLOGY Co.,Ltd. |
|
| CB02 | Change of applicant information |