vue-echarts高度缩小时autoresize失效
背景
项目中采用动态给x-vue-echarts style赋值width,height的方式实现echarts图表尺寸的改变

<v-chart...autoresize></v-chart>
给v-chart添加autoresize后,在图表宽度变化,高度增加时无异常,高度减小时图表并未缩小,反而被截断了
先说结论
添加全局样式进行覆盖
div.vue-echarts-inner {height: 100% !important;
}
原理
查看vue-echarts源码


这里的inner以及useAutoresize中的root值为该dom节点

所以实际上是在监听div.vue-echarts-inner这个dom节点的尺寸变化,从而去给inner的子盒子设置width和height

下面是父盒子的css属性

下面是inner的css属性

问题就在于flex和height auto
- 父盒子为flex盒且flex-direction为column,子盒子设置flex-grow:1,那么子盒子会填满父盒子的高度
- 父盒子设置高度为height:auto,那么高度会以其子盒子内容高度为准,也就是子盒子是300px,就会把该盒子高度撑到300px
但两者在一块就有冲突
这里分为父,子,孙三个盒子
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.father {display: flex;flex-direction: column;background-color: red;width: 500px;height: 500px;}.me {flex: 1;width: 300px;background-color: green;height: auto;}.son {width: 100px;background-color: blue;height: 500px;}</style>
</head><body><div class="father"><div class="me"><div class="son"></div></div></div>
</body></html>
结论:
-
父盒子高度大于孙盒子时,子盒子高度跟随父盒子

-
父盒子高度小于孙盒子时,子盒子高度跟随孙盒子

回到vue-echarts场景,所以在高度减少时,inner的父盒子高度减少,但inner子盒子高度不变,所以inner盒子高度不会变,不会触发resize
解决办法:inner设置height: 100%,这样inner的高度会跟随其父盒子高度而变化,而不会受其子盒子影响
相关文章:
vue-echarts高度缩小时autoresize失效
背景 项目中采用动态给x-vue-echarts style赋值width,height的方式实现echarts图表尺寸的改变 <v-chart...autoresize></v-chart>给v-chart添加autoresize后,在图表宽度变化,高度增加时无异常,高度减小时图表并未缩…...
rabbitMq的rabbitmqctl status报错
Error: unable to perform an operation on node rabbitASUS-PC. Please see diagnostics information and suggestions below. 遇到上图这个错大部分问题可能是由于 RabbitMQ CLI 工具的 Erlang Cookie 与服务器上的不匹配而导致连接问题。Erlang Cookie 在 RabbitMQ 节点之间…...
linux c++ uuid编译时的问题
linux c uuid编译时的问题 写在前面可能编译过和不能编译过的可以编译和link过的不能编译过的 写在前面 几次翻车与uuid相关,超出我认知。 所以,把一些遇到的相关问题写在这里。 可能编译过和不能编译过的 可以编译和link过的 cmake_minimum_require…...
【STM32】RTT-Studio中HAL库开发教程九:FLASH中的OPT
文章目录 一、概要二、内部FLASH排布三、内部FLASH主要特色四、OTP函数介绍五、测试验证 一、概要 STM32系列是一款强大而灵活的微控制器,它的片内Flash存储器可以用来存储有关代码和数据,在实际应用中,我们也需要对这个存储器进行读写操作。…...
[SWPUCTF 2021 新生赛]crypto9
[MoeCTF 2021]Web安全入门指北—GET 意思是GET传参,moeflag 就可以得到falg 输入?moeflag flag为: NSSCTF{ff26110b-8793-403c-990e-15c7f1820596} [SWPUCTF 2021 新生赛]crypto9 #gpt写的代码 from itertools import product letter_list ABCDEFG…...
vue中常用的指令
v - if 指令 功能详细解释 它是一种真正的条件渲染指令。在 Vue 实例初始化以及数据更新过程中,Vue.js 会对v - if指令中的表达式进行求值。这个表达式可以是简单的布尔变量,也可以是一个复杂的计算表达式,只要最终结果是布尔值就行。当表达式…...
Docker Compose实战三:轻松部署PHP
通过前面的文章(Docker Compose基础语法与MySQL部署),你已经掌握了Docker Compose的基本语法和常用指令,并成功部署了一个MySQL数据库服务器。今天,我们将继续深入探索Docker Compose的强大功能,介绍如何使…...
数据分析实战—房价特征关系
1.实战内容 (1) 读取房价特征关系表(house_price.npz)绘制离地铁站的距离与单位面积的房价的散点图,并对其进行分析; import pandas as pd import numpy as np import warnings warnings.filterwarnings(&…...
云和恩墨 zCloud 与华为云 GaussDB 完成兼容性互认证
近日,云和恩墨(北京)信息技术有限公司(以下简称:云和恩墨)的多元数据库智能管理平台 zCloud 与华为云计算技术有限公司(以下简称:华为云)的 GaussDB 数据库完成了兼容性互…...
【大语言模型LangChain】 ModelsIO OutputParsers详解
【大语言模型LangChain】 ModelsIO OutputParsers详解 一、简介二、OutputParsers 的优势三、解析器类型四、实战示例1、String 解析器2、Json 解析器3、Pydantic 解析器4、结构化输出解析器5、OpenAI 函数输出解析器5.1、JsonOutputFunctionsParser5.2、JsonKeyOutputFunction…...
PaddleSpeech本地部署文档
windows安装paddlespeech步骤: 1. 安装vs c编译环境 对于 Windows 系统,需要安装 Visual Studio 来完成 C 编译环境的安装。 Microsoft C Build Tools - Visual Studio 2. 安装conda conda create -y -p paddlespeech python3.8 conda activate pad…...
Android 第三方框架:RxJava:源码分析:责任链模式
文章目录 责任链模式RxJava中的责任链总结 责任链模式 RxJava中的责任链 链式调用的使用过程中形成了两个单向链表 第一个单向链表是Observable链表 它的形成过程: 1.首先调用Observable的静态方法创建第一个Observable对象,作为Observable链表的表…...
网络安全 与 加密算法
计算机中的网络安全 在本篇中介绍了以下几个方面: 机密性 密码学 对称加密算法(DES, 3DES, AES) 公开秘钥算法 RSA大素数的获取 完整性 散列函数(MD5, SHA-1, 并没有提及算法实现) 报文鉴别(MAC) 数字签名 端点鉴别 应用 SSL(TCP网络安全) 运行时安全 防火墙的基本知识 …...
UE4_贴花_贴花基础知识二
五、多表面投射 在本示例中,你将了解贴花如何在多个表面上进行投射。请注意,如果表面朝向与投射方向较为平行,贴花投射时必然会产生一些拉伸。另外,请记住,贴花可以在包括骨骼网格体在内的静态和动态网格体上进行投射。…...
ElasticSearch 搜索、排序、分页功能
一、DSL 查询文档 ElasticSearch 的查询依然是基于 json 风格的 DSL 来实现的。 官方文档:https://www.elastic.co/guide/en/elasticsearch/reference/8.15/query-dsl.html 1.1 DSL 查询分类 常见的查询类型包括: 查询所有:查询出所有数…...
MySQL-9.1.0 实现最基础的主从复制
目录 1 实验介绍 2 实验准备 2.1 创建目录为MySQL挂载使用 2.2 编写 docker-compose.yml 文件 2.3 启动容器 3 主从复制操作 3.1 MASTER 操作指令 3.2 SLAVE1 操作指令 3.3 SLAVE2 操作指令 4 验证是否实现主从 4.1 导入sql脚本查看是否正常主从复制 4.2 检验从库是否看见复制…...
Java中的“泛型“
泛型(Generics)是Java中的一种重要特性,它允许在定义类、接口和方法时使用类型参数(type parameters)。泛型的主要目的是提高代码的类型安全性和重用性。下面我将详细讲解Java中的泛型。 1. 泛型的基本概念 泛型允许我…...
前端(五)css属性
css属性 文章目录 css属性一、字体属性二、文本属性三、背景属性四、盒子模型 一、字体属性 font-weight:文字粗细,在100到900之间,normal(400),bord(700),inherit(继承父类) font-style:文字风格,normal表示正常(默认…...
总结拓展十七:SAP 采购订单行项目“交货“页签解析
《 SAP采购订单行项目“交货”页签字段解析》 在 SAP 系统的采购流程中,采购订单行项目的“交货”页签承载着关键的信息,其中的字段更是对整个交货环节的精准描述和把控的重要元素。理解和正确解析这些字段,对于确保采购流程的顺利进行、优化…...
分布式日志系统设计
一、分布式日志系统定义 分布式日志系统是一种用于收集、存储和分析大规模分布式系统日志的系统。它可以帮助开发人员和系统管理员实时监控和调试系统,提高系统可靠性和可用性,同时也可以用于日志分析和故障排查。 二、简单设计思路 日志收集ÿ…...
2021-03-15 iview一些问题
1.iview 在使用tree组件时,发现没有set类的方法,只有get,那么要改变tree值,只能遍历treeData,递归修改treeData的checked,发现无法更改,原因在于check模式下,子元素的勾选状态跟父节…...
现代密码学 | 椭圆曲线密码学—附py代码
Elliptic Curve Cryptography 椭圆曲线密码学(ECC)是一种基于有限域上椭圆曲线数学特性的公钥加密技术。其核心原理涉及椭圆曲线的代数性质、离散对数问题以及有限域上的运算。 椭圆曲线密码学是多种数字签名算法的基础,例如椭圆曲线数字签…...
c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署,直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型,但是目前国内可能使用不多,至少实践例子很少看见。开发训练模型就不介绍了&am…...
用docker来安装部署freeswitch记录
今天刚才测试一个callcenter的项目,所以尝试安装freeswitch 1、使用轩辕镜像 - 中国开发者首选的专业 Docker 镜像加速服务平台 编辑下面/etc/docker/daemon.json文件为 {"registry-mirrors": ["https://docker.xuanyuan.me"] }同时可以进入轩…...
算法岗面试经验分享-大模型篇
文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer (1)资源 论文&a…...
NPOI操作EXCEL文件 ——CAD C# 二次开发
缺点:dll.版本容易加载错误。CAD加载插件时,没有加载所有类库。插件运行过程中用到某个类库,会从CAD的安装目录找,找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库,就用插件程序加载进…...
解析奥地利 XARION激光超声检测系统:无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用
在工业制造领域,无损检测(NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统,以非接触式光学麦克风技术为核心,打破传统检测瓶颈,为半导体、航空航天、汽车制造等行业提供了高灵敏…...
什么是VR全景技术
VR全景技术,全称为虚拟现实全景技术,是通过计算机图像模拟生成三维空间中的虚拟世界,使用户能够在该虚拟世界中进行全方位、无死角的观察和交互的技术。VR全景技术模拟人在真实空间中的视觉体验,结合图文、3D、音视频等多媒体元素…...
02.运算符
目录 什么是运算符 算术运算符 1.基本四则运算符 2.增量运算符 3.自增/自减运算符 关系运算符 逻辑运算符 &&:逻辑与 ||:逻辑或 !:逻辑非 短路求值 位运算符 按位与&: 按位或 | 按位取反~ …...
算法—栈系列
一:删除字符串中的所有相邻重复项 class Solution { public:string removeDuplicates(string s) {stack<char> st;for(int i 0; i < s.size(); i){char target s[i];if(!st.empty() && target st.top())st.pop();elsest.push(s[i]);}string ret…...
