echarts报错问题initialize failed：invalid dom

 报错 Uncaught (in promise) Error: Initialize failed: invalid dom. 意思是初始化失败，DOM 无效 ，是因为 ECharts 尝试获取的 DOM 元素不存在

 

DOM 加载时机问题：

在 onMounted  钩子函数之外调用 document.getElementById  ，此时 Vue 组件可能还未完全渲染到 DOM 树中，对应的 pie - chart  元素还不存在，就去获取它，导致获取失败。

注意：echart一定要放在 onmounted里面！！

确保 DOM 元素存在：在 Vue 组件渲染过程中，模板中的 DOM 元素需要一定时间才能被真正创建并挂载到页面 DOM 树中。 echarts.init  方法需要传入一个已存在的 DOM 元素作为容器来初始化图表。如果在组件还未挂载完成时（即 DOM 元素还不存在 ）就调用 echarts.init  ，会出现 Initialize failed: invalid dom.  这样的错误，导致图表无法正常初始化。而 onMounted  钩子函数会在组件挂载完成后被调用，此时组件内的 DOM 元素已创建好，能保证 document.getElementById  可以正确获取到对应的图表容器元素，进而顺利初始化 ECharts 图表。

在 Vue 组件中，onMounted 钩子函数确保组件挂载到 DOM 后执行代码。但如果 ECharts 初始化代码在 DOM 元素渲染前就执行，仍可能获取不到元素。你可以将 ECharts 初始化代码放在 onMounted 中

 如果 页面没有多个echarts图要绘制  要把newmychart注释掉 否则页面会获取不到这个错误

导致el-table没法显示

 

 // 基于准备好的dom，初始化echarts实例const myChart = echarts.init(document.getElementById('pie - chart'));//  const newMyChart = echarts.init(document.getElementById('new-pie - chart'));// 配置项const option = {title: {text: '国际社会对台支持情况',subtext: '',left: 'center'},tooltip: {trigger: 'item'},legend: {orient: 'vertical',left: 'left'},series: [{name: '比例',type: 'pie',radius: '50%',data: [{ value: 33.2, name: '支持' },{ value: 38.1, name: '中立' },{ value: 28.7, name: '反对' }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};// 使用刚指定的配置项和数据显示图表myChart.setOption(option);// newMyChart.setOption(option);