vue中echarts使用v-if展示

数据为空页面展示暂无数据的字样

使用了div需要v-if或者v-show控制显示

使用echarts 添加v-if 会出现 渲染不出来以及报错的问题,使用v-show的时候图标会渲染出来但是 也会出现长框不一的现象。

因为使用v-if的时候当条件为false会出错，div是不存在的所以无法对图表进行初始化

在vue项目中使用v-show控制div元素的显示，div标签中是echarts图表，自定义的echarts CSS样式是width为100%，但实际显示时图表宽度确为100px

echarts 图形推荐使用v-if,因为v-show 本身是结构已经存在，当数据发生变化时结构并未重新渲染

但使用v-if会出现echarts折线图不显示这里我就把echarts方法放入updated事件中，就展示成功了。

 <div v-show="Yvifs == false">暂无数据</div>
 <div class="curveTbAxis" :empty-text="emptyText" v-if="Yvifs">
 <div style="width: 100%;height:660px;" ref="chartBox"/>
</div>

    data() {
      return {
        Yvifs: false,
      }
    },

methods(){
 async initCharts() {
        this.myChart = echarts.init(this.$refs.chartBox);
        this.myChart.setOption({})
    }
},

    async gitDataList() {
       //获取父组件树形数据，并调用后台接口获取折线图数据
       const res = (后台接口)
       if(res.data){
       this.Yvifs = true
      } else{
       this.Yvifs = false
      }
    },

updated(){
    this.initCharts()
}

但控制台报错"TypeError: Cannot read property 'getAttribute' of null"

v-if是让盒子消失，并不是改变盒子display属性，当显示v-if的时候他会重新插入盒但是echarts表格并不会刷新，因为在vue中mounted hook已经调用一遍echarts表格的方法

解决方法：使用vue中的this.$nextTick(() => { this.initCharts() }) 让v-if 等于true的时候调用这里面的函数echarts就可以重新加载，所以这里就不再需要updated（参考文章：在vue中使用echarts 使用v-if的问题 （不能显示 以及报错"TypeError: Cannot read property 'getAttribute' of null"）_奥皮的博客-CSDN博客）

    props: ['selectUser'],    //父组件传递过来数据

    watch: {
      selectUser: {
        handler: function () {
          this.gitDataList()
        }
      },
    },

   async initCharts() {
        //echarts表格函数
        this.myChart = echarts.init(this.$refs.chartBox);
        this.myChart.setOption({})
    }，

    async gitDataList() {
       //获取父组件树形数据，并调用后台接口获取折线图数据
       const res = (后台接口)
      if(res.data){
       this.Yvifs = true
        YLine()
      } else{
       this.Yvifs = false
      }
    },

    YLine() {
    // 当现实div的时候使用这个回调函数 
        this.$nextTick(() => {
          this.initCharts()
        })
      },

折线图展示成功并且不报错但又出来一个警告：There is a chart instance already initialized on the dom

这里销毁一下折线图就好，dom上已经初始化了一个图表实例，如果你图表中定义了点击方法多次覆盖之后点击方法会触发多次更新页面重复加载这个图表实例时就会出现这个警告

async initCharts() {
        //echarts表格函数
    }，

    async gitDataList() {
        YLine()
    },

    YLine() {
    // 当现实div的时候使用这个回调函数 
        this.$nextTick(() => {
    //销毁
          this.myChart && this.myChart.dispose();
          this.myChart = null
          this.initCharts()
        })
      },