本文由葡萄城技術(shù)團(tuán)隊(duì)于博客園原創(chuàng)并首發(fā)
轉(zhuǎn)載請注明出處：葡萄城官網(wǎng)，葡萄城為開發(fā)者提供專業(yè)的開發(fā)工具、解決方案和服務(wù)，賦能開發(fā)者。

項(xiàng)目想做數(shù)據(jù)可視化，想同時在PC端、手機(jī)端查看數(shù)據(jù)怎么辦？業(yè)務(wù)主要關(guān)心的數(shù)據(jù)包括：銷售數(shù)據(jù)、業(yè)績達(dá)成、同比、環(huán)比，各產(chǎn)品銷售情況及潛客商機(jī)、未來收入預(yù)測等數(shù)據(jù)，最好附加人力資源的管理信息，對業(yè)務(wù)和人員進(jìn)行全面掌控，讓一切信息都可以更加高效查看。同時，相關(guān)內(nèi)容可在移動端方便查看，不需要問IT人員要才能看到。

既然用戶的項(xiàng)目系統(tǒng)有這樣的需求，作為開發(fā)主力的助理，系統(tǒng)必須得安排，實(shí)現(xiàn)最好也是無需親自動手，接下來為大家展示內(nèi)容的實(shí)現(xiàn)。

移動端數(shù)據(jù)展示的必要性

移動端服務(wù)的第一用戶，是領(lǐng)導(dǎo)。業(yè)務(wù)人員可以在任意場所，如會場、出差途中可以隨時查看當(dāng)前業(yè)務(wù)運(yùn)轉(zhuǎn)的數(shù)據(jù)，不論平板、電腦、手機(jī)；同時為了讓決策人員，管理人員，業(yè)務(wù)人員等使用更加方便，還可集成到微信、釘釘?shù)華PP中，實(shí)現(xiàn)移動辦公。

移動端數(shù)據(jù)展示開發(fā)難點(diǎn)

1. 移動端屏幕尺寸不一致，一次模板設(shè)計(jì)無法多次復(fù)用，并且要盡可能保證在Web端、客戶端，以及原生IOS 和Android 應(yīng)用開發(fā)功能一致，避免為不同平臺維護(hù)多套模板而導(dǎo)致維護(hù)成本大。
2. 數(shù)據(jù)呈現(xiàn)能力受限，移動端報(bào)表布局樣式特殊，需要豐富的可視化元素，布局靈活多樣，支持大數(shù)據(jù)量實(shí)時展現(xiàn)，避免明細(xì)數(shù)據(jù)展示。
3. 性能及數(shù)據(jù)處理能力要求高，大多數(shù)控件為B/S端，大都依托強(qiáng)大的服務(wù)器資源增強(qiáng)性能，但在手機(jī)端渲染需要滿足用戶的更低的容忍度，移動端網(wǎng)絡(luò)環(huán)境復(fù)雜，無法適應(yīng)離線環(huán)境正常加載，無法快速集成到即時通訊小程序，如微信、釘釘?shù)取?/li>

?

（圖片來源于Wyn）

不搜索不知道，通過搜索才了解到，原來移動端要查看數(shù)據(jù)，查看業(yè)務(wù)報(bào)告，開發(fā)起來也是相當(dāng)困難，并且領(lǐng)導(dǎo)的要求可不是隨隨便便敷衍了事就可以的，既要美觀，又要實(shí)用。

搜索了下BI工具大都滿足移動端的展示，既要基于HTML5標(biāo)準(zhǔn)開發(fā), 無需安裝任何客戶端，又要在瀏覽器中可直接打開。除了可以在PC端查看之外，還可以在移動端，如手機(jī)、pad端查看，最終用戶可以隨時隨地的瀏覽查看儀表板或報(bào)表。同時，最好是具有移動端自適應(yīng)的能力，無需專門為移動端使用設(shè)計(jì)儀表板。

移動端顯示效果展示

在移動端登錄系統(tǒng)后，自動以磁貼樣式顯示門戶目錄，無需額外設(shè)置，符合手機(jī)觸摸式操作模式。

? ???（圖片來源于Wyn）

移動端儀表板顯示效果

儀表板自適應(yīng)進(jìn)行流式布局顯示。

（圖片來源于Wyn）

移動端報(bào)表顯示效果

移動也可將報(bào)表完美呈現(xiàn)，但須專門為移動端進(jìn)行設(shè)計(jì)，后續(xù)小節(jié)（設(shè)計(jì)移動端報(bào)表）將為您進(jìn)行詳細(xì)介紹。

?

（圖片來源于Wyn）

設(shè)計(jì)移動端儀表板

Wyn 中的儀表板具備完全自適應(yīng)的能力，因此您無需專門設(shè)計(jì)移動端使用的儀表板。

在PC端設(shè)計(jì)器內(nèi)可一鍵查看移動端顯示效果，也可以進(jìn)行自定義布局設(shè)計(jì)。

?文章來源地址http://www.zghlxwxcb.cn/news/detail-412896.html

自定義移動端布局

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

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

（圖片來源于Wyn）

?

（圖片來源于Wyn）

?

在手機(jī)模擬器的編輯頁面中，您可以通過拖拽手動調(diào)整各組件之間的順序調(diào)整各組件的大小。

單擊組件右上角的刪除按鈕，可將該組件從移動端頁面中移除，被移除的組件會出現(xiàn)在右側(cè)的“自定義布局”中。您也可以將已刪除的組件列表重新拖拽至手機(jī)模擬器中。

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

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

?

移動端集成

與釘釘集成

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

Wyn 支持與釘釘集成，集成之后系統(tǒng)自動將釘釘中的用戶和角色數(shù)據(jù)無縫同步到 Wyn 中。

集成之后釘釘用戶無需切換應(yīng)用，直接在釘釘應(yīng)用中就可以打開Wyn 查看文檔。

不僅如此，釘釘用戶可以直接掃碼登錄到 Wyn 站點(diǎn)中，無需重新創(chuàng)建賬號體系。

本節(jié)就為您介紹Wyn如何實(shí)現(xiàn)與企業(yè)釘釘?shù)募伞?/p>

釘釘端配置

(1)? 登錄釘釘開發(fā)者平臺

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

?

（圖片來源于Wyn）

?

(2)? 創(chuàng)建應(yīng)用

選擇“應(yīng)用開發(fā)>企業(yè)內(nèi)部開發(fā)”

（圖片來源于Wyn）

?

單擊“H5微應(yīng)用”進(jìn)入微應(yīng)用管理配置頁面，然后單擊“創(chuàng)建應(yīng)用”按鈕。

?

（圖片來源于Wyn）

?

如下圖所示填寫基本信息，然后單擊“確定創(chuàng)建”。

?

（圖片來源于Wyn）

?

創(chuàng)建完成后，可以得到應(yīng)用憑證，記錄 AgentId、AppKey 和 AppSecret，集成中會使用到。

?

（圖片來源于Wyn）

?

(3)?配置集成信息

單擊“開發(fā)管理”，然后單擊“修改”按鈕。

（圖片來源于Wyn）

?

接下來配置開發(fā)信息。

“服務(wù)器出口IP”調(diào)用釘釘服務(wù)端API的合法的IP列表。若填寫的IP不符規(guī)范，則無法創(chuàng)建應(yīng)用。請?zhí)顚慦yn服務(wù)器的IP地址。

“應(yīng)用首頁地址”填寫應(yīng)用首頁鏈接，在移動端工作臺點(diǎn)擊應(yīng)用圖標(biāo)會跳轉(zhuǎn)到此頁面。

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

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

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

?

（圖片來源于Wyn）

?

(4)? 配置接口權(quán)限

單擊“權(quán)限管理”，然后選擇“通訊錄管理”。

（圖片來源于Wyn）

?

如下圖，開通通訊錄接口權(quán)限。

（圖片來源于Wyn）

?

然后配置權(quán)限范圍，你可選擇全部員工，也可以選擇部分員工。

?

（圖片來源于Wyn）

?

(5)? 發(fā)布應(yīng)用

單擊“版本管理與發(fā)布”進(jìn)入應(yīng)用發(fā)布頁面，然后單擊“確認(rèn)發(fā)布”按鈕，將應(yīng)用發(fā)布。

?

（圖片來源于Wyn）

?

如可見范圍為全部員工，則應(yīng)用發(fā)布時則選擇“全部員工”。如果可見范圍設(shè)置的是部分員工，那么發(fā)布時也需要對應(yīng)的選擇“部分員工”，最后保存修改，完成發(fā)布。?

（圖片來源于Wyn）

Wyn 系統(tǒng)端配置

在釘釘端創(chuàng)建并發(fā)布微應(yīng)用后，使用 admin 賬戶登錄 Wyn 后臺管理站點(diǎn)，選擇“安全設(shè)置?>?外部用戶提供程序?>?釘釘”。

?

（圖片來源于Wyn）

?

配置項(xiàng)目	功能	說明
CorpID	企業(yè)的CorpID。	?
AppKey	應(yīng)用憑證AppKey。	?
AppSecret	應(yīng)用憑證AppSecret
AgentID	應(yīng)用憑證中的AgentID。
最大并發(fā)請求數(shù)	同步數(shù)據(jù)時，單次請求同步的用戶數(shù)量。	建議使用保持默認(rèn)數(shù)據(jù)。
啟用掃碼登錄	是否開啟二維碼登錄功能。	有關(guān)掃碼登錄的更多介紹，請見釘釘用戶掃碼登錄。
掃碼登錄 AppId	填寫在釘釘應(yīng)用中創(chuàng)建的QR Code AppId。
掃碼登錄 AppSecret	填寫在釘釘應(yīng)用中創(chuàng)建的QR Code AppSecret。
啟用自動同步	是否開啟自動同步數(shù)據(jù)功能，同步數(shù)據(jù)指的是將釘釘中的用戶數(shù)據(jù)同步到Wyn 中。	-
同步時間間隔	設(shè)置自動同步數(shù)據(jù)的時間間隔，必須填入正整數(shù)，單位“小時”。 輸入非正整數(shù)時，均按1小時計(jì)算。	-

?

我們將 CorpID、AgentId、AppKey和AppSecret信息填入對應(yīng)輸入框中。

并開啟自動同步數(shù)據(jù)功能，將時間間隔設(shè)置為1小時。此時可以直接保存設(shè)置。

?

（圖片來源于Wyn）

?

保存之后系統(tǒng)檢測到您開啟了自動同步數(shù)據(jù)功能（約15分鐘后），會立即進(jìn)行首次的數(shù)據(jù)同步。之后會按照設(shè)置的間隔進(jìn)行自動同步。

為了可以立即將釘釘中的用戶數(shù)據(jù)同步到系統(tǒng)中，我們可手動同步數(shù)據(jù)。

?

（圖片來源于Wyn）

?

提示同步成功。

?

（圖片來源于Wyn）

?

此時整個配置過程基本完成，我們到Wyn 系統(tǒng)中來看一下釘釘用戶的映射情況。

可見釘釘是作為全局下的一個單獨(dú)組織存在。

?

（圖片來源于Wyn）

釘釘中的角色全部直接掛在“釘釘”總組織下。

?

（圖片來源于Wyn）

?

（圖片來源于Wyn）

提示

如您需要在釘釘組織下面添加新的組織、角色和用戶的話，推薦您在釘釘端操作。

因?yàn)橥綌?shù)據(jù)時，會使用釘釘端的最新數(shù)據(jù)覆蓋Wyn 中釘釘組織中的數(shù)據(jù)。

?

在手機(jī)中登錄釘釘，可以在“工作臺”欄中看到自己創(chuàng)建的應(yīng)用。單擊應(yīng)用圖標(biāo)，即可自動登錄Wyn。

按照上面的配置過程完成站點(diǎn)與釘釘?shù)募芍?，釘釘用戶即可在釘?App 端查看 Wyn 站點(diǎn)內(nèi)容。

但此時釘釘用戶還不能如同 Wyn 系統(tǒng)中原有的用戶那樣不經(jīng)過 App 而是直接由 Wyn 登錄頁面進(jìn)行登錄。

那么怎樣做才可以使釘釘用戶可以像Wyn 中的原有用戶一樣直接登錄站點(diǎn)呢?

接下來就為您詳細(xì)介紹具體的配置方法，經(jīng)過配置后，釘釘用戶就可以通過掃碼直接登錄站點(diǎn)。

(1)??文中以舊版釘釘開發(fā)者后臺界面為例，為您介紹。所以在配置之前，請先返回舊版。

?

（圖片來源于Wyn）

(2)? ?在釘釘開發(fā)者后臺選擇“應(yīng)用開發(fā)->登錄”，然后單擊“創(chuàng)建掃碼登錄應(yīng)用授權(quán)”按鈕。

?

（圖片來源于Wyn）

(3)??在彈出的對話框中填寫應(yīng)用授權(quán)信息，包括名稱、描述、授權(quán)LOGO地址和回調(diào)域名。然后單擊右下角的確定按鈕。

其中授權(quán)LOGO會顯示在掃碼后手機(jī)端的登錄確認(rèn)頁面中；回調(diào)域名為 Wyn 站點(diǎn)的域名。

?

（圖片來源于Wyn）

?

?

（圖片來源于Wyn）

(4)??可見已經(jīng)生成了應(yīng)用的?appId?和?appSecret。

?

（圖片來源于Wyn）

(5)? ?來到?Wyn?后臺管理當(dāng)中，進(jìn)入“安全設(shè)置>外部用戶提供程序>釘釘”打開釘釘集成的配置頁面。

將“啟用掃碼登錄”置為“True”。

然后將上一步中生成的?appId?和?appSecret?對應(yīng)填入掃碼登錄 AppId 和掃碼登錄 AppSecret 中。

最后單擊右下角的“保存”按鈕保存設(shè)置。

?

（圖片來源于Wyn）

?

(5)??此時在Wyn 登錄頁面就可以看到釘釘?shù)膱D標(biāo)，單擊出現(xiàn)二維碼。

接下來使用釘釘客戶端掃碼即可登錄站點(diǎn)了。

?

（圖片來源于Wyn）

?

（圖片來源于Wyn）

到這里所有移動端數(shù)據(jù)開發(fā)的重點(diǎn)難點(diǎn)與解決方案都為大家完整展示，大家如果感興趣歡迎自己嘗試一下。

拓展閱讀

[詳解商業(yè)智能“前世今生”，“嵌入式BI”到底是如何產(chǎn)生的？](https://www.grapecity.com.cn/blogs/wyn-how-the-embedded-bi-come-about)

[使用WIX進(jìn)行商業(yè)智能OEM打包](https://www.grapecity.com.cn/blogs/wyn-oem-packaging-with-WIX)

[數(shù)據(jù)可視化分析工具如何在國內(nèi)彎道超車迅速崛起百花齊放？](https://www.grapecity.com.cn/blogs/wyn-data-analysis-tools-how-to-technology-leadership)

?

到了這里，關(guān)于如何在移動端數(shù)據(jù)可視化大屏實(shí)現(xiàn)分析？的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！