[发明专利]图表的显示方法、装置、存储介质及处理器

说明书

本申请公开了一种图表的显示方法、装置、存储介质及处理器。其中，该方法包括：监听目标界面的状态是否变更为可见状态，其中，目标界面的状态包含可见状态以及不可见状态；若监听到目标界面的状态变更为可见状态，则采用目标回调函数对目标标签对象进行获取，其中，目标标签对象中存储有目标图表；基于目标标签对象在目标界面上对目标图表进行显示。本申请解决了相关技术中modal组件的弹出框加载过程中，由于div容器无法被获取，导致图表不能正常呈现的问题。

技术领域

本申请涉及界面交互技术领域，具体而言，涉及一种图表的显示方法、装置、存储介质及处理器。

背景技术

React是一个用于构建用户界面的JAVASCRIPT库，用于构建前端UI,起源于facebook内部项目，后来开源。React具有高效，代码简单等优点，快速成为业界主流的前端库，并且它有完善的生态，不断的持续更新，广泛被使用。

Ant design是蚂蚁集团采用React封装的一套前端组件库，主要用于研发企业级中后台产品，具有学习成本低、上手速度快、实现效果好等特点，并且提供从界面设计到前端开发的全链路生态，可以大大提升设计和开发的效率。

在使用ant design框架来开发React项目，用到Modal组件时，根据api可以通过更改Modal的是否可见属性去显示或隐藏Modal。在界面中引入Echarts图表组件时，创建div容器作为存放chart图的容器，Echarts提供init方法将图表初始化在div容器上即可呈现。但是当需要在Modal上去呈现chart图时，动态设置Modal可见时，在执行echart的init初始化时，容器却找不到，导致图表不能正常呈现。

针对相关技术中modal组件的弹出框加载过程中，由于div容器无法被获取，导致图表不能正常呈现问题，目前尚未提出有效的解决方案。

发明内容

本申请实施例提供了一种图表的显示方法、装置、存储介质及处理器，以至少解决相关技术中modal组件的弹出框加载过程中，由于div容器无法被获取，导致图表不能正常呈现的问题。

根据本申请实施例的一个方面，提供了一种图表的显示方法，包括：监听目标界面的状态是否变更为可见状态，其中，目标界面的状态包含可见状态以及不可见状态；若监听到目标界面的状态变更为可见状态，则采用目标回调函数对目标标签对象进行获取，其中，目标标签对象中存储有目标图表；基于目标标签对象在目标界面上对目标图表进行显示。

进一步地，在监听目标界面的状态是否变更为可见状态之前，该方法还包括：将目标界面的状态设置为不可见状态；调用目标插件对原始页面的内容进行构建，得到构建内容后的原始页面，其中，原始页面的内容中包括文档对象模型；基于预设规则触发构建内容后的原始页面跳转至目标界面。

进一步地，在监听目标界面的状态是否变更为可见状态之后，该方法还包括：若监听到目标界面的状态未变更为可见状态，则基于目标回调函数对目标界面的状态进行更改，以将目标界面的状态更改为可见状态。

进一步地，基于目标标签对象在目标界面上对目标图表进行显示包括：检测目标标签对象是否包含目标图表插件信息；若目标标签对象不包含目标图表插件信息，调取预设参数使得目标标签对象包含目标图表插件信息；基于目标图表插件信息在目标界面上对目标图表进行显示。

进一步地，在监听目标界面的状态是否变更为可见状态之前，该方法还包括：判断目标界面的状态是否发生过变更；若目标界面的状态发生过变更，则执行监听目标界面的状态是否是变更为可见状态的步骤；若目标界面的状态未发生过变更，且目标界面的状态为不可见状态时，则目标回调函数对目标标签对象不执行监听操作。