通过 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 ...

随机推荐

Java 8新特性探究（十一）Base64详解
开发十年,就只剩下这套架构体系了! >>> BASE64 编码是一种常用的字符编码,在很多地方都会用到.但base64不是安全领域下的加密解密算法.能起到安全作用的效果很差,而且 ...
Java环境搭建若干问题
0.总体说明本次搭建环境,为了偷懒,使用的是,阿里云镜像. 自带了Nginx.Tomcat.JDK等. 比较坑爹的是,虽然镜像带了很多安装好的软件,但是也有各种问题,比如它修改了tomc ...
[Angular] Export directive functionalities by using 'exportAs'
Directive ables to change component behaives and lookings. Directive can also export some APIs which ...
js进阶 10-2 JQuery基础语法是什么
js进阶 10-2 JQuery基础语法是什么一.总结一句话总结: 1.jquery语法超级简单:基础语法是:$(selector).action() 2.jquery选择的时候是带了引号的,肯定 ...
iOS8.1 编译ffmpeg和集成第三方实现直播（监控类）
iOS8.1 编译ffmpeg和集成第三方实现直播(监控类) http://www.mamicode.com/info-detail-476094.html 一,下载并在终端中运行脚本编译ffmpeg ...
小强的HTML5移动开发之路（34）——jQuery中的选择器
一.jQuery是什么? jQuery是由美国人John Resig创建,至今吸引了来自世界各地的众多javascript高手加入其中. jQuery的创始人和技术领袖,目前在Mozilla担任Jav ...
建立一个OTP应用
http://www.javaeye.com/topic/374167 以下是在erlang项目开发中的一些记录,即包含很多通俗易懂的原则,也包含一些似是而非的建议,比较混乱,还没有积累到一个可以分门 ...
【项目积累】对JSON数据的处理
[项目简述] 接触.NET项目非常长一段时间了,前台用的都是MVC框架.不知道大家是否想过一个问题.我们是怎样将数据显示到前台的,换句话说,MVC能够识别怎么样的数据形式?答案非常ea ...
征服OA 飞鱼工作流程的在线培训课程（两）HTML形成基于
表HTML的重要作用,等效混凝土框架建筑的行,于div在此之前流行.是否所有形式的世界.在角色表页面主要是针对页面布局和定位.通过整合人才规划表设计出合理的页面布局. 当然.更重要的是,存在是表示数据 ...
tolua#是Unity静态绑定lua的一个解决方案
tolua#代码简要分析 2017-04-16 23:02 by 风恋残雪, 98 阅读, 1 评论, 收藏, 编辑简介 tolua#是Unity静态绑定lua的一个解决方案,它通过C#提供的反射信 ...