这次来使用 React 做一个大屏数据展示，也就是所谓的「大屏可视化项目」
正好复习一下 React
简单的可视化，其实是很简单的，但是复杂的可视化，又是特别特别复杂，复杂到需要去读论文，所以这个项目是属于比较易上手的
「易上手」：不要喷
对了，涉及到的数据，都不是真实数据，我也没做一些数据的请求，我只是纯属把数据展示在页面中，只展示前端的能力，后端干的活，我就不展示了
第一关
- 在哪找素材
- 怎么做适配
- 不能用像素怎么办
- 使用 Grid 布局
- 如何使用 echarts
- 如何实时更新数据
- 测试 & 修复
如何适配屏幕
适配算法
- Wp 为页面有效宽度，Hp 为页面有效高度
- 页面左右居中，上下居中，四周留白即可
- 然后在 head 里用 JS 设置 1rem = Wp / 100
rem 计算公式
那么如何适配一个 div
假设一个 div 在设计稿中的宽度为 x，在大屏中宽度为 y，那 x,y 之间的数值关系是多少呢？
我们不能使用像素，我们使用 rem：
代码
使用 react-router
大屏适配- 套用公式
先看看逻辑，我知道代码可以简化
用 rem 代替像素
制作 header
使用 Flex 和 Grid 布局
- 在父元素上加 display: flex 和 flex-direction: column;
- 在子元素上加 flex: 1；
即可让子元素的高度占满父元素
细节很多，具体可以看：这条commit
添加空隙
制作背景和边框
没有想象力，css 是很难写的
加了css后，目前是这个样子，重点看边框
图标制作
我使用 echarts：官方文档
看文档就能就改了
代码重构是随时进行的
期间对代码做了很多优化调整，详情见 commit
如何引入地图
谷歌搜索 china geo json
遇到个 TS 报错
我们只需在 tsconfig.json 中添加这一项
如何更新数据
其实也只是模拟更新数据，实现出数据在动态变化的样子
把数据用随机数来设置，然后使用 setInterval() 计时器设置每一秒更新渲染，这样实时更新的效果就出来了
发布网站，让别人看到
我部署到国内的代码托管平台，比如码云，原因：国内浏览会比较快
运行 yarn build --base ./
然后我写了个一键部署的脚本
完。
