vue中echarts图形自动伸缩_element vue + echarts 垂直树形图

vue中监控元素大小变化element-resize-detector

导入npm install element-resize-detector
1.可以浏览器统一导入 如放到index.html

<script src="node_modules/element-resize-detector/dist/element-resize-detector.min.js"></script>
1

.也可以在vue中导入
如在

monted(){
  var elementResizeDetectorMaker = require("element-resize-detector");//导入
  // 创建实例
  var erd = elementResizeDetectorMaker();
  // 创建实例带参
  var erdUltraFast = elementResizeDetectorMaker({
                strategy: "scroll", //<- For ultra performance.
                callOnAdd: true,
                debug: true
            });
  //监听id为test的元素 大小变化
  erd.listenTo(document.getElementById("test"), function(element) {
    var width = element.offsetWidth;
    var height = element.offsetHeight;
    console.log("Size: " + width + "x" + height);
  });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

3.erd实例方法
RemoveListener(element，listener)
从元素中移除侦听器。

RemoveAllListener(element)
从元素中移除所有侦听器，但不完全删除检测器。如果以后可能会添加侦听器，并且不希望检测器再次初始化，请使用此函数。
5.
uninstall(element)
完全删除检测器和所有侦听器。

vue中监听echarts图形

先在需要引入的页面中引入

import elementResizeDetectorMaker from "element-resize-detector";
1

第二步在组件中
如在

<el-col class="contatin" ref="aa" id="test">
1

最后在script中的mounted中使用

mounted() {
    let that = this;
    that.getdatatime();
    that.gettree();
    var ss = that.$refs["aa"];
    var erd = elementResizeDetectorMaker();
    erd.listenTo(document.getElementById("test"), function(ss) {
      var width = ss.offsetWidth;
      var height = ss.offsetHeight;
      that.$nextTick(function() {
        //使echarts尺寸重置
        if (document.getElementById("chartaa")) {
          that.$echarts.init(document.getElementById("chartaa")).resize();
        }
        if (document.getElementById("chartbb")) {
          that.$echarts.init(document.getElementById("chartbb")).resize();
        }
      });
    });
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20