vue中缩放div，echart随之变化

1.vue

<template>
	<div class="div-content">
		<div  style="width: 500px;height: 200px;border: 1px solid;" @dblclick="aaaa('aaaa')" id="aaaa">
			<div id="aaaa1595560719032" style="width:100%;height:100%;"></div>
			<div class="resizeHandle" id="aaaaresizeHandle"></div>
		</div>
	</div>
</template>
<script>
import Draggable from '@/util/Draggable.js'
import Chartview from "@/util/Chartview.ts"
export default {
	components: {},
	props: [],
	data() {
		return {}
	},
	computed: {},
	watch: {},
	created() {},
	mounted() {
		this.initChart()
	},
	methods: {
		aaaa(id) {
			let container = document.querySelector('.div-content')
			let elem = document.querySelector('#' + id)
			let resizeHandle = document.querySelector('#' + id + 'resizeHandle')
			new Draggable(container, elem, resizeHandle, true, resizeStyle => {
				console.log('The size of the current element after dragging(当前元素拖拽后的大小)', resizeStyle)
				let aaa = document.getElementById('aaaa1595560719032')
				let myChart =Chartview.initEcharts('aaaa1595560719032') 
				myChart.resize()
			})
		},

		initChart() {
			var option = {
				color: ['#3398DB'],
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow'
					}
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: [
					{
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
						axisTick: {
							alignWithLabel: true
						}
					}
				],
				yAxis: [
					{
						type: 'value'
					}
				],
				series: [
					{
						name: '直接访问',
						type: 'bar',
						barWidth: '60%',
						data: [10, 52, 200, 334, 390, 330, 220]
					}
				]
			}
			let myChart =Chartview.initEcharts('aaaa1595560719032') 
			myChart.clear()
			myChart.setOption(option)
		}
	}
}
</script>
<style>
 .div-content {
	width: 100%;
	height: 900px;
} 

.resizeHandle {
	display: block;
	position: absolute;
	width: 10px;
	height: 10px;
	border-right: 2px solid #b2b2b2;
	border-bottom: 2px solid #b2b2b2;
	right: 0px;
	bottom: 0px;
	overflow: hidden;
	cursor: nw-resize;
}
</style>

2.Draggable.js

export default class Draggable {

  constructor(container, elem, resizeHandle, isPixel, resizeFn) {
    this.container = container;
    this.elem = elem;
    this.resizeHandle = resizeHandle;
    this.isPixel = isPixel;
    this.resizeFn = resizeFn;
    this.dragMinWidth = 50; //最小宽度
    this.dragMinHeight = 50; //最大宽度
    this.init();
    // this.drag();
    this.resize();
  }
  init() {
    if (getStyle(this.container, "position") === "") {
      this.container.style.position = "relative";
    }
    if (getStyle(this.elem, "position") === "") {
      this.elem.style.position = "absolute";
    }
  }
 
  resize() {
    this.resizeHandle.onmousedown = event => {
      var event = event || window.event;
      let disX = event.clientX - this.resizeHandle.offsetLeft;
      let disY = event.clientY - this.resizeHandle.offsetTop;
      let iW = 0;
      let iH = 0;
      let realW = "";
      let realH = "";
      document.onmousemove = event => {
        var event = event || window.event;

        let iL = event.clientX - disX;
        let iT = event.clientY - disY;
        let maxW = this.elem.parentNode.clientWidth - this.elem.offsetLeft - 2;
        let maxH = this.elem.parentNode.clientHeight - this.elem.offsetTop - 2;
        iW = this.resizeHandle.offsetWidth + iL;
        iH = this.resizeHandle.offsetHeight + iT;

       
        if (this.isPixel) {
          realW = iW + "px";
        } else {
          realW = (iW / this.elem.parentNode.clientWidth) * 100 + "%";
        }
        this.elem.style.width = realW;

       
        if (this.isPixel) {
          realH = iH + "px"
        } else {
          realH = (iH / this.elem.parentNode.clientHeight) * 100 + "%"
        }
        this.elem.style.height = realH;
        if ((iW == this.dragMinWidth) || (iH == this.dragMinHeight)) document.onmousemove = null;
        return false;
      };
      document.onmouseup = () => {
        document.onmousemove = null;
        document.onmouseup = null;
        if (this.resizeFn) {
          this.resizeFn({
            width: realW,
            height: realH
          });
        }
      };
      return false;
    }
  }

}

function getStyle(obj, attr) {
  const style = obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, false)[attr];
  if (!style || style === "static") {
    return "";
  }
  return style;
}