圖觀™應用編輯器 零基礎入門課（第四講）

課程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.訪問圖觀™官方網站，在瀏覽器中輸入網址：

在圖觀™官方網站中，您可獲取圖觀™最新產品技術動態以及全面的開發指引，幫助您快速瞭解圖觀™數字孿生視覺化引擎 。