本申请公开了一种图表的显示方法、装置、存储介质及处理器。其中，该方法包括：监听目标界面的状态是否变更为可见状态，其中，目标界面的状态包含可见状态以及不可见状态；若监听到目标界面的状态变更为可见状态，则采用目标回调函数对目标标签对象进行获取，其中，目标标签对象中存储有目标图表；基于目标标签对象在目标界面上对目标图表进行显示。本申请解决了相关技术中modal组件的弹出框加载过程中，由于div容器无法被获取，导致图表不能正常呈现的问题。现的问题。现的问题。
【技术实现步骤摘要】
图表的显示方法、装置、存储介质及处理器
[0001]本申请涉及界面交互
，具体而言，涉及一种图表的显示方法、装置、存储介质及处理器。
技术介绍
[0002]React是一个用于构建用户界面的JAVASCRIPT库，用于构建前端UI,起源于facebook内部项目，后来开源。React具有高效，代码简单等优点，快速成为业界主流的前端库，并且它有完善的生态，不断的持续更新，广泛被使用。
[0003]Ant design是蚂蚁集团采用React封装的一套前端组件库，主要用于研发企业级中后台产品，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态，可以大大提升设计和开发的效率。
[0004]在使用ant design框架来开发React项目，用到Modal组件时，根据api可以通过更改Modal的是否可见属性去显示或隐藏Modal。在界面中引入Echarts图表组件时，创建div容器作为存放chart图的容器，Echarts提供init方法将图表初始化在div容器上即可呈现。但是当需要在Modal上去呈现chart图时，动态设置Modal可见时，在执行echart的init初始化时，容器却找不到，导致图表不能正常呈现。
[0005]针对相关技术中modal组件的弹出框加载过程中，由于div容器无法被获取，导致图表不能正常呈现问题，目前尚未提出有效的解决方案。
技术实现思路
[0006]本申请实施例提供了一种图表的显示方法、装置、存储介质及处理器，以至少解决相关技术中modal组件的弹出框加载过程中，由于div容器无法被获取，导致图表不能正常呈现的问题。
[0007]根据本申请实施例的一个方面，提供了一种图表的显示方法，包括：监听目标界面的状态是否变更为可见状态，其中，目标界面的状态包含可见状态以及不可见状态；若监听到目标界面的状态变更为可见状态，则采用目标回调函数对目标标签对象进行获取，其中，目标标签对象中存储有目标图表；基于目标标签对象在目标界面上对目标图表进行显示。
[0008]进一步地，在监听目标界面的状态是否变更为可见状态之前，该方法还包括：将目标界面的状态设置为不可见状态；调用目标插件对原始页面的内容进行构建，得到构建内容后的原始页面，其中，原始页面的内容中包括文档对象模型；基于预设规则触发构建内容后的原始页面跳转至目标界面。
[0009]进一步地，在监听目标界面的状态是否变更为可见状态之后，该方法还包括：若监听到目标界面的状态未变更为可见状态，则基于目标回调函数对目标界面的状态进行更改，以将目标界面的状态更改为可见状态。
[0010]进一步地，基于目标标签对象在目标界面上对目标图表进行显示包括：检测目标标签对象是否包含目标图表插件信息；若目标标签对象不包含目标图表插件信息，调取预
设参数使得目标标签对象包含目标图表插件信息；基于目标图表插件信息在目标界面上对目标图表进行显示。
[0011]进一步地，在监听目标界面的状态是否变更为可见状态之前，该方法还包括：判断目标界面的状态是否发生过变更；若目标界面的状态发生过变更，则执行监听目标界面的状态是否是变更为可见状态的步骤；若目标界面的状态未发生过变更，且目标界面的状态为不可见状态时，则目标回调函数对目标标签对象不执行监听操作。
[0012]根据本申请实施例的另一方面，还提供了一种图表的显示装置，其特征在于，包括：第一监听单元，用于监听目标界面的状态是否变更为可见状态，其中，目标界面的状态包含可见状态以及不可见状态；第一获取单元，用于若监听到目标界面的状态变更为可见状态，则采用目标回调函数对目标标签对象进行获取，其中，目标标签对象中存储有目标图表；第一显示单元，用于基于目标标签对象在目标界面上对目标图表进行显示。
[0013]进一步地，该装置还包括：第一设置单元，用于在监听目标界面的状态是否变更为可见状态之前，将目标界面的状态设置为不可见状态；第一构建单元，用于调用目标插件对原始页面的内容进行构建，得到构建内容后的原始页面，其中，原始页面的内容中包括文档对象模型；第一跳转单元，用于基于预设规则触发构建内容后的原始页面跳转至目标界面。
[0014]进一步地，该装置还包括：第一更改单元，用于在监听目标界面的状态是否变更为可见状态之后，若监听到目标界面的状态未变更为可见状态，则基于目标回调函数对目标界面的状态进行更改，以将目标界面的状态更改为可见状态。
[0015]进一步地，第一显示单元包括：第一检测模块，用于检测目标标签对象是否包含目标图表插件信息；第一调取模块，用于若目标标签对象不包含目标图表插件信息，调取预设参数使得目标标签对象包含目标图表插件信息；第一显示模块，用于基于目标图表插件信息在目标界面上对目标图表进行显示。
[0016]进一步地，该装置还包括：第一判断单元，用于在监听目标界面的状态是否变更为可见状态之前，判断目标界面的状态是否发生过变更；第一执行单元，用于若目标界面的状态发生过变更，则执行监听目标界面的状态是否是变更为可见状态的步骤；第二处理单元，用于若目标界面的状态未发生过变更，且目标界面的状态为不可见状态时，则目标回调函数对目标标签对象不执行监听操作。
[0017]根据本申请实施例的另一方面，还提供了一种处理器，处理器用于运行程序，其中，程序运行时执行上述任意一项的方法。
[0018]根据本申请实施例的另一方面，还提供了一种计算机可读存储介质，其上存储有计算机程序/指令，该计算机程序/指令被处理器执行时执行上述任意一项的方法。
[0019]通过本申请，采用以下步骤：监听目标界面的状态是否变更为可见状态，其中，目标界面的状态包含可见状态以及不可见状态；若监听到目标界面的状态变更为可见状态，则采用目标回调函数对目标标签对象进行获取，其中，目标标签对象中存储有目标图表；基于目标标签对象在目标界面上对目标图表进行显示，解决了相关技术中modal组件的弹出框加载过程中，由于div容器无法被获取，导致图表不能正常呈现的问题。通过对目标页面变更状态的监听，进而触发目标回调函数对目标标签对象的获取，进而达到了modal组件的弹出框加载过程中图表可以正常呈现的效果。
附图说明
[0020]此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
[0021]图1是根据本申请实施例提供的一种图表的显示方法的流程图；
[0022]图2是根据本申请实施例提供的一种图表的显示方法的系统执行的流程图；
[0023]图3是根据本申请实施例提供的可选的图表的显示方法的流程图一；
[0024]图4是根据本申请实施例提供的可选的图表的显示方法的流程图二；
[0025]图5是根据本申请实施例提供的一种图表的显示装置的示意图。
具体实施方式
[0026]为了使本
的人本文档来自技高网...
【技术保护点】
【技术特征摘要】
1.一种图表的显示方法，其特征在于，包括：监听目标界面的状态是否变更为可见状态，其中，所述目标界面的状态包含可见状态以及不可见状态；若监听到所述目标界面的状态变更为可见状态，则采用目标回调函数对目标标签对象进行获取，其中，所述目标标签对象中存储有目标图表；基于所述目标标签对象在所述目标界面上对所述目标图表进行显示。2.根据权利要求1所述的方法，其特征在于，在监听目标界面的状态是否变更为可见状态之前，所述方法还包括：将所述目标界面的状态设置为不可见状态；调用目标插件对原始页面的内容进行构建，得到构建内容后的原始页面，其中，所述原始页面的内容中包括文档对象模型；基于预设规则触发所述构建内容后的原始页面跳转至所述目标界面。3.根据权利要求1所述的方法，其特征在于，在监听目标界面的状态是否变更为可见状态之后，所述方法还包括：若监听到目标界面的状态未变更为可见状态，则基于所述目标回调函数对所述目标界面的状态进行更改，以将所述目标界面的状态更改为可见状态。4.根据权利要求1所述的方法，其特征在于，基于所述目标标签对象在所述目标界面上对所述目标图表进行显示包括：检测所述目标标签对象是否包含目标图表插件信息；若所述目标标签对象不包含目标图表插件信息，调取预设参数使得所述目标标签对象包含目标图表插件信息；基于目标图表插件信息在所述目标界面上对所述目标图表进行显示。5.根据权利要求1所述的方法，其特征在于，在监听目标界面的状态是否变更为可见状态之前，所述方法还包括：判断所述目标界面的状态是否发生过变更；若所述目标界面的状态发生过变更，则执行监听目标界面的状态是否是变更为...
【专利技术属性】
技术研发人员：何平平，
申请(专利权)人：海尔智家股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。