echarts.js中的图表大小自适应
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中的图表大小自适应的更多相关文章
- ECharts JS应用：图表页面实现
因为要统计数据进行图表展示,所以就简单学习了 ECharts JS 的应用.它是一个纯Javascript图库,它依赖于一个轻量级的Canvas库 ZRender,并提供直观.生动.交互式和高度可定制 ...
- js实现图片的大小自适应效果
需求是传过来一个图片,根据外层div的大小自动进行缩放效果. function ShowSecondImg(v) { var rate, newX, newY,newW, newH = 0; //表示 ...
- js中相等、大小 不同类型之间是如何进行对比的。
上个小问题 [] > [] false [] < [] false [] == [] false // why? 再上个加强版 '6xxx' < '5xx' false '6xxx' ...
- echarts3 -arcgis echarts.js修改
在echarts.js中修改修改 clone 方法 其中 source instance of Array 修改为Object.prototype.toString.call(source) ...
- echarts.js应用之map
最近项目中用到了echarts.js中的map,我画了一个简版的案例,如下所示: 效果图: 主要代码如下: <!DOCTYPE html> <html lang="en&q ...
- echarts生成的图表大小怎么随屏幕的大小改变自适应
最近在做图表,记录一下用到的知识点,当做自己的日记吧,会不断添加新内容 1,echarts生成的图表大小怎么随屏幕的大小改变自适应? this.chart.setOption(this.options ...
- 前台框架vue.js中怎样嵌入 Echarts 组件？
目前常用的图标插件有 charts, Echarts, highcharts.这次将介绍 Echarts 在 Vue 项目中的应用. 一.安装插件 使用 cnpm 安装 Echarts cnpm i ...
- 图表工具--- ECharts.js学习（一） 简单入门
ECharts.js学习(一) 在项目开发的时候,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库.具体有哪几种可以看: 前端开发者常用的9个JavaScript图表库 EChar ...
- echarts.js多图表数据展示使用小结
echarts api文档: http://echarts.baidu.com/echarts2/doc/doc.html echarts demo示例: http://echarts.baidu.c ...
随机推荐
- 最短路径算法（II）
什么??你问我为什么不在一篇文章写完所有方法?? Hmm…其实我是想的,但是博皮的加载速度再带上文章超长图片超多的话… 可能这辈子都打不开了吧… 上接https://www.cnblogs.com/U ...
- python3中使用python2中cmp函数出现错误
在python2中我们经常会使用cmp函数来比较一些东西,但是在python3中,你再来使用这个函数的时候,发现就报错了,提示找不到这个函数,这是为啥呢? 答:新版的python已经舍弃这种用法 而在 ...
- 3D动态人脸识别技术分析——世纪晟人脸识别实现三维人脸建模
- 目录 - 国内3D动态人脸识别现状概况 - 新形势下人脸识别技术发展潜力 - 基于深度学习的3D动态人脸识别技术分析 1. 非线性数据建模方法 2. 基于3D变形模型的人脸建模 - 案例结合——世 ...
- Python函数的内省-Introspection
Python函数可以进行内省-Introspection,查看函数内部的细节,方式就是使用函数的__code__属性. def func(a, b = 2): return a + b >> ...
- MyEclipse2013使用总结
1.myeclipse10中怎样将建的包设置成树形结构或者并列结构. 右上边三角那里进去设置选第一个是显示完整的包名,第二个显示的是树形结构这种方法没效 2.从高版本到项目的低版本的MyEclipse ...
- win8安装Ubuntu14
概述: 1.复制安装镜像和启动文件到FAT32分区 2.查找出FAT32分区的分区号,修改启动配置文件 3.启动FAT32分区的安装镜像,开始安装 UEFI Win7/8/Ubuntu 硬盘安装Ubu ...
- SpringBoot2.0(二) 配置文件多环境
在SpringBoot中,多环节的配置文件名基于application-{profile}.properties的格式,其中{profile}对应环境标识,比如: application-daily. ...
- 威锋网(Weiphone) BBS排序插件
body,td,p { // 这对大括号里描述网页的背景 margin-left:40px; margin-right:40px; font-size: 10pt; } div.vim { width ...
- hdu 1115 Lifting the Stone (数学几何)
Lifting the Stone Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- hihoCoder#1698 : 假期计划 组合数
题面:hihoCoder#1698 : 假期计划 组合数 题解: 题目要求是有序的排列,因此我们可以在一开始就乘上A!*B!然后在把这个序列划分成很多段. 这样的话由于乘了阶乘,所以所有排列我们都已 ...