概述
这是在公司做的第一个数据方向的项目(其实自己也逐渐想多学习点大数据的知识),这次也算是充当一个技术挑战(第一次使用React)吧。这次主要记录一下在前端如何设计和开发数据大屏功能。
技术栈
SpringBoot+ React(typescript+React+redux-saga) + MySQL
效果展示
这是整个页面的页面布局方式;参考了 百度Sugar、阿里DataV、腾讯的云图还有一些国内的厂商做的(先模仿再超越😁)
页面拆解
整个页面可以拆解成4个部分;
-
菜单按钮区
主要用来展示整个页面的功能项 -
图层管理区
展示页面上所有的图层 -
图层编辑器
每个图层涉及到的可编辑内容项 -
组件展示区
各个组件在的展示区域
操作步骤:
通过添加组件图表中的组件项(组件就是各种图表的组合(基于百度echarts做的)、也是基于可配置化生成的,暂时就不提供给各位看了,知道怎么回事就行,感兴趣可以看一下FindBI)或者添加一些图形项(如添文本标签、视频、时间和一些装饰项)到页面上,单击每一个图形项都会在右侧出现一些相应的配置项;通过调整配置项就可以控制图表在图层中的各种显示。
所有展示的图形都是基于模块绝对定位做的;每一个模块都会存储它的大小以及它的位置;
整体的设计过程放到下一章节再讲,下章见。