vue与echarts显示隐藏

随着项目需求，我们有时候会用到vue+echarts；有时候ecahrts图表需要在适当的时候进行显示隐藏，对于众多vue使用者来说显示隐藏==>v-show;我也不例外。使用v-show的确可以做到显示隐藏但是echarts图表的宽高会不受控制。

知识点

在此之前我们先来理解一下vue的显示隐藏：

v-show

v-if

1	这两个都可以进行显示隐藏，不过v-show相当于加了属性=>display:none;而v-if是不渲染改节点，这两者有着质的区别

解决方案

单纯的显示隐藏

1	对于单纯的显示隐藏使用v-if,切在的当前页面只渲染一次；这种情况使用v-if即可。当然还有给echarts图表添加属性 grid:{containLabel:true}

复杂的显示隐藏

对于需要反复重新渲染的echarts图表如果使用v-if的话，初始化时是可行的，但是切换重新渲染会抛出错误 attributes is not defined。因此我们不能使用v-if;

思路：

报错原因=>节点不存在
显示隐藏底层是display:none;或者opacity:0;

代码：

<div id="charts" style="display:none;">
         <div class="indent">
           <div class="indent_icon"></div>
           <span class="indent_ratio">订单占比</span>
           <div class="indent_kong"></div>
         </div>

         <div id="myChart" ></div>

         <div class="indent_two">
           <div class="indent_icon"></div>
           <span class="indent_ratio">订单趋势</span>
           <span class="rise" v-show="isactive!=1">{{huanbi}}</span>
           <span class="increase" v-show="isactive!=1">环比增长</span>
           <div class="indent_kong"></div>
         </div>
         <div id="myChart_two" :style="{width: '100%', height: '300px','margin-bottom':'1rem',}"></div>
</div>

重新渲染:

getEcharts:function(){
      //echarts图表数据
      var USaferss={
            Action:"/Itil/face/V1801090100.G.JSON",
            Result:{},
            Values:{
                      // select:'time',
                      //staDate:'2017-03-06'
                      find:'time2',
                      type:this.isactive,
                      f_itil_1801090105_E01:this.companycode,

                  },
              Upload:false,
            Finish:(v)=>{
                var Sv=v.data.OutData;
                          this.times = Sv;
                          this.huanbi = this.times.seq;
                          this.all = this.times.all;
                          console.log( this.huanbi);
                          console.log(this.times.appli);
                          console.log(Sv);
                          var charts = document.getElementById('charts');
                          if( this.all==0){

                            charts.style.display="none";
                          }else{
                            charts.style.display="block";
                            this.drawLine(this.times);

                            this.drawLinetwo(this.times);
                          }

            },
            Errors:(v)=>{}
      };

      this.PstData(USaferss,"G");  
  },

这样我们就可以实时切换图表了，无数据则隐藏，有数据就显示；默认一定要是隐藏状态o,希望对你有所帮助！