vue3 vben-admin 窗口大小更改后 echarts尺寸变为 100px的问题
问题描述:
当切换切换tab 并且窗口尺寸更改时, echarts的尺寸因为父元素为 0, 自动设置为 100px

网上查找资料的结果:
1,使用vue 中的 v-if 来重新设置dom树
缺点: 频繁操作dom树结构, 极其消耗性能
优点: 自适应展示
2,设置固定宽高
缺点: 不能自适应展示, 无需消耗额外性能
优点: 简单粗暴
解决思路:
在窗口更改时, 调用 echarts 的 resize 方法,传入自适应的宽度,而父元素正常时,不传入任何参数,自适应获取父元素宽度
官方文档关于 resize 方法的解释: Documentation - Apache ECharts
- width 可显式指定实例宽度,单位为像素。如果传入值为 null/undefined/‘auto’,则表示自动取 dom(实例容器)的宽度。
- height 可显式指定实例高度,单位为像素。如果传入值为 null/undefined/‘auto’,则表示自动取 dom(实例容器)的高度。
解决流程:
在原有的 useECharts.ts 的基础上进行更改,在需要重新设置宽高的时候即调用 resize 方法中加入自适应的宽高
1, useECharts 方法加入指定 dom 元素的入参
export function useECharts(elRef: Ref<HTMLDivElement>, theme: 'light' | 'dark' | 'default' = 'default', parentElRef: Ref<HTMLDivElement>)
2,调用时,传入自适应宽高的 dom 元素节点
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>, 'default', wrapRef as Ref<HTMLDivElement>);
3.在 resize 方法增加获取 附加 dom 元素 宽度的方法
function resize() { const el = unref(parentElRef); if (!el || !unref(el)) { chartInstance?.resize(); return; } else { chartInstance?.resize({ width: parentElRef.value?.clientWidth // 设置指定节点元素的宽度 // height: hi, });
} }
相关文章:
vue3 vben-admin 窗口大小更改后 echarts尺寸变为 100px的问题
问题描述: 当切换切换tab 并且窗口尺寸更改时, echarts的尺寸因为父元素为 0, 自动设置为 100px 网上查找资料的结果: 1,使用vue 中的 v-if 来重新设置dom树 缺点: 频繁操作dom树结构, 极其消耗性能 优点: 自适应展示 2,设置固定宽高 缺点: 不能自适应展示, 无需消耗额外…...
Web应用框架-Django应用基础(3)-Jinja2
1.创建姓名模板 username里的数据发生改变,页面中渲染的数据发生改变,该效果称为动态数据 #hello/views:def hello_user(request):username000html <!DOCTYPE html><html lang"en"><head><meta charset"UTF-8&quo…...
js(深浅拷贝,节流防抖,this指向,改变this指向的方法)
一、深浅拷贝 1.基本数据类型和引用数据类型的区别: 1. 基本数据类型的变量存储的是值 引用数据类型的变量存储的是地址值 2. 基本数据类型的变量存储的值在栈内存 引用数据类型的变量存储的值在堆内存 3. 基本数据类型的变量存储的是值和值之间相互不影响 引用数据…...
香橙派5(RK3588)使用npu加速yolov5推理的部署过程
香橙派5使用npu加速yolov5推理的部署过程 硬件环境 部署过程 模型训练(x86主机) 在带nvidia显卡(最好)的主机上进行yolo的配置与训练, 获取最终的best.pt模型文件, 详见另一篇文档 模型转换(x86主机) 下载airockchip提供的yolov5(从pt到onnx) 一定要下这个版本的yolov5, …...
基于MWORKS的蓝桥杯「智能装备数字化建模大赛」正式发布,首期培训本周六开启
为强化装备数字化人才培养,推动装备数字化技术快速发展,第十六届蓝桥杯全国软件和信息技术专业人才大赛设置专项赛暨智能装备数字化建模大赛,使用MWORKS作为参赛软件。关于参赛软件授权、技术支持与培训、教材与案例开发支持、成果转化培训及…...
021、深入解析前端请求拦截器
目录 深入解析前端请求拦截器: 1. 引言 2. 核心实现与基础概念 2.1 基础拦截器实现 2.2 响应拦截器配置 3. 实际应用场景 3.1 完整的用户认证系统 3.2 文件上传系统 3.3 API请求缓存系统 3.4 请求重试机制 3.5 国际化处理 4. 性能优化实践 4.1 请求合并…...
windows中的tracert命令
在 Windows 操作系统中,tracert(全称 Trace Route)是一个用于确定 IP 数据包到达目标主机所经过的路径的命令行工具。它通过发送具有不同生存时间(TTL)的 ICMP(Internet Control Message Protocolÿ…...
【玩儿】Java 数字炸弹小游戏(控制台版)+ IO 数据存储
Java 数字炸弹小游戏(控制台版) IO 数据存储 数字炸弹小游戏概述功能实现实体类User.java 玩家信息实体类GameRecode.java 游戏记录实体类 自定义异常AccountLockedException.java 账号锁定异常PasswordErrorException.java 密码错误异常UnknowAccountEx…...
今日头条躺赚流量:自动化新闻爬取和改写脚本
构建一个自动化的新闻爬取和改写系统,实现热点新闻的自动整理和发布,需要分为以下几个模块:新闻爬取、信息解析与抽取、内容改写、自动发布。以下是每个模块的详细实现步骤和代码示例: 1. 新闻爬取模块 目标:从新闻网…...
日常实习与暑期实习详解
日常实习与暑期实习详解 问了下正在实习的同学,发现天要塌了–才知道日常实习是没有笔试的 1. 实习的定义 1.1 日常实习 日常实习是企业长期招聘的实习岗位,通常没有时间限制。企业会在需要时进行招聘,招聘对象包括在校大学生和大一、大二的…...
Git的原理和使用(六)
本文主要讲解企业级开发模型 1. 引入 交付软件的流程:开发->测试->发布上线 上面三个过程可以详细划分为一下过程:规划、编码、构建、测试、发 布、部署和维护 最初,程序⽐较简单,⼯作量不⼤,程序员⼀个⼈可以完…...
Elasticsearch 中的高效按位匹配
作者:来自 Elastic Alexander Marquardt 探索在 Elasticsearch 中编码和匹配二进制数据的六种方法,包括术语编码(我喜欢的方法)、布尔编码、稀疏位位置编码、具有精确匹配的整数编码、具有脚本按位匹配的整数编码以及使用 ESQL 进…...
LSTM,全称长短期记忆网络(Long Short-Term Memory),是一种特殊的循环神经网络(RNN)结构
关于lstm超参数设置,每个参数都有合适的范围,超过这个范围则lstm训练不再有效,loss不变,acc也不变 LSTM,全称长短期记忆网络(Long Short-Term Memory),是一种特殊的循环神经网络&am…...
导出问题处理
问题描述 测试出来一个问题,使用地市的角色,导出数据然后超过了20w的数据,提示报错,我还以为是偶然的问题,然后是发现是普遍的问题,本地环境复现了,然后是,这个功能是三套角色&…...
通过cv库智能切片 把不同的分镜切出来 自媒体抖音快手混剪
用 手机自动化脚本,从自媒体上获取视频,一个商品对应几百个视频,我们把这几百个视频下载下来,进行分镜 视频切片,从自媒体上下载视频,通过cv库用直方图识别每个镜头进行切片。 下载多个图片进行视频的伪原…...
【机器学习】——numpy教程
文章目录 1.numpy简介2.初始化numpy3.ndarry的使用3.1numpy的属性3.2numpy的形状3.3ndarray的类型 4numpy生成数组的方法4.1生成0和1数组4.2从现有的数组生成4.3生成固定范围的数组4.4生成随机数组 5.数组的索引、切片6.数组的形状修改7.数组的类型修改8.数组的去重9.ndarray的…...
多线程——线程的状态
线程状态的意义 线程状态的意义在于描述线程在执行过程中的不同阶段和条件,帮助开发者更好地管理和调度线程资源。 线程的多种状态 线程的状态是一个枚举类型(Thread.State),可以通过线程名.getState()…...
开源数据库 - mysql - 组织结构(与oracle的区别)
组织形式区别 mysql(Schema -> Table -> Column -> Row) Schema(方案): Scheme是关于数据库和表的布局及特性的信息。它可以用来描述数据库中特定的表以及整个数据库和其中表的信息,如表的一些特…...
vue3+vite 部署npm 包
公司需要所以研究了一下怎么部署安装,比较简单 先下载个vue项目 不用安准路由,pinna 啥的,只需要一个最简单的模版 删掉App.vue 中的其它组件 npm create vuelatest 开始写自定义组件 新建一个el-text 组件, name是重点,vue3中…...
华为鸿蒙HarmonyOS应用开发者高级认证视频及题库答案
华为鸿蒙开发者高级认证的学习资料 1、课程内容涵盖HarmonyOS系统介绍、DevEco Studio工具使用、UI设计与开发、Ability设计与开发、分布式特性、原子化服务卡片以及应用发布等。每个实验都与课程相匹配,帮助加深理解并掌握技能 2、学习视频资料 华为HarmonyOS开发…...
MiniProfiler 存储策略全解析:SQL Server、Redis、MongoDB 配置指南
MiniProfiler 存储策略全解析:SQL Server、Redis、MongoDB 配置指南 【免费下载链接】dotnet A simple but effective mini-profiler for ASP.NET (and Core) websites 项目地址: https://gitcode.com/gh_mirrors/do/dotnet MiniProfiler 是一款轻量级但功能…...
MySQL数据恢复实战:从frm和ibd文件重建完整数据表
1. MySQL数据恢复实战:从frm和ibd文件重建完整数据表 数据库管理员最怕听到的就是"数据丢了"三个字。我经历过好几次半夜被叫起来处理数据丢失的紧急情况,那种头皮发麻的感觉至今难忘。不过别担心,只要.frm和.ibd文件还在ÿ…...
koanf命令行参数解析:高级POSIX兼容标志处理指南
koanf命令行参数解析:高级POSIX兼容标志处理指南 【免费下载链接】koanf Simple, extremely lightweight, extensible, configuration management library for Go. Supports JSON, TOML, YAML, env, command line, file, S3 etc. Alternative to viper. 项目地址:…...
linux https拦截与url解析
uprobe 拦截TLS库 用 eBPF uprobe 拦截 TLS 库(OpenSSL/GnuTLS/Go TLS),在加密前 / 解密后捕获明文 HTTP 请求,即可解析出 HTTPS URL,无需 CA 证书、无需修改应用。 核心原理 HTTPS 明文(含 URL…...
避开这3个坑,你的软考数据库设计题至少多拿10分:从E-R图合并冲突到SQL约束实战
软考数据库设计题避坑指南:从E-R图到SQL约束的实战技巧 每次软考结束,总有一批考生捶胸顿足——"那道数据库设计题明明会做,怎么又丢分了?"作为参加过三次软考阅卷的数据库讲师,我发现90%的失分都集中在几个…...
Awoo Installer深度解析:破解Switch游戏安装困境的全能工具
Awoo Installer深度解析:破解Switch游戏安装困境的全能工具 【免费下载链接】Awoo-Installer A No-Bullshit NSP, NSZ, XCI, and XCZ Installer for Nintendo Switch 项目地址: https://gitcode.com/gh_mirrors/aw/Awoo-Installer 在Nintendo Switch破解社区…...
万物识别镜像高级功能探索:除了基础识别,还能做什么?
万物识别镜像高级功能探索:除了基础识别,还能做什么? 1. 万物识别镜像的隐藏潜力 大多数人使用万物识别镜像时,只停留在基础识别功能上——上传图片,获取识别结果。但这款基于cv_resnest101_general_recognition算法…...
如何评估 SEO 优化的成本效益_SEO优化应该重点关注哪些方面
如何评估 SEO 优化的成本效益 在当今互联网时代,搜索引擎优化(SEO)已经成为了提升网站流量和品牌知名度的关键手段。SEO 优化的成本效益评估并不是一件简单的事情。如何在有限的预算内实现最大的效益,是每一个企业和网站运营者都需…...
Phi-3-mini-4k-instruct-gguf一文详解:GGUF模型加载机制与内存映射优化原理
Phi-3-mini-4k-instruct-gguf一文详解:GGUF模型加载机制与内存映射优化原理 1. GGUF模型格式概述 GGUF(GPT-Generated Unified Format)是llama.cpp团队设计的新一代模型文件格式,专门为大型语言模型优化。相比之前的GGML格式&am…...
AutoGen Studio效果展示:看Qwen3-4B如何协作完成网页设计
AutoGen Studio效果展示:看Qwen3-4B如何协作完成网页设计 1. AutoGen Studio简介 AutoGen Studio是一个基于微软AutoGen框架开发的低代码界面工具,它让构建和组合AI代理变得简单直观。通过这个平台,你可以快速创建多个AI代理,为…...
