el-tab切换tab页，echarts只有第一个显示正常，其余

设置一下echarts的高度和宽度就好了耶
参考链接https://www.cnblogs.com/Ao-min/p/13157998.html

<el-col :span="16" id="test">
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="最近7天" name="first">
          <div
            id="latest_7_chart"
            v-show="'first'==activeName"
            :style="chartsHeight"
            v-loading="loading"
          ></div>
        </el-tab-pane>
        <el-tab-pane label="最近30天" name="second">
          <div
            id="latest_30_chart"
            v-show="'second'==activeName"
            :style="chartsHeight"
            v-loading="loading"
          ></div>
        </el-tab-pane>
    </el-tabs>
</el-col>

切换标签

handleClick(tab, event) {
    switch (tab.name) {
        case "first":
          this.initChartLine1("latest_7_chart");
          break;
        case "second":
          this.initChartLine1("latest_30_chart");
          break;
        default:
          this.initChartLine1("latest_7_chart");
      }
}

初始化echrats时指定宽度

initChartLine1(echartId) {
      console.log("初始化图表" + echartId);
      var option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: [
            ...
          ]
        },
        xAxis: [
          ...
        ],
        yAxis: [
          ...
        ],
        series: [
          ...
        ]
      };
      var chartLine2 = echarts.init(document.getElementById(echartId));
      chartLine2.clear();
      chartLine2.setOption(option);
      var tabw = document.getElementById("test");
      var w = tabw.offsetWidth - 30;
      var resize = {
        width: w
      };
      chartLine2.resize(resize);
      this.loading = false;
    }