Initialize failed: invalid dom.

项目场景:

在vue中使用Echarts出现的错误


问题描述

提示:这里描述项目中遇到的问题:

例如:在vue中使用Echarts出现的错误

ERROR
Initialize failed: invalid dom.at Module.init (webpack-internal:///./node_modules/echarts/lib/core/echarts.js:2057:15)at setup (webpack-internal:///./node_modules/babel-loader/lib/index.js!./node_modules/ts-loader/index.js??clonedRuleSet-41.use[1]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/mainView.vue?vue&type=script&setup=true&lang=ts:14:56)at callWithErrorHandling (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:285:18)at setupStatefulComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6402:25)at setupComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:6363:36)at mountComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4970:7)at processComponent (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4948:9)at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4630:11)at ReactiveEffect.componentUpdateFn [as fn] (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:5131:9)at ReactiveEffect.run (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:216:19)

原因分析:

其实就是我们没有正确的引入我们的Echarts

在引入我们的Echarts中

问题一没有正确的是用id

<div id="main1" style="width: 600px; height: 400px"></div>
  var chartDom = document.getElementById("main1");var myChart = echarts.init(chartDom);

这2边的id要相互对应

问题二加载过慢

可能是由于我们的vue导入Echarts是加载Echarts过慢导致的,我们需要加一个生命周期的钩子函数,异步等待Echarts加载出来

<template><div id="main1" style="width: 600px; height: 400px"></div>
</template><script setup lang="ts">
import * as echarts from "echarts";
import { onMounted } from "vue";
const markCharts = () => {var chartDom = document.getElementById("main1");var myChart = echarts.init(chartDom);var option;option = {title: {text: "提交情况",subtext: "java",left: "center",},tooltip: {trigger: "item",},legend: {orient: "vertical",left: "left",},series: [{name: "Access From",type: "pie",radius: "50%",data: [{ value: 1048, name: "正确数" },{ value: 735, name: "编译错误数" },{ value: 580, name: "为空数" },{ value: 484, name: "超时数" },{ value: 300, name: "内存超出数" },],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},},},],};option && myChart.setOption(option);
};onMounted(async () => {setTimeout(() => {markCharts();}, 1000);
});
</script>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/6740.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Delta lake with Java--入门

最近在研究数据湖&#xff0c;虽然不知道研究成果是否可以用于工作&#xff0c;但我相信机会总是留给有准备的人。 数据湖尤其是最近提出的湖仓一体化概念&#xff0c;很少有相关的资料&#xff0c;目前开源的项目就三个&#xff0c;分别是hudi, delta lake, iceberg。最终选择…

算法打卡day41

今日任务&#xff1a; 1&#xff09;198.打家劫舍 2&#xff09;213.打家劫舍II 3&#xff09;337.打家劫舍III 4&#xff09;复习day16 198.打家劫舍 题目链接&#xff1a;198. 打家劫舍 - 力扣&#xff08;LeetCode&#xff09; 你是一个专业的小偷&#xff0c;计划偷窃沿街…

【hive】transform脚本

文档地址&#xff1a;https://cwiki.apache.org/confluence/display/Hive/LanguageManualTransform 一、介绍二、实现1.脚本上传到本地2.脚本上传到hdfs 三、几个需要注意的点1.脚本名不要写全路径2.using后面语句中&#xff0c;带不带"python"的问题3.py脚本Shebang…

LNMP部署wordpress

1.环境准备 总体架构介绍 序号类型名称外网地址内网地址软件02负载均衡服务器lb0110.0.0.5192.168.88.5nginx keepalived03负载均衡服务器lb0210.0.0.6192.168.88.6nginx keepalived04web服务器web0110.0.0.7192.168.88.7nginx05web服务器web0210.0.0.8192.168.88.8nginx06we…

基于深度学习的MVS学习笔记(05.04-05.05)

1. MVS方法与分类 1.1 问题界定&#xff1a;多目和单目双目 单目深度估计&#xff1a;拟合一个函数将图像【RGB输入】映射到深度图【浮点输出】双目深度估计&#xff1a;双目回归视差&#xff0c;可以进一步求像素距离相机光心的深度多视点三维重建 单目只能找到“相对的”相…

cmd查看局域网内所有设备ip

说明&#xff1a;最近碰到一个新问题&#xff0c;就是有一个安卓设备&#xff0c;安装了一个app导致死机了&#xff0c;app设置了开机重启&#xff0c;所以&#xff0c;无论重启还是关机&#xff0c;都是进来就白屏&#xff0c; 这可把人愁坏了&#xff0c;直接死循环了 无论…

【Redis】10大数据类型之Hash类型

文章目录 1.Hash类型2.常用命令3.示例hset和hgethgetallhlenhkeys和hvalshexistshdelhincrby和hincrbyfloathsetnx 1.Hash类型 Redis中的Hash类型是一种高效的数据结构&#xff0c;用于存储键值对的集合。这种类型特别适用于表示对象&#xff0c;因为它允许你将对象的多个属性…

基于Springboot的校园生活服务平台(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的校园生活服务平台&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构…

shell脚本-监控系统内存和磁盘容量

监控内存和磁盘容量除了可以使用zabbix监控工具来监控&#xff0c;还可以通过编写Shell脚本来监控。 #! /bin/bash #此脚本用于监控内存和磁盘容量&#xff0c;内存小于500MB且磁盘容量小于1000MB时报警#提取根分区剩余空间 disk_size$(df / | awk /\//{print $4})#提取内存剩…

《机器学习算法面试宝典》重磅发布!

我们经常会组织场算法岗技术&面试讨论会&#xff0c;会邀请了一些互联网大厂朋友、今年参加社招和校招面试的同学。 针对新手如何入门算法岗、该如何准备面试攻略、面试常考点等热门话题进行了深入的讨论。 基于讨论和经验总结&#xff0c;历时半年的梳理和修改&#xff…

eNSP-浮动静态路由配置

ip route-static 192.168.1.0 24 192.168.3.2 preference 60 #设置路由 目标网络地址 和 下一跳地址 preference值越大 优先级越低 一、搭建拓扑结构 二、主机配置 pc1 pc2 三、配置路由器 1.AR1路由器配置 <Huawei>sys #进入系统视图 [Huawei]int g0/0/0 #进入接…

详解面向对象-类和对象

1.面向对象与面向过程的区别 ①面向过程 &#xff1a;关注点是在实现功能的步骤上面&#xff0c;就是分析出解决问题所需要的步骤&#xff0c;让后函数把这些步骤一步一步实现&#xff0c;使用的时候一个一个依次调用就可以。对于简单的流程是适合面向过程的方式进行的&#x…

C++:set和map的介绍

目录 关联式容器 键值对 set介绍&#xff1a; set的模板参数列表 set的双向迭代器&#xff1a; insert的使用和set的特性&#xff1a; set的删除&#xff1a; set的find&#xff1a; lower_bound 、 upper_bound&#xff1a; multiset&#xff1a; map介绍&#xff…

解决windows中的WSL Ubuntu子系统忘记root密码和用户密码问题

1、以管理员身份运行PowerShell 2、在powershell中执行wsl.exe --user root wsl.exe --user root如果出现了上面的报错&#xff0c;则需要运行步骤3、4&#xff0c;然后在执行步骤5改密码&#xff0c;如果没有出错&#xff0c;请直接跳到第5步改密码操作&#xff01;&#xff…

关于react native文件路径的烦心事

前言&#xff1a;我听歌比较喜欢播放本地音乐&#xff0c;但是那些本地播放APP总会有些这样或那样让我不顺的问题&#xff0c;比如中文/日文识别为乱码&#xff0c;比如换一个文件夹它就不知道我上一次在这文件夹里播的啥音乐&#xff0c;再比如无法按文件名排序。 最近公司项…

第11章 软件工程

这里写目录标题 1.软件过程1.1能力成熟度模型(CMM)1.2能力成熟度模型集成(CMMI)1.3瀑布模型(线性顺序)1.4增量模型1.5演化模型1.5.1原型模型1.5.2螺旋模型 1.6喷泉模型1.7统一过程(UP)模型 2.敏捷方法3.系统设计4.系统测试4.1单元测试(模块测试)4.2集成测试4.3黑盒测试(功能测试…

HNU-人工智能-实验1-A*算法

人工智能-实验1 计科210x 甘晴void 一、实验目的 掌握有信息搜索策略的算法思想&#xff1b; 能够编程实现搜索算法&#xff1b; 应用A*搜索算法求解罗马尼亚问题。 二、实验平台 课程实训平台https://www.educoder.net/shixuns/vgmzcukh/challenges 三、实验内容 3.…

如何将数据导入python

Python导入数据的三种方式&#xff1a; 1、通过标准的Python库导入CSV文件 Python提供了一个标准的类库CSV文件。这个类库中的reader()函数用来导入CSV文件。当CSV文件被读入后&#xff0c;可以利用这些数据生成一个NumPy数组&#xff0c;用来训练算法模型。 from csv import…

【操作系统】Linux 系统中的 Load Average(负载均衡)是如何计算的

在 Linux 系统中&#xff0c;Load Average&#xff08;负载均衡&#xff09;是一个重要的性能指标&#xff0c;它反映了系统在一段时间内的负载情况。本文将讲解 Load Average 的含义、计算方法以及如何解读 Load Average。 1. Load Average 是什么&#xff1f; Load Average…

详细介绍如何使用YOLOv9 在医疗数据集上进行实例分割-含源码+数据集下载

深度学习彻底改变了医学图像分析。通过识别医学图像中的复杂模式,它可以帮助我们解释有关生物系统的重要见解。因此,如果您希望利用深度学习进行医疗诊断,本文可以成为在医疗数据集上微调YOLOv9 实例分割的良好起点。 实例分割模型不是简单地将区域分类为属于特定细胞类型,…