var echartsWarp= document.getElementById('echartsWarp');

var resizeWorldMapContainer = function ()

{

  //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽

  echartsWarp.style.width = window.innerWidth+'px';

  echartsWarp.style.height = window.innerHeight+'px';

};

resizeWorldMapContainer ();//设置容器高宽

window.onresize = function ()

{

  //用于使chart自适应高度和宽度

  resizeWorldMapContainer();//重置容器高宽

  myChart.resize();

};

js 自适应容器宽高的更多相关文章

  1. 容器宽高不确定,图片宽高不确定,css如何实现图片响应式?

    图片响应式 在响应式开发中最烦恼的应该就是图片了,虽然图片设置max-width: 100%;可以让图片宽度占满容器,但是高度就不能自适应了.如果将容器高度限死,那么我们就要使用媒体查询来控制容器的高 ...

  2. js实现未知宽高的元素在指定元素中垂直水平居中

    js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...

  3. js实现字体和容器宽高随窗口改变

    用于字体大小和容器的宽高字体和宽高设为rem就可以了 var html = document.documentElement; function fonts(){ var hW = html.offs ...

  4. js动态添加iframe,自适应页面宽高

    function showIframe(url,w,h){ //添加iframe var if_w = w; var if_h = h; $("<iframe width='" ...

  5. JS实现图片宽高的等比缩放

    关于图片宽高的等比缩放,其实需求就是让图片自适应父容器的宽高,并且是等比缩放图片,使图片不变形. 例如,需要实现如下的效果: 要实现上面的效果,需要知道图片的宽高,父容器的宽高,然后计算缩放后的宽高. ...

  6. js获取各种宽高方法

    屏幕的有效宽高: window.screen.availHeightwindow.screen.availWidth 网页可见区域宽:document.body.clientWidth 网页可见区域高 ...

  7. JS获取网页宽高方法集合

    JS获取网页宽高等方法的集合:document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高 document.body ...

  8. JS/jQ常用宽高及应用

    关于js的宽高,随便一搜就是一大堆.这个一大堆对我来说可不是什么好事,看的头都大了.所以今天就总结了一些比较会常用的,并说明一下应用场景. 先来扯一下documentElement和body的微妙关系 ...

  9. React组件自适应窗口宽高

    很多时候我们需要组件能够根据窗口变化改变宽高,有时候可以使用css,有时候需要随数据调整则使用js计算. 比如说,当我们在页面中放置一个iframe时,我们希望它的宽高随着其父元素or窗口的变化而变化 ...

随机推荐

  1. nginx 自启动

    转载:https://www.cnblogs.com/cxscode/p/8262319.html 安装Nginx 下载windows版nginx (http://nginx.org/download ...

  2. Redmine 和GitBlit仓库服务器整合

    运行环境: RedMine: 4.0.4 Git 仓库: Gitbilt V1.8.0 必须: Redmine 安装并可运行 Redmine运行的主机里面已经安装了 Git,因需要在命令行中运行 gi ...

  3. 解决小程序sessionid不一致

    由于小程序端两次请求的 sessionid 不一致, 导致后端无法取得 session,解决办法:在登录时获取sessionid //第一次请求登录接口时保存到sessionid中 success: ...

  4. Eclipse+Marven + spring mvc 新建一个 Hello world 项目

    1. 打开Eclipse,菜单 File->New->Marven Project.               2. 点击 Next,                3. 选择 marv ...

  5. 8-26接口压力测试-1Dubbo接口测试

    1. Dubbo Dubbo是一个分布式服务框架,提供了高性能和透明化的RPC(Remote Procedure Call Protocol)远程服务调用方案和服务治理方案. SOA:面向服务的架构 ...

  6. 用jQuery实现鼠标移动切换图片动画

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. 全球首个开放应用模型 OAM 开源

    业界要闻 全球首个开放应用模型 OAM 开源 2019 年 10 月 17 日,阿里巴巴合伙人.阿里云智能基础产品事业部总经理蒋江伟(花名:小邪)在 Qcon 上海重磅宣布,阿里云与微软联合推出开放应 ...

  8. 依赖背包优化——hdu1561

    傻逼依赖背包的优化 #include<bits/stdc++.h> using namespace std; #define N 205 ]; int head[N],tot,n,m,a[ ...

  9. 利用Delphi全面控制Windows任务栏

    使用Windows95/NT/98操作系统的用户知道:Windows正常启动后,在电脑屏幕下方出现一块 任务栏.从系统功能角度而言,整个任务栏包括几个不同的子区域,从左至右依次是:开始 按钮.应用程序 ...

  10. 面试总结【css篇】- 盒子模型

    题目:谈谈你对CSS盒模型的认识 (1) 基本概念:标准模型+IE模型   (2) 标准模型和IE模型区别 标准模型和IE模型的区别,就是宽度和高度的计算方式不同. 标准模型的宽度指的就是conten ...