16、vue3（十六）：数据大屏（一）：尺寸适配，水球图，柱形图，饼状图、图例

目录

一、尺寸适配解决方案

1.vw和vh

2.scale

二、数据大屏顶部搭建

1.思路分析

2.插件安装

3.代码实现

4.效果展示

三、数据大屏水球图效果

1.echarts引入，水球图插件安装

（1）echarts的官网地址

（2）引入echarts插件

2.代码实现

3.效果展示 

四、 数据大屏男女比例柱形图

1.代码实现

2.效果展示

五、数据大屏饼状图+图例的实现

1.代码实现

2.效果展示

六、感谢支持

---

一、尺寸适配解决方案

1.vw和vh

数据大屏最大的问题是适配不同尺寸屏幕的问题，因此我们宽度不能写死px，而是使用vw和vh。

vw：宽度

vh：高度

铺满全屏分别是：100vw，100vh

但是他有一个问题：不能对文字进行自适应

2.scale

我们现在屏幕中心找一个点，规定要对应的宽度和高度。当屏幕变化的时候计算变化比例，然后对应的位置和文字进行一定比例的缩放

缺点：如果宽度或者高度拉的很大，会有一部分的样式漏出底色。其次，快速缩放会有白色空白显示

优点：能够解决文字不能缩放的问题

二、数据大屏顶部搭建