Vue Echarts报错Initialize failed: invalid dom解决方法

ops/2024/10/21 11:26:30/

此问题是图表初始化时 找不到dom,以下是解决方法

1、不要用created(用mounted),created这时候还只是创建了实例,但模板还没挂载完成;

  • created: 在模板渲染成 html 前调用,通常初始化某些属性值,然后再渲染成视图
  • mounted: 在模板渲染成 html 后调用,通常初始化页面完成后,再对 html 的节点进行一些操作
    简而言之:需要操作dom用 mounted,不需要则用 created
    非用created,加延迟执行也可以(如 setTimeout、nextTick)

2、document.getElementId 获取dom 换为使用 ref 指向 dom 元素

javascript">echarts.init(this.$refs.你的ref名称)

3、如果是tab切换的,可以使用 v-if 去控制图标的渲染

旨在分享~~~~~~~~~~~~~~~~~~~


http://www.ppmy.cn/ops/109770.html

相关文章

【GeekBand】C++设计模式笔记1_介绍

课程目标 理解松耦合设计思想掌握面向对象设计原则掌握重构技法改善设计掌握GOF核心设计模式 什么是设计模式 目标:复用,以不变应万变 GOF设计模式 从面向对象谈起 深入理解面向对象 向下:深入理解三大面向对象机制 封装:隐藏…

百度Apollo打通与ROS的通信,扩展自动驾驶系统生态

技术文档|打通与ROS的通信,扩展自动驾驶系统生态_Apollo开发者社区 (baidu.com)

细说STM32F407通用定时器的基础知识

目录 一、通用定时器功能概述 二、细说2通道定时器的功能 1.时钟信号和触发控制器 2.时基单元工作原理 (1)计数寄存器(CNT) (2)预分频寄存器(PSC) (3)自动重载寄存器(ARR) (4)时基单元的控制位 3.捕获/比较通道 三、生成PWM波 1.生成PWM波的原理 2.与生成PWM波相关的HA…

结构性慢增长中,白色家电行业的“红利牌”还能撑多久?

正如“华尔街教父”本杰明格雷厄姆所言,“分红回报是公司成长中最为可靠的部分”。 近几年整个全球都在目睹一系列的不确定性因素频频闪现,加上国内经济的发展进入新常态阶段,“高确定性”俨然成为市场更普遍的追求。 红利风格也由此扶摇直…

Chainlit集成Langchain并使用通义千问实现和数据库交互的网页对话应用(text2sql)

LangChain 简介 LangChain 是一个开源框架,设计用于开发和部署与语言模型(如大型语言模型LLM)交互的应用程序。它提供了一种简便的方法来构建基于自然语言处理(NLP)的系统,这些系统可以执行各种任务&#…

VMware Fusion 虚拟机Mac版 安装CentOS系统教程

Mac分享吧 文章目录 CentOS安装完成,软件打开效果一、Mac中使用虚拟机安装CentOS系统1️⃣:下载镜像2️⃣:创建虚拟机3️⃣:设置虚拟机4️⃣:安装虚拟机5️⃣:设置成从磁盘启动 安装完成!&…

【QT】基础入门学习

文章目录 浅析Qt应用程序的主函数使用qDebug()函数常用快捷键Qt 编码风格信号槽连接模型实现方案 信号和槽的工作机制Qt对象树机制 浅析Qt应用程序的主函数 #include "mywindow.h"#include <QApplication>// 程序的入口 int main(int argc, char *argv[]) {//…

英文字母的大小写转换

输入一个大写字母c1和一个小写字母c2&#xff0c;把c1转换成小写&#xff0c;c2转换成大写&#xff0c;然后输出。 输入格式: 输入在一行中给出2个字母&#xff0c;第1个是大写字母c1&#xff0c;第2个是小写字母c2。 输出格式: 在一行中输出把c1转换成小写&#xff0c;c2转换成…