如何在移動端資料視覺化大屏實現分析？

葡萄城技術團隊發表於2023-04-14

本文由葡萄城技術團隊於部落格園原創並首發
轉載請註明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。

專案想做資料視覺化，想同時在PC端、手機端檢視資料怎麼辦？業務主要關心的資料包括：銷售資料、業績達成、同比、環比，各產品銷售情況及潛客商機、未來收入預測等資料，最好附加人力資源的管理資訊，對業務和人員進行全面掌控，讓一切資訊都可以更加高效檢視。同時，相關內容可在移動端方便檢視，不需要問IT人員要才能看到。

既然使用者的專案系統有這樣的需求，作為開發主力的助理，系統必須得安排，實現最好也是無需親自動手，接下來為大家展示內容的實現。

移動端資料展示的必要性

移動端服務的第一使用者，是領導。業務人員可以在任意場所，如會場、出差途中可以隨時檢視當前業務運轉的資料，不論平板、電腦、手機；同時為了讓決策人員，管理人員，業務人員等使用更加方便，還可整合到微信、釘釘等APP中，實現移動辦公。

移動端資料展示開發難點

移動端螢幕尺寸不一致，一次模板設計無法多次複用，並且要儘可能保證在Web端、客戶端，以及原生IOS 和Android 應用開發功能一致，避免為不同平臺維護多套模板而導致維護成本大。
資料呈現能力受限，移動端報表佈局樣式特殊，需要豐富的視覺化元素，佈局靈活多樣，支援大資料量實時展現，避免明細資料展示。
效能及資料處理能力要求高，大多數控制元件為B/S端，大都依託強大的伺服器資源增強效能，但在手機端渲染需要滿足使用者的更低的容忍度，移動端網路環境複雜，無法適應離線環境正常載入，無法快速整合到即時通訊小程式，如微信、釘釘等。

（圖片來源於Wyn）

不搜尋不知道，透過搜尋才瞭解到，原來移動端要檢視資料，檢視業務報告，開發起來也是相當困難，並且領導的要求可不是隨隨便便敷衍了事就可以的，既要美觀，又要實用。

搜尋了下BI工具大都滿足移動端的展示，既要基於HTML5標準開發, 無需安裝任何客戶端，又要在瀏覽器中可直接開啟。除了可以在PC端檢視之外，還可以在移動端，如手機、pad端檢視，終端使用者可以隨時隨地的瀏覽檢視儀表板或報表。同時，最好是具有移動端自適應的能力，無需專門為移動端使用設計儀表板。

移動端顯示效果展示

在移動端登入系統後，自動以磁貼樣式顯示門戶目錄，無需額外設定，符合手機觸控式操作模式。

（圖片來源於Wyn）

移動端儀表板顯示效果

儀表板自適應進行流式佈局顯示。

（圖片來源於Wyn）

移動端報表顯示效果

移動也可將報表完美呈現，但須專門為移動端進行設計，後續小節（設計移動端報表）將為您進行詳細介紹。

（圖片來源於Wyn）

設計移動端儀表板

Wyn 中的儀表板具備完全自適應的能力，因此您無需專門設計移動端使用的儀表板。

在PC端設計器內可一鍵檢視移動端顯示效果，也可以進行自定義佈局設計。

自定義移動端佈局

如果未對移動端的儀表板內容做自定義的佈局，在移動端將以自動佈局的方式來展示儀表板的內容。

如果您對移動端展示的內容有自定義的需求，單擊儀表板右下角的，即可進入移動端展示編輯頁面，在手機模擬器中修改佈局及展示內容。

（圖片來源於Wyn）

在手機模擬器的編輯頁面中，您可以透過拖拽手動調整各元件之間的順序調整各元件的大小。

單擊元件右上角的刪除按鈕，可將該元件從移動端頁面中移除，被移除的元件會出現在右側的“自定義佈局”中。您也可以將已刪除的元件列表重新拖拽至手機模擬器中。

如果要恢復初始的樣式，單擊“自動佈局”即可返回到初始的樣式。

單擊右下角，返回大屏編輯頁面。

移動端整合

與釘釘整合

日常工作中，使用釘釘進行手機端移動辦公的情況越來越普遍。

Wyn 支援與釘釘整合，整合之後系統自動將釘釘中的使用者和角色資料無縫同步到 Wyn 中。

整合之後釘釘使用者無需切換應用，直接在釘釘應用中就可以開啟Wyn 檢視文件。

不僅如此，釘釘使用者可以直接掃碼登入到 Wyn 站點中，無需重新建立賬號體系。

本節就為您介紹Wyn如何實現與企業釘釘的整合。

釘釘端配置

(1) 登入釘釘開發者平臺

使用企業管理員的身份登入釘釘開發者平臺（https://open-dev.dingtalk.com，如果沒有釘釘賬號，可以免費申請），請記錄下自己企業的CorpId，後續步驟中會使用到。

（圖片來源於Wyn）

(2) 建立應用

選擇“應用開發>企業內部開發”

（圖片來源於Wyn）

單擊“H5微應用”進入微應用管理配置頁面，然後單擊“建立應用”按鈕。

（圖片來源於Wyn）

如下圖所示填寫基本資訊，然後單擊“確定建立”。

（圖片來源於Wyn）

建立完成後，可以得到應用憑證，記錄 AgentId、AppKey 和 AppSecret，整合中會使用到。

（圖片來源於Wyn）

(3) 配置整合資訊

單擊“開發管理”，然後單擊“修改”按鈕。

（圖片來源於Wyn）

接下來配置開發資訊。

“伺服器出口IP”呼叫釘釘服務端API的合法的IP列表。若填寫的IP不符規範，則無法建立應用。請填寫Wyn伺服器的IP地址。

“應用首頁地址”填寫應用首頁連結，在移動端工作臺點選應用圖示會跳轉到此頁面。

url格式為：{PortalUrl}/dingtalk/sso?corpid={CorpId}&redirectUri={PortalUrl}。

其中PortalUrl為您實際部署Wyn的域名或IP+埠號。例如：https://wynportal.grapecity.com/dingtalk/sso?corpid=xxxxxxx&redirectUri=https://wynportal.grapecity.com/。

填寫完成後，單擊頁面右上角的“儲存”按鈕。

（圖片來源於Wyn）

(4) 配置介面許可權

單擊“許可權管理”，然後選擇“通訊錄管理”。

（圖片來源於Wyn）

如下圖，開通通訊錄介面許可權。

（圖片來源於Wyn）

然後配置許可權範圍，你可選擇全部員工，也可以選擇部分員工。

（圖片來源於Wyn）

(5) 釋出應用

單擊“版本管理與釋出”進入應用釋出頁面，然後單擊“確認釋出”按鈕，將應用釋出。

（圖片來源於Wyn）

如可見範圍為全部員工，則應用釋出時則選擇“全部員工”。如果可見範圍設定的是部分員工，那麼釋出時也需要對應的選擇“部分員工”，最後儲存修改，完成釋出。

（圖片來源於Wyn）

Wyn 系統端配置

在釘釘端建立併發布微應用後，使用 admin 賬戶登入 Wyn 後臺管理站點，選擇“安全設定 > 外部使用者提供程式 > 釘釘”。

（圖片來源於Wyn）

配置專案	功能	說明
CorpID	企業的CorpID。
AppKey	應用憑證AppKey。
AppSecret	應用憑證AppSecret
AgentID	應用憑證中的AgentID。
最大併發請求數	同步資料時，單次請求同步的使用者數量。	建議使用保持預設資料。
啟用掃碼登入	是否開啟二維碼登入功能。	有關掃碼登入的更多介紹，請見釘釘使用者掃碼登入。
掃碼登入 AppId	填寫在釘釘應用中建立的QR Code AppId。
掃碼登入 AppSecret	填寫在釘釘應用中建立的QR Code AppSecret。
啟用自動同步	是否開啟自動同步資料功能，同步資料指的是將釘釘中的使用者資料同步到Wyn 中。	-
同步時間間隔	設定自動同步資料的時間間隔，必須填入正整數，單位“小時”。輸入非正整數時，均按1小時計算。	-