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

2021年09月15日 阅读数:3
这篇文章主要向大家介绍经过 vuex 实现 vue-echarts 图表的手动 resize,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

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

解决思路:html

1、可否模拟监听普通 dom 的尺寸变化,而后调用 echarts 的 resize 事件

具体作法有如下几种:vue

  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 事件。参考文章
2、vue 实现方案

斟酌了上面几种方案后,结合具体案例,我以为仍是用 vuex 写全局数据更好更方便一些,具体步骤以下java

  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})
总结:简单记录,以做备忘