echart动态设置宽高

1 使用指令获取当前dom的宽高

directives:{
      resize: { // 指令的名称
        bind(el, binding) { // el为绑定的元素，binding为绑定给指令的对象
          // console.log(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});  // 关键(这传入的是函数,所以执行此函数)
            }
            width = style.width;
            height = style.height;
          }
          el.__vueSetInterval__ = setInterval(isReize, 300);
        },
        unbind(el) {
          // console.log(el,"解绑");
          clearInterval(el.__vueSetInterval__);
        }
      },
    },

2 绑定到dom元素上

  <div class="page" v-resize="DomResize">

    </div>

3 初始化echarts 设置宽高

DomResize(data) {
      let {width,height} = data;
      // console.log(width,'dom元素的宽');
      this.growthEchart = echarts.init(this.$refs.growthEchart)
      this.regionEchart = echarts.init(this.$refs.regionEchart)
      this.platAnalyEchart = echarts.init(this.$refs.platAnalyEchart)
      this.growthEchart.resize({
          width: width.replace('px','')-80 ,
      });
      this.regionEchart.resize({
          width: width.replace('px','')-907 ,
      });
      this.platAnalyEchart.resize({
          width: width.replace('px','')-916 ,
      });
    },