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

vue-echarts高度缩小时autoresize失效

news 文章来源：https://blog.csdn.net/m0_63986895/article/details/144437616 2025/1/12 13:11:36

背景

项目中采用动态给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&#xff0c;height的方式实现echarts图表尺寸的改变 <v-chart...autoresize></v-chart>给v-chart添加autoresize后&#xff0c;在图表宽度变化&#xff0c;高度增加时无异常&#xff0c;高度减小时图表并未缩…...

编程日记 2024/12/13 6:03:40

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 节点之间…...

编程日记 2024/12/13 6:00:36

linux c++ uuid编译时的问题

linux c uuid编译时的问题 写在前面可能编译过和不能编译过的可以编译和link过的不能编译过的 写在前面 几次翻车与uuid相关&#xff0c;超出我认知。 所以&#xff0c;把一些遇到的相关问题写在这里。 可能编译过和不能编译过的 可以编译和link过的 cmake_minimum_require…...

编程日记 2024/12/13 5:59:35

【STM32】RTT-Studio中HAL库开发教程九：FLASH中的OPT

文章目录 一、概要二、内部FLASH排布三、内部FLASH主要特色四、OTP函数介绍五、测试验证 一、概要 STM32系列是一款强大而灵活的微控制器&#xff0c;它的片内Flash存储器可以用来存储有关代码和数据&#xff0c;在实际应用中&#xff0c;我们也需要对这个存储器进行读写操作。…...

编程日记 2024/12/13 5:58:31

[SWPUCTF 2021 新生赛]crypto9

[MoeCTF 2021]Web安全入门指北—GET 意思是GET传参&#xff0c;moeflag 就可以得到falg 输入?moeflag flag为&#xff1a; NSSCTF{ff26110b-8793-403c-990e-15c7f1820596} [SWPUCTF 2021 新生赛]crypto9 #gpt写的代码 from itertools import product letter_list ABCDEFG…...

编程日记 2024/12/13 5:57:28

vue中常用的指令

v - if 指令 功能详细解释 它是一种真正的条件渲染指令。在 Vue 实例初始化以及数据更新过程中&#xff0c;Vue.js 会对v - if指令中的表达式进行求值。这个表达式可以是简单的布尔变量&#xff0c;也可以是一个复杂的计算表达式&#xff0c;只要最终结果是布尔值就行。当表达式…...

编程日记 2024/12/13 5:55:26

Docker Compose实战三：轻松部署PHP

通过前面的文章&#xff08;Docker Compose基础语法与MySQL部署&#xff09;&#xff0c;你已经掌握了Docker Compose的基本语法和常用指令&#xff0c;并成功部署了一个MySQL数据库服务器。今天&#xff0c;我们将继续深入探索Docker Compose的强大功能&#xff0c;介绍如何使…...

编程日记 2024/12/13 5:54:23

数据分析实战—房价特征关系

1.实战内容 &#xff08;1&#xff09; 读取房价特征关系表&#xff08;house_price.npz&#xff09;绘制离地铁站的距离与单位面积的房价的散点图&#xff0c;并对其进行分析&#xff1b; import pandas as pd import numpy as np import warnings warnings.filterwarnings(&…...

编程日记 2024/12/13 5:52:17

云和恩墨 zCloud 与华为云 GaussDB 完成兼容性互认证

近日&#xff0c;云和恩墨&#xff08;北京&#xff09;信息技术有限公司&#xff08;以下简称&#xff1a;云和恩墨&#xff09;的多元数据库智能管理平台 zCloud 与华为云计算技术有限公司&#xff08;以下简称&#xff1a;华为云&#xff09;的 GaussDB 数据库完成了兼容性互…...

编程日记 2024/12/13 5:51:14

【大语言模型LangChain】 ModelsIO OutputParsers详解

【大语言模型LangChain】 ModelsIO OutputParsers详解 一、简介二、OutputParsers 的优势三、解析器类型四、实战示例1、String 解析器2、Json 解析器3、Pydantic 解析器4、结构化输出解析器5、OpenAI 函数输出解析器5.1、JsonOutputFunctionsParser5.2、JsonKeyOutputFunction…...

编程日记 2024/12/13 5:50:13

PaddleSpeech本地部署文档

windows安装paddlespeech步骤&#xff1a; 1. 安装vs c编译环境 对于 Windows 系统&#xff0c;需要安装 Visual Studio 来完成 C 编译环境的安装。 Microsoft C Build Tools - Visual Studio 2. 安装conda conda create -y -p paddlespeech python3.8 conda activate pad…...

编程日记 2024/12/13 5:44:06

Android 第三方框架：RxJava：源码分析：责任链模式

文章目录 责任链模式RxJava中的责任链总结 责任链模式 RxJava中的责任链 链式调用的使用过程中形成了两个单向链表 第一个单向链表是Observable链表 它的形成过程&#xff1a; 1.首先调用Observable的静态方法创建第一个Observable对象&#xff0c;作为Observable链表的表…...

编程日记 2024/12/13 5:41:02

网络安全 与 加密算法

计算机中的网络安全 在本篇中介绍了以下几个方面: 机密性 密码学 对称加密算法(DES, 3DES, AES) 公开秘钥算法 RSA大素数的获取 完整性 散列函数(MD5, SHA-1, 并没有提及算法实现) 报文鉴别(MAC) 数字签名 端点鉴别 应用 SSL(TCP网络安全) 运行时安全 防火墙的基本知识 …...

编程日记 2024/12/13 5:40:01

UE4_贴花_贴花基础知识二

五、多表面投射 在本示例中&#xff0c;你将了解贴花如何在多个表面上进行投射。请注意&#xff0c;如果表面朝向与投射方向较为平行&#xff0c;贴花投射时必然会产生一些拉伸。另外&#xff0c;请记住&#xff0c;贴花可以在包括骨骼网格体在内的静态和动态网格体上进行投射。…...

编程日记 2024/12/13 5:39:00

ElasticSearch 搜索、排序、分页功能

一、DSL 查询文档 ElasticSearch 的查询依然是基于 json 风格的 DSL 来实现的。 官方文档&#xff1a;https://www.elastic.co/guide/en/elasticsearch/reference/8.15/query-dsl.html 1.1 DSL 查询分类 常见的查询类型包括&#xff1a; 查询所有&#xff1a;查询出所有数…...

编程日记 2024/12/13 5:37:59

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 检验从库是否看见复制…...

编程日记 2024/12/13 5:33:55

Java中的“泛型“

泛型&#xff08;Generics&#xff09;是Java中的一种重要特性&#xff0c;它允许在定义类、接口和方法时使用类型参数&#xff08;type parameters&#xff09;。泛型的主要目的是提高代码的类型安全性和重用性。下面我将详细讲解Java中的泛型。 1. 泛型的基本概念 泛型允许我…...

编程日记 2024/12/13 5:32:54

前端（五）css属性

css属性 文章目录 css属性一、字体属性二、文本属性三、背景属性四、盒子模型 一、字体属性 font-weight&#xff1a;文字粗细&#xff0c;在100到900之间&#xff0c;normal(400),bord(700),inherit(继承父类) font-style&#xff1a;文字风格&#xff0c;normal表示正常(默认…...

编程日记 2024/12/13 5:30:52

总结拓展十七：SAP 采购订单行项目“交货“页签解析

《 SAP采购订单行项目“交货”页签字段解析》 在 SAP 系统的采购流程中&#xff0c;采购订单行项目的“交货”页签承载着关键的信息&#xff0c;其中的字段更是对整个交货环节的精准描述和把控的重要元素。理解和正确解析这些字段&#xff0c;对于确保采购流程的顺利进行、优化…...

编程日记 2024/12/13 5:25:41

分布式日志系统设计

一、分布式日志系统定义 分布式日志系统是一种用于收集、存储和分析大规模分布式系统日志的系统。它可以帮助开发人员和系统管理员实时监控和调试系统&#xff0c;提高系统可靠性和可用性&#xff0c;同时也可以用于日志分析和故障排查。 二、简单设计思路 日志收集&#xff…...

编程日记 2024/12/13 5:24:38

DApp开发如何平衡性能与去中心化？

DApp的核心价值在于信任、透明和去中心化&#xff0c;但这些特点往往伴随着性能的瓶颈和高成本。在DApp开发中&#xff0c;如何在保证去中心化的前提下提升性能&#xff0c;成为开发者面临的重要挑战。如何实现性能与去中心化的平衡是一个重要课题。 一、为什么去中心化影响性…...

编程日记 2024/12/13 5:20:34

RK3588开发笔记-Buildroot编译Qt5WebEngine-5.15.10

目录 前言 一、Qt5WebEngine简介 二、Qt5WebEngine编译 总结 前言 Rockchip RK3588是一款强大的多核处理器，广泛应用于边缘计算、人工智能、嵌入式系统等领域。为了在RK3588上运行自定义的Linux系统，并使用Qt5WebEngine进行Web内容渲染，Buildroot是一个非常合适的工具。本…...

编程日记 2024/12/13 5:19:32

2024年12月GESPC++三级真题解析

一、单选题&#xff08;每题2分&#xff0c;共30分&#xff09; 题目123456789101112131415答案 B D A A D B C A A D D C D C A 1.下列二进制表示的十进制数值分别是&#xff08; &#xff09;[10000011]原&#xff08; &#xff09; [10000011]补&#xff…...

编程日记 2024/12/13 5:18:31

vue-router路由传参的两种方式（params 和 query ）

一、vue-router路由传参问题 1、概念&#xff1a; A、vue 路由传参的使用场景一般应用在父路由跳转到子路由时&#xff0c;携带参数跳转。 B、传参方式可划分为 params 传参和 query 传参&#xff1b; C、而 params 传参又可分为在 url 中显示参数和不显示参数两种方式&#x…...

编程日记 2024/12/13 5:17:30

Asp.net 做登录验证码（MVC）

public class ValidateCode{/// <summary>/// 创建随机数/// </summary>/// <param name"num"></param>/// <returns></returns>public string CreateRandom(int num){string str "ABCDEFGHJKMNPQRSTUVWXYZabcdefghjkmnpq…...

编程日记 2024/12/13 5:15:27

在 Chrome中直接调用大型语言模型的API

AI 时代的高速发展&#xff0c;我们都习惯了使用 ChatGPT、Claude、Gemini 和其他 AI 工具来询问各种问题&#xff0c;目前大部分的 AI 应用都是通过服务端 API 来实现的。 如果想要在 Web 上使用 AI 功能往往需要靠服务器来处理一些非常大的模型。这在制作一些生成内容的 AI …...

编程日记 2024/12/13 5:14:25

微信小程序调用腾讯地图-并解读API文档 JavaScript SDK和 WebService API

搜索&#xff1a;腾讯位置服务 找到API文档&#xff1a; 入门中第一步&#xff1a;申请开发者密钥key 前往控制台&#xff1a; 创建应用并获取key: 设置key的时候&#xff0c;还需要小程序的APPID。所以要前往微信公众平台中获取小程序的APPID&#xff1a; 限制要求&#xff1a…...

编程日记 2024/12/13 5:13:23

WPF 控件

<div id"content_views" class"htmledit_views"><p id"main-toc"><strong>目录</strong></p> WPF基础控件 按钮控件&#xff1a; Button:按钮 RepeatButton:长按按钮 RadioButton:单选按钮 数据显示控件 Te…...

编程日记 2024/12/13 5:11:17

VScode执行任务

背景 在vscode 中 如果执行命令需要传递进来参数&#xff0c;那么直接通过命令行终端的方式不太方便。通过task 任务的方式来进行启动执行&#xff0c;降低反复输入参数等繁琐工作。 首先可以查看vscode 官方文档 task 启动 crtl shift p .vscode/task.json 示例 执行cp…...

编程日记 2024/12/13 5:10:14

MySQL(数据类型)

目录 1. 数值类型 2. bit类型 3.小数类型 3. 字符串类型 4 日期和时间类型 5. enum和set 1. 数值类型 对标C语言&#xff1a; tinyint->char(1字节)&#xff1a; 有符号&#xff1a;127 ~ 255 无符号&#xff1a;0 ~ -128。 smalli…...

编程日记 2024/12/13 5:06:09

做管理培训的网站有什么/免费外网加速器

Android的ImageView无法直接加载Gif图片&#xff0c;如果需要在自己的代码中加载一个gif图片(这很常见&#xff0c;比如下载过程中的loading以示正在下载的转动的圆球)&#xff0c;则无法直接用ImageView。鉴于此&#xff0c;Android社区开发者为解决此问题贡献了很多解决方案&…...

编程日记 2025/1/12 9:29:06

网站八个/软文广告是什么

在国家“3060”碳达峰碳中和的政策背景下&#xff0c;如何寻求经济-能源-环境的平衡有效发展是国家、省份、城市及园区等不同级别经济体的重要课题。根据国家政策、当地能源结构、能源技术发展水平以及相关碳排放指标制定合理有效的低碳能源发展规划需要以科学准确的能源环境发…...

编程日记 2025/1/12 5:51:26

网站图标按钮用什么做/八百客crm系统登录入口

1. 题目 原题链接 实现 pow(x, n) &#xff0c;即计算 x 的 n 次幂函数&#xff08;即&#xff0c;xn&#xff09;。 示例 1&#xff1a; 输入&#xff1a;x 2.00000, n 10 输出&#xff1a;1024.00000 示例 2&#xff1a; 输入&#xff1a;x 2.10000, n 3 输出&…...

编程日记 2025/1/11 22:18:05

wordpress本地上传视频资料/产品代理推广方案

为什么项目过程中折腾我们的往往是一些微不足道的小事?新功能添加"顺手就改,转眼就忘,一旦出错,一问就蒙"的情况如何避免? 答案:流程 一年前我还对流程表示反感和排斥,因为我将"流程"简单地等同于堆积如山的文档和照本宣科的会议,牺牲了弥足珍贵的设计和…...

编程日记 2025/1/11 20:27:27

怎么制作网站维护公告效果/新一轮疫情最新消息

微信开始严打第三方网页强制跳转行为&#xff0c;禁止使用提供诱导或强制点击跳转阅读全文功能&#xff0c;违规导流网站一律封杀!微信方面表示&#xff0c;近期大量用户投诉&#xff0c;在微信中打开第三方网站链接内容总是出现诱导或强制点击才能阅读链接全文行为&#xff0c…...

编程日记 2025/1/11 19:31:23

网站如何做企业电子宣传册/产品营销网站建设

1、 数据库建表如何加密&#xff1a;采用哈希函数散列的方式将密码进行加密&#xff0c;此过程不可逆. 插入数据&#xff1a; --创建表&#xff1b; ----用户表&#xff1b; CREATE TABLE tb_User (No CHAR(10) NOT NULL PRIMARY KEY ,Password VARBINARY(128) NOT …...

编程日记 2025/1/11 16:58:43