课程4:搭建自定义页面

哈喽，小伙伴们大家好~欢迎大家来到图观™应用编辑器零基础入门课程第4课，上节课程我们主要和大家介绍了应用编辑器中涵盖的图层类别，并以“智慧社区运营中心”孪生场景涉及的地标图、气泡图、区域图、路径图、轨迹图5种图层为例，给大家讲解如何使用应用编辑器来添加这些数据图层。本节课我们来给大家介绍如何使用图观™应用编辑器搭建自定义页面，包含配置图表、上传图片素材、配置数据接口等内容。

本节课程简介

本节课程讲解的内容分为11个小节，我们要和大家介绍一下图观™应用编辑器内置的控件，以及如何在控件列表中添加自定义图片素材，其次要讲解下如何在新建页面中添加编辑这些控件，我们会以“安全态势”页面中的数字仪表盘、簇状柱图和环图3个图表为例和大家进行详细讲解。

本节课完整版视频

数字冰雹大数据可视化

，赞3

（点击视频，观看本节完整版教程）

本节课程详解

1."智慧社区运营中心"案例页面图表回顾

首先我们来回顾一下案例中“安全态势”页面中涉及了哪些图表相关的控件，我们可以看到页面有系统标题，一级导航、数字仪表盘、簇状柱图、环图、弧形图、列表以及图表底部的图片装饰。

接下来我们以“安全态势”页面教大家如何使用页面模板修改页面部分内容，如何添加图片素材并且以数字仪表盘、簇状柱图、和环图3个图表为例，手把手的教大家把这些图层配置出来~

2.应用编辑器控件列表介绍

首先我们进入“安全态势”页面编辑界面，界面下方就是应用编辑器的控件列表， 控件列表分别由“资产库”和“本项目”组成。

“资产库”是用来存放控件、 组件和图片资源的 。 “资产库”页签包含 系统资产和 租户资产两类， 系统资产里放置了系统自带的资产控件： 包括柱状图、比例图、比较图、列表、仪表盘、控件、媒体等类型。 租户 资产里是我们自己上传或导入的各类资产控件。 “本项目” 页 签 下展示的是我们在本项目里导入的组件和图片控件。

在资产库中选中“控件”类别，选中预置分类下的任意控件，按住鼠标左键将其拖放至画布中任意位置，随后松开左键即可放置到画布中。选中的控件在属性面板可对其进行管理或修改相关属性。

3.创建图片素材

我们可以看到每一个界面都有一些装饰类的图片素材，那么接下来我们要来讲解一下如何在控件列表中添加这些自定义图片。

首先“智慧社区运营中心”应用中涉及的全套图片素材，请小伙伴们扫一扫屏幕上的二维码下载素材包，或添加数字冰雹客服微信获取~ 也可在浏览器中输入网址： 直接获取。

下载好图片素材包后，我们 先将图片素材导入编辑器。 先把应用编辑器返回到项目首页界面，点击tab栏切换至 图片素材，进入本项目的图片素材库。 左侧图片素材管理列表，可以创建文件夹，方便我们查找管理图片素材 ，点击中间的 【添加图片】按钮，选择 【本地图片】，点击 【点击上传】按钮， 选中获取好的本地图片素材，点击 【确认】即可完成上传。 然后我们就可以在编辑 界面下方控件列表的本项目中看到添加的图片素材 了。

4.页面模板的文字修改

我们在左侧控件列表或画布中选中 “系统标题”控件对象，在右侧的 属性面板中， 修改控件名称和基础设置中的文本为“智慧社区运营中心”，依次选中 “一级导航”控件，在右侧的属性面板中，修改控件名称和基础设置中的文本为 “社区概览”“人车感知”“安全态势”，把多余的一级导航二级导航删掉。同样的把一级标题二级标题名称进行修改。

5.使用数字仪表盘呈现外来返乡人员数据

接下来教大家配置数字仪表盘-外来返乡人员，首先在 【本项目】-【图片】中点选之前上传好的图片并拖拽到页面中，选中在页面添加好的图片，可以在右侧 【属性面板】中对 图片地址、尺寸位置进行编辑， 这样仪表盘的底图就添加完成了。

我们再从下方 【资产库】的 【系统资产】的 【仪表盘】类别中，选择 数字仪表盘控件拖拽到画布相应位置，选中画布中该对象，在右侧 【属性面板】数据设置中， “数据类别”选择“数据源”，“数据源”选择“外来返乡人员”，“数量”选择“数量”“不计算”。

切换至 “样式设置”，在 【基础属性】中基于页面坐标对图表尺寸和图表位置进行配置，对图表的 全局样式、标题、目标值、单位、背景、初始动画等进行自定义配置。

然后再从下方 【资产库】的 【系统资产】的 【媒体】类别中选择 单行文本拖拽到画布相应位置，选中该对象，修改控件名称和基础设置中的文本为“外来返乡人员”，切换至 “样式设置”，对图表尺寸、位置及文本属性进行设置。这样“数字仪表盘-外来返乡人员”就配置完成了。同样的操作将其他数字仪表盘配置好。

6.使用簇状柱图呈现疫情防控人车管理数据

接下来教大家配置簇状柱图，同样的，在 【系统资产】 的 【柱状线图】 中选择 【簇状柱图】 ，拖拽到画布相应位置，选中该对象，在右侧属性面板中，修改空间名称，设置数据源、类别、数量、图例。

点选 【样式设置】页签，对图表的位置、尺寸进行精确设 置，如： 柱图宽度比、长度比、小数点后位数、标题参数及图标样式、数量轴、类别轴、图例进行相应参数配置。

7.使用环图呈现安防事件处理状态数据

接下来教大家添加环图，如之前操作，在 【系统资产】的 【比例图】中选择 【环图】，拖拽到画布相应位置，点击页面中的环图，在右侧 属性面板中，设置数据源、类别、数量。切换至 样式设置，对基础设置、全局样式、图例、进行相应自定义设置。

8. 使用接口接入智能研判数据

接下来教大家配置智能研判的6个数字仪表盘，这6个指标特殊的点在于数据来源于数据接口，所以重点和大家讲解一下。

那我们先来讲下数字仪表盘-独居老人预警的配置方法，首先在 【本项目】-【图片】中点选之前上传好的图片并拖拽到页面中，选中在页面添加好的图片，可以在右侧 【属性面板】中对图片地址、尺寸位置进行编辑，这样仪表盘的底图就添加完成了。

然后 【资产库】-【系统资产】-【媒体】中选择单行文本拖拽到画布相应位置，选中 单行文本控件，修改控件名称和基础设置中的文本为“独居老人预警”，切换至 “样式设置”，对图表尺寸、位置及文本属性进行设置。

我们再从下方 【资产库】-【系统资产】-【仪表盘】中选择 数字仪表盘控件拖拽到画布相应位置，选中画布中的数字仪表盘组件，在右侧 【属性面板】数据设置中，更改控件名称，“数据类别”选择“数据接口”，“数量”输入“num”。

切换至 “样式设置”，在 【基础属性】中基于页面坐标对图表尺寸和图表位置进行配置，对图表的全局样式、标题、目标值、单位、背景、初始动画进行自定义配置。这样“数字仪表盘-独居老人预警”在页面编辑中的配置工作就完成了。同样的方式将智能研判中另外5个数字仪表盘进行设置。

9.使用接口编辑功能创建一个接口

我们已经预先准备好一套测试接口供大家调用测试，并已经发布到现网环境中了，请小伙伴们扫一扫屏幕上的二维码下载素材包，或添加图观客服微信获取，也可在浏览器中输入网址：   直接获取。在实际项目中可以替换成小伙伴自己的接口。

上一步我们把智能研判里面的6个指标项的“数据类别”选择了“数据接口”。

那接下来要教大家使用接口编辑功能进行接口创建和调用的方法了。首先我们回到“智慧社区运营中心”项目首页， tab页签点击切换至接口编辑，页面选择“安全态势”，控件选择“独居老人预警”，在 数据设置中输入接口地址选择接口请求方式“get”，点击 “调用测试”。可看到接口返回格式中显示调用的接口代码，在接口返回数据转换逻辑那添加转换逻辑代码，点击 转换测试可以看到控件接收数据格式显示“20”，点击 “保存”按钮，数据接口就调用成功了。

同样的，我们将智能研判中另外5个数字仪表盘的接口编辑进行设置。点击“保存”，tab页签点击切换至页面编辑，点击“安全态势” 预览按钮，就会看到智能研判下的6个指标都有数据显示，证明接口调用成功了。

10.其他图表编辑

同样的操作方法，我们把“安全态势”页面剩余的图表及“社会概览”和“人车感知”页面的数据图表逐一进行添加设置，这样3个页面的数据图表就都添加设置完成了。

11.预览“智慧社区运营中心”项目阶段成果

在所有页面的图表都编辑完成并保存后我们就完成了自定义页面搭建的工作，这个时候我们就可以点击预览按钮查看在3个页面中我们所添加的数据图表了。 这里步骤比较一致，就不再重复叙述了，小伙伴们可以根据素材包的最终效果图自己配置练习一下。

本节总结

本节课和大家介绍了图观™应用编辑器丰富多样的控件，以及如何通过应用编辑器在页面中添加自定义图片和控件，同时教大家如何将控件绑定数据接口，以数字仪表盘、簇状柱图、环图为例和大家讲解演示如何对图表控件进行自定义编辑。相信大家已经掌握了今天课程的内容，那本节课程到这里就结束啦~

下节预告

下节课程呢 我们要来和大家讲解应用编辑器如何创建组件，并且利用编辑器创建弹出面板的方法。小伙伴一定要持续关注哦~

图观 在线试用地址

图观™引擎现可申请免费试用！现在试用还可获得1对1技术支持和专属大礼包~还等什么，快快联系我们体验图观™引擎的强大功能吧~

1.访问图观™官方网站，在浏览器中输入网址：

在图观™官方网站中，您可获取图观™最新产品技术动态以及全面的开发指引，帮助您快速了解图观™数字孪生可视化引擎 。