Vue2中使用ApexCharts报错Uncaught (in promise) Error: Element not found

这个错误的核心原因是ApexCharts初始化时找不到对应的DOM元素，以下是针对性的解决步骤：

• 安装Vue2适配的ApexCharts封装包
  仅安装apexcharts还不够，需要搭配Vue2专用的vue-apexcharts（注意指定适配Vue2的版本，避免安装到Vue3兼容版本）：

  npm install vue-apexcharts@3.1.1 --save
  

  然后在main.js中全局注册组件：

  import Vue from 'vue'
  import VueApexCharts from 'vue-apexcharts'
  
  Vue.use(VueApexCharts)
  Vue.component('apexchart', VueApexCharts)
  

• 确保在DOM渲染完成后初始化图表
  不要在created钩子中操作图表初始化，改用mounted钩子（此时组件DOM已挂载完成）：

  <template>
    <div>
      <apexchart type="line" :options="chartOptions" :series="series"></apexchart>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        chartOptions: {
          xaxis: { categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] }
        },
        series: [{ name: 'Sales', data: [30, 40, 35, 50, 49, 60] }]
      }
    },
    mounted() {
      // 若手动初始化图表（不使用组件），也需在此钩子内执行
    }
  }
  </script>
  

• 手动初始化时校验DOM元素存在性
  若不使用vue-apexcharts组件，手动创建图表时要先确认DOM元素存在：

  mounted() {
    const chartContainer = document.getElementById('chart-box')
    if (chartContainer) {
      const chart = new ApexCharts(chartContainer, {
        chart: { type: 'bar' },
        series: [{ data: [15, 25, 30, 18, 22] }]
      })
      chart.render()
    }
  }
  

• 处理v-if导致的DOM缺失问题
  如果图表容器被v-if控制，要么改用v-show（会保留DOM结构），要么监听v-if绑定的变量，在变量为true后再初始化图表：

  watch: {
    showChart(newVal) {
      if (newVal) {
        this.$nextTick(() => {
          // 初始化图表逻辑
        })
      }
    }
  }
  

内容的提问来源于stack exchange，提问作者jibzy