问题描述：
项目需求使用elementUI中的Tab切换，两个el-tab-pane分别涉及echart组件，第一个tab-pane里面的echart显示正常，当点击第二个tab-pane以后，第二个tab-pane里面的echart图表大小发生变化，显示不正常，宽高出现问题。
这是第一个tab-pane,显示正常。

此处为第二个tab-pane显示的echart图表，明显不正常

解决办法（比较推荐）：

首先介绍下结构，epidemicAnalysis/index.vue是路由页面入口文件，indicatorsChange文件夹里面的是第一个tab-pane里面涉及的echart组件（我在页面这里每一个echart都是单独出来的一个组件，直接在epidemicAnalysis/index.vue里面引用），indicatorsSameChange文件夹是第二个tab-pane里面涉及的echart组件，问题也是在第二个tab-pane里面的echart组件。

第一步：在housingIncreaseOne组件里面的echart组件(echart被我单独封装过，引用echart-base组件)，添加：ref="chart"，在props里面添加：instance: [Object, String]，在mouted方法里面添加：this.$nextTick(() => { this.$emit('update:instance', this.$refs.chart.chart); })，你可以把初始化setOption()方法移动到created里面，每个echart子组件都如此添加就行了。

<template>
  <div style="width: 100%;height: 100%">
    <echart-base ref="chart" :chart-option="option" height="100%" width="100%"></echart-base>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import EchartBase from '../../../components/Echart/chart'

  export default {
    name: "housingIncreaseOne",
    components: {EchartBase},
    props: {
      instance: [Object, String],
    },
    data() {
      return {
        option: {}
      }
    },
    methods: {
      setOption() {
        this.option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['邮件营销', '联盟广告']
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              name: '邮件营销',
              type: 'line',
              stack: '总量',
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '联盟广告',
              type: 'line',
              stack: '总量',
              data: [220, 182, 191, 234, 290, 330, 310]
            }
          ]
        }
      }
    },
    created() {
      this.setOption();
    },
    mounted() {
      this.$nextTick(() => {
        this.$emit('update:instance', this.$refs.chart.chart);
      })
    },
  }
</script>

<style scoped>

</style>

第二步：在epidemicAnalysis/index.vue即入口文件。data里面添加参数refreshOne: null,
添加监听事件，我这里因为有四个echart组件所以我有四个参数，根据实际需求添加减少：
watch: {
activeName(val) {
if (val === ‘second’) {
this.$nextTick(() => {
if (this.refreshOne)
this.refreshOne.resize();
this.refreshTwo.resize();
this.refreshThree.resize();
this.refreshFour.resize();
});
}
}
}

最后在第二个tab-pane里面的echart组件添加

:instance.sync="refreshOne"

到这里，基本解决了显示问题，刷新