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);