從0到1開發可視化數據大屏（上）

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

1 前期調研

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

1.1 調研對象

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

阿里雲（DataV）🔗
騰訊雲（騰訊雲圖（DataV）🔗
網易有數（EasyScreen）🔗
百度智能雲（Sugar）🔗

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

1.2 功能解析

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

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

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

luban(魯班 H5) 🔗web
h5-Dooring 🔗面試

2.開發

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

2.1 控件區域

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

2.1.1 圖表庫的選擇

在調研中，咱們參考了魯班h5的可視化搭建，發現魯班使用了echart做爲圖表控件的渲染圖表庫，能夠看連接

而咱們在圖表庫的選型是使用螞蟻金服的antv的G2Plot🔗，並且antv也推出基於G2Plot的AntV在線圖表製做工具chartCube🔗，能夠在線演示和預覽不一樣圖表數據渲染效果

其餘諸如文本框、圖片、時間器等等控件都是自定義，若是想看源碼的童鞋能夠參考魯班h5的plugins🔗

2.1.2 組件的註冊和初始化

舉個例子註冊一個文本控件，你可能說我能夠這樣挨個配置啊，以下所示👇 可是這種方式若是隨着後期維護的控件多了，致使在畫布中根據類型判斷渲染組件的時候，會有不少冗餘代碼，這個時候咱們能夠用經過vue的is屬性動態渲染組件操做，以下所示

2.1.3 關於拖拽到畫布

關於控件的拖拽，使用的是vuedraggable 連接🔗，它是基於Sortable.js實現的vue拖拽插件, 實現以下

🌲拓展閱讀

2.2 畫布模塊

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

2.2.1 響應式畫布

✏️ 編輯模式

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

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

ps: 咱們經過判斷是否在全屏展現模式下，若是不是，則給畫布視圖保留一部分空白區域

📺 預覽模式

編輯模式咱們是容許能夠有滾動條的出現，但預覽模式下的dashboard是用於展現，一般是不容許滾動條出現的。那這種場景咱們如何實現，我理想效果是不管窗口怎麼變，咱們的內容都保持原來的比例，並儘可能佔滿窗口

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

2.2.2 全屏展現

數據大屏最終的展示形式是全屏展現，本質上就是隻顯示畫布區域，隱藏全部編輯區域和配置區域，咱們經過 isEdit來控制除畫布以外的其餘區域的是否展現

如何對全屏事件監聽

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

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

2.2.3 大屏快照

咱們想給大屏生成一張圖片，而快照的生成，使用的是domtoimage🔗,能夠將code轉化爲圖片，同類工具還有html2canvas，對比中domtoimage不管在圖片質量仍是拓展方面都更勝一籌，下面是具體的使用

2.2.4 控件大小拖拽

上一節咱們提過，畫布實際上是由控件區域拖拽構成的，畫布中有咱們自定義的控件，而這些控件應該是能夠是自定義進行大小拖拽，咱們fork了vue-draggable-resizable🔗，而後在它的基礎上作一些調整，固然你也能夠本身造輪子。

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

draggable: 用來識別是否爲編輯模式，編輯模式控件不可移動
dragstop: 監聽控件拖拽結束，這個時候咱們畫布中控件位置信息都改變了，這個時候須要跟右側工具欄數據同步，用來作更新工具攔表單數據
resizstop: 縮放結束後再進行接口請求更新數據
delete: 咱們在vue-draggable-resizable原有基礎上添加的keyEvent事件用來判斷鍵盤的delete事件
activated: 監聽點擊控件，進行選中處理

2.2.5 畫布縮放

控件支持縮放，畫布應該也是支持縮放的，咱們定義scale，能夠進行操做改變其縮放數值，而後經過計算一個zoomstyle來改變畫布的屬性

3.1 控件配置區域

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

3.1.1 數據管理

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

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

🌲醬往期文章：

請你喝杯🍵 記得三連哦～

1.閱讀完記得給🌲 醬點個贊哦，有👍 有動力

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

3.文章收錄在Github frontendThings 感謝Star✨