vue echarts 一个页面多图表自适应（网上千万种方法 各有各解决方案 ）

重点（自适应这段放在mounted方法中）

// 自适应不同屏幕尺寸
mounted:function(){
	this.init();
 	const self=this;
 	 window.addEventListener("resize",function(){
	      self.chart.resize();
	      // 如有多图表
	      self.chartLogOutflow.resize();
	      self.chartLogMethodQPS.resize();
	      self.chartNetFlow.resize();
	      self.chartLogCodeQPS.resize();
  });
}

创建图表

// 写入流量
logInflowLine:function(){
      this.chart=this.$echarts.init(document.getElementById("logInflowChart"));
      this.chart.setOption({
          title: {
              text: '写入流量(Byte)',
              textStyle:{
                  color:'#000',        //颜色
                  fontStyle:'normal',     //风格
                  fontWeight:'600',    //粗细
                  fontSize:13    //大小
              }
          },
          tooltip : {
              trigger: 'axis',
              axisPointer: {
                  type: 'cross',
                  label: {
                      backgroundColor: '#6a7985'
                  }
              }
          },
          legend: {
              x: 'right',  
              data:['写入流量']
          },
          series: [{
              name:'写入流量',
              type:'line',
              data:this.logInflow,
              itemStyle: {
                  normal: {
                      color: "#91c7ae",
                      lineStyle: {
                          color: "#91c7ae"
                      }
                  }
              }
          }],
          grid: {
              left: '3%',
              bottom: '3%',
              containLabel: true
          },
          xAxis : [
              {
                  type : 'category',
                  boundaryGap : false,
                  data: this.logInflowXAxisData.map(function (str) {
                      return str.replace(' ', '\n')
                  })
              }
          ],
          yAxis : [
              {
                  splitNumber:4,
                  type : 'value'
              }
          ]
      })                
  },

引用方法
关键：init方法里的setTimeout

init:function(){
      setTimeout(()=>{
            this.logInflowLine();
        })
    }

// 掉接口出x轴和y轴数据
 checkMonitorModuleIndex: function(){
     this.$api.cloudWatch.checkMonitorModuleIndex({
         "accountId":12
     })
     .then(res => {
         this.logInflow= res.data.logInflow;
         this.logInflowXAxisData= res.data.logInflowXAxisData;
         this.init();
     })
 },

created(){
         this.checkMonitorModuleIndex();
 },