可視化數據大屏設計（一）概括

概述

這是在公司做的第一個數據方向的項目（其實自己也逐漸想多學習點大數據的知識），這次也算是充當一個技術挑戰（第一次使用React）吧。這次主要記錄一下在前端如何設計和開發數據大屏功能。

技術棧

SpringBoot+ React（typescript+React+redux-saga） + MySQL

效果展示

這是整個頁面的頁面佈局方式；參考了 百度Sugar、阿里DataV、騰訊的雲圖還有一些國內的廠商做的（先模仿再超越😁）

頁面拆解

整個頁面可以拆解成4個部分；

• 菜單按鈕區
  主要用來展示整個頁面的功能項

• 圖層管理區
  展示頁面上所有的圖層

• 圖層編輯器
  每個圖層涉及到的可編輯內容項

• 組件展示區
  各個組件在的展示區域

操作步驟：

通過添加組件圖表中的組件項（組件就是各種圖表的組合（基於百度echarts做的）、也是基於可配置化生成的，暫時就不提供給各位看了，知道怎麼回事就行，感興趣可以看一下FindBI）或者添加一些圖形項（如添文本標籤、視頻、時間和一些裝飾項）到頁面上，單擊每一個圖形項都會在右側出現一些相應的配置項；通過調整配置項就可以控制圖表在圖層中的各種顯示。

所有展示的圖形都是基於模塊絕對定位做的；每一個模塊都會存儲它的大小以及它的位置；

整體的設計過程放到下一章節再講，下章見。