vue项目中多个echarts图表自适应处理方法

这篇文章主要介绍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)
  }
}

以上就是vue中多个echarts图表自适应处理方法，希望对大家有所帮助，DMZJWZ资料网非常感谢大家的支持和关注！