1.Echarts的坑：切换tab时，echart显示默认的100px

1.切换tab时，echart显示默认的100px

切换tab时，elementUI的原理设置v-show 元素被隐藏,切换的时候echart 获取不到父元素高度

1.2 效果

1.3 解决方法

切换tab时先销毁然后再init（注意：要在this.$nextTick中进行操作，确保能获取到dom）

	this.$nextTick(() => {
        this.$echarts.init(document.getElementById("element")).dispose();
        this.myChart = this.$echarts.init(document.getElementById("element"));
        let option = xxx
        this.myChart.setOption(option)
    })
    // 切换tab时在tab-click(tab 被选中时触发)事件中对echarts进行重绘

具体实现看下面

1.4 原代码

<template>
  <div style="padding:20px;">
    <el-card>
      <el-tabs type="border-card" v-model="tabName" @tab-click="handleClick">
        <el-tab-pane label="用户管理" name="用户管理">
          <div class="echart-top">
            <div id="echart1" style="width:100%;height:100%;"></div>
            <div id="echart2" style="width:100%;height:100%;"></div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="配置管理" name="配置管理">
          <div class="echart-top">
            <div id="echart3" style="width:100%;height:100%;"></div>
            <div id="echart4" style="width:100%;height:100%;"></div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      tabName: "配置管理",
      myChart1: "",
      myChart2: "",
      myChart3: "",
      myChart4: "",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getEchart1();
      this.getEchart2();
      this.getEchart3();
      this.getEchart4();
    },
    // 	tab 被选中时触发
    handleClick(value) {
      console.log("value", value);
      if (value.name === "用户管理") {
        this.getEchart1();
        this.getEchart2();
      } else {
        this.getEchart3();
        this.getEchart4();
      }
    },
    getEchart1() {
      this.$nextTick(() => {
        this.$echarts.init(document.getElementById("echart1")).dispose();
        this.myChart1 = this.$echarts.init(document.getElementById("echart1"));
        let option = {
          legend: {
            top: "bottom",
          },
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          series: [
            {
              name: "面积模式",
              type: "pie",
              radius: [50, 250],
              center: ["50%", "50%"],
              roseType: "area",
              itemStyle: {
                borderRadius: 8,
              },
              data: [
                { value: 40, name: "rose 1" },
                { value: 38, name: "rose 2" },
                { value: 32, name: "rose 3" },
                { value: 30, name: "rose 4" },
                { value: 28, name: "rose 5" },
                { value: 26, name: "rose 6" },
                { value: 22, name: "rose 7" },
                { value: 18, name: "rose 8" },
              ],
            },
          ],
        };
        this.myChart1.setOption(option);
      });
    },
    getEchart2() {
      this.$nextTick(() => {
        this.$echarts.init(document.getElementById("echart2")).dispose();
        this.myChart2 = this.$echarts.init(document.getElementById("echart2"));
        let 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)",
              },
            },
          ],
        };
        this.myChart2.setOption(option);
      });
    },
    getEchart3() {
      this.$nextTick(() => {
        this.$echarts.init(document.getElementById("echart3")).dispose();
        this.myChart3 = this.$echarts.init(document.getElementById("echart3"));
        let option = {
          xAxis: {
            type: "category",
            boundaryGap: false,
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
          },
          yAxis: {
            type: "value",
          },
          series: [
            {
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: "line",
              areaStyle: {},
            },
          ],
        };
        this.myChart3.setOption(option);
      });
    },
    getEchart4() {
      this.$nextTick(() => {
        this.$echarts.init(document.getElementById("echart4")).dispose();
        this.myChart4 = this.$echarts.init(document.getElementById("echart4"));
        let option = {
          xAxis: {},
          yAxis: {},
          series: [
            {
              data: [
                [10, 40],
                [50, 100],
                [40, 20],
              ],
              type: "line",
            },
          ],
        };
        this.myChart4.setOption(option);
      });
    },
  },
};
</script>

<style scoped>
.echart-top {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 500px;
}
</style>