背景：项目有用到 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. Android selector背景以及透明色

    selector可以设置图片或layout的点击效果: <?xml version="1.0" encoding="utf-8"?> <sel ...

  2. mybatis结合log4j打印SQL日志

    mybatis结合log4j打印SQL日志 1.Maven引用jar包 默认的mybatis不能打印出SQL日志,不便于查看调试,须要结合log4jdbc-log4j2就能够完整的输入SQL的调试信息 ...

  3. 小强的HTML5移动开发之路（35）——jQuery中的过滤器详解

    1.基本过滤选择器 :first :last :not(selector) :selector匹配的节点之外的节点 :even :偶数 :odd :奇数 :eq(index) :gt(index) : ...

  4. BZOJ 1855 股票交易 - 单调队列优化dp

    传送门 题目分析: \(f[i][j]\)表示第i天,手中拥有j份股票的最优利润. 如果不买也不卖,那么\[f[i][j] = f[i-1][j]\] 如果买入,那么\[f[i][j] = max\{ ...

  5. shell配置java环境变量和批处理配置环境变量

    linux配置java环境只需在/etc/profile中添加以下 前提是把jdk解压到/usr/local路径,当然路径可以随便改 export JAVA_HOME=/usr/local/jdk1. ...

  6. 一起学Python：正则表达式概述

    re模块操作 在Python中需要通过正则表达式对字符串进行匹配的时候,可以使用一个模块,名字为re 1. re模块的使用过程 #coding=utf-8 # 导入re模块 import re # 使 ...

  7. iOS 使用贝塞尔曲线绘制路径

    使用贝塞尔曲线绘制路径 大多数时候,我们在开发中使用的控件的边框是矩形,或者做一点圆角,是使得矩形的角看起来更加的圆滑. 但是如果我们想要一个不规则的图形怎么办?有人说,叫UI妹子做,不仅省事,还可以 ...

  8. cordova通过指纹插件进行指纹验证

    原文:cordova通过指纹插件进行指纹验证 版权声明:本文为博主原创文章,转载须注明出处,博客地址:https://blog.csdn.net/wx13227855087 https://blog. ...

  9. Linux的设备文件名与硬盘分区已经挂载点的关系

    以CentOS6.3为例. 选择的硬盘设备名是/dev/sda,即第一块STAT硬盘,然后在该硬盘分了3个主分区和1个扩展分区,设备名分别是/dev/sda1,/dev/sda2,/dev/sda3, ...

  10. hudson搭建经验总结（二）

    作者:朱金灿 来源:http://blog.csdn.net/clever101 继续部署hudson,发现从google上的一个开源工程上:http://code.google.com/p/huds ...