echarts的图表，如果父级容器的height/width属性设置为百分比的形式，那么echarts就会warning，且不能正常的生成图表。所以div容器的高度宽度必须指定为px，这设计不知道是为啥。 
于是自己采用了如下解决方案，直接贴代码了。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1">

    <title>echarts.js案例一</title>

    <script type="text/javascript" src='js/echarts.js'></script>

</head>

<body>

<div id="chart" style="width:100%;height:400px;"></div>

</body>

<script type="text/javascript">

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

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

    var resizeWorldMapContainer = function () {

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

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

        //rem单位

        //worldMapContainer.style.width = window.innerWidth/750*690+'px';

        //worldMapContainer.style.height = window.innerHeight/750*600+'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();

    };

</script>

</html>

此时，worldMapContainer的高宽已经无所谓了，因为我们已经在js中设定了div容器高宽。

echarts.js中的图表大小自适应的更多相关文章

  1. ECharts JS应用：图表页面实现

    因为要统计数据进行图表展示,所以就简单学习了 ECharts JS 的应用.它是一个纯Javascript图库,它依赖于一个轻量级的Canvas库 ZRender,并提供直观.生动.交互式和高度可定制 ...

  2. js实现图片的大小自适应效果

    需求是传过来一个图片,根据外层div的大小自动进行缩放效果. function ShowSecondImg(v) { var rate, newX, newY,newW, newH = 0; //表示 ...

  3. js中相等、大小 不同类型之间是如何进行对比的。

    上个小问题 [] > [] false [] < [] false [] == [] false // why? 再上个加强版 '6xxx' < '5xx' false '6xxx' ...

  4. echarts3 -arcgis echarts.js修改

     在echarts.js中修改修改 clone 方法    其中 source instance of Array 修改为Object.prototype.toString.call(source)  ...

  5. echarts.js应用之map

    最近项目中用到了echarts.js中的map,我画了一个简版的案例,如下所示: 效果图: 主要代码如下: <!DOCTYPE html> <html lang="en&q ...

  6. echarts生成的图表大小怎么随屏幕的大小改变自适应

    最近在做图表,记录一下用到的知识点,当做自己的日记吧,会不断添加新内容 1,echarts生成的图表大小怎么随屏幕的大小改变自适应? this.chart.setOption(this.options ...

  7. 前台框架vue.js中怎样嵌入 Echarts 组件？

    目前常用的图标插件有 charts,  Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件 使用 cnpm 安装 Echarts cnpm i ...

  8. 图表工具--- ECharts.js学习（一） 简单入门

    ECharts.js学习(一) 在项目开发的时候,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库.具体有哪几种可以看: 前端开发者常用的9个JavaScript图表库 EChar ...

  9. echarts.js多图表数据展示使用小结

    echarts api文档: http://echarts.baidu.com/echarts2/doc/doc.html echarts demo示例: http://echarts.baidu.c ...

随机推荐

  1. Apache——SSL协议

    SSL 协议既用到了公钥加密技术又用到了对称加密技术,对称加密技术虽然比公钥加密技术的速度快,可是公钥加密技术提供了更好的身份认证技术.SSL 的握手协议非常有效的让客户和服务器之间完成相互之间的身份 ...

  2. Code obfuscatio （翻译!）

    Description Kostya likes Codeforces contests very much. However, he is very disappointed that his so ...

  3. Thunder团队——文案+美工

    团队名称:Thunder 组长:王航 成员:李传康.代秋彤.邹双黛.苗威.宋雨.胡佑蓉.杨梓瑞 项目名称:爱阅app 需求概述: 现在市面上有很多手机阅读器,但是基本上不是收费就是广告满天飞.基于这种 ...

  4. 软件工程课堂作业（五）——终极版随机产生四则运算题目（C++）

    一.升级要求:让程序能接受用户输入答案,并判定对错.最后给出总共对/错的数量. 二.设计思想: 1.首先输入答案并判断对错.我想到的是定义两个数组,一个存放用户算的结果,另一个存放正确答案.每输出一道 ...

  5. Why is setTimeout(fn, 0) sometimes useful?

    http://stackoverflow.com/questions/779379/why-is-settimeoutfn-0-sometimes-useful jquery validation s ...

  6. 团队作业7——第二次项目冲刺（Beta版本)-第一篇

    1.当天站立式会议照片: 2.工作分工: 团队成员 分工 郭达22120 项目整合,后台代码 刘德培44060 数据库模块后台连接 石浩洋22061 前台界面优化 曾繁钦22056 前台界面优化.测试 ...

  7. JDK源码分析 – ArrayList

    ArrayList类的申明 ArrayList是一个支持泛型的,底层通过数组实现的一个可以存任意类型的数据结构,源码中的定义如下: public class ArrayList<E> ex ...

  8. BZOJ 1103 大都市(dfs序+树状数组)

    应该是一道很水的题吧... 显然可以用树链剖分解决这个问题,虽然不知道多一个log会不会T.但是由于问题的特殊性. 每次修改都是将边权为1的边修改为0,且询问的是点i到根节点的路径长度. 令点i到根节 ...

  9. Redis的RDB和AOF持久化

    RDB 持久化:在指定的时间间隔内生成数据集的时间点快照. AOF 持久化:记录服务器执行的所有写操作命令,并在服务器启动时,通过重新执行这些命令来还原数据集. RDB 它只保存了 Redis 在某个 ...

  10. BZOJ2226 & SPOJ5971：LCMSum——题解

    http://www.lydsy.com/JudgeOnline/problem.php?id=2226 题目大意:给定一个n,求lcm(1,n)+lcm(2,n)+……+lcm(n,n). ———— ...