交互式动态图表怎么制作 怎么做特别牛的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.人机交互

在数据可视化的过程中，需要进行组织和过滤。