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

随机推荐

Django之settings.py 的media路径设置
在一个 models 中使用 FileField 或 ImageField 需要以下步骤: 1. 在你的 settings.py文件中, 定义一个完整路径给MEDIA_ROOT 以便让 Django在 ...
【u006】海战
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 在峰会期间,武装部队得处于高度戒备.警察将监视每一条大街,军队将保卫建筑物,领空将布满了F-2003飞 ...
signed 与 unsigned 有符号和无符号数
unsigned int a = 0; unsigned int b = -1; // b 为 0xffffffff unsigned int c = a - 1; // c 为 0xffffffff
【u030】扑克牌
Time Limit: 1 second Memory Limit: 128 MB [问题描述] 组合数学是数学的重要组成部分,是一门研究离散对象的科学,它主要研究满足一定条件的组态(也称组合模型)的 ...
语言的学习 —— 西班牙语（español）
联合国六大官方语言:英语.法语.俄语.汉语.西班牙语.阿拉伯语: 在七大洲中,主要是在拉丁美洲国家中(巴西.伯利兹.法属圭亚那.海地等地除外).很多说西班牙语的人把他们的语言称为西班牙语(españo ...
Android真机调试不打印日志解决
1.在拨号界面输入:*#*#2846579#*#* 进入测试菜单界面. 2.Project Menu–后台设置–LOG设置 3.LOG开关–LOG打开 LOG级别设置–VERBOSE 4.Dump&a ...
mongdb aggregate 聚合数据
最近用到的一些mongodb的数据查询方法及api用法 Aggregate() 数据聚合处理的方法可以将聚合的一些方法放在其后面的括号中,也可继续以agg.的样式链式加入 aggregate.al ...
mybatis如何实现分页功能?
1)原始方法,使用limit,需要自己处理分页逻辑: 对于mysql数据库可以使用limit,如: select * from table limit 5,10; --返回6-15行对于oracle ...
WPF中使用TranslateTransform3D修改CAD的3D旋转中心
原文:WPF中使用TranslateTransform3D修改CAD的3D旋转中心前面一篇文章讲述了2D旋转功能的实现,文章提到了修改3D旋转中心,这一节主要总结一下具体的修改3D旋转 ...
c#开发移动APP-Xamarin入门剖析
原文:c#开发移动APP-Xamarin入门剖析剖析应用程序 Phoneword这个项目是.net标准库项目,它包含所有的共享代码和共享UI. Phoneword.Android这个项目包含Andr ...