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软件保证生效

相关阅读:
【Python百日进阶-WEB开发】Day179 - Django案例：11短信验证码
多模态模型文本预处理方式
(unicode error) ‘unicodeescape‘ codec can‘t decode bytes in position 2-3
『吴秋霖赠书活动｜第四期』《Spring Boot微服务实战》
【进阶版】机器学习之神经网络与深度学习基本知识和理论原理（07）
面试突击77：Spring 依赖注入有几种？各有什么优缺点？
记一次针对excel导出的优化(实际开发遇到的情况)
常见开源协议介绍
Google Coding style
分享一个项目：go `file_line`，在编译期得到源码行号，减少运行期runtime消耗

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