关于uni-app在TAB切换中图表使用resize重置的问题

2024-03-17 22:10

本文主要是介绍关于uni-app在TAB切换中图表使用resize重置的问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

如图所示,当前有两个tab分别有两个图表,当前还是处于切换缓存的,未更新数据,DOM存在

如不知道怎么在uni-app中使用Echarts 请参考:uni-app中使用Echarts 

之前在组件当中发现  v-if  会导致当前数据重刷,导致体验感不强,所以使用了 v-show,由于需要适配,所以宽高比皆为  100% (有min-height ,min-width ) ,这就导致当渲染折线图时饼图也一起被渲染了,由于display :none 这就导致饼图初期取不到宽高,只能默认展示100* 100。

  由于我想使用echarts的resize方法,上网找了一大圈,没找到。最后,参考了updateEcharts的使用方法,成功解决tab切换并调用resize方法。话不多说,直接上代码

<!--parent  当前为饼图自定义组件  currTab为切换tab事件函数里定义 -->
<PieChart :currTab="currTab" :pieChartsData="pieChartsData"></PieChart>// js  
// 切换tab 触发事件函数
changeTab(it) {this.currTab = it.value;
},// piechart  组件
//  currTab 接收传参,并绑定到:change方法中  必须先属性绑定 :currTab,才能绑定:change
<view @click="echarts.onClick" :prop="option" :currTab="currTab" :change:currTab="echarts.resize":change:prop="echarts.updateEcharts" id="pieEcharts"class="pie-echarts"></view>// js 接收传参
props: { currTab:{type:String,default:""}
}<script module="echarts" lang="renderjs">methods: {// resize 同上面  :change:currTab="echarts.resize" 绑定方法resize(){if(myChart){myChart.resize();}},}
</script>

代码比较简洁,不过都是精简代码,使用起来即可。即时不适用resize方法,也可在当前方法内部调用eharts 实例。

这篇关于关于uni-app在TAB切换中图表使用resize重置的问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/820325

相关文章

使用Spring Cache本地缓存示例代码

《使用SpringCache本地缓存示例代码》缓存是提高应用程序性能的重要手段,通过将频繁访问的数据存储在内存中,可以减少数据库访问次数,从而加速数据读取,:本文主要介绍使用SpringCac... 目录一、Spring Cache简介核心特点:二、基础配置1. 添加依赖2. 启用缓存3. 缓存配置方案方案

使用Python的requests库来发送HTTP请求的操作指南

《使用Python的requests库来发送HTTP请求的操作指南》使用Python的requests库发送HTTP请求是非常简单和直观的,requests库提供了丰富的API,可以发送各种类型的HT... 目录前言1. 安装 requests 库2. 发送 GET 请求3. 发送 POST 请求4. 发送

MySQL 表空却 ibd 文件过大的问题及解决方法

《MySQL表空却ibd文件过大的问题及解决方法》本文给大家介绍MySQL表空却ibd文件过大的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考... 目录一、问题背景:表空却 “吃满” 磁盘的怪事二、问题复现:一步步编程还原异常场景1. 准备测试源表与数据

Nginx中配置使用非默认80端口进行服务的完整指南

《Nginx中配置使用非默认80端口进行服务的完整指南》在实际生产环境中,我们经常需要将Nginx配置在其他端口上运行,本文将详细介绍如何在Nginx中配置使用非默认端口进行服务,希望对大家有所帮助... 目录一、为什么需要使用非默认端口二、配置Nginx使用非默认端口的基本方法2.1 修改listen指令

Python WebSockets 库从基础到实战使用举例

《PythonWebSockets库从基础到实战使用举例》WebSocket是一种全双工、持久化的网络通信协议,适用于需要低延迟的应用,如实时聊天、股票行情推送、在线协作、多人游戏等,本文给大家介... 目录1. 引言2. 为什么使用 WebSocket?3. 安装 WebSockets 库4. 使用 We

解决Nginx启动报错Job for nginx.service failed because the control process exited with error code问题

《解决Nginx启动报错Jobfornginx.servicefailedbecausethecontrolprocessexitedwitherrorcode问题》Nginx启... 目录一、报错如下二、解决原因三、解决方式总结一、报错如下Job for nginx.service failed bec

python中的显式声明类型参数使用方式

《python中的显式声明类型参数使用方式》文章探讨了Python3.10+版本中类型注解的使用,指出FastAPI官方示例强调显式声明参数类型,通过|操作符替代Union/Optional,可提升代... 目录背景python函数显式声明的类型汇总基本类型集合类型Optional and Union(py

SysMain服务可以关吗? 解决SysMain服务导致的高CPU使用率问题

《SysMain服务可以关吗?解决SysMain服务导致的高CPU使用率问题》SysMain服务是超级预读取,该服务会记录您打开应用程序的模式,并预先将它们加载到内存中以节省时间,但它可能占用大量... 在使用电脑的过程中,CPU使用率居高不下是许多用户都遇到过的问题,其中名为SysMain的服务往往是罪魁

Java使用正则提取字符串中的内容的详细步骤

《Java使用正则提取字符串中的内容的详细步骤》:本文主要介绍Java中使用正则表达式提取字符串内容的方法,通过Pattern和Matcher类实现,涵盖编译正则、查找匹配、分组捕获、数字与邮箱提... 目录1. 基础流程2. 关键方法说明3. 常见场景示例场景1:提取所有数字场景2:提取邮箱地址4. 高级

使用SpringBoot+InfluxDB实现高效数据存储与查询

《使用SpringBoot+InfluxDB实现高效数据存储与查询》InfluxDB是一个开源的时间序列数据库,特别适合处理带有时间戳的监控数据、指标数据等,下面详细介绍如何在SpringBoot项目... 目录1、项目介绍2、 InfluxDB 介绍3、Spring Boot 配置 InfluxDB4、I