【Vue+Echarts】天坑 子组件中的Echarts Cannot read properties of undefined (reading ‘getAttribute‘)“

Error in nextTick: “TypeError: Cannot read properties of undefined (reading ‘getAttribute’)”

报错 Error in nextTick: “TypeError: Cannot read properties of undefined (reading ‘getAttribute’)”

Echarts无法加载

情景

子组件中存在Echarts图 父组件中点击才展开显示

原因

在子组件中默认通过：v-if隐藏元素，导致Echarts未被初始化加载出来；
大部分情况
通过钩子函数加载Echarts表格

 // ...渲染Echarts
  mounted() {
    this.initCharts();
  },
1
2
3
4

大部分情况通过此方法解决：

将初始化图表的函数放在 this.$nextTick 函数中，可以确保在 DOM 更新完毕后再执行图表的初始化，从而避免了访问 undefined 引用的错误。

mounted() {
    this.$nextTick(() => {
      this.initCharts();
    });
  },
1
2
3
4
5

解决方案

将 v-if 改为 v-show。v-if 仅在条件为真时渲染 DOM 元素，因此可能会导致 ECharts 初始化失败。而 v-show 始终渲染 DOM 元素，只是在条件为假时将其隐藏。
然后，在组件的 watch 选项中，通过监听v-show=”somevalue“ 的somevalue来控制我们的Echarts渲染。
部分代码：

<div v-show="somevalue" style="margin: 5px;">
1

    somevalue(newVal, oldVal) {
      if (newVal !== oldVal && newVal) {
        this.$nextTick(() => {
          this.initPieCharts();
        });
      }
    },
  }
1
2
3
4
5
6
7
8