ECharts数据可视化项目【1】

数据可视化

在这里插入图片描述
分析一下我们的项目的布局情况

我们的项目分成两个大的盒子，上下各一个，下面的盒子又分成左中右三个。

下面开始我们的项目：
在这里插入图片描述
新建上述文件夹和index.html文件
再到css文件夹中新建index.less文件，保存以后通过easyless插件就会自动生成对应的css文件
再将css文件引入到html文件中，就可以进行我们想要的内容了。

首先要进行css的初始化在index.less里面

//css 初始化
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box; //css3的盒子模型
}
1
2
3
4
5
6

我们这个页面采取的是rem+flexible.js适配方案来做，所以我们先来说一下案例的适配方案
先将flexible.js引入到项目中

<body>
    <script src="js/flexible.js"></script>
</body>
1
2
3

看它是否引入成功，我们只要能看到html中的font-size就可以了，它可以根据浏览器的尺寸自动改变文字的大小，只要有这个大小的改变，就说明flexible引入成功。
在这里插入图片描述
我们的设计稿是1920px的，我们可以将其划分为不同的等分，flexible默认将其划分为10等分

function setRemUnit() {
    var rem = docEl.clientWidth / 10;
    docEl.style.fontSize = rem + "px";
  }
1
2
3
4

也就是说它将屏幕平均分成10等分，也就是1920px/10=192px，也就是说1rem就是192像素了。但是这个尺寸对于我们这个项目来讲还是太大了。所以我们可以将其划分的更多一些。我们可以将其划分为24等分，也就是1rem=80px。
这个rem非常麻烦，我们又不想每次都去相除，所以我们还需要用到cssrem插件，在配置中再将下面这个改为80，它会自动的帮我们生成rem
在这里插入图片描述
那么怎么查看它有没有被应用呢？
我们可以新建一个div标签

可以查看页面效果，最后的效果就是这个div盒子随着屏幕的大小改变而改变。

综上本案例适配方案如下

设计稿是1920px
1. flexible.js 把屏幕分为 24 等份
2. cssrem 插件的基准值是 80px
  
  插件-配置按钮—配置扩展设置–Root Font Size 里面设置。
  
  但是别忘记重启vscode软件保证生效

相关阅读:
vue2踩坑之项目：生成二维码使用vue-print-nb打印二维码
python | 巧用正则表达式
【语言模型】深入探索语言模型中的神经网络算法：原理、特点与应用
MongoDB安装及开发系例全教程
LoadBalance 负载均衡
Android 基础知识3-1项目目录结构
【SSL 1458】zzzyyds（DP）
面向对象【递归方法】
【银河麒麟V10】【桌面】火狐浏览器设置主页不生效
向NS-3添加新模块_ns3.35添加新模块_ns3.35以及更早版本添加新模块

原文地址：https://blog.csdn.net/qq_40992225/article/details/126684073