echarts、v-charts在element中的Tabs标签页的el-tab-pane元素中不显示的问题

最近做项目碰到一个问题：

element中的el-tabs组件，在el-tab-pane引入v-charts的组件时，点击页签时没有图表的出现,如果将浏览器窗口缩小一点（即改变浏览器窗口大小），就可以展示。

在此推荐有关这个问题的两个文章：

有关el-tab-pane中echarts图遇到的问题(element中的Tabs 标签页)

在el-tab-pane选项卡中使用echarts

相信大多数人，遇到这样的问题，这两篇文章中给出的答案已经足够解决问题了，但是却解决不了我的问题。暂时不清楚什么原因，可能是组件嵌套的比较深的问题。采用 echarts 的调整大小的方法 resize() 也不起作用。最后还是用 v-if 来解决的。

解决方法：

页签组件是 tabs.vue 组件，v-charts 封装的折线图是 charts-line.vue 组件。具体代码不再展示，只说具体的解决办法。

在 tabs.vue 中，当点击页签的时候，通过 eventBus 发送 handleClickTab 事件：

methods:{
  //页签切换
  tabClick(){
    this.$eventBus.$emit('handleClickTab');
  }
}

在  charts-line.vue 中的主要代码如下：

<template>
  <div id="echarts-line">
    <!-- v-charts的折线图 -->
    <ve-line 
      v-if="isShow" 
      :data="chartData" 
      :data-empty="dataEmpty"
    ></ve-line>
  </div>
</template>
<script>
  import 'v-charts/lib/style.css'
  export default {
    data() {
      isShow:true,    //控制图表是否显示，初始为true
      chartData: {},  //图表数据，通过接口获取的
      dataEmpty:false //图表数据是否为空，接口获取数据为空的时候设置为true，反之为false
    },
    mounted(){
      //通过 eventBus 接收 tabs.vue 控件发出的 handleClickTab 事件
      this.$eventBus.$on('handleClickTab', () => {
        this.isShow=false;
        setTimeout(()=>{
          this.isShow=true;
        })
      })
    },
    methods:{
      //此处为图表控件相关的方法
    }
  }
</script>

注解：

　　1、在  charts-line.vue 中定义了 isShow 来控制图表的显示，isShow默认为 true，只有页签组件引用图表控件的时候，会改变 isShow 的值，如果是表单之类的组件或者其他组件引用图表控件则不受影响。

　　2、eventBus 的使用其实很简单，对 eventBus 不是太熟悉的话，可以参考：Vue两个简易代替vuex的方法(eventBus,observable)