在使用element中的抽屉<el-drawer>页签<el-tabs/>组合时,echarts图表宽度显示异常问题

类似这种情况,宽度异常

原因:在展示出抽屉时,图表的组件一件初始化了,导致他的宽度提前设定好了(我默认的style="width: 100%; height: 300px;"),我得解决方法有2个:

1、第一种,就是一开始就给它设置固定的宽高

        style="width: 500px; height: 300px;"

2、第二种,就是延迟图表组件的初始化,比如:

     a、如果默认的页签的activeName不是图表组件的那个名称,可以做一下判断,比如我圈红圈的

      b、监听activeName,在图表组件的<el-tab-pane>激活的状态再调用初始化图表

3、使用 echarts 自带的 resize 方法,在激活的时候调用一下

      this.chart.resize();

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/468959.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《大模型应用开发极简入门》笔记

推荐序 可略过不看。 初识GPT-4和ChatGPT LLM概述 NLP的目标是让计算机能够处理自然语言文本&#xff0c;涉及诸多任务&#xff1a; 文本分类&#xff1a;将输入文本归为预定义的类别。自动翻译&#xff1a;将文本从一种语言自动翻译成另一种语言&#xff0c;包括程序语言。…

Unicode字符集(万国码)

1.三种编码方式&#xff1a; UTF-16&#xff1a;16个bit位&#xff08;2个字节&#xff09;存储 UTF-32&#xff1a;32个bit位&#xff08;4个字节&#xff09;存储 UTF-8&#xff1a;可变长度字符编码。1-4个字节存储&#xff0c;只需记住&#xff1a;英文字母1个字节表示&…

支持 Win10 的网络环境模拟(丢包,延迟,带宽)

升级 Windows 10 以后&#xff0c;原来各种网络模拟软件都挂掉了&#xff0c;目前能用的就是只有 clumsy&#xff1a; 唯一问题是不支持模拟带宽&#xff0c;那么平时要模拟一些糟糕的网络情况的话&#xff0c;是不太方便的&#xff0c;而开虚拟机用 Linux tc 或者设置个远程 l…

【Homework】【5】Learning resources for DQ Robotics in MATLAB

Lesson 5 代码-TwoDofPlanarRobot.m 表示一个 2 自由度平面机器人。该类包含构造函数、计算正向运动学模型的函数、计算平移雅可比矩阵的函数&#xff0c;以及在二维空间中绘制机器人的函数。 classdef TwoDofPlanarRobot%TwoDofPlanarRobot - 表示一个 2 自由度平面机器人类…

在模方置平建筑失败的原因是什么?

在模方置平建筑失败的原因是什么&#xff1f; 可能是obj拓扑不连续&#xff0c;可以在网格大师使用osgb转obj功能&#xff0c;选择拓扑或者重建。 网格大师是一款能够解决实景三维模型空间参考、原点、瓦块大小不统一&#xff0c;重叠区域处理问题的工具“百宝箱”&#xff0c…

【大咖云集 | IEEE计算智能学会广州分会支持】第四届信息技术与当代体育国际学术会议(TCS 2024,12月13-15日)

第四届信息技术与当代体育国际学术会议&#xff08;TCS 2024&#xff09; 2024 4th International Conference on Information Technology and Contemporary Sports 重要信息 会议官网&#xff1a;www.icitcs.net&#xff08;会议关键词&#xff1a;TCS 2024&#xff09; 202…

常用机器人算法原理介绍

一、引言 随着科技的不断发展&#xff0c;机器人技术在各个领域得到了广泛应用。机器人算法是机器人实现各种功能的核心&#xff0c;它决定了机器人的行为和性能。本文将介绍几种常用的机器人算法原理&#xff0c;包括路径规划算法、定位算法和运动控制算法。 二、路径规划算法…

Cynet:全方位一体化安全防护工具

前言 1999年&#xff0c;布鲁斯施奈尔曾说过&#xff1a;“复杂性是安全最大的敌人。”彼时还是19年前&#xff0c;而现在&#xff0c;网络安全已然变得更加繁杂。 近日我在网上冲浪过程中发现了这么一个平台性质的软件&#xff0c;看似具有相当强的防护能力。 根据Cynet的描…

dolphin 配置data 从文件导入hive 实践(一)

datax 支持多种数据源的相互读写&#xff0c;作为开源软件&#xff0c;提供了离线采集功能&#xff0c;方便系统开发&#xff0c;过程中遇到诸多配置&#xff0c;需要开发者自己探索&#xff0c;免费同样有成本 配置模板 {"setting": {},"job": {"s…

Redis如何保证数据不丢失(可靠性)

本文主要以学习为主&#xff0c;详细参考&#xff1a;微信公众平台 Redis 保证数据不丢失的主要手段有两个&#xff1a; 持久化 多机部署 我们分别来看它们两的具体实现细节。 1.Redis 持久化 持久化是指将数据从内存中存储到持久化存储介质中&#xff08;如硬盘&#xf…

Linux数据管理初探

Linux数据管理初探 导语内存管理内存分配内存错用和处理 文件锁定锁文件/区域锁读写和竞争锁命令和死锁 dbm数据库例程dbm访问函数其他dbm函数 总结参考文献 导语 Linux为应用程序提供简洁的视图用来反映可直接寻址的内存空间&#xff08;但实际上可能是内存外存&#xff09;&…

Python中4个高效小技巧

分享 4 个省时的 Python 技巧&#xff0c;可以节省 10~20% 的 Python 执行时间。 包含编程资料、学习路线图、源代码、软件安装包等&#xff01;【[点击这里]】&#xff01; 反转列表 Python 中通常有两种反转列表的方法&#xff1a;切片或 reverse() 函数调用。这两种方法都…

【黑马Redis原理篇】Redis数据结构

视频来源&#xff1a;原理篇[2,15] 文章目录 1.动态字符串SDS1.1 内部结构&#xff1a; 2.IntSet3.Dict3.1 dict的内部结构3.2 dict的扩容 4.ziplist压缩列表5.QuickList6.SkipList跳表7.RedisObject对象8.Redis的五种数据结构8.1 String8.2 List8.3 Set8.4 Zset 有序集合8.5 …

WPF之iconfont(字体图标)使用

1&#xff0c;前文&#xff1a; WPF的Xaml是与前端的Html有着高度相似性的标记语言&#xff0c;所以Xaml也可同Html一般轻松使用阿里提供的海量字体图标&#xff0c;从而有效的减少开发工作度。 2&#xff0c;下载字体图标&#xff1a; 登录阿里图标库网iconfont-阿里巴巴矢量…

内网部署web项目,外网访问不了?只有局域网能访问!怎样解决?

相关技术 要实现“内网部署&#xff0c;外网访问”&#xff0c;可以使用内网穿透、VPN技术、DMZ主机、端口映射等方法。以下是对这些方法的详细解释&#xff1a; 一、内网穿透 内网穿透是一种技术&#xff0c;它通过将内网设备映射到公网上的方式&#xff0c;实现外网访问内…

Android MVVM demo(使用DataBinding,LiveData,Fresco,RecyclerView,Room,ViewModel 完成)

使用DataBinding&#xff0c;LiveData&#xff0c;Fresco&#xff0c;RecyclerView&#xff0c;Room&#xff0c;ViewModel 完成 玩Android 开放API-玩Android - wanandroid.com 接口使用的是下面的两个&#xff1a; https://www.wanandroid.com/banner/jsonhttps://www.wan…

c++11(一)

c11&#xff08;一&#xff09; 1. C11的发展历史2. 列表初始化2.1 C98传统的{}2.2 C11中的{}2.3 C11中的std::initializer_list 3. 右值引⽤和移动语义3.1 左值和右值3.2 左值引⽤和右值引⽤3.3 引⽤延⻓⽣命周期3.4 左值和右值的参数匹配3.5 右值引⽤和移动语义的使⽤场景3.5…

‍️代码的华尔兹:在 Makefile 的指尖上舞动自动化的诗篇

文章目录 &#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️背景——一个优秀工程师必备技能&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️&#x1f636;‍&#x1f32b;️一、&#x1f929;&#x1f929;快速了解…

SpringBoot中使用Thymeleaf模板引擎

和使用freemarker差不多的方式 1、导入thymeleaf的启动器 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> 2、编写Controller类 3、编写模板页面 注…

vue之子组件向父组件传值

参考博客先挂上 vue3中子传父&#xff08;emit&#xff09;、父传子&#xff08;props&#xff09;一篇文章拿下第一次写文章&#xff0c;告诉你vue3中如何实现父子相传&#xff0c;一篇文章帮 - 掘金 父组件通过 props 向子组件传值 1.子组件使用 $emit 触发事件 2.在父组件…