通过 vuex 实现 vue-echarts 图表的手动 resize

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

解决思路：

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

具体做法有以下几种：

初始化项目后，轮询，反复查看 dom 尺寸是否变化，这种一听就感觉不好，开销太大。
监听元素的滚动事件，在目标 dom 里面包裹一个同等大小的 div，是隐藏不可见的，当目标 dom 大小变化时，触发滚动事件。参考文章
通过 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>

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

二、vue 实现方案

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

侧边栏展开和隐藏按钮点击 - 触发事件 - 修改 store - ,在图表组件里面 watch store 的变化，然后执行 resize 函数。
关于 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的更多相关文章

vue table中使用多选的问题（翻页后如何保存已选项），联动echarts图表实现流量监控
流量监控项目需求: 根据表格数据,添加多选功能,默认全选,根据已选项更新图表视图 1.表格需要多选 2.要联动图表,所以关键是要利用表格多选的触发回调函数 vue table中使用多选: 很简单,只需 ...
在vue中使用echarts图表
在vue中使用echarts图表转载请注明出处:https://www.cnblogs.com/wenjunwei/p/9815290.html 安装vue依赖使用npm npm instal ...
vue可视化图表基于Echarts封装好的v-charts简介
**vue可视化图表基于Echarts封装好的v-charts** 近期公司又一个新的需求,要做一个订单和销售额统计的项目,需要用到可视化图表来更直观的展示数据.首先我想到的是Echarts,众所周 ...
vue + eCharts 实现图表展示
一.首先安装 eCharts 依赖 npm install echarts -S 二.main.js 引入 eCharts 依赖 2.1)在 main.js 中引入 import echarts fr ...
vue使用Echarts图表
vue使用Echarts图表童话_xxv 关注 0.5 2018.12.11 09:09* 字数 325 阅读 1456评论 2喜欢 13 在开发后台系统时,使用图表进行数据可视化,这样会使数据更 ...
vue 引入 echarts 图表并且展示柱状图
npm i echarts -S 下载 echarts 图表 mian.js 文件引入图表并且全局挂载 //echarts 图表 import echarts from 'echarts' Vue. ...
Vue自定义标签页，并且在其中渲染Echarts图表
目录一.需求说明二.标签页功能实现一.需求说明 1.点击标签按钮切换不同的echarts图表,考虑用Ant Design Vue,但是其样式无法自定义 2.div的整体布局样式使用tailwin ...
vue中添加Echarts图表的使用，Echarts的学习笔记
项目中需要使用一些折线图.柱状图.饼状图等等,之前使用过heightCharts(关于heightCharts请看我的另一篇 http://www.cnblogs.com/jasonwang2y60/ ...
vue如何循环同一个echarts图表
因为我们知道echarts图表需要一个ID节点,所以我们循环echarts同一个图表时要考虑ID节点变化问题.废话不多说,直接上demo效果. 这里有一位分析师在不同的模拟组合,这时需求要在dialo ...

随机推荐

The DOT Language
CSDN新首页上线啦,邀请你来立即体验! 立即体验博客学院下载更多登录注册 The DOT Language 翻译 2014年04月15日 11:27:07 标签: EBNF / 语言 / ...
摘录-解压版mysql配置(版本5.7)
1.下载解压2.创建my.ini文件基础配置:(注意编码必须为ANSI)#代码开始[Client]# 设置mysql客户端默认字符集default-character-set=utf8[mysqld] ...
js进阶 11-8 jquery如何获取元素相对于父元素的位置
js进阶 11-8 jquery如何获取元素相对于父元素的位置一.总结一句话总结:用jquery的position方法,但是使用这个方法的前提是父元素相对定位,子元素绝对定位,否则和offset ...
【poj3225】Help with Intervals
Time Limit: 6000MS Memory Limit: 131072K Total Submissions: 12084 Accepted: 3033 Case Time Limit ...
Go语言：正則表達式的使用
Go语言的正則表達式使用非常easy.演示样例代码: package test import ( "fmt" "regexp" ) func RegixBase ...
java nio 缓冲区(一)
本文来自于我的个人博客:java nio 缓冲区(一) 我们以Buffer类開始对java.nio包的浏览历程.这些类是java.nio的构造基础. 这个系列中,我们将尾随<java NIO ...
[GeekBand] 设计模式之观察者模式学习笔记
本文参考文献::GeekBand课堂内容,授课老师:李建忠 :网络资料: http://blog.csdn.net/hguisu/article/details/7556625 本文仅作为自己的学习笔 ...
Android Studio入门（安装-->开发调试）
写在前面的话:本文来源:http://blog.csdn.net/yanbober/article/details/45306483 目标:Android Studio新手–>下载安装配置–&g ...
hdu1845 Jimmy’s Assignment --- 完整匹配
意甲冠军: 它需要一个特殊的图,以找到最大匹配.该图的特征是:无向图,度的每个节点3.这是一个双边连接组件(the graph is 2-edge-connected (that is, at lea ...
onload 事件
定义和用法 onload 事件会在页面或图像加载完成后立即发生. 语法 onload="SomeJavaScriptCode" 参数描述 SomeJavaScriptCode 必 ...