vue中使用Tab切換echart圖表寬度大小變小，關於echart圖表的resize復原問題

問題描述：
項目需求使用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"

到這裏，基本解決了顯示問題，刷新