交互式動態圖表怎么制作 怎么做特別牛的720°全景H5？

制作全景圖的效果并不復雜。我們只需要借助的1比例尺背景素材圖，根據需要添加即可。一、案例效果演示二、組件結構全景容器組件:我們簡單地將其結構分為三個層次結構:1.最外面的元素/背景2.中間層元素/背景

制作全景圖的效果并不復雜。我們只需要借助的1比例尺背景素材圖，根據需要添加即可。

一、案例效果演示

二、組件結構

全景容器組件:我們簡單地將其結構分為三個層次結構:

1.最外面的元素/背景

2.中間層元素/背景

3.最里面的元素(交互元素放置層，縮寫為交互層)

最外面的元素/背景由全景容器組件最外面的圖片元素層組成，在手機上看離我們的視線最遠；

中間層元素/背景由全景容器組件的中間層中的圖片元素層組成。在手機上看，比最外面的背景更接近視線，介于最里層和最外層之間。

最里面的元素，在手機上看，比最外面的背景離視線最近；一般我們用一個圖層頁面來做這一層，可以在這一層做一些交互的觸發設置。

可以使用最外面的背景(2:1圖)作為全景容器本身的背景，中間的背景(2:1圖)，或者直接使用頁面作為全景容器的背景(普通全屏尺寸740X1136分辨率72dpi或者加畫布)。

提示:在層間滑動屏幕時，會出現錯位的視覺差異效果。做的層數越多，視覺差異效果就越豐富。

三、應用場景

全景容器組件，可以將長寬比為2:1的圖片以Y軸為中心軸連接起來，旋轉360。目前有該組件的案例供大家參考。

三、材料準備

下載文末附件中的素材，不用于商業用途，僅供學習。

1.如果要讓最外面的背景可見，中間的背景不能是JPG格式，可以是PNG格式的圖片，有透明區域；此外，大小比例為2:1的JPG格式繪圖不能放置在圖層中。

2.相關尺寸規格。默認的大背景尺寸比例為2:1(2000 x 1000 px分辨率72dpi)，其他所有小元素在PS中設計好之后逐一導出。注意:PNG格式的圖像被裁剪掉不必要的透明區域。大圖尺寸比較大，但是要盡量控制和壓縮。

3.在PS等設計軟件中完成所有元素或大圖。在PS等設計軟件中設計排版元素后，逐個導出PNG或JPG，然后上傳到:1)上并導出為一個單獨的圖層，并將它們放在中間的背景或圖層層中，以查看個人需求。

四、組件教程

基本用法

1.添加全景容器組件:高級組件-交互組件-全景容器。

2.單擊Panorama容器以添加組件。

3.點擊【使用中間背景圖片】和【使用外部背景圖片】的縮略圖，將圖片替換為2:1的尺寸比例(2000 x 1000 px分辨率72dpi)，兩個背景圖層可以不設置。

4.點擊上圖中任意一層背景圖片，顯示素材上傳界面，僅支持上傳JPG/PNG格式的圖片。

4.雙擊圖層設置直接切換到圖層頁面添加或修改材質。

5.點擊進入圖層中的排版效果如圖。點擊左上角的黑色小三角，切換回頁面。

交互式圖層設置。用戶最關心的是全景容器中的交互設置，一般主要在層(最內層)進行。

四個步驟。

1.數據采集

數據來源主要有兩種:內部數據收集和外部數據收集。

2.數據處理和轉換

數據處理和轉換是數據可視化的前提，主要包括數據預處理和數據挖掘兩個過程。

3.視覺映射

將處理過的數據信息映射成可視元素的過程。從而實現動態交互圖形。

4.人機交互

在數據可視化的過程中，需要進行組織和過濾。