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. Kali渗透测试-SNMP

    1.snmpwalk -v指定snmpwalk版本 -c指定密码 2.snmp-check 获取系统信息,主机名,操作系统及架构 获取用户账户信息 获取网络信息 获取网络接口信息 IP信息 路由信息 ...

  2. POJ 2177 Ghost Busters(三维几何)

    Description The famous Ghost Busters team has decided to upgrade their Ectomobile (aka Ecto-1) with ...

  3. H5页面 绝对定位元素被 软键盘弹出时顶起

    H5页面 绝对定位元素被 软键盘弹出时顶起 在h5页面开发的过程中,我们可能会遇到下面这个问题,当页面中有输入框的时候,系统自带的软盘会把按钮挤出原来的位置.那么我们该怎么解决呢?下面列出一下的方法: ...

  4. 搭建备份到业务迁移---mysql

    mysql安装启动以及配置 使用到阿里云主机直接yum安装以及配置 [root@yunwei-169 mysql]# yum install mysql mysql-server [root@yunw ...

  5. 自测之Lesson4:gdb

    题目:列出gdb过程中常用的命令. 常用命令: 命令 作用 使用示例1 使用示例2 list 列出代码 list 行号 list 函数名 break 设置断点 break 行号 b 行号 run 运行 ...

  6. 《安装ubuntu及VMware以及相关问题汇总》

    一.VMware Ubuntu安装详细过程 http://blog.csdn.net/u013142781/article/details/50529030 二.VMware Tools (ubunt ...

  7. 如果jsp表单元素的值为空,如何避免null出现在页面上?

    可以写一个简单的函数对空值进行处理,判断值是否为空,如果是空就返回空字符串.实例代码如下: <%! String blanknull(String s) { return (s == null) ...

  8. Calculation PartⅡ

    GitHub/object-oriented 误删内容--周末修复

  9. 【IdentityServer4文档】- 打包和构建

    打包和构建 IdentityServer 由多个 nuget 软件包组成的. IdentityServer4 nuget | github 包含 IdentityServer 核心对象模型,服务和中间 ...

  10. [基于NetCore的简单博客系统]-登录

    0-项目背景 一个基于.NET CORE RAZOR PAGES的简单博客系统 技术栈全部采用微软官方实现方式,目的是熟悉新技术 项目地址:https://github.com/ganqiyin/BL ...