[发明专利]一种基于Threejs生成全景图表的方法、终端设备及存储介质

说明书

本发明涉及一种基于Threejs生成全景图表的方法、终端设备及存储介质，该方法中包括：加载全景容器组件中配置的各图表组件，并将其挂载至全景容器组件内；对全景容器组件对应的场景和相机进行初始化；根据每个图表组件生成场景对象，并生成的场景对象添加至对应的场景内；初始化全景容器组件的渲染器，并设置渲染效果的宽和高，通过渲染器将各图表组件重新渲染出全景效果，将渲染器挂载至页面内；全景容器组件调用addEventListener对用户鼠标操作事件进行绑定，使全景效果跟着鼠标的拖动进行转动；根据帧速率反复触发来调整相机的位置；页面显示全景图表效果。本发明通过系统特有的全景容器组件，可以快速将几块图表结合起来，生成相应的全景图表页面。

技术领域

本发明涉及图表生成领域，尤其涉及一种基于Threejs生成全景图表的方法、终端设备及存储介质。

背景技术

随着大数据信息化建设的快速发展，信息化系统针对数据展示的功能需求越来越多。传统的表格展示已经不足以支持目前的大数据多维度展示，为了直观看出数据背后的规律和特点，系统建设方需要用各种各样的图表来形象、科学地展示数据。

当前互联网上有多种数据可视化插件，它们都支持常见的柱状图、饼图、折线图等图表的展示，能够图文并茂地描述数据，目前已有的D3、Echarts等数据可视化插件都支持大量的图表类型绘制。但是由于传统的浏览器页面，仅仅支持平面展示，这就限制了图表的各种展示方式也被限制在平面内。另外，由于各类型的图表都有各自的缺陷，例如折线图适合展示变化趋势，不适合展示大数据集；柱状图适合展示各组数据对比，不适合展示每组数据占比。因此一组业务数据的展示，都需要搭配多种类型的图表，需要在浏览器页面占据大部分位置。使用者在查看多块业务数据时，往往都需要开启多个浏览器窗口，不断的切换窗口进行对比。

发明内容

为了解决上述问题，本发明提出了一种基于Threejs生成全景图表的方法、终端设备及存储介质。

具体方案如下：

一种基于Threejs生成全景图表的方法，包括以下步骤：

S1：当页面解析到全景容器组件时，加载全景容器组件中配置的各图表组件，并将其挂载至全景容器组件内；

S2：当全景容器组件被挂载至页面上后，对全景容器组件对应的场景和相机进行初始化；

S3：当各图表组件均被挂载至页面上后，根据每个图表组件生成场景对象，并生成的场景对象添加至对应的场景内；

S4：初始化全景容器组件的渲染器，并设置渲染效果的宽和高，通过渲染器将各图表组件重新渲染出全景效果，将渲染器挂载至页面内；

S5：全景容器组件调用addEventListener对用户鼠标操作事件进行绑定，使全景效果跟着鼠标的拖动进行转动；

S6：将接收到的用于场景展示的宽和高作为参数调用requestAnimationFrame()，根据帧速率反复触发requestAnimationFrame()来调整相机的位置；

S7：页面显示全景图表效果。

进一步的，步骤S1中图表组件的挂载过程包括：全景容器组件通过props接收前、后、左和右四个方向的图表组件，在created周期回调过程中，利用import函数加载四个方向的图表组件，加载后触发then回调，在then回调里面通过vue框架的Vue.extend创建构造器并调用$mount动态将四个方向的图表组件分别挂载到全景容器组件的front、back、left、right四个节点下。

进一步的，全景容器组件挂载的过程包括：

S101：在HTML页面中预留全景容器组件Dom的挂载点，将全景容器组件以自定义标签的形式写在挂载点处；