Echart图表收起/展开后无法重新渲染实现自适应(亲测有效)-开发bug总结5
问题描述:
后台管理系统,左侧的菜单栏是可以展开/收起的,默认是展开,此时页面上的图表加载正常,如果收起后再展开,页面底部就会出现滚动轴,图表没有重新绘制。
网上也查了很多方法。基本都是通过检测浏览器窗口大小的变化,来实现重新绘制,但是我项目中只是左侧菜单栏发生了展开、收缩,实际浏览器 窗口的大小并没有发生改变,试了很多都没效果,如下:
只要窗口大小发生像素变化就会触发
window.addEventListener("resize", () => { this.myChart.resize(); // 窗口发生改变就更新echarts });
我的解决方法:
1、保存收起/展开 状态,当操作 展开/ 收起的时候,watch检测值的变化(我项目中状态是存到了store中)
computed: {
redraw() {
return this.$store.state.app.sidebar.redraw
}
}
2、监测菜单栏的状态变化,重新绘制echart图表
watch: {
redraw() {
this.$nextTick(() => {
this.initEachertsDate()
})
}
}
methods: {
initEachertsDate() {
let option = { ... 中间省略图表的配置项...}
if (this.$refs.echarts) {
const myCharts = this.$echarts.init(this.$refs.echarts)
myCharts.setOption(option)
myCharts.resize() // 重新绘制
}
}
}
以上代码,完美解决我项目中遇到的问题。每个人遇到的问题都不太一样,具体可以多看看,多尝试
相关文章:
Echart图表收起/展开后无法重新渲染实现自适应(亲测有效)-开发bug总结5
问题描述: 后台管理系统,左侧的菜单栏是可以展开/收起的,默认是展开,此时页面上的图表加载正常,如果收起后再展开,页面底部就会出现滚动轴,图表没有重新绘制。 网上也查了很多方法。基本都是通…...
互联网Java工程师面试题·Java 面试篇·第二弹
目录 15、什么是不可变对象(immutable object)?Java 中怎么创建一个不可变对象? 16、我们能创建一个包含可变对象的不可变对象吗? 17、Java 中应该使用什么数据类型来代表价格? 18、怎么将 byte 转换为 Str…...
【ARM裸机】ARM入门
1.ARM成长史 2.ARM的商业模式和生态系统 ARM只设计CPU,但是不生产CPU 3.为什么使用三星:S5PV210 4.各种版本号 0. ARM和Cortex Cortex就是ARM公司一个系列处理器的名称。比如英特尔旗下处理器有酷睿,奔腾,赛扬。ARM在最初的处理器…...
webGL编程指南 第三章 矩阵旋转三角形rotatedTriangle_Matrix
我会持续更新关于wegl的编程指南中的代码。 当前的代码不会使用书中的缩写,每一步都是会展开写。希望能给后来学习的一些帮助 git代码地址 :git 接着 上一节中 接着做平移的转化。在本次的案例案例中主要是xy的坐标变量相加,同时传递个给相…...
【常用的Git命令】
Git是一个版本控制系统,它拥有众多的命令。以下是一些常用的Git命令: 配置相关命令: git config --global user.name "Your Name":设置用户姓名git config --global user.email "youremailexample.com":设置用…...
cnn 直线检测笔记
目录 mlsd直线检测: ULSD-ISPRS曲线检测 划线标注工具: 可视化标注代码: mlsd直线检测: mlsd_pytorch...
【Edabit 算法 ★☆☆☆☆☆】 Return Something to Me!
【Edabit 算法 ★☆☆☆☆☆】 Return Something to Me! strings language_fundamentals Instructions Write a function that returns the string "something" joined with a space " " and the given argument a. Examples giveMeSomething(“is bett…...
【Redis】数据结构之dict
目录 dict的基本结构dict的相关操作函数底层通用的之查找插入key-value对应该放入ht表的哪个槽rehash过程 dict的基本结构 typedef struct dict {dictType *type;void *privdata;dictht ht[2];long rehashidx; /* rehashing not in progress if rehashidx -1 */unsigned long…...
curl命令服务器上执行http请求
1. 现在本地使用postman生成curl命令 注意: 将ip改成127.0.0.1,端口是实际服务运行的端口 curl --location --request POST http://127.0.0.1:63040/content/course/list?pageNo1&pageSize2 \ --header Content-Type: application/json \ --data-raw {"courseName&q…...
图论03-【无权无向】-图的深度优先遍历-路径问题/检测环/二分图
文章目录 1. 代码仓库2. 单源路径2.1 思路2.2 主要代码 3. 所有点对路径3.1 思路3.2 主要代码 4. 路径问题的优化-提前结束递归4.1 思路4.2 主要代码 5. 检测环5.1 思路5.2 主要代码 5. 二分图5.1 思路5.2 主要代码5.2.1 遍历每个联通分量5.2.2 递归判断相邻两点的颜色是否一致…...
算法题java
一、四向链表,输入n生成一个多维4向链表 Datastatic class ListNode<T>{private T val;ListNode<T> up,down,left,right;public ListNode(T val){this.val val;}}public static void main(String[] args){ListNode<Integer> node getResult(8);…...
MySQL数据的基础语法
MySQL 是一种强大的关系型数据库管理系统(RDBMS),它使用 SQL(Structured Query Language)来管理和操作数据。以下是 MySQL 数据库的基础 SQL 语法,包括创建数据库、创建表、插入、查询、更新和删除数据等基…...
阿里面试(持续更新)
一面: 1 HashMap 实现原理,ConcurrentHashMap 实现原理 HashMap和ConcurrentHashMap都是存储键值对的数据结构,不同的是HashMap是线程不安全的,ConcurrentHashMap是线程安全的,HashMap在高并发情况下会出现数据不一致…...
龙芯3A3000源码编译安装deepin-ide
安装环境 系统为统信专业版1050 CPU为龙芯3A3000 安装步骤 1.安装所有依赖库 sudo apt-get install git debhelper cmake qt5-qmake qtbase5-dev qttools5-dev qttools5-dev-tools lxqt-build-tools libssl-dev llvm llvm-dev libclang-dev libutf8proc-dev libmicrohttpd-d…...
学成在线第二天-查询课程、查询课程分类、新增课程接口实现以及跨域的处理思路和全局异常处理的使用以及面试题
目录 一、接口的实现 二、跨域的处理思路 三、全局异常处理 四、面试题 五、总结 一、接口的实现 1. 查询课程接口 思路: 典型的分页查询 按需查询 模糊查询的查询 controller: ApiOperation(value "课程列表", notes "课程…...
【OpenCV概念】 11— 对象检测
一、说明 这都是关于物体识别的。物体识别是指通过计算机视觉技术,自动识别图像或视频中的物体及其属性和特征,是人工智能领域的一个分支。物体识别可应用于多个领域,包括工业自动化、智能家居、医疗、安防等。请随时阅读这篇文章:…...
TensorRT学习笔记--常用卷积、激活、池化和FC层算子API
目录 1--Tensor算子API 1-1--卷积算子 1-2--激活算子 1-3--池化算子 1-4--FC层算子 2--代码实例 3--编译运行 1--Tensor算子API TensorRT提供了卷积层、激活函数和池化层三种最常用算子的API: // 创建一个空的网络 nvinfer1::INetworkDefinition* network …...
【Edabit 算法 ★☆☆☆☆☆】 Less Than 100?
【Edabit 算法 ★☆☆☆☆☆】 Less Than 100? language_fundamentals math validation Instructions Given two numbers, return true if the sum of both numbers is less than 100. Otherwise return false. Examples lessThan100(22, 15) // true // 22 15 37lessTha…...
C++中的智能指针:更安全、更便利的内存管理
在C++编程中,动态内存管理一直是一个重要且具有挑战性的任务。传统的C++中,程序员需要手动分配和释放内存,这往往会导致内存泄漏和悬挂指针等严重问题。为了解决这些问题,C++11引入了智能指针(Smart Pointers)这一概念,它们是一种高级的内存管理工具,可以自动管理内存的…...
google登录k8s dashboard ui显示“您的连接不是私密连接”问题解决梳理
1.问题描述 OS Version:CentOS Linux release 7.9.2009 (Core) K8S Version:Kubernetes v1.20.4 k8s dashboard ui安装完毕后,通过google浏览器登录返现https网页,发现非官方的https网页无法打开 网址:https://192.168.10.236:31001 2.原…...
Java 25虚拟线程安全治理全景图(JVM级沙箱+结构化取消+异步上下文透传三重锁)
第一章:Java 25虚拟线程安全治理全景图概览Java 25正式将虚拟线程(Virtual Threads)从预览特性转为标准特性,并同步强化了其在高并发场景下的安全治理能力。虚拟线程虽极大降低了并发编程的资源开销,但并未消除竞态条件…...
Python开启AI之门:07 卷积神经网络:机器如何看世界
07 卷积神经网络:机器如何看世界 咱们继续这个《Python开启AI之门》系列,上篇聊了训练过程像健身房,这次咱们来聊聊卷积神经网络(CNN)——机器怎么“看”世界。别慌,咱们闲聊着来,边说边动手,幽默藏在那些小细节里,保证读着舒服,像在樱花树下喝茶聊天。 卷积神经网络…...
【四】3D Object Model构建基石——从无序点云到规则平面的算子实战解析
1. 从无序点云到规则平面:3D建模的起点选择 第一次接触3D视觉项目时,我面对激光雷达扫描的零件点云数据手足无措。直到发现Halcon的这两个"基石算子",才真正打开了3D建模的大门。gen_object_model_3d_from_points和gen_plane_obje…...
Zydis:终极x86/x86-64反汇编器 - 如何快速入门轻量级代码分析
Zydis:终极x86/x86-64反汇编器 - 如何快速入门轻量级代码分析 【免费下载链接】zydis Fast and lightweight x86/x86-64 disassembler and code generation library 项目地址: https://gitcode.com/gh_mirrors/zy/zydis Zydis是一款快速轻量的x86/x86-64反汇…...
3D-Tiles-Tools深度解析:如何实现大规模3D地理空间数据的高性能格式转换?
3D-Tiles-Tools深度解析:如何实现大规模3D地理空间数据的高性能格式转换? 【免费下载链接】3d-tiles-tools 项目地址: https://gitcode.com/gh_mirrors/3d/3d-tiles-tools 在数字孪生、智慧城市和地理信息系统领域,大规模3D数据的格式…...
CSGO服务器皮肤插件避坑指南:从Weapons到PTaH,完整安装与防封号提醒
CSGO服务器皮肤插件深度指南:安全部署与风险控制实战 在私人CSGO服务器上实现全武器皮肤和手套自定义,是许多服主提升玩家体验的常见需求。不同于基础服务器搭建,皮肤插件的部署涉及更多技术细节和潜在风险考量。本文将系统梳理从Weapons、Gl…...
AI发展,软件开发到底该怎么搞?
当生成式AI全面渗透研发全流程,代码自动生成、智能调试、架构优化成为常态,软件开发的底层逻辑已被彻底重构。过去,企业做信息化、做软件,离不开庞大的研发团队、漫长的交付周期与高昂的人力成本;如今,AI让…...
别再死记硬背!用Three.js十分钟搞懂透视投影与正交投影的区别
十分钟用Three.js实战理解透视与正交投影的本质区别 记得第一次接触3D开发时,我被各种投影矩阵公式折磨得头晕眼花。直到某天在Three.js里拖动相机参数滑块,看着实时变化的3D场景突然开窍——原来理解投影方式最有效的方式不是背诵公式,而是亲…...
IIR滤波器设计实战:从Butterworth到参数调优的完整指南
IIR滤波器设计实战:从Butterworth到参数调优的完整指南 在数字信号处理领域,IIR(无限冲激响应)滤波器因其高效的频率选择特性而广受欢迎。与FIR滤波器相比,IIR滤波器能够在相同性能要求下使用更少的计算资源ÿ…...
哔哩下载姬downkyi:如何用5分钟解决B站视频下载的三大痛点
哔哩下载姬downkyi:如何用5分钟解决B站视频下载的三大痛点 【免费下载链接】downkyi 哔哩下载姬downkyi,哔哩哔哩网站视频下载工具,支持批量下载,支持8K、HDR、杜比视界,提供工具箱(音视频提取、去水印等&a…...
