当前位置：首页 > news >正文

解决在vue3+vite+element-plus 中echarts在el-dialog无法正常显示问题

news 来源：原创 2025/5/19 11:11:19

核心：在dom加载完成后调用echarts实例的resize()方法
这里是一个例子
这里封装一个echarts

<template><div class="container" ref="container"></div>
</template>
<script lang="ts" setup>
import { ref, toRefs, watch, onMounted, nextTick, markRaw, onBeforeMount, inject } from 'vue'
const container = ref<HTMLElement>()
const myChart = ref<any>()
const $echart: any = inject("$echart")
const props = defineProps({options: {require: true,type: Object,default: {}}})
const { options } = toRefs(props)
onBeforeMount(() => {window.removeEventListener('resize', resizeHandler);
})
onMounted(() => {myChart.value = markRaw($echart.init(container.value)) //获取echarts实例使用markRaw解除响应式myChart.value.setOption(options.value)//设置echarts配置项window.addEventListener('resize', resizeHandler) //监听浏览器窗口大小
})
//核心在这，加载完成后调用该方法，使图表撑满父容器
const resizeHandler = () => {nextTick(() => {myChart.value.resize() //设置图表自适应大小})
}
watch(options, (newOptions) => {nextTick(() => {myChart.value.setOption(newOptions) //监听父组件传入的options,发生变化时从新设置配置项})
},{ deep: true })
//记得将方法暴漏出去
defineExpose({resizeHandler
})
</script>
<style scoped>
.container {width: 100%;height: 50vh;
}
</style>

在子组件中使用echarts

//在子组件中引入使用echarts
import { ref, nextTick } from 'vue';
<el-dialog v-model="dialogVisible" width="1200" center><kdEcharts :options="lineOption" v-if="dialogVisible" ref="kdEchartsR"> </kdEcharts>
</el-dialog>            <script setup>const dialogVisible = ref(false)const kdEchartsR = ref()const open = () => {dialogVisible.value = truenextTick(() => {lineOption.value = {tooltip: {trigger: "axis",axisPointer: {type: "line"}},xAxis: {type: 'category', //x轴设置为类目轴data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value', //y轴设置为数值轴splitLine: {lineStyle: {type: 'dashed'}}},series: [{data: [1200, 25565, 224, 218, 135, 147, 260],type: 'line',//设置图表的类型为折线图,smooth: true,symbol: "none",itemStyle: {color: "#ff2e4d",},emphasis: { disabled: true },lineStyle: {color: '#ff2e4d'},areaStyle: {color: {type: 'linear',x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: "#ff2e4d" // 0% 处的颜色},{offset: 1,color: '#fff' // 100% 处的颜色}],global: false // 缺省为 false}}}]}kdEchartsR.value.resizeHandler()})}defineExpose({dialogVisible, open})
</script>

父组件中调用子组件

<templete><detail-t ref="detailR"></detail-t>
</templete>
<script setup>
import { reactive, ref } from 'vue';
const detailR = ref()
在需要显示弹框的的方法中调用即可
detailR.value.open()
</script>

解决在vue3+vite+element-plus 中echarts在el-dialog无法正常显示问题

核心：在dom加载完成后调用echarts实例的resize()方法这里是一个例子这里封装一个echarts <template><div class"container" ref"container"></div> </template> <script lang"ts" setup> import {…...

编程日记 2025/5/19 11:11:19

SQL进阶技巧：如何计算摆动的序列？| LeetCode 376.-摆动序列

目录 0 摆动序列 1 数据准备 2 问题分析 3 小结 0 摆动序列原题链接：376. 摆动序列 - 力扣（LeetCode）如果连续数字之间的差严格地在正数和负数之间交替，则数字序列称为摆动序列。第一个差（如果存在的话）可能是正数或负数。仅有一个元素或者含两个不等元素的…...

编程日记 2025/4/24 17:16:43

告别卡顿：探索 Java FGC 的根源与高效解决方案

Java Full Garbage Collection (FGC) 的产生原因及解决办法引言在Java应用程序的生命周期中，垃圾回收（Garbage Collection, GC）是确保内存有效管理的关键机制。然而，当发生Full Garbage Collection（FGC&#xff09…...

编程日记 2025/5/15 17:33:56

MySQL索引为什么是B+树

MySQL索引为什么是B树索引是帮助MySQL高效获取数据的数据结构，在数据之外，数据库还维护着满足特定查找算法的数据结构B树，这些数据结果以某种特定的方式引用数据，这样就可以在这些数据结构上实现高级查找算法，提升数据…...

编程日记 2025/5/16 18:23:09

准备考试：解决大学入学考试问题

引言在编程竞赛和算法挑战中，我们经常会遇到各种类型的组合问题。这些问题不仅考验我们的逻辑思维能力，还要求我们熟练掌握数据结构和算法。在这篇文章中，我们将探讨一个有趣的问题——“准备考试”，这个问题来自于一个虚构的情…...

编程日记 2025/5/17 10:36:51

英译汉插件 i18n.ts export default {install: (app: any, options: any) > {// 注入一个全局可用的$translate()方法app.config.globalProperties.$translate (key: string) > {// 获取options对象的深层属性// 使用key作为索引return key.split(".").redu…...

编程日记 2025/5/7 21:24:29

Linux应用软件编程-多任务处理（进程）

多任务：让系统具备同时处理多个事件的能力。让系统具备并发性能。方法：进程和线程。这里先讲进程。进程（process）：正在执行的程序，执行过程中需要消耗内存和CPU。进程的创建：操作系统在进程创…...

编程日记 2025/5/18 0:57:52

PyCharm专项训练5 最短路径算法

一、实验目的本文的实验目的是通过编程实践，掌握并应用Dijkstra（迪杰斯特拉）算法和Floyd（弗洛伊德）算法来解决图论中的最短路径问题。二、实验内容数据准备： 使用邻接表的形式定义两个图graph_dijkstra…...

编程日记 2025/5/18 14:31:39

“AI+Security”系列第4期（一）之“洞” 见未来：AI 驱动的漏洞挖掘新范式

在数字化浪潮下，安全漏洞问题日益严峻，成为各行业发展的重大挑战。近日，“AISecurity” 系列第 4 期线下活动于北京成功举办，聚焦 “洞” 见未来：AI 驱动的漏洞挖掘新范式，汇聚了安全领域的众多专家。本次…...

编程日记 2025/5/18 8:32:28

安卓蓝牙扫描流程

目录系统广播流程图源码跟踪系统广播扫描开启广播：BluetoothAdapter.ACTION_DISCOVERY_STARTED "android.bluetooth.adapter.action.DISCOVERY_STARTED";扫描关闭广播：BluetoothAdapter.ACTION_DISCOVERY_FINISHED "android.b…...

编程日记 2025/5/17 17:14:35

【视觉惯性SLAM：对极几何】

对极几何（Epipolar Geometry）介绍对极几何是立体视觉中的核心内容之一，它描述了两个相机在观察同一个三维场景时，成像平面之间的几何关系。对极几何能够约束图像中对应点的位置关系，是双目立体匹配、三维重建、以及位…...

编程日记 2025/5/18 0:59:49

Stream `Collectors.toList()` 和 `Stream.toList()` 的区别（Java）

Stream Collectors.toList() 和 Stream.toList() 的区别问题背景在以下代码中： Test void test() {JSONArray nodes new JSONArray();String[] names {"df1", "df2", "df3"};for (String name : names) {JSONObject obj new …...

编程日记 2025/5/16 10:37:04

【Python知识】Python面向对象编程知识

Python面向对象编程知识概述1. 类（Class）2. 对象（Object）3. 封装（Encapsulation）4. 继承（Inheritance）5. 多态（Polymorphism）6. 抽象（Abstractio…...

编程日记 2025/5/18 1:12:28

安卓帧率获取

背景性能优化，经常用到一些指标，诸如帧率、功耗等。对于普通app来讲， 之前一直使用gfxinfo指令获取丢帧率。但是这个指令无法获取游戏的帧率，查阅资料，发现SurfaceFlinger可以获取游戏帧率。帧率获取原理获取当前f…...

编程日记 2025/5/17 17:52:48

shell脚本(全)

shell脚本概述第一个shell脚本 shell注释 shell变量 shell位置参数 shell字符串 shell内置命令 shell命令替换输出流程控制IF export命令退出脚本运行Shell脚本实例导航 shell脚本概述在说什么是shell脚本之前，先说说什么是shell。从程序员的…...

编程日记 2025/5/17 17:24:18

Flask-----SQLAlchemy教程

存session session[username] username # 存储数据到 session 取session username session.get(username) render_template return render_template(index.html, usernameAlice)，渲染一个包含 username 变量的模板。 redirect return redirect(url_for(profil…...

编程日记 2025/5/19 10:06:51

【C++11】可变模板参数

目录可变模板的定义方式参数包的展开方式递归的方式展开参数包 STL中的emplace相关接口函数 STL容器中emplace相关插入接口函数编辑模拟实现：emplace接口 C11的新特性可变参数模板能够让您创建可以接受可变参数的函数模板和类模板，相比 C9…...

编程日记 2025/5/14 15:55:22

.NET开发人员学习书籍推荐

作为一名.NET开发人员，掌握相关技术是提升开发能力和拓展职业发展的关键。无论你是刚入门的新人，还是希望精进技术的资深开发者，选择合适的学习资源至关重要。下面是一些经典且实用的学习书籍推荐，帮助你在C#、SQL、前端开发等方面…...

编程日记 2025/5/17 21:18:45

jupyter切换内核方法配置问题总结

下面这个博客总结了3种不同的方法，很有调理，推荐尝试【最全指南】如何在 Jupyter Notebook 中切换/使用 conda 虚拟环境？ !!! 注意使用上面介绍的ipykernel方法2, 要在每一个希望被jupyter识别到的环境内【分别】安装ipykernel以及添加配置 …...

编程日记 2025/5/17 17:36:02

SVM理论推导

本文介绍支持向量机（SVM）的理论推导。一、SVM 的基本思想 SVM 的目标是找到一个最优超平面，将样本分为不同的类别，并最大化类别间的间隔。 1. 线性可分情况下： 在特征空间中找到一个超平面，使得&#…...

编程日记 2025/5/18 11:33:46

如何永久解决Apache Struts文件上传漏洞

Apache Struts又双叒叕爆文件上传漏洞了。自Apache Struts框架发布以来，就存在多个版本的漏洞，其中一些漏洞涉及到文件上传功能。这些漏洞可能允许攻击者通过构造特定的请求来绕过安全限制，从而上传恶意文件。虽然每次官方都发布补丁进行修…...

编程日记 2025/5/15 12:26:14

【Java数据结构与算法】第10-14章

第10章树结构的基础部分 10.1 二叉树 10.1.1 为什么需要树这种数据结构 10.1.2 树示意图 10.1.3 二叉树的概念 10.1.4 二叉树遍历的说明 10.1.5 二叉树遍历应用实例(前序,中序,后序) 10.1.6 二叉树-查找指定节点思路图解 10.1.7 二叉树-删除节点 package com.atguigu.tree;…...

编程日记 2025/5/17 4:02:41

MacOS M3源代码编译Qt6.8.1

编译时间过长，如果不想自己编译，可以通过如果网盘进行下载： 链接: https://pan.baidu.com/s/17lvF5jQ-vR6vE-KEchzrVA?pwdts26 提取码: ts26 在macOS上编译Qt 6需要一些前置步骤和工具。以下是编译Qt 6的基本步骤： 安装Xcode和…...

编程日记 2025/5/17 9:21:08

3.银河麒麟V10 离线安装Nginx

1. 下载nginx离线安装包前往官网下载离线压缩包 2. 下载3个依赖 openssl依赖，前往官网下载 pcre2依赖下载，前往Git下载 zlib依赖下载，前往Git下载下载完成后完整的包如下： 如果网速下载不到请使用网盘下载通过网盘分享的文件…...

编程日记 2025/5/17 14:44:30

实现 QTreeWidget 中子节点勾选状态的递归更新功能只影响跟节点的状态父节点状态不受影响

在 Qt 开发中，QTreeWidget 提供了树形结构的显示和交互功能。为了实现某个子节点勾选或取消勾选时，只影响当前节点及其子节点的状态，同时递归更新父节点的状态以正确显示 Qt::PartiallyChecked 或 Qt::Checked，我们可以借助 Qt 的…...

编程日记 2025/5/18 22:25:38

ubuntu24.04使用opencv4

ubuntu24.04LTS自带opencv4.5代码实例 //opencv_example.cpp #include <opencv2/opencv.hpp> #include <iostream>int main() {// 读取图像cv::Mat img cv::imread("image.jpg", cv::IMREAD_COLOR);if (img.empty()) {std::cerr << "无法读…...

编程日记 2025/5/15 10:01:29

R语言数据分析案例46-不同区域教育情况回归分析和探索

一、研究背景教育是社会发展的基石，对国家和地区的经济、文化以及社会进步起着至关重要的作用。在全球一体化进程加速的今天，不同区域的教育发展水平呈现出多样化的态势。这种差异不仅体现在教育资源的分配上，还表现在教育成果、教育投入与…...

编程日记 2025/5/19 11:06:21

flink sink doris

接上文：一文说清flink从编码到部署上线网上关于flink sink drois的例子较多，大部分不太全面，故本文详细说明，且提供完整代码。 flink doris版本对照表 1.添加依赖 <!-- 参考："https…...

编程日记 2025/5/19 4:56:42

《探索 Apache Spark MLlib 与 Java 结合的卓越之道》

在当今大数据与人工智能蓬勃发展的时代，Apache Spark MLlib 作为强大的机器学习库，与广泛应用的 Java 语言相结合，为数据科学家和开发者们提供了丰富的可能性。那么，Apache Spark MLlib 与 Java 结合的最佳实践究竟是什么呢&#…...

编程日记 2025/5/17 17:31:38

Net9解决Spire.Pdf替换文字后，文件格式乱掉解决方法

官方文档 https://www.e-iceblue.com/Tutorials/Spire.PDF/Program-Guide/Text/Find-and-replace-text-on-PDF-document-in-C.html C# 在 PDF 中查找替换文本原文件如下图，替换第一行的新编码，把41230441044替换为41230441000 替换代码如下&#xff…...

编程日记 2025/5/18 21:34:18

Kafka可视化工具 Offset Explorer (以前叫Kafka Tool)

数据的存储是基于主题（Topic） 和分区（Partition） 的 Kafka是一个高可靠性的分布式消息系统，广泛应用于大规模数据处理和实时, 为了更方便地管理和监控Kafka集群，开发人员和运维人员经常需要使用可视化工具…...

编程日记 2025/5/17 14:15:54

青少年编程与数学 02-004 Go语言Web编程 21课题、应用部署

青少年编程与数学 02-004 Go语言Web编程 21课题、应用部署一、应用部署二、GoWeb部署到WINDOWS系统中1. 安装Go环境2. 创建并编写Go Web应用3. 初始化Go模块4. 编译Go Web应用5. 配置和运行Nginx6. 运行Go Web应用7. 访问应用总结三、GoWeb部署到LINUX系统中1. 准备Linux服务…...

编程日记 2025/5/17 7:26:51

009-spring-bean的实例化流程

1 spring容器初始化时，将xml配置的bean 信息封装在 beandefinition对象 2 所有的beandefinition存储在 beandefinitionMap的map集合中 3 spring对map进行遍历，使用反射创建bean实例对象 4 创建好的bean存在名为singletonObjects的map集合中 5 调用ge…...

编程日记 2025/5/12 18:00:43

Timsort算法

Timsort算法是一种混合、稳定且高效的排序算法，源自归并排序和插入排序。它通过将已识别的子序列（称为“run”）与现有run合并直到满足某些条件来完成排序。以下是对Timsort算法的详细解释及举例说明： Timsort算法概述混合性&…...

编程日记 2025/5/18 20:40:19

uniapp+vue 前端防多次点击表单，防误触多次请求方法。

最近项目需求写了个uniappvue前端H5,有个页面提交表单的时候发现会有用户乱点导致数据库多条重复脏数据。故需要优化，多次点击表单只请求一次。思路: 直接调用uni.showToast，点完按钮跳一个提交成功的提示。然后把防触摸穿透mask设置成true就行&#…...

编程日记 2025/5/18 10:43:50

八、Hbase

Hbase 一、NoSQL非关系型数据库简介1.NoSQL 的起因2.NoSQL 的特点3.NoSQL 面临的挑战4.NoSQL 的分类二、HBase数据库概述1.HBase数据库简介2.HBase数据模型简介3.HBase数据模型基本概念4.Hbase概念视图(逻辑视图)5.Hbase物理视图6.Hbase主要组件7.Hbase安装8.Hbase的数据读写流…...

编程日记 2025/5/16 10:34:19

ubuntu安装sublime安装与免费使用

1. ubuntu安装sublime 参考官网： Linux Package Manager Repositories 2. 破解过程打开如下网址，打开/opt/sublime_text/sublime_text https://hexed.it/ 3. 替换在hexed打开的文件中查找并替换： 4180激活方法使用二进制编辑器 8079 0500 0f94 c2替换为 c641 05…...

编程日记 2025/5/8 21:04:42

Onedrive精神分裂怎么办（有变更却不同步）

Onedrive有时候会分裂，你在本地删除文件，并没有同步到云端，但是本地却显示同步成功。比如删掉了一个目录，在本地看已经删掉，onedrive显示已同步，但是别的电脑并不会同步到这个删除操作，在网页版…...

编程日记 2025/5/18 9:18:46

图像裁剪与批量推理：解决分割和变化检测中的大图处理问题

引言在分割、变化检测等任务中，我们经常会遇到一个问题：模型的输入尺寸是固定且较小的（如256256或512512）。当需要处理分辨率较高的大图时，直接输入到模型中显然是不切实际的。那么，如何高效地解决这个问…...

编程日记 2025/5/17 7:12:21

第4章函数

2024年12月25日一稿 4.1 函数的定义 4.1.1 函数和像 4.1.2 函数的性质 4.1.3 常用函数 4.2 复合函数和反函数 4.2.1 复合函数 4.2.2 反函数 4.3 特征函数与模糊子集 4.4 基数的概念 4.4.1 后继与归纳集 4.4.2 自然数，有穷集，无穷集 4.4.3 基数 4.5 可数…...

编程日记 2025/5/15 21:49:40

【JavaEE进阶】Spring传递请求参数

目录 🎍序言 🌴传递单个参数 🍀传递多个参数 🎄传递对象 🌳后端参数重命名（后端参数映射） 🚩ReuqestParam注解 🎍序言访问不同的路径,就是发送不同的请求.在发送…...

编程日记 2025/5/18 22:07:51

在跨平台开发环境中构建高效的C++项目：从基础到最佳实践20241225

在跨平台开发环境中构建高效的C项目：从基础到最佳实践引言在现代软件开发中，跨平台兼容性和高效开发流程是每个工程师追求的目标。尤其是对于 C 开发者，管理代码的跨平台构建以及调试流程可能成为一项棘手的挑战。在本文中，我…...

编程日记 2025/5/14 0:41:04

无人零售及开源 AI 智能名片 S2B2C 商城小程序的深度剖析

摘要：本文聚焦无人零售这一新兴零售模式及其发展浪潮中崛起的开源 AI 智能名片 S2B2C 商城小程序。深入阐述无人零售的发展态势，细致剖析其驱动因素、现存问题，全面详细介绍小程序的功能特性、应用优势以及对无人零售的潜在价值，旨…...

编程日记 2025/5/16 15:01:26

PCL点云库入门——PCL库点云滤波算法之直通滤波（PassThrough）和条件滤波（ConditionalRemoval）

0、滤波算法概述 PCL点云库中的滤波算法是处理点云数据不可或缺的一部分，它们能够有效地去除噪声、提取特征或进行数据降维。例如，使用体素网格滤波（VoxelGrid）可以减少点云数据量，同时保留重要的形状特征。此外&#…...

编程日记 2025/5/14 9:01:36

v语言介绍

V 语言是一种多用途的编程语言，可以用于前端开发、后端开发、系统编程、游戏开发等多个领域。它的设计哲学是提供接近 C 语言的性能，同时简化开发过程并提高代码的安全性和可读性。接下来我会详细介绍 V 在前后端开发中的应用，并给出一个具体…...

编程日记 2025/5/19 4:04:02

GPT-O3：简单介绍

GPT-O3：人工智能领域的重大突破近日，OpenAI发布了其最新的AI模型GPT-O3，这一模型在AGI评估中取得了惊人的成绩，展现出强大的能力和潜力。GPT-O3的出现标志着人工智能领域的重大进步，预计将在2025年实现更大的突破。 …...

编程日记 2025/5/19 4:33:52

重温设计模式--适配器模式

文章目录适配器模式（Adapter Pattern）概述适配器模式UML图适配器模式的结构目标接口（Target）：适配器（Adapter）：被适配者（Adaptee）： 作用&#xf…...

编程日记 2025/5/16 2:53:19

API部署大模型

由于生产测试环境的服务器配置较低不能够支撑大模型运行的配置所以需要将大模型封装部署在A服务器上在B服务器上进行调用封装时可以使用FastAPI与Websocket两种通信方式进行通信 Websocket 在A服务器端部署大模型（服务端） import asyncio import …...

编程日记 2025/5/15 10:43:22

Linux -- 同步与条件变量

目录同步条件变量 pthread_cond_t pthread_cond_init（初始化条件变量） pthread_cond_destroy（销毁条件变量） pthread_cond_wait（线程等待条件变量） 重要提醒 pthread_cond_boardcast&#xff08…...

编程日记 2025/5/15 21:47:48

Linux之ARM(MX6U)裸机篇----1.开发环境搭建

下载开启FTP服务作用：用于电脑与linux系统之前文件传输如上，编辑完成后重启 Window下FTP客户端安装使用http://www.filezilla.cn/download网址下载新建网络连接站点主机后写虚拟机的ip地址，用ifconfig查出ipv4的地址笔记本电脑中虚拟…...

编程日记 2025/5/17 14:29:44

相关文章：