最近在写一个地图类的应用,用的是echarts的图表,然而一上来就一脸懵逼,如果父级容器的height/width属性设置为百分比的形式,那么echarts就会warning,且不能正常的生成图表。所以div容器的高度宽度必须指定为px,这设计不知道是为啥。 
google到的解决方案如下

  • 添加window.onresize=myCharts.resize在setOption之后

我添加后图表的高度被压缩到了min-height,很奇怪,于是自己采用了如下解决方案,直接贴代码了。

var worldMapContainer = document.getElementById('WorldMap');

//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
var resizeWorldMapContainer = function () {
worldMapContainer.style.width = window.innerWidth+'px';
worldMapContainer.style.height = window.innerHeight+'px';
};
//设置容器高宽
resizeWorldMapContainer();
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(worldMapContainer); // 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data:['销量'],
height: worldMapContainer.style.height,
width: worldMapContainer.style.width
},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
}; // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); //用于使chart自适应高度和宽度
window.onresize = function () {
//重置容器高宽
resizeWorldMapContainer();
myChart.resize();
};

此时,worldMapContainer的高宽已经无所谓了,因为我们已经在js中设定了div容器高宽。 
这个方法可以在使ECharts在高度和宽度上均自适应,如若遇到什么坑,之后再补充。

  • 如果是需要图表跟随容器自适应的话,将上述window.innerWidthwindow.innerHeight替换为容器元素的container.clientWidthcontainer.clientHeight即可。其根本原理就是通过JavaScript来刷新图表宽高而非直接css自适应(因为ECharts不支持)

来源:http://blog.csdn.net/u012043416/article/details/51912011

ECharts 高度宽度自适应(转载)的更多相关文章

  1. CSS学习笔记(6)--浮动,三列布局,高度宽度自适应

    百度ife任务三,要求中间宽度自适应,高度取三列最高者. 开始用position的relative和absolute,但是relative不能自适应宽,absolute不能加float浮动,撑不起来外 ...

  2. Ext TabPanel items高度宽度自适应

    写Ext的时候经常会遇到一些莫名其妙,令人感到非常神奇的问题,甚至都没办法用语言去描述它,搞的人想请教一下百度或Google都不知道该去怎么问,简直能够令人发疯.先来看张截图吧. 有没有注意到里面的G ...

  3. iframe高度宽度自适应(转)

    http://www.cnblogs.com/snandy/p/3900016.html 跨子域的iframe高度自适应 完全跨域的iframe高度自适应 同域的我们可以轻松的做到 1. 父页面通过i ...

  4. 函数语法:JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度(转载)

    网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:document.body.offsetWid ...

  5. iframe高度/宽度自适应(使用body而不是docuemntElement对象)

    iframe在ie11中会显示过于短.为了自适应,增加如下代码: <iframe *** onload='changeFrameHeight()' > <script> fun ...

  6. iframe高度宽度自适应

    iframe { width: 100%; height: 100%; border: none; position: inherit; } 网上全是js方法,而且略显臃肿,故找到了一个css方法,宽 ...

  7. iframe 高度宽度自适应

    <iframe id="iframeHome" name="iframeHome" src="/Page/NewHome/GongZuoTai. ...

  8. 【接上一篇】winform中dataGridView高度和宽度自适应填充完数据的高度和宽度,即dataGridView根据数据自适应大小

    上一篇:winform中dataGridView高度自适应填充完数据的高度 winform中dataGridView高度自适应填充完数据的高度,就是dataGridView自身不产生滚动条,自己的高度 ...

  9. css和css3弹性盒模型实现元素宽度(高度)自适应

    一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

随机推荐

  1. underscore.js 源码阅读 一 整体结构

    // 整个underscore的实现包在一个立即执行函数中,避免污染全局对象 // 通过call(this)来入全局变量 (function() { // 缓存this var root = this ...

  2. 【Spring实战】--1Spring的核心

    最近面试总会涉及Spring的优点,SpringMVC与Struts2的比较,生活慢慢稳定下来,这些面试还是应了那句话“只顾盲目拉车,不会低头看路”,回过头来还是要好好研究一下Spring,如果仅仅是 ...

  3. Java 生产者消费者模式详细分析

    */ .hljs { display: block; overflow-x: auto; padding: 0.5em; color: #333; background: #f8f8f8; } .hl ...

  4. curl与grep的使用

    [root@nhserver1 ~]# curl -s www.163.com | grep hot_pop_js.js | sed 's/www.[[:digit:]]*.com/111/'    ...

  5. 【转】AWK常用

    awk是个优秀文本处理工具,可以说是一门程序设计语言.下面是awk内置变量. 一.内置变量表 属性 说明 $0 当前记录(作为单个变量) $1~$n 当前记录的第n个字段,字段间由FS分隔 FS 输入 ...

  6. TCP/IP网络协议基础知识集锦[转]

    引言 本篇属于TCP/IP协议的基础知识,重点介绍了TCP/IP协议簇的内容.作用以及TCP.UDP.IP三种常见网络协议相关的基础知识. 内容 TCP/IP协议簇是由OSI七层模型发展而来的,之所以 ...

  7. 集中式(SVN)和分布式(Git)版本控制系统的简单比较

       集中式(SVN)  分布式(Git)  是否有中央服务器  有.开发人员需要从中央服务器获得最新版本的项目然后在本地开发,开发完推送给中央服务器.因此脱离服务器开发者是几乎无法工作的  没有中央 ...

  8. AQS 框架之 Unsafe 源码详解

    ■ 前言 之前 LockSupport那篇已经叙述了是线程阻塞工具类,其底层由 Unsafe 实现,即 park(), unpark() 方法,获取指针偏移量,并操纵内存.本篇主要介绍 Unsafe ...

  9. 基于redis的cas实现

    cas是我们常用的一种解决并发问题的手段,小到CPU指令集,大到分布式存储,都能看到cas的影子.本文假定你已经充分理解一般的cas方案,如果你还不知道cas是什么,请自行百度 我们在进行关系型数据库 ...

  10. 关于css选择器的一些细节

    1.如何区分一个html标签的不同样式 使用标签名.类名的方式解决 如果希望特别强调其中的某一个或几个元素,处理的方案有三个: 1.id选择器 2.class选择器 3.层级选择器 看下面的代码: & ...