echarts 图表自适应外部盒子大小
项目中用到了echarts,由于页面是自适应的,还得兼容移动, 因此图表还需要根据盒子的大小来变化。
- 自适应窗口及盒子大小
- 页面中有一个【放大、缩小】功能,及全屏展示和预览图表
窗口自适应
let myChart = This.$echarts.init(document.getElementById(This.id));
window.addEventListener('resize',() => { myChart.resize(); });
//或
window.onresize = myChart.resize;
//注意:a如果是一个页面中插入多个echarts图,那么需要用第一种方式来监听resize事件,即:window.addEventListener,若选用第二种方法只能监听一个echarts图的自适应
盒子自适应
//js
let timer;
clearTimeout(timer);
timer = setTimeout(() => {
let myChart = this.$echarts.init(document.getElementById('myChart'));
myChart.resize();
}, 10);
//angular
$scope.echartsRe=function(){
$interval.cancel($scope.etimer);
$scope.etimer =$interval(function(){
var myChart01 = echarts.init(document.getElementById('g_echarts01'));
var myChart03 = echarts.init(document.getElementById('g_echarts03'));
var map3 = echarts.init(document.getElementById('map'));
myChart01.resize();
myChart03.resize();
map3.resize();
},10);
全屏展示图表或预览图表
- 图标所在盒子增加样式 如下类 full。
- 退出全屏显示删除样式即可。
.full {
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
echarts 图表自适应外部盒子大小的更多相关文章
- Angular echarts图表自适应屏幕指令
关于echarts图表自适应问题 一.引入js文件 1. 在html页面引入angular.min.js文件 2. 在html页面引入echarts.min.js文件 3. 在html页面引入app. ...
- echarts图表自适应盒子的大小(盒子的大小是动态改变的),大到需要全屏展示
项目中用到了echarts,并且页面是自适应的,且页面中有一个[放大.缩小]功能,因此图表还需要根据盒子的大小来变化. 即:两个需求,如下: ① 图表根据窗口的大小自适应 ② 图表根据所在盒子的大小自 ...
- echarts图表自适应浏览器窗口的大小
echarts问题描述 当浏览器窗口发生变化时,echarts图表未能自适应浏览器的变化,产生如下的效果 解决方案 在$(function(){}中添加 window.onresize = funct ...
- ECharts 图表设置标记的大小 symbolSize 和获取标记的值
ECharts 是百度出品,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...
- 一起来玩echarts系列(二)------echarts图表自适应问题
为了直观查看公司服务器各个进程占用的内存动态情况,我使用echarts进行数据可视化,具体的实现过程按下不表. 最后实现的效果如图: 然后问题就来了,因UI采用了Bootstrap响应式框架,所以除了 ...
- echarts图表自适应,容器宽度设置为百分比,但是图表显示不全,缩到一起
<div id="chartContainer" style="height:100%;width:100%;"></div> cha ...
- echarts图表自适应
当页面上只引入一个图表 window.onresize= () =>{ myEchart.resize() } 当引入多个时,上面的方法只会影响最后一个图表 window.addEventLis ...
- echarts图表初始大小问题及echarts随窗口变化自适应
最近在做一个轮播图,使用的是element的Carousel走马灯,每一个走马灯里是eachrts图,开始页面加载的时候发现echarts图并不能自适应,开始以为是走马灯的问题,后来发现不是 不知道大 ...
- vue项目中在同一页面多次引入同一个echarts图表的自适应问题
在父组件页面引入两次该图表子组件显示的效果: 由于是百分比宽高,所以在窗口发生变化时,需要让图表也跟着自适应,所以才出现了本次讨论的问题啦. 先看下完整的图表子组件代码(在父组件就是直接引入,不需要传 ...
随机推荐
- Python数据分析与展示[第一周]
ipython 中的问号 获得相关的描述信息 %run 系统文件 执行某一个文件 ipython的模式命令 %magic 显示所有的魔术命令 %hist 命令历史输入信息 %pdb 异常发 ...
- Subsets 集合子集 回溯
Given a set of distinct integers, S, return all possible subsets. Note: Elements in a subset must be ...
- 安装tomcat(fedora16)
sudo yum install tomcat6 sudo yum install tomcat6-webapps sudo yum install tomcat6-admin-webapps s ...
- 【python小随笔】进程池 multiprocessing.Pool的简单实现与踩过的坑
#导入进程模块 import multiprocessing #创建进程池 坑:一定要在循环外面创建进程池,不然会一直创建 pool = multiprocessing.Pool(30) for Si ...
- Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十九章:法线贴图
原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十九章:法线贴图 学习目标 理解为什么需要法线贴图: 学习法线贴图如 ...
- mysql操作手册
开启日志:https://segmentfault.com/a/1190000003072237 常用词: Mysql:一种免费的跨平台的数据库系统 E:\mysql:表示是在dos 命令窗口下面 ...
- Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十七章:拾取
原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十七章:拾取 代码工程地址: https://github.com/ ...
- Libevent:9Evbuffers缓存IO的实用功能
Libevent的evbuffer功能实现了一个字节队列,优化了在队列尾端增加数据,以及从队列前端删除数据的操作. Evbuffer用来实现缓存网络IO中的缓存部分.它们不能用来在条件发生时调度IO或 ...
- ACK容器服务发布virtual node addon,快速部署虚拟节点提升集群弹性能力
在上一篇博文中(https://yq.aliyun.com/articles/647119),我们展示了如何手动执行yaml文件给Kubernetes集群添加虚拟节点,然而,手动执行的方式用户体验并不 ...
- 域名拆分 tld
概念 URL Universal Resource Locator ,统一资源定位符. 用处:用来标识互联网资源的唯一地址. 本质:提供了互联网上任一资源地址的通用表示方法. protocol://h ...