vue中的echart的渲染問題

方法一：

 this.$nextTick(function () {//使用nextTick爲了保證dom元素都已經渲染完畢
   const myObserver = new ResizeObserver(entries => {
      entries.forEach(entry => {
       $("#bar").width(entry.contentRect.width);
      $("#bar").height(entry.contentRect.height);
      this.drawEcharts()
        this.set()
      });
      });
     
      const someEl = document.querySelector('.container1');
      myObserver.observe(someEl);
})

方法二：

ageResize() {
        let that = this;
        $('.info_content').css('height',
          $(window).height() - $('.head').outerHeight(true) - $('.info_option').outerHeight(true) - $('.pagers').outerHeight(true) - 40);

        $(window).resize(function () {
          $('.info_content').css('height',
            $(window).height() - $('.head').outerHeight(true) - $('.info_option').outerHeight(true) - $('.pagers').outerHeight(true) - 40);
          that.myChart.resize()
        });
      },

方法三：

// let elementResizeDetectorMaker = require("element-resize-detector"); 
let erd = elementResizeDetectorMaker();
       let that = this;
       erd.listenTo(document.getElementsByClassName("right"), function (element) {
         that.$nextTick(function () {//使用nextTick爲了保證dom元素都已經渲染完畢
           //使echarts尺寸重置
           $("#chartLineBox").width($(".right").width());
           $("#chartLineBox").height($(".right").height());
           this.drawEcharts()
           this.set()
         })
       })
       this.drawEcharts()
       this.set()