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. Keil5-建立第一个STM32工程

    此致:特别感谢作者Lomo-chen所写的文章给我的帮助,我尝试做了一下,成功了,今天整理一下. 一.建立文件夹: 1.在桌面或其他盘建立一个文件夹,此处名称为Test,用来存放工程程序. 2.在Te ...

  2. 从零开始搭建系统1.5——Redis安装及配置

    1.在/usr/目录下创建redis目录 [root@localhost usr]# mkdir redis 2.下载安装包 wget http://download.redis.io/release ...

  3. php 连接mysql 主机 localhost,显示 No such file or directory

    打开 php.ini文件,找到这1行 mysql.default_socket 然后将它修改为 mysql.default_socket=/path/to/mysql.sock /path/to/my ...

  4. notepad++去换行(简单、快捷)

    文本处理问题 这个方式可以快捷处理, 不用Linux命令, linux 与window之间的文件转换很烦人, 这个方法可以处理

  5. Web API 接口参考

    Web API 接口参考:https://developer.mozilla.org/zh-CN/docs/Web/API

  6. StringUtils工具类常用api <转>

    该工具类是用于操作Java.lang.String类的. StringUtils类与String类的区别在于:此类是null安全的,即如果输入参数String为null,则不会抛出NullPointe ...

  7. java script 基本函数

    Math.random()    是令系统随机选取大于等于 0.0 且小于 1.0 的伪随机 double 值. 日期时间函数(需要用变量调用):var b = new Date();      // ...

  8. NX二次开发-UFUN工程图插入PNG图片UF_DRF_create_image_from_file

    #include <uf.h> #include <uf_drf.h> UF_initialize(); //插入PNG char* file_name = "D:\ ...

  9. NX二次开发-UFUN获取当前导出CGM选项设置UF_CGM_ask_session_export_options

    文章转载自唐康林NX二次开发论坛,原文出处: http://www.nxopen.cn/thread-126-1-1.html 刚才有同学问到这个问题,如果是用NXOpen来做,直接录制一下就可以了: ...

  10. 快速排序--Python实现

    快速排序算法:1.选择一个基准数2.小于基准数的放左边,大于基准数的放右边3.利用递归的方法针对左边的数据进行快速排序,再对右边的数据进行快速排序4.递归停止的条件:数组为空或者只有一个元素 时间复杂 ...