可视化数据大屏设计（一）概括

概述

这是在公司做的第一个数据方向的项目（其实自己也逐渐想多学习点大数据的知识），这次也算是充当一个技术挑战（第一次使用React）吧。这次主要记录一下在前端如何设计和开发数据大屏功能。

技术栈

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

效果展示

这是整个页面的页面布局方式；参考了 百度Sugar、阿里DataV、腾讯的云图还有一些国内的厂商做的（先模仿再超越😁）

页面拆解

整个页面可以拆解成4个部分；

• 菜单按钮区
  主要用来展示整个页面的功能项

• 图层管理区
  展示页面上所有的图层

• 图层编辑器
  每个图层涉及到的可编辑内容项

• 组件展示区
  各个组件在的展示区域

操作步骤：

通过添加组件图表中的组件项（组件就是各种图表的组合（基于百度echarts做的）、也是基于可配置化生成的，暂时就不提供给各位看了，知道怎么回事就行，感兴趣可以看一下FindBI）或者添加一些图形项（如添文本标签、视频、时间和一些装饰项）到页面上，单击每一个图形项都会在右侧出现一些相应的配置项；通过调整配置项就可以控制图表在图层中的各种显示。

所有展示的图形都是基于模块绝对定位做的；每一个模块都会存储它的大小以及它的位置；

整体的设计过程放到下一章节再讲，下章见。