页面初始化获取div高和宽、窗口变化事件

最新推荐文章于 2024-05-23 11:15:50 发布

qq_36354609

最新推荐文章于 2024-05-23 11:15:50 发布

阅读量2.5k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_36354609/article/details/77862824

本文介绍了一种使ECharts图表自适应不同屏幕尺寸的方法。通过获取父级div宽度并计算分配给图表div合适的宽度，实现了初始加载时的自适应效果。同时，利用onresize事件确保在调整浏览器窗口大小时也能保持良好的视觉体验。

1.最近在做一个项目里面的页面设计要满足不同屏幕的要求，即做到适应。但是有个问题里面使用的百度echarts图表所在的div的高度和宽度就要

设置一定，这样在开始的时候设定就很难满足所有屏幕的要求。

那么就可以可以将外层父级的div的宽度设置100%，通过初始化页面获取外层div的宽度，高度比较好解决，可以设定死，不变的。

2.所以在初始化页面的时候获取外层div的宽度，通过计算将合适的宽度赋值给这个图表空间所在的div，就可以了。

3.代码如下：

页面的初始化事件：onload="init()"

<!-- 父级div -->
<div
class="st-content"
id="st-content">
<div
class="st-con-echarts">
<div
class="tabs-container">
<div
class="tabs-head">
<span>用户新增</span>
<ul
class="nav nav-tabs">
<li
class="active"><a
data-toggle="tab"
href="#tab-1"
aria-expanded="true">最近一个月</a>
</li>
<li
class=""><a
data-toggle="tab"
href="#tab-2"
aria-expanded="false">最近一年</a>
</li>
</ul>
</div>
<div
class="tab-content">
<div
id="tab-1"
class="tab-pane active">
<!-- 图表所在的div -->
<div
class="panel-body"
id="echarts1">
</div>
</div>
<div
id="tab-2"
class="tab-pane">
<div
class="panel-body"
id="echarts2">
</div>
</div>
</div>
</div>
</div>

4.高度和宽度的获取和设定图表所在的div的宽度，高度设置一定了。

页面的初始化事件：

function
init() {
getWidth();
// getChart();
};

//获取和设定高度 
function
getWidth() {
var fWidth
= document.getElementById("st-content").offsetWidth;
var fHeight
= document.getElementById("st-content").offsetHeight;
console.log(fWidth);
console.log(fHeight);
var eWidths
= document.getElementsByClassName("panel-body");
for (var i
= 0; i
< eWidths.length; i++)
 {
$("#echarts"
+ i).css("width", (fWidth
/ 2)
- 20);
}
};

百度echarts绘制图表请参考官网的内容。

5.那么问题来了，这是的高度和宽度可以根据当前浏览器的高度和宽度设定了，当你再改变浏览器的窗口的时候这个还是没有做到适应屏幕。

高度和宽度并没有再次发生变化。

这就需要改变当前浏览器窗口的触发事件了：onresize()

window.onresize
= function() {
getWidth();
};

这样当当前窗口的大小发生变化时：里面的内容也会发生相应的变化。