侧边栏加载echart报错Error in v-on handler: “TypeError: Cannot read properties of null (reading ‘getAttribut

这个错误通常表示你在尝试访问一个 DOM 元素的属性时，该元素并不存在或尚未被渲染。具体来说，getAttribute 方法试图在一个为 null 的对象上调用，导致了这个错误。

在 Vue.js 中，这种情况可能发生在以下几种情况下：

1. DOM 元素尚未渲染：如果你在组件的生命周期中尝试访问一个尚未渲染的元素，可能会导致这个错误。确保在 DOM 元素渲染后再进行访问。

2. 使用 ref 时的时机问题：如果你使用了 ref 来引用一个 DOM 元素，确保在访问这个元素之前，组件已经完成了渲染。

3. 条件渲染：如果你使用了 v-if 或 v-show 来控制元素的显示，确保在访问元素时它是可见的。

原始代码

<el-drawer title="详情" :visible.sync="drawerVisible" size="40%" direction="rtl">
          <el-descriptions title="预测结果">
            <el-descriptions-item label="预测时间">2024-09-10 12:12:12
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions title="预测曲线">

          </el-descriptions>
          <div style="width: auto;height: 470px" id="echarts1">
          </div>
        </el-drawer>

openDrawer () {
        this.drawerVisible = true;
        this.echartsInit();

      },

解决方方式:

使用 this.$nextTick：在 Vue 中，使用 this.$nextTick 可以确保在 DOM 更新后再执行某些操

      openDrawer () {
        this.drawerVisible = true;
        this.$nextTick(() => { this.echartsInit() });
      },