vue3+echart项目开发详情弹窗不显示echarts图表的问题解决办法

前言

开发vue3+echart项目的时候，图表一般在可视化大屏或者后台管理页面首页展示，很少放在列表详情页中展示，现在的需求就是要在弹窗详情页展示，按以往的写发现页面中的图表并没有加载出来，看了自己的代码写法，生成的图表的方法调用是在onMounted钩子函数中调用的，但是没有出来是怎么回事呢？

控制台显示错误如下：

Error: Initialize failed: invalid dom. 错误:初始化失败:无效dom。意思是dom没有渲染出来

解决关键点（nextTick）

nextTick 简单的说，nextTick 方法是在 Vue.js 中常见的一种异步更新 DOM 的机制。它的原理是利用 Js 的事件循环机制以及浏览器的渲染流程来实现延迟执行 DOM 更新操作。

它的出现主要是为了解决 Vue 的异步更新导致的 DOM 更新后的操作问题。

部分代码：

import {
    
    nextTick} from 'vue'
async function  handleDetail (data) {
    
    
  
  open.value = true  //打开弹窗
  isCheck.value = true  //是否是查看详情
 
  await nextTick(()=>{
    
    
    initChart()  //封装完echarts图表方法的调用
  })

}

页面效果：

总结：

vue 文档的方法平时要多了解，有些特殊的需求可能需要这些方法解决，nextTick完美解决此类问题