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

vue3 vben-admin 窗口大小更改后 echarts尺寸变为 100px的问题

问题描述:

当切换切换tab 并且窗口尺寸更改时, echarts的尺寸因为父元素为 0, 自动设置为 100px

vue3 vben-admin 窗口大小更改后 echarts尺寸变为 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里的数据发生改变&#xff0c;页面中渲染的数据发生改变&#xff0c;该效果称为动态数据 #hello/views:def hello_user(request):username000html <!DOCTYPE html><html lang"en"><head><meta charset"UTF-8&quo…...

js(深浅拷贝,节流防抖,this指向,改变this指向的方法)

一、深浅拷贝 1.基本数据类型和引用数据类型的区别&#xff1a; 1. 基本数据类型的变量存储的是值 引用数据类型的变量存储的是地址值 2. 基本数据类型的变量存储的值在栈内存 引用数据类型的变量存储的值在堆内存 3. 基本数据类型的变量存储的是值和值之间相互不影响 引用数据…...

香橙派5(RK3588)使用npu加速yolov5推理的部署过程

香橙派5使用npu加速yolov5推理的部署过程 硬件环境 部署过程 模型训练(x86主机) 在带nvidia显卡(最好)的主机上进行yolo的配置与训练, 获取最终的best.pt模型文件, 详见另一篇文档 模型转换(x86主机) 下载airockchip提供的yolov5(从pt到onnx) 一定要下这个版本的yolov5, …...

基于MWORKS的蓝桥杯「智能装备数字化建模大赛」正式发布,首期培训本周六开启

为强化装备数字化人才培养&#xff0c;推动装备数字化技术快速发展&#xff0c;第十六届蓝桥杯全国软件和信息技术专业人才大赛设置专项赛暨智能装备数字化建模大赛&#xff0c;使用MWORKS作为参赛软件。关于参赛软件授权、技术支持与培训、教材与案例开发支持、成果转化培训及…...

021、深入解析前端请求拦截器

目录 深入解析前端请求拦截器&#xff1a; 1. 引言 2. 核心实现与基础概念 2.1 基础拦截器实现 2.2 响应拦截器配置 3. 实际应用场景 3.1 完整的用户认证系统 3.2 文件上传系统 3.3 API请求缓存系统 3.4 请求重试机制 3.5 国际化处理 4. 性能优化实践 4.1 请求合并…...

windows中的tracert命令

在 Windows 操作系统中&#xff0c;tracert&#xff08;全称 Trace Route&#xff09;是一个用于确定 IP 数据包到达目标主机所经过的路径的命令行工具。它通过发送具有不同生存时间&#xff08;TTL&#xff09;的 ICMP&#xff08;Internet Control Message Protocol&#xff…...

【玩儿】Java 数字炸弹小游戏(控制台版)+ IO 数据存储

Java 数字炸弹小游戏&#xff08;控制台版&#xff09; IO 数据存储 数字炸弹小游戏概述功能实现实体类User.java 玩家信息实体类GameRecode.java 游戏记录实体类 自定义异常AccountLockedException.java 账号锁定异常PasswordErrorException.java 密码错误异常UnknowAccountEx…...

今日头条躺赚流量:自动化新闻爬取和改写脚本

构建一个自动化的新闻爬取和改写系统&#xff0c;实现热点新闻的自动整理和发布&#xff0c;需要分为以下几个模块&#xff1a;新闻爬取、信息解析与抽取、内容改写、自动发布。以下是每个模块的详细实现步骤和代码示例&#xff1a; 1. 新闻爬取模块 目标&#xff1a;从新闻网…...

日常实习与暑期实习详解

日常实习与暑期实习详解 问了下正在实习的同学&#xff0c;发现天要塌了–才知道日常实习是没有笔试的 1. 实习的定义 1.1 日常实习 日常实习是企业长期招聘的实习岗位&#xff0c;通常没有时间限制。企业会在需要时进行招聘&#xff0c;招聘对象包括在校大学生和大一、大二的…...

Git的原理和使用(六)

本文主要讲解企业级开发模型 1. 引入 交付软件的流程&#xff1a;开发->测试->发布上线 上面三个过程可以详细划分为一下过程&#xff1a;规划、编码、构建、测试、发 布、部署和维护 最初&#xff0c;程序⽐较简单&#xff0c;⼯作量不⼤&#xff0c;程序员⼀个⼈可以完…...

Elasticsearch 中的高效按位匹配

作者&#xff1a;来自 Elastic Alexander Marquardt 探索在 Elasticsearch 中编码和匹配二进制数据的六种方法&#xff0c;包括术语编码&#xff08;我喜欢的方法&#xff09;、布尔编码、稀疏位位置编码、具有精确匹配的整数编码、具有脚本按位匹配的整数编码以及使用 ESQL 进…...

LSTM,全称长短期记忆网络(Long Short-Term Memory),是一种特殊的循环神经网络(RNN)结构

关于lstm超参数设置&#xff0c;每个参数都有合适的范围&#xff0c;超过这个范围则lstm训练不再有效&#xff0c;loss不变&#xff0c;acc也不变 LSTM&#xff0c;全称长短期记忆网络&#xff08;Long Short-Term Memory&#xff09;&#xff0c;是一种特殊的循环神经网络&am…...

导出问题处理

问题描述 测试出来一个问题&#xff0c;使用地市的角色&#xff0c;导出数据然后超过了20w的数据&#xff0c;提示报错&#xff0c;我还以为是偶然的问题&#xff0c;然后是发现是普遍的问题&#xff0c;本地环境复现了&#xff0c;然后是&#xff0c;这个功能是三套角色&…...

通过cv库智能切片 把不同的分镜切出来 自媒体抖音快手混剪

用 手机自动化脚本&#xff0c;从自媒体上获取视频&#xff0c;一个商品对应几百个视频&#xff0c;我们把这几百个视频下载下来&#xff0c;进行分镜 视频切片&#xff0c;从自媒体上下载视频&#xff0c;通过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的…...

多线程——线程的状态

线程状态的意义 ‌线程状态的意义在于描述线程在执行过程中的不同阶段和条件&#xff0c;帮助开发者更好地管理和调度线程资源。 线程的多种状态 线程的状态是一个枚举类型&#xff08;Thread.State&#xff09;&#xff0c;可以通过线程名.getState&#xff08;&#xff09…...

开源数据库 - mysql - 组织结构(与oracle的区别)

组织形式区别 mysql&#xff08;Schema -> Table -> Column -> Row&#xff09; Schema&#xff08;方案&#xff09;&#xff1a; Scheme是关于数据库和表的布局及特性的信息。它可以用来描述数据库中特定的表以及整个数据库和其中表的信息&#xff0c;如表的一些特…...

vue3+vite 部署npm 包

公司需要所以研究了一下怎么部署安装&#xff0c;比较简单 先下载个vue项目 不用安准路由&#xff0c;pinna 啥的&#xff0c;只需要一个最简单的模版 删掉App.vue 中的其它组件 npm create vuelatest 开始写自定义组件 新建一个el-text 组件, name是重点&#xff0c;vue3中…...

华为鸿蒙HarmonyOS应用开发者高级认证视频及题库答案

华为鸿蒙开发者高级认证的学习资料 1、课程内容涵盖HarmonyOS系统介绍、DevEco Studio工具使用、UI设计与开发、Ability设计与开发、分布式特性、原子化服务卡片以及应用发布等。每个实验都与课程相匹配&#xff0c;帮助加深理解并掌握技能 2、学习视频资料 华为HarmonyOS开发…...

【计网】从零开始认识IP协议 --- 认识网络层,认识IP报头结构

从零开始认识IP协议 1 网络层协议1.1 初步认识IP协议1.2 初步理解IP地址 2 IP协议报头3 初步理解网段划分 1 网络层协议 1.1 初步认识IP协议 我们已经熟悉了传输层中的UDP和TCP协议&#xff0c;接下来我们来接触网络层的协议&#xff1a; 网络层在计算机网络中的意义主要体现…...

大一物联网要不要转专业,转不了该怎么办?

有幸在2014年&#xff0c;踩中了物联网的风口&#xff0c;坏消息&#xff0c;牛马的我&#xff0c;一口汤都没喝上。 依稀记得&#xff0c;当时市场部老大&#xff0c;带我去上海参加电子展会&#xff0c;印象最深的&#xff0c;一些物联网云平台&#xff0c;靠着一份精美PPT&a…...

LeetCode题练习与总结:4的幂--342

一、题目描述 给定一个整数&#xff0c;写一个函数来判断它是否是 4 的幂次方。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 整数 n 是 4 的幂次方需满足&#xff1a;存在整数 x 使得 n 4^x 示例 1&#xff1a; 输入&#xff1a;n 16 输出&am…...

ubuntu GLEW could not be initialized : Unknown error

原因 某些ubuntu版本默认使用wayland协议&#xff0c;glew不支持 解决方法 1、编辑GDM3配置文件 sudo nano /etc/gdm3/custom.conf 2、修改配置文件 去掉#WaylandEnablefalse前的# 3、重启GDM3服务 sudo systemctl restart gdm3 修改后默认使用X11协议。...

51c~目标检测~合集1

我自己的原文哦~ https://blog.51cto.com/whaosoft/12371248 #目标检测x1 又一个发现 都不知道是第几了 是一个高效的目标检测 动态候选较大程度提升检测精度 目标检测是一项基本的计算机视觉任务&#xff0c;用于对给定图像中的目标进行定位和分类。 论文地址&#xff1a…...

前端工程化面试题

说一下模块化方案 模块化是为了解决代码的复用和组织问题&#xff0c;可以说有了模块化才让前端有了工程的概念&#xff0c;模块化要解决两大问题 代码隔离和依赖管理&#xff0c;从node.js最早发布的commonjs 到浏览器端的 AMD,CMD 规范以及兼容的 UMD 规范&#xff0c;再到现…...

【Visual Studio】下载安装 Visual Studio Community 并配置 C++ 桌面开发环境的图文教程

引言 Visual Studio 是一个面向 .NET 和 C 开发人员的综合性 Windows 版 IDE&#xff0c;可用于构建 Web、云、桌面、移动应用、服务和游戏。 安装步骤 访问 Visual Studio 的官方下载页面&#xff1a; https://visualstudio.microsoft.com/zh-hans/downloads/运行已下载的 V…...

010Editor:十六进制编辑器

介绍 世界上最好的十六进制编辑器和出色的文本编辑器 010 Editor 是用于处理文本和二进制数据的终极工具包。 添加模板 模板库https://www.sweetscape.com/010editor/repository/templates/ 先下载一个ELF 模板 运行模板...

Vscode中Github Copilot无法使用

现象 Copilot侧边栏显示要登录&#xff0c;但是点击"github登录"没有反应与Copilot对话&#xff0c;报错如下&#xff1a; Unexpected token o, "[object Rea"... is not valid JSON解决方案 在网上怎么找都没找到类似的问题&#xff0c;最后发现是Vsco…...

<项目代码>YOLOv8表情识别<目标检测>

YOLOv8是一种单阶段&#xff08;one-stage&#xff09;检测算法&#xff0c;它将目标检测问题转化为一个回归问题&#xff0c;能够在一次前向传播过程中同时完成目标的分类和定位任务。相较于两阶段检测算法&#xff08;如Faster R-CNN&#xff09;&#xff0c;YOLOv8具有更高的…...

wordpress标题数据表/外贸网站制作推广

Mahout版本&#xff1a;0.7&#xff0c;hadoop版本&#xff1a;1.0.4&#xff0c;jdk&#xff1a;1.7.0_25 64bit。 本篇是ItemBased Collaborative Filtering的算法综述&#xff0c;即总结前面几篇blog&#xff0c;分析该算法的数据流&#xff0c;主要使用的数据是《mahout i…...

上海黑马网站制作/网站seo课程

#####找规律&#xff1a;以“$”为红点&#xff0c;连线起来即为下图&#xff0c;不难得出总行数总列数均为t4n5(正方形)&#xff0c;总行数列数一定为奇数&#xff0c;很容易确定最中间的点为a[t/2][t/2]。![](/image_editor_upload/20200215044635_79242.jpg)#####由于n为正整…...

wordpress 内容页摘要/全网最好的推广平台

2019独角兽企业重金招聘Python工程师标准>>> 远程访问 MySQL&#xff0c; 需开放默认端口号 3306. 方式1&#xff1a;iptables&#xff08;CentOS 7.x版本之前用法&#xff0c;不推荐&#xff09; 打开 iptables 的配置文件&#xff1a; vi /etc/sysconfig/iptables…...

wordpress批量信息导入工具/小程序免费制作平台

前言最近有幸跟随资深ThoughtWorks咨询师熊节老师一起学习测试驱动设计&#xff0c;经过短暂的十几天培训&#xff0c;对测试驱动设计的基本原则、实践模式、技巧有了一点点初步的认识。 在此之前&#xff0c;经常自嘲我经历的公司实践也似乎是TDD&#xff0c; 这种实践往往都…...

初期网站价值/开源cms建站系统

点击上方蓝色字体&#xff0c;选择“标星公众号”优质文章&#xff0c;第一时间送达作者 | 低吟不作语来源 | urlify.cn/y6bYfu66套java从入门到精通实战课程分享八种排序算法可以按照如图分类一、交换排序所谓交换&#xff0c;就是序列中任意两个元素进行比较&#xff0c;根…...

广东平台网站建设哪家好/使用网站模板快速建站

一、常见版本管理系统 1、SVN 集中式的版本控制系统&#xff0c;只有一个中央数据仓库&#xff0c;如果中央数据仓库挂了或者不能访问&#xff0c;所有的使用者无法使用svn&#xff0c;无法进行提交或者备份文件 2、Git 分布式的版本控制系统&#xff0c;在每个使用者电脑上就有…...