项目中用到了echarts,由于页面是自适应的,还得兼容移动, 因此图表还需要根据盒子的大小来变化。

  1. 自适应窗口及盒子大小
  2. 页面中有一个【放大、缩小】功能,及全屏展示和预览图表

窗口自适应

 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);

全屏展示图表或预览图表

  1. 图标所在盒子增加样式 如下类 full。
  2. 退出全屏显示删除样式即可。
    .full {
position: fixed;
top: 0;
left: 0;
z-index: 10;
}

echarts 图表自适应外部盒子大小的更多相关文章

  1. Angular echarts图表自适应屏幕指令

    关于echarts图表自适应问题 一.引入js文件 1. 在html页面引入angular.min.js文件 2. 在html页面引入echarts.min.js文件 3. 在html页面引入app. ...

  2. echarts图表自适应盒子的大小(盒子的大小是动态改变的),大到需要全屏展示

    项目中用到了echarts,并且页面是自适应的,且页面中有一个[放大.缩小]功能,因此图表还需要根据盒子的大小来变化. 即:两个需求,如下: ① 图表根据窗口的大小自适应 ② 图表根据所在盒子的大小自 ...

  3. echarts图表自适应浏览器窗口的大小

    echarts问题描述 当浏览器窗口发生变化时,echarts图表未能自适应浏览器的变化,产生如下的效果 解决方案 在$(function(){}中添加 window.onresize = funct ...

  4. ECharts 图表设置标记的大小 symbolSize 和获取标记的值

    ECharts 是百度出品,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等) ...

  5. 一起来玩echarts系列(二)------echarts图表自适应问题

    为了直观查看公司服务器各个进程占用的内存动态情况,我使用echarts进行数据可视化,具体的实现过程按下不表. 最后实现的效果如图: 然后问题就来了,因UI采用了Bootstrap响应式框架,所以除了 ...

  6. echarts图表自适应,容器宽度设置为百分比,但是图表显示不全,缩到一起

    <div  id="chartContainer" style="height:100%;width:100%;"></div> cha ...

  7. echarts图表自适应

    当页面上只引入一个图表 window.onresize= () =>{ myEchart.resize() } 当引入多个时,上面的方法只会影响最后一个图表 window.addEventLis ...

  8. echarts图表初始大小问题及echarts随窗口变化自适应

    最近在做一个轮播图,使用的是element的Carousel走马灯,每一个走马灯里是eachrts图,开始页面加载的时候发现echarts图并不能自适应,开始以为是走马灯的问题,后来发现不是 不知道大 ...

  9. vue项目中在同一页面多次引入同一个echarts图表的自适应问题

    在父组件页面引入两次该图表子组件显示的效果: 由于是百分比宽高,所以在窗口发生变化时,需要让图表也跟着自适应,所以才出现了本次讨论的问题啦. 先看下完整的图表子组件代码(在父组件就是直接引入,不需要传 ...

随机推荐

  1. Python数据分析与展示[第一周]

    ipython 中的问号 获得相关的描述信息 %run 系统文件 执行某一个文件 ipython的模式命令 %magic 显示所有的魔术命令 %hist    命令历史输入信息 %pdb    异常发 ...

  2. Subsets 集合子集 回溯

    Given a set of distinct integers, S, return all possible subsets. Note: Elements in a subset must be ...

  3. 安装tomcat(fedora16)

    sudo yum install tomcat6 sudo yum install tomcat6-webapps sudo yum install tomcat6-admin-webapps   s ...

  4. 【python小随笔】进程池 multiprocessing.Pool的简单实现与踩过的坑

    #导入进程模块 import multiprocessing #创建进程池 坑:一定要在循环外面创建进程池,不然会一直创建 pool = multiprocessing.Pool(30) for Si ...

  5. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十九章:法线贴图

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十九章:法线贴图 学习目标 理解为什么需要法线贴图: 学习法线贴图如 ...

  6. mysql操作手册

    开启日志:https://segmentfault.com/a/1190000003072237 常用词:  Mysql:一种免费的跨平台的数据库系统  E:\mysql:表示是在dos 命令窗口下面 ...

  7. Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十七章:拾取

    原文:Introduction to 3D Game Programming with DirectX 12 学习笔记之 --- 第十七章:拾取 代码工程地址: https://github.com/ ...

  8. Libevent:9Evbuffers缓存IO的实用功能

    Libevent的evbuffer功能实现了一个字节队列,优化了在队列尾端增加数据,以及从队列前端删除数据的操作. Evbuffer用来实现缓存网络IO中的缓存部分.它们不能用来在条件发生时调度IO或 ...

  9. ACK容器服务发布virtual node addon,快速部署虚拟节点提升集群弹性能力

    在上一篇博文中(https://yq.aliyun.com/articles/647119),我们展示了如何手动执行yaml文件给Kubernetes集群添加虚拟节点,然而,手动执行的方式用户体验并不 ...

  10. 域名拆分 tld

    概念 URL Universal Resource Locator ,统一资源定位符. 用处:用来标识互联网资源的唯一地址. 本质:提供了互联网上任一资源地址的通用表示方法. protocol://h ...