前言：大數據時代，以大屏為載體的數據可視化需求日漸增多，數據大屏成為越來越多企業績效展示，報表展示，業務監控等等的一種形式，大屏的上線帶來的是便捷，無需編碼，用戶可以直接將所要呈現的組件拖拽到畫布上，然后進行隨意配置和布局，所見及所得。前段時間我們上線了內部的自己的可視化數據大屏 beta 版本

?

1 前期調研

?

各云服務商也都推出自己的數據大屏整體解決方案，比如阿里云的 datav、騰訊云的騰訊云圖、網易的網易有數、百度的 Sugar，都在給自家產品賦能后推出自己的可視化方案，你可以會有疑惑 🤔，別人有成熟的方案，為啥我們還要自己造輪子？無非一方面考慮的是業務場景的不同，雖然目前服務商已經提供了很多業務場景的大屏模版供用戶選擇，其次是私有化部署成本高等等

?

1.1 調研對象

上一篇關于推薦幾個數據大屏可視化開發工具[1]提到目前國內現有優秀的數據大屏解決方案提供商

• 阿里云（DataV）🔗[2]

• 騰訊云（騰訊云圖（DataV）🔗[3]

• 網易有數（EasyScreen）🔗[4]

• 百度智能云（Sugar）🔗[5]

如果你對目前的報價好奇，下面是百度 Sugar 的報價

1.2 功能解析

調研并體驗了前面提到的解決方案，我對數據大屏功能進行了拆解，大概梳理了一個簡單的數據大屏可視化編輯所需要的功能包括如下

1.3 開源社區現有可視化編輯方案

?

數據大屏 dashboard 本質上跟 H5、Web 等在線頁面可視化編輯的邏輯是相同的，本質上還是拖拽、控件管理、畫布、組件屬性管理、預覽等等，只是數據大屏強調的更多是數據的可視化，重點在圖表通過數據的渲染，下面分享幾個開源社區的可視化編輯解決方案，有需求的童鞋可以參考借鑒

?

• luban(魯班 H5)?🔗[6]

• h5-Dooring?🔗[7]

2.開發

上一節我們拆解了數據大屏的功能模塊，主要分為控件區域、畫布區域、控件屬性配置區域、圖層區管理等等幾個模塊，因為涉及內部的隱私，我這里以網易有數為參照來做展示，大概模塊如下

2.1 控件區域

控件區域包括大屏控件的展示、控件組件的注冊與初始化，控件支持拖拽到畫布等功能，以下是控件區域的交互演示圖 👇

動態圖太大，只能改為靜態

2.1.1 圖表庫的選擇

在調研中，我們參考了魯班 h5 的可視化搭建，發現魯班使用了echart作為圖表控件的渲染圖表庫，可以看鏈接[8]

而我們在圖表庫的選型是使用螞蟻金服的 antv 的G2Plot🔗[9]，而且 antv 也推出基于 G2Plot 的 AntV 在線圖表制作工具chartCube🔗[10]，可以在線演示和預覽不同圖表數據渲染效果

其他諸如文本框、圖片、時間器等等控件都是自定義，如果想看源碼的童鞋可以參考 魯班 h5 的plugins🔗[11]

2.1.2 組件的注冊和初始化

舉個例子注冊一個文本控件，你可能說我可以這樣挨個配置啊，如下所示 👇

但是這種方式如果隨著后期維護的控件多了，導致在畫布中根據類型判斷渲染組件的時候，會有很多冗余代碼，這個時候我們可以用通過 vue 的is屬性動態渲染組件操作，如下所示

2.1.3 關于拖拽到畫布

關于控件的拖拽，使用的是vuedraggable?鏈接 🔗[12]，它是基于Sortable.js實現的 vue 拖拽插件, 實現如下

🌲 拓展閱讀

2.2 畫布模塊

畫布是用來放置控件，作為控件拖拽拉伸的區域限制。畫布模塊設置背景圖片或背景色設置、控件的編排、畫布比例的設置、響應式畫布、全屏展示等等等。

2.2.1 響應式畫布

?? 編輯模式

當我們拉伸調整瀏覽器窗口視圖大小的時候，我們通過監聽onresize事件，onresize 事件會在窗口或框架被調整大小時發生，一般畫布的比例設置大多以16:9或者4:3兩種比例居多, 我們看看下面這個效果

編輯模式的畫布，我們這里以 16:9 比例為例子, 以畫布區域的寬度更新來計算，不過這種效果欠佳

ps: 我們通過判斷是否在全屏展示模式下，如果不是，則給畫布視圖保留一部分空白區域

📺 預覽模式

編輯模式我們是允許可以有滾動條的出現， 但預覽模式下的 dashboard 是用于展示，通常是不允許滾動條出現的。那這種場景我們如何實現，我理想效果是無論窗口怎么變，我們的內容都保持原來的比例，并盡量占滿窗口

我參考了這個方案:?大屏上的全屏頁面的自適應適配方案[13]

2.2.2 全屏展示

數據大屏最終的展現形式是全屏展示，本質上就是只顯示畫布區域，隱藏所有編輯區域和配置區域，我們通過?isEdit來控制除畫布之外的其他區域的是否展示

• 如何對全屏事件監聽

通過監聽fullscreenchange事件，退出全屏則重新計算畫布視圖大小

ps: 出于安全考慮全屏只能從用戶操作的事件觸發，而不能用代碼直接觸發，會報錯

2.2.3 大屏快照

我們想給大屏生成一張圖片，而快照的生成，使用的是domtoimage🔗[14],可以將 code 轉化為圖片，同類工具還有html2canvas，對比中 domtoimage 無論在圖片質量還是拓展方面都更勝一籌，下面是具體的使用

2.2.4 控件大小拖拽

?

上一節我們提過，畫布其實是由控件區域拖拽構成的，畫布中有我們自定義的控件，而這些控件應該是可以是自定義進行大小拖拽，我們?fork?了vue-draggable-resizable🔗[15]，然后在它的基礎上做一些調整，當然你也可以自己造輪子。

?

使用如下 👇，包括其中一些 api 的使用

• draggable: 用來識別是否為編輯模式，編輯模式控件不可移動

• dragstop: 監聽控件拖拽結束，這個時候我們畫布中控件位置信息都改變了，這個時候需要跟右側工具欄數據同步，用來做更新工具攔表單數據

• resizstop: 縮放結束后再進行接口請求更新數據

• delete: 我們在 vue-draggable-resizable 原有基礎上添加的keyEvent事件用來判斷鍵盤的 delete 事件

• activated: 監聽點擊控件，進行選中處理

2.2.5 畫布縮放

?

控件支持縮放，畫布應該也是支持縮放的，我們定義 scale，可以進行操作改變其縮放數值，然后通過計算一個 zoomstyle 來改變畫布的屬性

?

3.1 控件配置區域

?

控制配置區域分為兩個模塊，一個模塊是用來管理畫布中控件的屬性，其中包括高度、寬度、大小、字體大小、字體類型等等這些基礎屬性，像其他控件，文本有對齊方式、圖片有圖片上傳模塊、填充模式，時鐘有時間格式選擇等等，這里不一一羅列。本質上是動態表單的一種配置，感興趣的童鞋可以看看之前的《前端那些事》從 0 到 1 開發動態表單[16]，其次是數據管理

?

3.1.1 數據管理

?

通常我們數據管理是用來配置控件諸如圖表的數據，一般支持 json 靜態數據、csv 表格數據導入、api 接口動態配置。

?

下期跟大家聊聊關于數據管理如何實現、圖層是如何進行管理、以及使用中的一些心得體會.

前言：這是一篇遲到的下集，上次分享了如何從0到1搭建一個可視化數據大屏，介紹了數據搭配的前期調研、控件區域的開發、畫布模塊的開發等等。上篇的鏈接點我???? 從0到1開發可視化數據大屏（上） 而下集主要圍繞.控件管理模塊、數據管理模塊、圖層管理模塊這幾個模塊來介紹。

?
1.控件管理區域
?
控制配置區域分為兩個模塊，控件屬性配置模塊是用來管理畫布中控件的屬性，其中包括高度、寬度、大小、字體大小、字體類型等等這些基礎屬性，像其他控件，文本有對齊方式、圖片有圖片上傳模塊、填充模式，時鐘有時間格式選擇等等，其次是數據管理模塊，主要用來配置控件諸如圖表的數據，一般支持json靜態數據、csv表格數據導入、api接口動態配置等

?
1.1 控件屬性配置模塊
?
基于內部源碼不開源的緣故，我們通過開源案例來進行分析，???? 下圖為開源的表單生成器解決方案 form-generator ???? ，紅色邊框區域本質上就是配置區域，只不過是表單屬性配置

?

而數據大屏的控件屬性配置模塊同理，本質上都是組件屬性可視化修改，是實現將json配置展現出來，實現自定義的表單設置，我們知道每個控件都有自己的一個默認配置，然后再進行自定義修改。

下面我們通過解析這個開源項目，來介紹如何搭建控件屬性配置模塊

上圖是屬性配置中按鈕類型的屬性配置，通過類型屬性區分來展示不同的配置模塊。更多屬性配置參考可點擊???? 鏈接????

?
?????????：啊樂同學：那屬性配置區域和畫布區域的控件、以及圖層區域是如何聯動的？

?
主要是包含以下幾個方面：

1.2.1 控件區域帶動的圖層區域、畫布區域的聯動
?
當從控件區域拖拽控件到畫布，通過拷貝控件一份默認的配置，我們上節提到拖拽庫使用的是vuedraggable，其中有個clone的api，當對控件進行拖拽時，我們可以對控件區域屬性進行拷貝（默認屬性）. 至于畫布區域、配置區域、圖層區域的聯動，主要是監聽控件區域vuedraggable的onEnd事件來跟其他模塊進行聯動，比如創建一個新的圖層，大致流程實現如下????

?

image.png
1.2.2 畫布區域帶動的圖層區域、屬性配置區域的聯動
?
點擊畫布其中的一個控件，right-panel區域展示為該控件的屬性配置模塊，通過上文提到的activeDate來傳遞，與該開源表單生成器不同，我在上集也提到畫布的拖拽使用的是vue-draggable-resizable, 基于需要支持大小自由拖拽，通過監聽其activated事件，來捕獲畫布中選中控件事件，以此來變更屬性配置區域

?

carbon (7).png
當修改屬性配置區域，畫布中控件視圖發生變更，再或者手動改變畫布區域，同步屬性配置區域的修改，本質上畫布區域跟屬性配置區域是雙向數據流，無論其中哪個區域數據修改，都會同步到另一個區域

?
?????????：啊樂同學：你通過activated作為props讓畫布區域和控件區域做數據流通，我記得props是單向流向，而且如果子組件控件區域修改了activated這個prop, Vue會在瀏覽器的控制臺中發出警告吧？

?
答：是的，vue官網中介紹：prop 使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中，但是反過來則不行。這樣會防止從子組件意外變更父級組件的狀態，從而導致你的應用的數據流向難以理解。

但是當父組件的傳值是數組或者對象時，子組件中不僅能夠直接修改，還不會報錯，在子組件中改變這個對象或數組本身將會影響到父組件的狀態。

原因是：父組件傳遞給子組件的，實際上只是一個引用地址，當子組件修改這個對象時，是真的修改了在堆空間中保存的數值，當然父組件中的值也會發生變化，但是引用地址沒有進行修改

1.2 數據源配置模塊
?
通常我們數據管理是用來配置控件諸如圖表的數據，一般支持json靜態數據、csv表格數據導入、api接口動態配置，而對于一些常見模塊，文本、圖片等，該tab是不展示。視圖參考如下????。重點聊聊api數據源

?

image.png
1.2.1 關于api數據源
?
通過定義請求方式、訪問的api、請求頭header等，維護好不同的數據源之后，通過在控件屬性配置區域綁定數據源dataSourceUrl，然后綁定過程中發出請求，同步到數據響應結果面板，最終展示到控件在畫布區域視圖的變更。

?

?
?????????：啊樂同學：那你這樣，數據還是靜態的，最終數據大屏也是靜態的數據展示？

?
答：我們是通過將數據源的dataSourceUrl以及輪訓時間間隔等配置綁定到控件屬性中，然后當用戶從編輯模式切換到全屏預覽模式下，再發出請求，大致原理參考如下????

image.png
????思考：如果請求很多的情況，如何優化？

2.圖層管理模塊
?
上文我們提及了圖層受控件區域的聯動，但它本質影響的最多的是畫布區域，比如復制圖層、刪除圖層等，會對畫布區域進行視圖更新，下面是圖層區域的縮略展示????

?

image.png
?
?????????：啊樂同學：圖層是怎么去影響畫布區域的堆疊順序？

?
答：圖層本質上也是支持上下拖拽移動的，同樣也是基于vuedraggable, 但是不同的是，當拖動上下層級的時，會影響到z-index的改變，也就是設置元素的堆疊順序（來調整畫布中控件的堆疊順序）實現如下????

?
?????????：啊樂同學：圖層右擊出現的那個操作面板是如何實現的？

?
答：可以通過監聽vue的@contextmenu.prevent事件，是h5的新特征，不過兼容性比較差

請你喝杯???? 記得三連哦～
1.閱讀完記得給???? 醬點個贊哦，有???? 有動力

2.關注公眾號前端那些趣事，陪你聊聊前端的趣事

3.文章收錄在Github frontendThings 感謝Star?
————————————————
版權聲明：本文為CSDN博主「樹醬」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/u013655559/article/details/116549995

總結

以上是生活随笔為你收集整理的从0到1开发可视化数据大屏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。