可视化大屏实战项目

1：如何找素材：

image.png

2：如何适配屏幕：

image.png

Wp 表示紫色区域的宽度

image.png

记三个公式Wp是什么？ / Hp是什么？ / 1 rem=Wp/100？

3：rem 计算公式：

如何适配一个div：

假设一个div在设计稿中的宽度是x，在大屏中的宽度是y

image.png

页面宽度就等于100个rem

4：通过在index.html中写上设备宽度和设备高度，从而算出一些数据

image.png

然后再在head里面用JS设置1rem = Wp/100

成品：这样布局

image.png

5：写header

这里引入图片的header部分，就有这样的，但是ts这个时候报了错，说它不认识png

image.png

然后呢，就需要改一下

（1）在src里面新建一个文件，文件名是custom.d.ts （文件名无所谓，但是必须得是d.ts来结尾的）然后输入右边内容

image.png

image.png

（2）加了$，加了url，才是真正的css

image.png

（3）cover意思就是把整个div都给cover住

image.png

无论div怎么变，后面的背景都会被cover住

6：使用 Flex 和 Grid 布局

image.png

image.png

grid布局：

image.png

7：添加空隙：

image.png

如果空隙不合适，可以通过padding margin在里面去加

8：制作背景和边框：

阴影是可以无限添加的：

image.png

9：用echarts插入柱形图

（1）在package.json里面已经写好了echarts，现在要做的就是应用它

image.png

把ref和div进行一个结合，在挂载之后，用divref.current去把它打印出来

这里的current就是我们要用的div（看第4行、第6-10行代码）

image.png

（2）ECharts----去除图表周围空白的部分（减少空白区域的大小）

image.png

（3）注意这里的pageWidth并不能直接挂在window上面

image.png

image.png

所以 需要改一下

10：记得要进行代码重构：

写代码时，一旦发现代码行数超过一定的范围，就要进行重构

image.png

11：给柱形图添加渐变：

image.png

12：制作footer

image.png

13：制作chart3 折线图

14：制作chart4

image.png

面积区域是如何做出来的呢？

image.png

然后面积区域那里写了一个渐变

image.png

15：制作chart5：表格

image.png

image.png

16：制作chart6：地图

image.png

image.png

17：制作echarts7：饼图

image.png

18：实时更新数据：

多一像素少一像素就可能会导致右侧有滚动条

是展示前端功底 如果是在公司中，那就会请求公司的数据库。

19：部署上线：让面试官看到你的项目

自行预览：yarn dev

给别人看：yarn build --base ./