[發明專利]一種基于Threejs生成全景圖表的方法、終端設備及存儲介質

有效

• 申請號: 202011462659.0
• 申請日: 2020-12-14
• 公開（公告）號: CN112464126B
• 公開（公告）日: 2022-07-15
• 發明（設計）人: 黃天祺;王博;彭琪偉
• 申請（專利權）人: 廈門市美亞柏科信息股份有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957
• 代理公司: 廈門市精誠新創知識產權代理有限公司 35218
• 代理人: 何家富

本發明涉及一種基于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的掛載點，將全景容器組件以自定義標簽的形式寫在掛載點處；