echart自适应

比如这个页面 下面这个区域没有做到自适应，该如何解决？
解决方案如下：

1. 算出宽度 （左侧、右侧宽度一样）
2. flex：flex为1和width：0配合使用

还有我框出来的这种 也没有做到自适应，应该如何解决？
解决方案如下：

import { addListener, removeListener } from "resize-detector";
mounted() {
    addListener(this.$refs[`${this.dom}`], this.resize);
},
 methods: {
     resize() {
    this.chart.resize();
  },
 }

这里存在一个问题：
为什么用以下方式不能解决此问题呢？（需要找到原因）

import { addListener, removeListener } from "resize-detector";
mounted() {
    window.addEventListener(this.$refs[`${this.dom}`], this.resize);
},
 methods: {
     resize() {
    this.chart.resize();
  },
 }

需要掌握的知识点：

1. resize-detector的作用
2. lodash/debounce的作用