多个echarts图自适应屏幕大小
当一个echarts图时,可以这样做
//下面my_charts是html中echarts的ID
var myChart= echarts.init(document.getElementById("my_charts"));
myChart.setOption(option);
//假设实例的名字是myChart,在echats配置完实例以后,配置下面几行代码即可
window.onresize = function () {
myChart.resize();
}
如果页面中有多个echart图,而且在不同的js函数各自实例化,需要定义一个全局的对象,然后将各自的实例化id及echart实例对象装进全局对象中,再统一自适应
var chartJson;
func1(){
var myChart = echarts.init(document.getElementById('id1'));
...
myChart.setOption(option);
chartJson['id1'] = myChart;
}
func2(){
...
}
func3(){
...
}
//统一自适应
$(function(){
func1();
func2();
func3();
window.onresize = function() {
chartJson['id1'].resize();
chartJson['id2'].resize();
chartJson['id3'].resize();
};
})
多个echarts图自适应屏幕大小的更多相关文章
- Atitit html5 Canvas 如何自适应屏幕大小
Atitit html5 Canvas 如何自适应屏幕大小 可以用JS监控屏幕大小,然后调整Canvas的大小.在代码中加入JS 1 2 3 4 5 6 7 $(window).resize ...
- android系统如何自适应屏幕大小
1.屏幕相关概念 1.1分辨率 是指屏幕上有横竖各有多少个像素 1.2屏幕尺寸 指的是手机实际的物理尺寸,比如常用的2.8英寸,3.2英寸,3.5英寸,3.7英寸 android将屏幕大小分为四个级别 ...
- Android系统自适应屏幕大小
1.屏幕相关概念1.1分辨率是指屏幕上有横竖各有多少个像素1.2屏幕尺寸指的是手机实际的物理尺寸,比如常用的2.8英寸,3.2英寸,3.5英寸,3.7英寸android将屏幕大小分为四个级别(smal ...
- Div 自适应屏幕大小
http://blog.csdn.net/wodetiankong516/article/details/7827256 Background 有时, 我们需要将div或者其他的Elemen ...
- Unity3d发布成exe项目后的设置(全屏自适应屏幕大小)
原地址:http://blog.sina.com.cn/s/blog_697b1b8c0101gd46.html 1. 去除启动exe项目时出现的画面窗口 File ☞ Build Settings ...
- picturefill + picture 标签 实现兼容性很棒的 响应式图片 自适应 屏幕大小
polyfill 它是一个能够补齐浏览器兼容性问题的一个东西,使用到的<picture></picture>标签 ,并不是所有浏览器都支持,为了实现更好的兼容效果,这里就使用到 ...
- canvas如何自适应屏幕大小
可以用JS监控屏幕大小,然后调整Canvas的大小.在代码中加入JS $(window).resize(resizeCanvas); function resizeCanvas() { ...
- Angular echarts图表自适应屏幕指令
关于echarts图表自适应问题 一.引入js文件 1. 在html页面引入angular.min.js文件 2. 在html页面引入echarts.min.js文件 3. 在html页面引入app. ...
- [转]如何设计自适应屏幕大小的网页 Responsive Web Design
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
随机推荐
- pyqt5设置背景图片出现问题
在使用pyqt5时,用qtdesign设置好背景图片,如何设置自行百度,预览没问题,用ptuic5转换为代码却发现显示不了: 首先:我在qtdesign中导入的是pic.qrc,但是转换的代码最后一句 ...
- python 代码性能分析 库
问题描述 1.Python开发的程序在使用过程中很慢,想确定下是哪段代码比较慢: 2.Python开发的程序在使用过程中占用内存很大,想确定下是哪段代码引起的: 解决方案 使用profile分析分析c ...
- openresty开发系列40--nginx+lua实现获取客户端ip所在的国家信息
openresty开发系列40--nginx+lua实现获取客户端ip所在的国家信息 为了实现业务系统针对不同地区IP访问,展示包含不同地区信息的业务交互界面.很多情况下系统需要根据用户访问的IP信息 ...
- openresty开发系列33--openresty执行流程之2重写赋值阶段
openresty开发系列33--openresty执行流程之2重写赋值阶段 一)重写赋值阶段 1)set_by_lua 语法:set_by_lua $res <lua-script-str&g ...
- WMS常用命令
- IEnumerable是什么
首先怎么认识一个对象 IE+number+able IE数字 可能 从名字上看不出什么玩意,以至于很久都没人真正认识这个接口 先看官方的解释 IEnumerable Interface Expose ...
- Python - Django - jQuery 实现简单的 AJAX
AJAX 局部刷新实例: 使用 jQuery 实现基本的发送 AJAX 请求 index.html: <!DOCTYPE html> <html lang="en" ...
- glob 遍历文件夹里面文件
var_dump(glob("*")); // 只会遍历当前文件夹层里面的,不会往里面扒 exit; array(9) { [0]=> string(16) "Ca ...
- QT/C++ 类型转换
"轻轻地我走了,正如我轻轻地来,我挥一挥衣袖,不带走一片云彩"------阿魔 1) int转为QString: QString::number(int) 2) std::stri ...
- PHP 获取星期
<?php function getWeek($time = 0) { $week_array=array('日', '一', '二', '三', '四', '五', '六'); //先定义一个 ...