resize

首先resize是一个自适应的指令他可以让我们的echarts图表自适应于盒子大小
不管浏览器窗口是放大还是缩小都会自适应

自定义指令

我们在script里面写一个resize的自定义指令
    directives: {
    // 使用局部注册指令的方式
    resize: {
      // 指令的名称
      bind(el, binding) {
        // el为绑定的元素，binding为绑定给指令的对象
        let width = "",
          height = "";
        function isReize() {
          const style = document.defaultView.getComputedStyle(el);
          if (width !== style.width || height !== style.height) {
            binding.value(); // 关键
          }
          width = style.width;
          height = style.height;
        }
        el.__vueSetInterval__ = setInterval(isReize, 300);
      },
      unbind(el) {
        clearInterval(el.__vueSetInterval__);
      },
    },
   },

绑定

我们在盒子上面写一个v-resize的自定义指令
这样我们在methods里面就可以监听到resize有没有执行

echarts

我们在页面上面渲染完echarts图就可以去绑定resize了
为什么使用window.addEventListener("resize", () => {
    // 代码段儿
    myChart.resize();
  });
  因为页面上有多个echarts图的时候resize会被覆盖掉只会执行最新的，
  这样的写法就不会被覆盖掉