vue3使用Eachart图表库踩坑记录

前言

大家好我是没钱的君子下流坯,用自己的话解释自己的知识。很久很更新了,最近一直在加班,今天记录一个eachar图表报警告说过去不到当前DOM节点的宽高导致页面中的图表宽高不正确的坑。

案例

在这里插入图片描述
就是一些基础的图形的使用,一个后台的管理系统使用的技术栈是vue3,我这几张图表放的位置是在好一个 tabs切换栏下面在这里插入图片描述
就是这种切换栏下面有图表。

代码

<template><div class="chart-wrapper" style="height: 400px; width: 100%"><div  ref="chartContainer" class="chart-container" ></div></div>
</template><script setup>
import { ref, onMounted, onUnmounted, watch, nextTick } from 'vue';
import * as echarts from 'echarts';// 定义 props
const { Tindex, chartOption, width, height } = defineProps({chartOption: {type: Object,required: true},width: {type: String,default: '1200px' // 默认宽度},height: {type: String,default: '400px' // 默认高度},Tindex:{type: String,default:'1'}
});const chartContainer = ref(null);
let myChart = null;// 计算图表容器的样式
const chartStyle = computed(() => ({width: props.width,height: props.height
}));// 初始化图表
const initChart = async () => {console.log(Tindex);await nextTick(); if (myChart) {myChart.dispose(); // 销毁旧的图表实例}myChart = echarts.init(chartContainer.value);setChartOption();
};// 设置图表选项
const setChartOption = () => {if (myChart && chartOption) {myChart.setOption(chartOption);}
};// 组件挂载时初始化图表
onMounted(() => {initChart();
});// 当 props.option 发生变化时更新图表
watch(() => chartOption,() => {setChartOption();},{ deep: true }, // 深度监听对象内部属性的变化()=>Tindex
);
</script><style scoped>
.chart-wrapper {width: 100%;height: 400px; /* 确保父容器有明确的高度 */
}.chart-container {width: 100% !important;height: 400px; /* 继承父容器的高度 */
}
</style>

问题


[ECharts]height. Please check dom,clientwidth and dom.clientHeight.Can’t get DoM width oreXamoLe. They should not be 0.you may need to call this in the callback of window.onload
图中大概位置就是说在初始化的时候找不到dom节点,上面的代码大家可以看到已经是我修改的版本但还是有一些问题的,我已经进行了 nextclick的方法去加载dom了,发现还是不行,然后我为了测试我写了一个定时器让eachart延迟加载3秒,发现还是一样的报错,这时候我一直以为是我加载的代码有问题,我就案例放到我自己项目上去运行,但是就不会报错。一样的代码换了一个项目结果一个报错一个不报错,这然我就很疑惑,认真排查了很多遍的代码,然后去问各种gpt给的方法都试了。

解决

1.nextclick的方法去等待dom加载。
2.定时器延迟加载图表。
以上的方法是已经确定能获取到DOm的,这时候我就不知道是什么原因导致获取不到DOM了,然后我就仔细的去F12找元素发现页面上确实没有承载echarts图表的div,我叼了,我明明写了但是为什么元素中找不到呢。
3.问题在于tabs切换栏,我使用的是elementuiplus中的切换栏,因为我的echarts并没有放在第一个tabs切换栏的内容中,在后面的切换栏里面,但是echarts是进入整个页面的时候就加载了,但是tabs栏的位置是在第一个选项的问题,后面的元素都被v-if给销毁节点了,所以找不到DOM节点是正常的。这也证明了elementui-plus的tabs是通过v-if控制显示隐藏的。

解决代码

const initChart = async () => {console.log(Tindex);if(Tindex=='7'){await nextTick(); // 确保 DOM 已更新console.log('我等你三秒')if (myChart) {myChart.dispose(); // 销毁旧的图表实例}myChart = echarts.init(chartContainer.value);setChartOption();}else{console.log("我没进来")}};

加了一个判断,判断当前显示的是不是图表所在的tabs选项栏,是的时候才让其加载就解决了问题。

总结

要了解每个组件库中常用组件的实现原理,有一些方法会响应一些效果的显示,希望大家有没有bug。

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

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

相关文章

python录制鼠标键盘操作循环播放

依赖 pip install pynput 程序: from pynput import mouse, keyboard import time import threading# 用于存储录制的鼠标和键盘事件 mouse_events [] keyboard_events []# 定义事件处理函数# 处理鼠标事件 def on_move(x, y):mouse_events.append((move, x, y))def on_cl…

十九(GIT2)、token、黑马就业数据平台(页面访问控制(token)、首页统计数据、登录状态失效)、axios请求及响应拦截器、Git远程仓库

1. JWT介绍 JSON Web Token 是目前最为流行的跨域认证解决方案&#xff0c;本质就是一个包含信息的字符串。 如何获取&#xff1a;在使用 JWT 身份验证中&#xff0c;当用户使用其凭据成功登录时&#xff0c;将返回 JSON Web Token&#xff08;令牌&#xff09;。 作用&#xf…

【系统架构核心服务设计】使用 Redis ZSET 实现排行榜服务

目录 一、排行榜的应用场景 二、排行榜技术的特点 三、使用Redis ZSET实现排行榜 3.1 引入依赖 3.2 配置Redis连接 3.3 创建实体类&#xff08;可选&#xff09; 3.4 编写 Redis 操作服务层 3.5 编写控制器层 3.6 测试 3.6.1 测试 addMovieScore 接口 3.6.2 测试 g…

架构15-服务网格

零、文章目录 架构15-服务网格 1、透明通信的涅槃 &#xff08;1&#xff09;服务网格 概念 服务网格是一种处理程序间通信的基础设施&#xff0c;主要由数据平面和控制平面组成。它通过边车代理和控制程序管理程序间的通信&#xff0c;弥补了容器编排系统对分布式应用细粒…

constexpr、const和 #define 的比较

constexpr、const 和 #define 的比较 一、定义常量 constexpr 定义&#xff1a;constexpr用于定义在编译期可求值的常量表达式。示例&#xff1a;constexpr int x 5;这里&#xff0c;x的值在编译期就确定为5。 const 定义&#xff1a;const表示变量在运行期间不能被修改&…

C# RSA加密和解密,RSA生成私钥和公钥

C# RSA加密和解密&#xff0c;RSA生成私钥和公钥&#xff08;使用XML格式秘钥&#xff09; 目录 前言生成xml格式的公钥和私钥 PrivateKeyPublicKey测试加密、解密 方案1&#xff1a;RSA公钥加密&#xff0c;RSA私钥解密方案2&#xff1a;RSA私钥加密&#xff0c;RSA私钥解密…

洛谷P1208

[USACO1.3] 混合牛奶 Mixing Milk - 洛谷 [USACO1.3] 混合牛奶 Mixing Milk 题目描述 由于乳制品产业利润很低&#xff0c;所以降低原材料&#xff08;牛奶&#xff09;价格就变得十分重要。帮助 Marry 乳业找到最优的牛奶采购方案。 Marry 乳业从一些奶农手中采购牛奶&…

Linux命令进阶·软链接命令(ln)、查看系统时间命令(date)、自动校准系统时间程序(ntp)

目录 1. 软链接——ln命令 2. 查看系统时间——date命令 3. 自动校准系统时间——ntp程序 1. 软链接——ln命令 在系统中创建软链接&#xff0c;可以将文件、文件夹链接到其他位置。作用相当于windows中的快捷方式。 语法&#xff1a;ln -s 参数1 参数2 -s选项&#xff…

RabbitMQ如何保证消息不被重复消费

前言&#xff1a; 正常情况下&#xff0c;消费者在消费消息后&#xff0c;会给消息队列发送一个确认&#xff0c;消息队列接收后就知道消息已经被成功消费了&#xff0c;然后就从队列中删除该消息&#xff0c;也就不会将该消息再发送给其他消费者了。不同消息队列发出的确认消…

#Vue3篇:生命周期简洁

setup类似breforeCreate create setup() 钩子是在组件中使用组合式 API 的入口 挂载 onBeforeMount组件被挂载之前执行 onMounted 组件挂载完后执行 更新 onBeforeUpdate组件响应式状态变更而更新Dom树之后执行 onUpdated 组件响应式状态变更而更新Dom树之后执行 卸载 …

java 使用JSqlParser和CCJSqlParser 解析sql

maven <dependency><groupId>com.github.jsqlparser</groupId><artifactId>jsqlparser</artifactId><version>4.9</version> </dependency>解析SQL String sql "select aa,bb from b"; Statement statementCCJSq…

动态规划——机器分配、01背包问题

一、机器分配 题目名称&#xff1a;机器分配 题目描述&#xff1a; 总公司拥有高效设备M台&#xff0c;准备分给下属的N个分公司。 各分公司若获得这些设备&#xff0c;可以为国家提供一定的盈利。 问&#xff1a;如何分配这M台设备才能使国家得到的盈利最大&#xff1f;求出最…

深入解析 JavaScript 中的 Blob 对象:二进制数据处理的核心

文章目录 1.Blob是什么2.Blob用法实例属性Blob方法slice方法text方法 示例1&#xff1a;字符串 Blob示例2&#xff1a;数组和字符串 Blob示例3&#xff1a;从文件输入创建 3.使用场景1.创建 Blob 并生成 URL&#xff0c;下载文件2.文件上传3.切片上传3.Blob用于URL在线预览PDF文…

NanoLog起步笔记-7-log解压过程初探

nonolog起步笔记-6-log解压过程初探 再看解压过程建立调试工程修改makefile添加新的launch项 注&#xff1a;重新学习nanolog的README.mdPost-Execution Log Decompressor 下面我们尝试了解&#xff0c;解压的过程&#xff0c;是如何得到文件头部的meta信息的。 再看解压过程 …

人工智能大模型LLM开源资源汇总(持续更新)

说明 目前是大范围整理阶段&#xff0c;所以存在大量机翻说明&#xff0c;后续会逐渐补充和完善资料&#xff0c;减少机翻并增加说明。 Github上的汇总资源&#xff08;大部分英文&#xff09; awesome-production-machine-learning 此存储库包含一系列精选的优秀开源库&am…

C++实现排序算法:冒泡排序

目录 前言 冒泡排序性质 C代码实现冒泡排序 冒泡图解 第一趟排序 第二趟排序 第三趟排序 排序结果 结语 前言 冒泡排序的基本思想是通过从前往后&#xff08;从后往前&#xff09;两两比较&#xff0c;若为逆序&#xff08;即arr[i] < arr[i 1]&#xff09;则交换…

中介者模式的理解和实践

一、中介者模式概述 中介者模式&#xff08;Mediator Pattern&#xff09;&#xff0c;也称为调解者模式或调停者模式&#xff0c;是一种行为设计模式。它的核心思想是通过引入一个中介者对象来封装一系列对象之间的交互&#xff0c;使得这些对象不必直接相互作用&#xff0c;从…

PlantUML——类图

背景 类图是UML模型中的静态视图&#xff0c;其主要作用包括&#xff1a; 描述系统的结构化设计&#xff0c;显示出类、接口以及它们之间的静态结构和关系。简化对系统的理解&#xff0c;是系统分析与设计阶段的重要产物&#xff0c;也是系统编码和测试的重要模型依据。 在U…

【Java知识】Java进阶-如何开启远程调式

java远程调试 概述Java远程调试的开启与底层原理开启Java远程调试底层原理 JVM参数 概述 Java远程调试的开启与底层原理 开启Java远程调试 Java远程调试允许开发者在本地IDE&#xff08;如Eclipse、IntelliJ IDEA等&#xff09;中调试运行在远程服务器上的Java应用程序。以下…

入选国家数据局案例!浙江“一体化智能化公共数据平台”总体架构详解~

国家数据局在2024中国国际大数据产业博览会上发布了首批50个数字中国建设典型案例。案例涉及数据基础设施、数据资源、数字技术创新、数字政府、数字经济、数字社会、数字文化、数字生态文明等领域&#xff0c;集中反映了近年来数字中国建设的实践和成效。 其中&#xff0c;由…