vue监听dom元素变化修改echar图表

---

前言

提示：这里可以添加本文要记录的大概内容：

vue中监听dom元素变化

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、install监听依赖

npm install element-resize-detector

二、使用步骤

1.监听指定id并修改echarts宽高

代码如下（示例）：

  const that = this;
    var elementResizeDetectorMaker = require("element-resize-detector"); //导入
    var erd = elementResizeDetectorMaker();
    erd.listenTo(document.getElementById("eventSbQk"), (element) => {
      that.$nextTick(() => {
        //监听到事件后执行的业务逻辑
        //使echarts尺寸重置
        let myChart = that.$echarts.init(that.$refs.eventSbQk);
        myChart.resize();
      });
    });
    erd.listenTo(document.getElementById("eventBlQk"), (element) => {
      that.$nextTick(() => {
        //监听到事件后执行的业务逻辑
        //使echarts尺寸重置
        let myChart = that.$echarts.init(that.$refs.eventBlQk);
        myChart.resize();
      });、

监听Windows窗口变化

window.onresize = () => {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(this.$refs.eventSbQk);
      myChart.resize();
      let blhart = this.$echarts.init(this.$refs.eventBlQk);
      blhart.resize();
    };