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

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

一、四向链表&#xff0c;输入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 是一种强大的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;它使用 SQL&#xff08;Structured Query Language&#xff09;来管理和操作数据。以下是 MySQL 数据库的基础 SQL 语法&#xff0c;包括创建数据库、创建表、插入、查询、更新和删除数据等基…...

阿里面试(持续更新)

一面&#xff1a; 1 HashMap 实现原理&#xff0c;ConcurrentHashMap 实现原理 HashMap和ConcurrentHashMap都是存储键值对的数据结构&#xff0c;不同的是HashMap是线程不安全的&#xff0c;ConcurrentHashMap是线程安全的&#xff0c;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. 查询课程接口 思路&#xff1a; 典型的分页查询 按需查询 模糊查询的查询 controller&#xff1a; ApiOperation(value "课程列表", notes "课程…...

【OpenCV概念】 11— 对象检测

一、说明 这都是关于物体识别的。物体识别是指通过计算机视觉技术&#xff0c;自动识别图像或视频中的物体及其属性和特征&#xff0c;是人工智能领域的一个分支。物体识别可应用于多个领域&#xff0c;包括工业自动化、智能家居、医疗、安防等。请随时阅读这篇文章&#xff1a…...

TensorRT学习笔记--常用卷积、激活、池化和FC层算子API

目录 1--Tensor算子API 1-1--卷积算子 1-2--激活算子 1-3--池化算子 1-4--FC层算子 2--代码实例 3--编译运行 1--Tensor算子API TensorRT提供了卷积层、激活函数和池化层三种最常用算子的API&#xff1a; // 创建一个空的网络 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安装完毕后&#xff0c;通过google浏览器登录返现https网页&#xff0c;发现非官方的https网页无法打开 网址&#xff1a;https://192.168.10.236:31001 2.原…...

如何快速配置虚拟控制器:从零开始的完整vJoy教程

如何快速配置虚拟控制器&#xff1a;从零开始的完整vJoy教程 【免费下载链接】vJoy Virtual Joystick 项目地址: https://gitcode.com/gh_mirrors/vj/vJoy vJoy是一款功能强大的开源虚拟摇杆工具&#xff0c;能够帮助用户创建模拟游戏控制器&#xff0c;实现自定义输入映…...

Gemma 4 / PaliGemma 2 / Ollama / Open WebUI 本地部署复盘

Gemma 4 / PaliGemma 2 / Ollama / Open WebUI 本地部署复盘 日期&#xff1a;2026-04-20环境&#xff1a;WSL2 Ubuntu (gkubuntu2004)目标&#xff1a; 本地部署 Gemma 4本地部署 PaliGemma 2使用 Ollama 提供交互式聊天能力使用 Open WebUI 提供图形化聊天界面尝试将 PaliGem…...

VIC水文模型深度解析:从基础内容处理到模型参数率定的全程视频教学指南

vic水文模型 VIC水文模型径流模拟 全程视频教学指导&#xff0c;讲解详细 从基础内容处理讲解到模型参数率定全程教学。 零基础可学。 自用模型&#xff0c;从零到实践&#xff0c;历时两周左右 全套教程 最近在折腾VIC水文模型的径流模拟&#xff0c;发现这玩意儿就像搭乐高—…...

别再傻傻存多张图了!用MinIO和.NET Core实现按需生成缩略图,省下90%存储空间

智能缩略图方案&#xff1a;用MinIO与.NET Core实现存储成本优化 在数字内容爆炸式增长的今天&#xff0c;图片资源已成为各类应用不可或缺的组成部分。无论是电商平台的商品展示、社交媒体的用户分享&#xff0c;还是企业文档的图文混排&#xff0c;都需要处理大量不同尺寸的图…...

2026 费控管理系统排行榜:这 10 款软件深受名企青睐

本文将深入对比10款费用管理系统&#xff1a;合思&#xff08;易快报&#xff09;、胜意费控云、泛微齐业成费控系统、航天信息财智云费控系统、汇联易费控系统、鼎捷云费控、致远费控、每刻报销、Zoho Expense、分贝通 企业数字化转型的深水区&#xff0c;传统的纸质报销和粗放…...

别再被‘透传’忽悠了:用ESP8266和CC3200模块做IoT项目时,这些坑你得提前知道

别再被‘透传’忽悠了&#xff1a;用ESP8266和CC3200模块做IoT项目时&#xff0c;这些坑你得提前知道 在智能家居和小型传感器节点开发中&#xff0c;ESP8266和CC3200这类UART串口WiFi模块因其低成本、易用性备受青睐。许多开发者会被模块的"透传"模式吸引——只需简…...

终极智慧树刷课插件指南:3分钟安装,彻底告别手动刷课烦恼

终极智慧树刷课插件指南&#xff1a;3分钟安装&#xff0c;彻底告别手动刷课烦恼 【免费下载链接】zhihuishu 智慧树刷课插件&#xff0c;自动播放下一集、1.5倍速度、无声 项目地址: https://gitcode.com/gh_mirrors/zh/zhihuishu 还在为智慧树平台繁琐的刷课流程而苦恼…...

Phi-3.5-mini-instruct免配置优势:系统重启后自动恢复,无须人工干预

Phi-3.5-mini-instruct免配置优势&#xff1a;系统重启后自动恢复&#xff0c;无须人工干预 1. 开箱即用的轻量级文本助手 Phi-3.5-mini-instruct是一款专为中文场景优化的轻量级文本生成模型&#xff0c;它已经完成了网页封装&#xff0c;用户无需任何技术背景即可直接使用。…...

深入理解DSP28335的PWM模块:如何用EPWM实现三相电机控制(附代码分析)

DSP28335 EPWM模块实战&#xff1a;三相电机SPWM控制全解析 在工业驱动和电力电子领域&#xff0c;精确的PWM信号生成是电机控制的核心技术。TI的DSP28335凭借其增强型PWM&#xff08;EPWM&#xff09;模块&#xff0c;为三相逆变器控制提供了硬件级的解决方案。本文将带您深入…...

新书上架 | 一本写给普通人的 AI 安全入门书

当你向 AI 提问「哪款手环最好用」&#xff0c;得到的答案却是一款根本不存在的产品——这不是科幻&#xff0c;而是 2026 年 315 晚会曝光的真实事件。AI 正在被「投毒」&#xff0c;而你我都可能是受害者。你可能已经习惯了每天和 AI 打交道——用它搜索信息、写邮件、做翻译…...