背景：项目有用到 vue-echarts, 百度推出的 vue 版本的 Echarts，图表自带响应式属性 auto-resize, 来实现窗口尺寸变化时，图表的尺寸自适应，但是发现它是靠监听 window 的 onresize 来实现的，而有时候当chart 容器 尺寸变化时，window 窗口大小是不变的，比如我这次遇到的，侧边菜单栏的显示隐藏切换，导致内容区域整体部分宽度会变化，但是window 没有变化，所以auto-resize 不能监听这种情况来实现 resize。

解决思路：

一、能否模拟监听普通 dom 的尺寸变化，然后调用 echarts 的 resize 事件

具体做法有以下几种：

  1. 初始化项目后，轮询，反复查看 dom 尺寸是否变化，这种一听就感觉不好，开销太大。
  2. 监听元素的滚动事件，在 目标 dom 里面包裹一个同等大小的 div，是隐藏不可见的，当目标 dom 大小变化时，触发滚动事件。参考文章
  3. 通过 MutationObserver 监听dom 节点变化，MutationObserver 是在DOM4规范中定义的，它的前身是 MutationEvent 事件，该事件最初在 DOM2 事件规范中介绍，到来了 DOM3 事件规范中正式定义，但是由于该事件存在兼容性以及性能上的问题被弃用；可以用它来监听 dom style 的变化, demo 代码，文档
<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>Document</title>

</head>

<body>

	<div id="demo" style="background: blue; height: 200px; width: 100%">

		demo 内容

	</div>

	<script>

		var observer = new MutationObserver(function (mutations, observer) {

		    mutations.forEach(function (mutation) {

		        console.log(mutation);

		    });

		});

		var config = {

		    attributes: true,

		    attributeOldValue: true,

		    attributeFilter: [

		        'style'

		    ]

		};

		var el = document.getElementById('demo');

		observer.observe(el, config);

	</script>

</body>

</html>
  1. Ie9-10 默认支持 div 的 resize 事件，可以直接通过 div.attachEvent('onresize', handler); 的方式实现;其它浏览器,通过在 div 中添加一个内置 object 元素实现监听,设置 object 元素的 style 使其填充满 div，这样当 div 的 size 发生变化时，object 的 size 也会发生变化,然后监听 object 元素的 contentDocument.defaultView(window对象)的 resize 事件。参考文章
二、vue 实现方案

斟酌了上面几种方案后，结合具体案例，我觉得还是用 vuex 写全局数据更好更方便一些，具体步骤如下

  1. 侧边栏展开和隐藏按钮点击 - 触发事件 - 修改 store - ,在图表组件里面 watch store 的变化，然后执行 resize 函数。
  2. 关于 resize(), 因为vue-echarts 插件已经是对 echarts 的封装，如果不修改它的代码的话，可以通过 this.$ref 访问子组件的实例，调用它的 resize()。文档
    // 注意的坑，1.要设置 width 2. width 变化有延迟，需要加个 timeout，不然看不到效果

    this.$refs.chart.resize({width: this.$refs.chart.offsetWidth})
总结：简单记录，以作备忘

通过 vuex 实现 vue-echarts 图表的手动 resize的更多相关文章

  1. vue table中使用多选的问题（翻页后如何保存已选项），联动echarts图表实现流量监控

    流量监控项目需求: 根据表格数据,添加多选功能,默认全选,根据已选项更新图表视图 1.表格需要多选 2.要联动图表,所以关键是要利用表格多选的触发回调函数 vue table中使用多选: 很简单,只需 ...

  2. 在vue中使用echarts图表

    在vue中使用echarts图表   转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖 使用npm npm instal ...

  3. vue可视化图表 基于Echarts封装好的v-charts简介

    **vue可视化图表 基于Echarts封装好的v-charts** 近期公司又一个新的需求,要做一个订单和销售额统计的项目,需要用到可视化图表来更直观的展示数据.首先我想到的是Echarts,众所周 ...

  4. vue + eCharts 实现图表展示

    一.首先安装 eCharts 依赖 npm install echarts -S 二.main.js 引入 eCharts 依赖 2.1)在 main.js 中引入 import echarts fr ...

  5. vue使用Echarts图表

    vue使用Echarts图表 童话_xxv 关注  0.5 2018.12.11 09:09* 字数 325 阅读 1456评论 2喜欢 13 在开发后台系统时,使用图表进行数据可视化,这样会使数据更 ...

  6. vue 引入 echarts 图表 并且展示柱状图

    npm i echarts -S 下载 echarts 图表 mian.js 文件 引入图表并且全局挂载 //echarts 图表 import echarts from 'echarts' Vue. ...

  7. Vue自定义标签页，并且在其中渲染Echarts图表

    目录 一.需求说明 二.标签页功能实现 一.需求说明 1.点击标签按钮切换不同的echarts图表,考虑用Ant Design Vue,但是其样式无法自定义 2.div的整体布局样式使用tailwin ...

  8. vue中添加Echarts图表的使用，Echarts的学习笔记

    项目中需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts(关于heightCharts请看我的另一篇 http://www.cnblogs.com/jasonwang2y60/ ...

  9. vue如何循环同一个echarts图表

    因为我们知道echarts图表需要一个ID节点,所以我们循环echarts同一个图表时要考虑ID节点变化问题.废话不多说,直接上demo效果. 这里有一位分析师在不同的模拟组合,这时需求要在dialo ...

随机推荐

  1. php课程 4-15 数组遍历、超全局数组、表单提交数据（多看学习视频）

    php课程 4-15  数组遍历.超全局数组.表单提交数据(多看学习视频) 一.总结 一句话总结:超全局数组特别有用,比如$_SERVER可以获取所有的客户端访问服务器的情况. 1.数组遍历三种方式( ...

  2. hdu 1292 &quot;下沙野骆驼&quot;ACM夏令营 (递推)

    "下沙野骆驼"ACM夏令营 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/ ...

  3. Warning: file_put_contents(常用单词1.txt): failed to open stream: Invalid argument in

    Warning: file_put_contents(常用单词1.txt): failed to open stream: Invalid argument in 一.总结 1.上述问题是因为Win ...

  4. js获取input file路径改变图像地址

    版权声明:好歹是我写的或者总结的或者抄的,总待给我个名份吧~ https://blog.csdn.net/sangjinchao/article/details/52250318 html代码 < ...

  5. Erlang入门

    Erlang简史(翻译) Erlang入门(二)—并发编程 Erlang入门(三)——分布式编程 Erlang入门(四)——错误处理和鲁棒性 Erlang入门(五)——补遗

  6. Java中利用Math.random()产生服从泊松分布的随机数

    众所周知.Java的Math.random()产生的是服从均匀分布的随机数,可是其它分布的应用也相当广泛,比如泊松分布和高斯分布(正态分布).而这些分布Java没有非常好的提供(高斯分布能够利用Ran ...

  7. shell自动化下载、安装、配置nginx

    #!/bin/bash auto config nginx server #by author www.jfedu.net #2018年5月14日17:25:52 N_PAR="vim lr ...

  8. Adaptive device-initiated polling

    A method includes periodically sending a polling call to an enterprise system outside the firewall a ...

  9. Java设计模式透析之 —— 单例(Singleton)

    写软件的时候经常需要用到打印日志功能,可以帮助你调试和定位问题,项目上线后还可以帮助你分析数据.但是Java原生带有的System.out.println()方法却很少在真正的项目开发中使用,甚至像f ...

  10. 在sqlserver中，使用sql语句更新数据库:生成随机数，更新每一行中的年龄字段

    use School --指定数据库 declare @min_id int --声明整数变量@x set @min_id=(select MIN(Id) from Students) --给变量@x ...