ECharts数据可视化项目【1】

最新推荐文章于 2022-12-06 23:35:06 发布

纵有千堆雪与长街

最新推荐文章于 2022-12-06 23:35:06 发布

阅读量1.5k

点赞数

分类专栏： Echarts数据可视化项目文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_40992225/article/details/126684073

版权

Echarts数据可视化项目专栏收录该内容

11 篇文章 4 订阅

订阅专栏

数据可视化

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

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

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

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

//css 初始化
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box; //css3的盒子模型
}

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

<body>
    <script src="js/flexible.js"></script>
</body>

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

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

也就是说它将屏幕平均分成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软件保证生效

纵有千堆雪与长街

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
ECharts数据可视化项目【1】

分析一下我们的项目的布局情况我们的项目分成两个大的盒子，上下各一个，下面的盒子又分成左中右三个。下面开始我们的项目：新建上述文件夹和index.html文件再到css文件夹中新建index.less文件，保存以后通过easyless插件就会自动生成对应的css文件再将css文件引入到html文件中，就可以进行我们想要的内容了。首先要进行css的初始化在index.less里面我们这个页面采取的是rem+flexible.js适配方案来做，所以我们先来说一下案例的适配方案。
复制链接

扫一扫