vue 中解决多个echarts图表自适应问题

<div class="echarts">
　　<IEcharts :option="bar" ref="echarts"></IEcharts>

</div>

mounted () {
      this.selfAdaption ()
    },
    methods: {
      //echarts自适应
      selfAdaption ()  {
        const self = this；
        setTimeout(() => {
          window.onresize = function () {
            self.$refs.echarts.resize()
          }
        }, 10)
      }

}

上面这段代码在出现多个echarts图表时只有一个图表自适应，修改了一下

 

<div class="echarts">
　　<IEcharts :option="bar" ref="echarts"></IEcharts>
</div>
 
mounted () {
      this.selfAdaption ()；
},
methods: {
   //echarts自适应
   selfAdaption ()  {
     let _this = this；
     setTimeout(() => {
         window.addEventListener('resize', function () {
            _this.$refs.echarts.resize();
         })
      }, 10)
    }
  }

 

------------------------------------------------------------------------------------------------------------------------------------

在vue中引入多个echart图表时

<div class="linebox">

<div :id="id" style="width:100%; height:100%;" ref="Echart"></div>

</div>



methods: {

    init(){

    const self = this;//因为箭头函数会改变this指向，指向windows。所以先把this保存

    setTimeout(() => {

        window.addEventListener('resize', function() {

             self.chart = self.$echarts.init(self.$refs.Echart);

              self.chart.resize();

        })

      },10)

    }

}