el-drawer抽屉打开 echarts图形加载不出问题

在使用 `el-drawer` 组件打开 `echarts` 图形时，可能会出现图形加载不出的问题。这通常是因为在抽屉打开时，`echarts` 图形的容器元素并没有正确计算其大小，导致图形无法正确显示。

解决方法：

1. 在 `el-drawer` 组件的 `opened` 事件中手动触发 `echarts` 图形的 `resize` 方法，重新计算容器大小。

<template>
  <el-drawer :visible.sync="drawerVisible" @opened="handleOpened">
    <div ref="chartContainer"></div>
  </el-drawer>
</template>

<script>
import echarts from 'echarts';

export default {
  data() {
    return {
      drawerVisible: false,
      chartInstance: null
    };
  },
  methods: {
    handleOpened() {
      if (this.chartInstance) {
        this.chartInstance.resize();
      }
    },
    initChart() {
      const chartContainer = this.$refs.chartContainer;
      this.chartInstance = echarts.init(chartContainer);
      // ...
    }
  },
  mounted() {
    this.initChart();
  }
};
</script>

2. 使用 `echarts` 的 `autoResize` 配置项，自动监听容器大小的变化并重新渲染图形。需要注意的是，该配置项需要在初始化 `echarts` 实例时设置。

<template>
  <el-drawer :visible.sync="drawerVisible">
    <div ref="chartContainer"></div>
  </el-drawer>
</template>

<script>
import echarts from 'echarts';

export default {
  data() {
    return {
      drawerVisible: false
    };
  },
  methods: {
    initChart() {
      const chartContainer = this.$refs.chartContainer;
      const options = {
        // ...
        // 设置 autoResize 配置项
        autoResize: true
      };
      const chartInstance = echarts.init(chartContainer, null, options);
      // ...
    }
  },
  mounted() {
    this.initChart();
  }
};
</script>

以上两种方法都可以解决 `el-drawer` 打开 `echarts` 图形加载不出的问题，选择哪种方式取决于具体需求。