数据展示方法、装置、设备及计算机可读存储介质制造方法及图纸

本发明专利技术公开了一种数据展示方法、装置、设备及计算机可读存储介质。该方法包括：在浏览器的可视化区域中设置自定义滚动条，并在基于自定义滚动条监听到鼠标移动事件时，通过预设回调参数获取滚动条滚动距离；根据鼠标移动事件对应获取可滚动区域的宽度/高度和可视化区域的宽度/高度，并基于滚动条滚动距离、可滚动区域的宽度/高度和可视化区域的宽度/高度计算得到可视化区域的偏移值；根据可视化区域的偏移值和可视化区域的宽度/高度确定目标数据组，获取与目标数据组对应的目标数据，并对目标数据进行渲染展示。本发明专利技术能解决现有技术中在进行数据展示时，因数据量过大而导致javascript脚本阻塞、页面卡顿、甚至浏览器崩溃的问题。

Data Display Method, Device, Equipment and Computer Readable Storage Media

【技术实现步骤摘要】
数据展示方法、装置、设备及计算机可读存储介质
本专利技术涉及金融科技(Fintech)
，尤其涉及一种数据展示方法、装置、设备及计算机可读存储介质。
技术介绍
随着计算机技术的发展，越来越多的技术(大数据、分布式、人工智能等)应用在金融领域，传统金融业正在逐步向金融科技(Fintech)转变，但由于金融行业的安全性、实时性要求，也对技术提出了更高的要求。在大数据时代，数据量是以超指数级的速度增长的，对于这些海量的数据信息，通常以列表的方式进行可视化展示。在进行数据展示时，目前一般是直接将后台返回的数据遍历生成对应的节点，进而将后台返回的所有数据一次性全部渲染到页面上，以进行展示。但是后台所返回的数据可能是大数据集，如果直接展示可能会因为渲染的节点数据量过大，而导致javascript脚本阻塞、页面卡顿，严重时甚至还会导致浏览器崩溃。
技术实现思路
本专利技术的主要目的在于提供一种数据展示方法、装置、设备及计算机可读存储介质，旨在解决现有技术中在进行数据展示时，因数据量过大而导致javascript脚本阻塞、页面卡顿、甚至浏览器崩溃的问题。为实现上述目的，本专利技术提供一种数据展示方法，所述数据展示方法包括：在浏览器的可视化区域中设置自定义滚动条，并在基于所述自定义滚动条监听到鼠标移动事件时，通过预设回调参数获取滚动条滚动距离；根据所述鼠标移动事件对应获取可滚动区域的宽度/高度和可视化区域的宽度/高度，并基于所述滚动条滚动距离、所述可滚动区域的宽度/高度和所述可视化区域的宽度/高度计算得到可视化区域的偏移值；根据所述可视化区域的偏移值和所述可视化区域的宽度/高度确定目标数据组，获取与所述目标数据组对应的目标数据，并对所述目标数据进行渲染展示。可选地，所述根据所述鼠标移动事件对应获取可滚动区域的宽度/高度和可视化区域的宽度/高度的步骤包括：确定所述可视化区域中当前显示数据所属的业务类型，并根据所述业务类型和所述鼠标移动事件确定列表项的宽度/高度类型；根据所述宽度/高度类型确定对应的计算规则，并基于所述计算规则计算可滚动区域的宽度/高度；调用预设函数获取可视化区域的宽度/高度。可选地，所述根据所述宽度/高度类型确定对应的计算规则，并基于所述计算规则计算可滚动区域的宽度/高度的步骤包括：若所述宽度/高度类型为固定宽度/高度，则确定对应的计算规则为第一计算规则；基于所述第一计算规则获取列表项的宽度/高度和列表项的项数，对所述列表项的宽度/高度和所述列表项的项数进行相乘处理，得到可滚动区域的宽度/高度。可选地，所述根据所述宽度/高度类型确定对应的计算规则，并基于所述计算规则计算可滚动区域的宽度/高度的步骤包括：若所述宽度/高度类型为非固定宽度/高度，则确定对应的计算规则为第二计算规则；基于所述第二计算规则获取已滚动列表项的宽度/高度、预估宽度/高度值和未滚动列表项的项数，对所述预估宽度/高度值和所述未滚动列表项的项数进行相乘处理，得到未滚动列表项的宽度/高度；对所述未滚动列表项的宽度/高度和所述已滚动列表项的宽度/高度进行加和处理，得到可滚动区域的宽度/高度。可选地，所述根据所述可视化区域的偏移值和所述可视化区域的宽度/高度确定目标数据组的步骤包括：获取所述可视化区域当前显示数据组的起始列表项编号和终止列表项编号，并根据所述鼠标移动事件获取预设数量的与所述当前显示数据组的起始/终止列表项相邻的列表项的宽度/高度，记作相邻列表项的宽度/高度；根据所述相邻列表项的宽度/高度、所述可视化区域的偏移值、所述可视化区域宽度/高度、所述起始列表项编号和所述终止列表项编号得到目标显示数据的目标起始列表项编号和目标终止列表项编号，以确定得到目标数据组。可选地，所述数据展示方法还包括：对所述浏览器前端框架中的响应式数据对象进行深冻结处理。可选地，所述数据展示方法还包括：根据所述可视化区域的偏移值更新与所述自定义滚动条对应的内边距值，并根据所述更新后的内边距值至更新所述自定义滚动条的位置。此外，为实现上述目的，本专利技术还提供一种数据展示装置，所述数据展示装置包括：获取模块，用于在浏览器的可视化区域中设置自定义滚动条，并在基于所述自定义滚动条监听到鼠标移动事件时，通过预设回调参数获取滚动条滚动距离；计算模块，用于根据所述鼠标移动事件对应获取可滚动区域的宽度/高度和可视化区域的宽度/高度，并基于所述滚动条滚动距离、所述可滚动区域的宽度/高度和所述可视化区域的宽度/高度计算得到可视化区域的偏移值；展示模块，用于根据所述可视化区域的偏移值和所述可视化区域的宽度/高度确定目标数据组，获取与所述目标数据组对应的目标数据，并对所述目标数据进行渲染展示。此外，为实现上述目的，本专利技术还提供一种数据展示设备，所述数据展示设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的数据展示程序，所述数据展示程序被所述处理器执行时实现如上所述的数据展示方法的步骤。此外，为实现上述目的，本专利技术还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有数据展示程序，所述数据展示程序被处理器执行时实现如上所述的数据展示方法的步骤。本专利技术提供一种数据展示方法、装置、设备及计算机可读存储介质，先在浏览器的可视化区域中设置自定义滚动条，当基于自定义滚动条监听到鼠标移动事件时，通过预设回调参数获取滚动条滚动的距离；根据鼠标移动事件对应获取可滚动区域的宽度/高度和可视化区域的宽度/高度，基于滚动条滚动距离、可滚动区域的宽度/高度和可视化区域的宽度/高度计算得到可视化区域的偏移值；根据可视化区域的偏移值和可视化区域的宽度/高度确定目标数据组，获取与目标数据组对应的目标数据，并对目标数据进行渲染展示。通过上述方式，本专利技术采用自定义滚动条的虚拟列表的方式来进行数据展示，根据自定义滚动条监听到的鼠标滚动事件，确定得到目标数据组，以渲染展示对应的目标数据，即只显示所有数据中的某一个部分，而不是去完整地渲染展示所有数据，从而可以大量减少在页面上展示的节点数量，相比于现有技术中对所有数据进行一次性渲染展示，本专利技术可减轻浏览器的压力，可避免javascript脚本阻塞、页面卡顿和浏览器崩溃的情况。附图说明图1为本专利技术实施例方案涉及的硬件运行环境的设备结构示意图；图2为本专利技术数据展示方法第一实施例的流程示意图；图3为本专利技术数据展示装置第一实施例的功能模块示意图。本专利技术目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。具体实施方式应当理解，此处所描述的具体实施例仅仅用以解释本专利技术，并不用于限定本专利技术。参照图1，图1为本专利技术实施例方案涉及的硬件运行环境的设备结构示意图。本专利技术实施例数据展示设备可以是智能手机，也可以是PC(PersonalComputer，个人计算机)、平板电脑、便携计算机等终端设备。如图1所示，该数据展示设备可以包括：处理器1001，例如CPU，通信总线1002，用户接口1003，网络接口1004，存储器1005。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏(Display)、输入单元比如键盘(Keyboard)，可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口本文档来自技高网...

【技术保护点】
1.一种数据展示方法，其特征在于，所述数据展示方法包括：在浏览器的可视化区域中设置自定义滚动条，并在基于所述自定义滚动条监听到鼠标移动事件时，通过预设回调参数获取滚动条滚动距离；根据所述鼠标移动事件对应获取可滚动区域的宽度/高度和可视化区域的宽度/高度，并基于所述滚动条滚动距离、所述可滚动区域的宽度/高度和所述可视化区域的宽度/高度计算得到可视化区域的偏移值；根据所述可视化区域的偏移值和所述可视化区域的宽度/高度确定目标数据组，获取与所述目标数据组对应的目标数据，并对所述目标数据进行渲染展示。

【技术特征摘要】
1.一种数据展示方法，其特征在于，所述数据展示方法包括：在浏览器的可视化区域中设置自定义滚动条，并在基于所述自定义滚动条监听到鼠标移动事件时，通过预设回调参数获取滚动条滚动距离；根据所述鼠标移动事件对应获取可滚动区域的宽度/高度和可视化区域的宽度/高度，并基于所述滚动条滚动距离、所述可滚动区域的宽度/高度和所述可视化区域的宽度/高度计算得到可视化区域的偏移值；根据所述可视化区域的偏移值和所述可视化区域的宽度/高度确定目标数据组，获取与所述目标数据组对应的目标数据，并对所述目标数据进行渲染展示。2.如权利要求1所述的数据展示方法，其特征在于，所述根据所述鼠标移动事件对应获取可滚动区域的宽度/高度和可视化区域的宽度/高度的步骤包括：确定所述可视化区域中当前显示数据所属的业务类型，并根据所述业务类型和所述鼠标移动事件确定列表项的宽度/高度类型；根据所述宽度/高度类型确定对应的计算规则，并基于所述计算规则计算可滚动区域的宽度/高度；调用预设函数获取可视化区域的宽度/高度。3.如权利要求2所述的数据展示方法，其特征在于，所述根据所述宽度/高度类型确定对应的计算规则，并基于所述计算规则计算可滚动区域的宽度/高度的步骤包括：若所述宽度/高度类型为固定宽度/高度，则确定对应的计算规则为第一计算规则；基于所述第一计算规则获取列表项的宽度/高度和列表项的项数，对所述列表项的宽度/高度和所述列表项的项数进行相乘处理，得到可滚动区域的宽度/高度。4.如权利要求2所述的数据展示方法，其特征在于，所述根据所述宽度/高度类型确定对应的计算规则，并基于所述计算规则计算可滚动区域的宽度/高度的步骤包括：若所述宽度/高度类型为非固定宽度/高度，则确定对应的计算规则为第二计算规则；基于所述第二计算规则获取已滚动列表项的宽度/高度、预估宽度/高度值和未滚动列表项的项数，对所述预估宽度/高度值和所述未滚动列表项的项数进行相乘处理，得到未滚动列表项的宽度/高度；对所述未滚动列表项的宽度/高度和所述已滚动列表项的宽度/高度进行加和处理，得到可滚动区域的宽度/高度。5.如权利要求1所述的...

【专利技术属性】
技术研发人员：欧碧莹，林挺，卢道和，
申请(专利权)人：深圳前海微众银行股份有限公司，
类型：发明
国别省市：广东,44