绘制echarts遇到的一些坑

一、项目介绍
首先我先讲一下我的项目 antd vue 里面的tabs 选项卡切换 每个选项卡里面都有一个柱状图
二、遇到的问题
请求后台接口的数据 已经返回来了 但我前端这里 测试环境下 三个柱状图都可以显示出来 但在模拟生产环境下 就出现了问题 第一个选项卡 里面的柱状图始终显示不出来，第二个，第三个都可以正常显示
三、解决方法
后来我反复研究发现 原来是 v-if v-else 影响的 在柱状图的组件 内 不要写任何关于v-if v-else 之类的 v-show 没试过 但尽量还是不要写的好

<template>
    <!--负载情况-->
    <div :style="{ padding: '0 0 15px 15px',borderBottom:'25px solid #f0f2f5' }">
          <div ref="echartestOne"  :style="{width:'100%',height:'700px'}">
          </div>
    </div>
</template>
 
<script>
  import echarts from 'echarts'
    export default {
      name: "NodeIndexDialog",
      props: {
        data:{
          type: Array,
        },
        datax:{
          type: Array,
        },
        datay:{
          type: Array,
        },
      },
      data(){
        return {
          // MobileVisible:false,
          // PcVisible:false,
          xAxisdata:[],
          yAxisdata:[],
        }
      },
      // created(){
      //   let isMobile = navigator.userAgent.indexOf('Mobile')>-1;
      //   if(isMobile){
      //     this.MobileVisible=true;
      //     this.PcVisible=false;
      //   }else{
      //     this.PcVisible=true;
      //     this.MobileVisible=false;
      //   }
      // },
      mounted(){
        console.log('data',this.data);
        console.log('mounted()');
          this.$nextTick(function () {
            this.xAxisdata=this.datax;
            this.yAxisdata=this.datay;
            console.log('x',this.xAxisdata);
            console.log('y',this.yAxisdata);
            this.drawLine();
          });
 
      },
      methods:{
       drawLine(){
         let myChart = echarts.init(this.$refs.echartestOne);
         console.log('dom',myChart);
         let option = {
            tooltip: {
              trigger:'axis',
              axisPointer:{            // 坐标轴指示器，坐标轴触发有效
                type:'shadow'        // 默认为直线，可选为：'line' | 'shadow'
              }
            },
            grid: {
              left:'3%',
              right:'4%',
              bottom:'3%',
              containLabel: true
            },
				    xAxis: {
				        type: 'category',
				        data: this.datax,
                axisLabel:{
                  interval:0,  //设置这里
                  formatter:function(value){
                    return value.split("").join("\n")
                  },
                  textStyle:{
                    fontSize:14,
                  }
                },
				    },
				    yAxis: {
				      type: 'value'
				    },
				    series: [{
				      data: this.datay,
				      type: 'bar',
				      itemStyle:{
                normal:{
                  color:'#1890ff'
                }
              },
              barWidth:'35',			//---柱形宽度
              barCategoryGap:'20%',		//---柱形间距
				    }]
				};
				myChart.setOption(option);
        //让图表自适应
        window.addEventListener("resize",function(){
          myChart.resize()  // myChart 是实例对象
        })
       },
      }
    }
</script>
<style scoped>
</style>