echarts初始化时只显示100px的问题

news/2024/7/27 7:55:44/文章来源:https://blog.csdn.net/weixin_45190306/article/details/137238919

初始化el-container时,需要选择项目才可进入el-main;但是就页面而已,相对应的路由已经进去了,el-main使用的是v-show进行的判断,后面改成v-if即可,下面补充一下二者的区别:

  • v-show: 根据条件显示DOM元素的指令,可以用来动态控制DOM元素的显示和隐藏。v-show后面跟的是判断条件,不管初始条件是什么,元素总是会被渲染;
  • v-if: 根据表达式值的真假来销毁或者重建一个绑定的DOM元素

以上就能明白为什么show为false,但是对应的路由还是执行了,导致echarts在element还未mounted时就加载,获取不到父级的width和height。
遇到问题呢,可以看下具体问题;就echarts只显示100px的问题,有以下方案:
1、直接设置echarts的宽高;
2、如果有el-tag, 设置v-if进行判断显示echarts模块的显隐;
3、设置一个定时器 settimeout去init chart;
等等。。。具体问题具体分析

window.addEventListener('resize', () => {chart.resize()
})

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

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

相关文章

基于微信小程序的民宿短租系统设计与实现(论文+源码)_kaic

摘 要 随着社会的发展,出差、旅游成为常态,也就造成民宿短租市场的兴起。人们新到陌生的环境里找民宿一般都是通过中介。中介虽然可以快速找到合适的民宿但会收取大量的中介费用,这对刚到新环境里的人们来说是一笔大的资金支出。也有一些人通…

如何编辑PDF文件?分享一个好用的PDF编辑器

如何编辑PDF文件呢?大家在日常中经常会使用PDF文件,难免在使用的过程中会发现文件出现的错误,更正错误地方最简单有效的方法就是直接在PDF文件上进行编辑,但大家都知道PDF文件不易改动,该如何编辑呢? 在这里推荐给大家一个好用的PDF编辑器 PDFPatcher是一款开源免费的多…

在Windows中使用NVM安装node.js

NVM介绍 Node.js版本管理器(Node Version Manager),简称NVM,是一款用于在单个系统上轻松安装和管理多个Node.js版本的命令行工具。它允许用户根据项目需求在不同版本之间自由切换,解决了因为不同项目依赖于不同Node.j…

iOS苹果签名共享签名是什么以及如何获取?

哈喽,大家好呀,咕噜淼淼又来和大家见面啦,最近有很多朋友都来向我咨询共享签名iOS苹果IPA共享签名是什么,针对这个问题,淼淼来解答一下大家的疑惑并告诉大家iOS苹果ipa共享签名需要如何获取。 现在苹果签名在市场上的…

非wpf应用程序项目【类库、用户控件库】中使用HandyControl

文章速览 前言参考文章实现方法1、添加HandyControl包;2、添加资源字典3、修改资源字典内容 坚持记录实属不易,希望友善多金的码友能够随手点一个赞。 共同创建氛围更加良好的开发者社区! 谢谢~ 前言 wpf应用程序中,在入口项目中…

OpenHarmony实战开发-如何实现一个社交分享类APP

介绍 本示例是一个社交分享类APP,搭建了不同的页面向用户提供获取社交信息等能力。为了减少频繁权限弹窗对用户的干扰,同时提供更小的授权范围,使用了安全控件做临时授权场景。当用户实际点击了某种类型的安全控件时,会由系统弹出…

LeetCode104:二叉树的最大深度

题目描述 给定一个二叉树 root &#xff0c;返回其最大深度。 二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 解题思想 可以使用层序遍历 class Solution { public:int maxDepth(TreeNode* root) {if (root nullptr) return 0;queue<TreeNode*>…

Python接口自动化测试-篇1(postman+requests+pytest+allure)

Python接口自动化测试是一种使用Python编程语言来编写脚本以自动执行针对应用程序接口&#xff08;APIs&#xff09;的测试过程。这种测试方法专注于检查系统的不同组件或服务之间的交互&#xff0c;确保它们按照预期规范进行通信&#xff0c;而不涉及用户界面&#xff08;UI&a…

Rust编程(五)终章:查漏补缺

闭包 & 迭代器 闭包&#xff08;Closure&#xff09;通常是指词法闭包&#xff0c;是一个持有外部环境变量的函数。外部环境是指闭包定义时所在的词法作用域。外部环境变量&#xff0c;在函数式编程范式中也被称为自由变量&#xff0c;是指并不是在闭包内定义的变量。将自…

干货|DataEase嵌入式分析落地指南

作为一款“人人可用的开源数据可视化分析工具”&#xff0c;DataEase提供了强大的嵌入式分析能力&#xff0c;支持将分析功能直接嵌入到其他应用程序或业务流程中&#xff0c;以便用户在其日常使用的业务系统中开展数据分析和数据洞察。这种BI分析能力可以无缝集成到现有的业务…

STM32G系 编程连接不上目标板,也有可能是软件不兼容。

由于一直用的老版本STM32 ST-LINK Utility 4.20 &#xff0c;找遍了所有问题&#xff0c;SWD就是连不上目标板。 电源脚 VDDA 地线&#xff0c;SWD的四条线&#xff0c;还是不行&#xff0c;浪费了一天&#xff0c;第二天才想起&#xff0c;是不是G系升级了 SWD协议。结果下载…

二. Git基础命令

二. Git基础命令 1. 获取 Git 仓库2. 记录每次更新到仓库2.1 检查当前文件状态2.2 跟踪新文件2.3 暂存已修改的文件2.4 忽略文件2.5 查看已暂存和未暂存的修改2.6 提交更新2.7 跳过使用暂存区域2.8 移除文件2.9 移动文件2.10 版本回退 4. 撤消操作4.1 取消暂存的文件4.2 撤消对…

供应链销售数据分析丨跟张良均老师学大数据人工智能(第二期)

师傅带练 项目背景 通过大数据分析怡亚通供应链商品的销售数据&#xff0c;分析不同店铺地址、不同销售季节和不同产品的销售数据&#xff0c;可以给于客户铺货支持以及经营策略建议&#xff0c;帮助怡亚通更好地优化库存管理、供货策略和市场营销活动&#xff0c;从而提升销…

常见微服务的组件?

注册中心&#xff1a;就是一个服务注册的地方&#xff0c;我们可以把拆分的服务注册到注册中心&#xff0c;这样注册中心就能管理这些服务&#xff0c;服务之间的调用就会很方便&#xff0c;通过服务名就能相互调用。 负载均衡&#xff1a;被调用放的负载均衡&#xff0c;比如…

【JAVA】postman import certificates in project 导入证书pfx

1. 打开这个按钮 2. File ->Settings 3. 打开“certificates”, Add certificates 添加证书 4. 输入证书地址&#xff0c;然后选择证书文件pfx , 输入证书密码。点击添加就可以了。 特别提醒&#xff1a; 推荐本地自己证书验证软件&#xff0c;“KeyStore” 这个软件可以…

商标名称的词性:因形近不良而驳回!

近期看到业内有许多因不良驳回的案例&#xff0c;有些是直接因为不良而驳回&#xff0c;普推知产老杨发现一个因形近而驳回的案例&#xff0c;2022年5月申请的“乡巴佬”通过初审下证了&#xff0c;2022年10月申请“乡巴饶”因形近“乡巴佬”不良而驳回&#xff0c;而且还做过驳…

在Python中使用PyPDF2库在PDF文件中插入内容

目录 一、引言 二、PyPDF2库的安装 三、PyPDF2库的基本使用 四、在PDF文件中插入内容 五、注意事项和扩展 六、总结 一、引言 PDF&#xff08;Portable Document Format&#xff09;文件因其跨平台、不易被篡改的特性&#xff0c;广泛应用于日常办公和文档交流中。在实际…

excel进行打印区域设置

选中想要打印的区域&#xff0c;点击页面布局-打印区域-设置打印区域。 点击视图-分页预览&#xff0c;可以看到横向和纵向的蓝色分割线&#xff0c;就是分页符&#xff0c;根据分割线可以调整我们的打印内容。通过鼠标拖动蓝色的分页符&#xff0c;可以自由地设置分页的位置…

Django之REST framework环境搭建

一、环境搭建 Django REST framework是基于Django实现的一个RESTful风格API框架,能够帮助我们快速开发RESTful风格的API 官网:Home - Django REST framework 中文文档:主页 - Django REST framework中文站点 1.1、安装 Python3.8+ pip install django==4.1.1 pip inst…

计算机视觉新巅峰,微软牛津联合提出MVSplat登顶3D重建

开篇&#xff1a;探索稀疏多视图图像的3D场景重建与新视角合成的挑战 3D场景重建和新视角合成是计算机视觉领域的一项基础挑战&#xff0c;尤其是当输入图像非常稀疏&#xff08;例如&#xff0c;只有两张&#xff09;时。尽管利用神经场景表示&#xff0c;例如场景表示网络&a…