vue element的tabs中使用echarts

 tabs中使用echarts，除了第一个图表能默认显示外，当tabs切换的时候，第一个之后的可能就显示不了了，如何解决？

<template>
  <div>
    <el-row>
      <el-col :span="24">
        <el-card>
          <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
            <el-tab-pane label="用户管理" name="first" lazy>
              <div id="user-manage"></div>
            </el-tab-pane>
            <el-tab-pane label="配置管理" name="second" lazy>
              <div id="config-manage"></div>
            </el-tab-pane>
            <el-tab-pane label="角色管理" name="third" lazy>
              <div id="role-manage"></div>
            </el-tab-pane>
            <el-tab-pane label="定时任务补偿" name="fourth" lazy>
              <div id="task-compensation"></div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first"
    };
  },
  methods: {
    drawLine() {
      const lineChart = this.$echarts.init(
        document.getElementById("alarm-trend")
      );

      const option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: "line"
          }
        ]
      };

      lineChart.setOption(option);
    },
    drawBar() {
      const barChart = this.$echarts.init(
        document.getElementById("user-manage")
      );

      const option = {
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)"
            }
          }
        ]
      };

      barChart.setOption(option);
    },
    drawPie() {
      const pieChart = this.$echarts.init(
        document.getElementById("config-manage")
      );

      const option = {
        title: {
          text: "某站点用户访问来源",
          subtext: "纯属虚构",
          left: "center"
        },
        tooltip: {
          trigger: "item"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "搜索引擎" },
              { value: 735, name: "直接访问" },
              { value: 580, name: "邮件营销" },
              { value: 484, name: "联盟广告" },
              { value: 300, name: "视频广告" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      };

      pieChart.setOption(option);
    },
    drawGrandpa() {
      const grandpaChart = this.$echarts.init(
        document.getElementById("role-manage")
      );

      const data = [
        {
          name: "Grandpa",
          children: [
            {
              name: "Uncle Leo",
              value: 15,
              children: [
                {
                  name: "Cousin Jack",
                  value: 2
                },
                {
                  name: "Cousin Mary",
                  value: 5,
                  children: [
                    {
                      name: "Jackson",
                      value: 2
                    }
                  ]
                },
                {
                  name: "Cousin Ben",
                  value: 4
                }
              ]
            },
            {
              name: "Father",
              value: 10,
              children: [
                {
                  name: "Me",
                  value: 5
                },
                {
                  name: "Brother Peter",
                  value: 1
                }
              ]
            }
          ]
        },
        {
          name: "Nancy",
          children: [
            {
              name: "Uncle Nike",
              children: [
                {
                  name: "Cousin Betty",
                  value: 1
                },
                {
                  name: "Cousin Jenny",
                  value: 2
                }
              ]
            }
          ]
        }
      ];

      const option = {
        series: {
          type: "sunburst",
          // emphasis: {
          //     focus: 'ancestor'
          // },
          data: data,
          radius: [0, "90%"],
          label: {
            rotate: "radial"
          }
        }
      };

      grandpaChart.setOption(option);
    },
    drawRadar() {
      const radarChart = this.$echarts.init(
        document.getElementById("task-compensation")
      );

      const option = {
        title: {
          text: "基础雷达图"
        },
        tooltip: {},
        legend: {
          data: ["预算分配（Allocated Budget）", "实际开销（Actual Spending）"]
        },
        radar: {
          // shape: 'circle',
          name: {
            textStyle: {
              color: "#fff",
              backgroundColor: "#999",
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          indicator: [
            { name: "销售（sales）", max: 6500 },
            { name: "管理（Administration）", max: 16000 },
            { name: "信息技术（Information Techology）", max: 30000 },
            { name: "客服（Customer Support）", max: 38000 },
            { name: "研发（Development）", max: 52000 },
            { name: "市场（Marketing）", max: 25000 }
          ]
        },
        series: [
          {
            name: "预算 vs 开销（Budget vs spending）",
            type: "radar",
            // areaStyle: {normal: {}},
            data: [
              {
                value: [4300, 10000, 28000, 35000, 50000, 19000],
                name: "预算分配（Allocated Budget）"
              },
              {
                value: [5000, 14000, 28000, 31000, 42000, 21000],
                name: "实际开销（Actual Spending）"
              }
            ]
          }
        ]
      };

      radarChart.setOption(option);
    },
    handleClick(tab, event) {
      switch (this.activeName) {
        case "first":
          this.$nextTick(() => {
            this.drawBar();
          });
          break;
        case "second":
          this.$nextTick(() => {
            this.drawPie();
          });
          break;
        case "third":
          this.$nextTick(() => {
            this.drawGrandpa();
          });
          break;
        case "fourth":
          this.$nextTick(() => {
            this.drawRadar();
          });
          break;
        default:
          this.$nextTick(() => {
            this.drawBar();
          });
      }
    }
  },
  mounted() {
    this.drawBar();
  }
};
</script>

<style scoped>
#user-manage {
  height: 300px;
}
#config-manage {
  height: 300px;
}
#role-manage {
  height: 300px;
}
#task-compensation {
  height: 300px;
}
</style>

其中的关键是handleClick函数和$nextTick函数。