背景介绍:

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

解决思路:

一、能否模拟监听普通 Dom 的尺寸变化,然后调用 echartsresize 事件

具体做法有以下几种:

  1. 初始化项目后,轮询,反复查看 Dom 尺寸是否变化,这种一听就感觉不好,开销太大。
  2. 监听元素的滚动事件,在 目标 Dom 里面包裹一个同等大小的 div,是隐藏不可见的,当目标 Dom 大小变化时,触发滚动事件。参考文章
  3. 通过 MutationObserver 监听 Dom 节点变化,MutationObserver 是在 DOM4 规范中定义的,它的前身是 MutationEvent 事件,该事件最初在 DOM2 事件规范中介绍,到来了 DOM3 事件规范中正式定义,但是由于该事件存在兼容性以及性能上的问题被弃用;可以用它来监听 Dom style 的变化, Demo 代码文档

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    <!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>
  4. 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
    2
    // 注意的坑,1.要设置 width 2. width 变化有延迟,需要加个 timeout,不然看不到效果
    this.$refs.chart.resize({width: this.$refs.chart.offsetWidth})

总结

通过这篇文章,你因该了解了两个知识点,DOM的变化监控,以及通过 vuex 作为桥梁实现不同模块布局的变化监听,autoresize 的拓展实现手动触发;这就够了。