多个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的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
随机推荐
- 无法反序列化的java.util.ArrayList实例出来VALUE_STRING的(Can not deserialize instance of java.util.ArrayList out of VALUE_STRING)
解决方法: 设置DeserializationConfig.Feature.ACCEPT_SINGLE_VALUE_AS_ARRAY.问题解决.
- docker nginx安装
安装nginx镜像docker search nginxdocker pull nginx 启动Nginx容器docker run -it -d --name n1 -v/home/n1/nginx. ...
- typescript - 2.数据类型
typescript中为了使编写的代码更规范,更有利于维护,增加了类型校验,在typescript中主要给我们提供了以下数据类型 布尔类型(boolean) 数字类型(number) 字符串类型(st ...
- (1)PyCharm开发工具安装Flask并创建helloworld程序
一.环境描述 1.操作系统:windows7 2.编程语言:python3.6 下载地址:https://www.python.org/downloads/windows/ 3.虚拟化环境:virtu ...
- docker登录报错Error response from daemon: Get https://192.168.30.10/v1/users/: dial tcp 192.168.30.10:443: connect: connection refused
背景描述: 登录docker报错: [root@localhost sysconfig]# docker login 192.168.30.10 Username (newcs06): newcs06 ...
- Cisco设备配置SSH登录
一 试验拓扑 二 Server配置 ①配置hostname和domain name 因为rsa的秘钥是用hostname和domain name产生的 Router(config)#host Serv ...
- Qt编写控件属性设计器11-导入xml
一.前言 上一篇文章负责把设计好的控件数据导出到了xml文件,本偏文章负责把导出的xml数据文件导入,然后在画布上自动生成对应的控件,Qt内置的xml数据解析功能,非常强大,都封装在QtXml组件中, ...
- Tomcat启动原理/使用tomcat的应用是如何从tomcat的main函数开始运行的
从main方法开始打断点,逐步调试,了解程序运行过程 全局唯一的public static void main(String[] args)main Springboot* 内置tomcat,开发的时 ...
- MySQL之表日志管理
MySQL日志管理 mysql日志(默认存放在datadir): 同大多数关系型数据库一样,日志文件是MySQL数据库的重要组成部分.MySQL有几种不同的日志文件,通常包括错误日志文件,二进制日志, ...
- flask,scrapy,django信号
简介 Django.Flask.scrapy都包含了一个“信号分配器”,使得当一些动作在框架的其他地方发生的时候,解耦的应用可以得到提醒. 通俗来讲,就是一些动作发生的时候,信号允许特定的发送者去提醒 ...