当前位置: 首页 > 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.原…...

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具

文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...

04-初识css

一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释

以Module Federation 插件详为例&#xff0c;Webpack.config.js它可能的配置和含义如下&#xff1a; 前言 Module Federation 的Webpack.config.js核心配置包括&#xff1a; name filename&#xff08;定义应用标识&#xff09; remotes&#xff08;引用远程模块&#xff0…...

客户案例 | 短视频点播企业海外视频加速与成本优化:MediaPackage+Cloudfront 技术重构实践

01技术背景与业务挑战 某短视频点播企业深耕国内用户市场&#xff0c;但其后台应用系统部署于东南亚印尼 IDC 机房。 随着业务规模扩大&#xff0c;传统架构已较难满足当前企业发展的需求&#xff0c;企业面临着三重挑战&#xff1a; ① 业务&#xff1a;国内用户访问海外服…...

python可视化:俄乌战争时间线关键节点与深层原因

俄乌战争时间线可视化分析&#xff1a;关键节点与深层原因 俄乌战争是21世纪欧洲最具影响力的地缘政治冲突之一&#xff0c;自2022年2月爆发以来已持续超过3年。 本文将通过Python可视化工具&#xff0c;系统分析这场战争的时间线、关键节点及其背后的深层原因&#xff0c;全面…...

02-性能方案设计

需求分析与测试设计 根据具体的性能测试需求&#xff0c;确定测试类型&#xff0c;以及压测的模块(web/mysql/redis/系统整体)前期要与相关人员充分沟通&#xff0c;初步确定压测方案及具体的性能指标QA完成性能测试设计后&#xff0c;需产出测试方案文档发送邮件到项目组&…...