关于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

相关文章

使用animation.css库快速实现CSS3旋转动画效果

《使用animation.css库快速实现CSS3旋转动画效果》随着Web技术的不断发展,动画效果已经成为了网页设计中不可或缺的一部分,本文将深入探讨animation.css的工作原理,如何使用以及... 目录1. css3动画技术简介2. animation.css库介绍2.1 animation.cs

使用雪花算法产生id导致前端精度缺失问题解决方案

《使用雪花算法产生id导致前端精度缺失问题解决方案》雪花算法由Twitter提出,设计目的是生成唯一的、递增的ID,下面:本文主要介绍使用雪花算法产生id导致前端精度缺失问题的解决方案,文中通过代... 目录一、问题根源二、解决方案1. 全局配置Jackson序列化规则2. 实体类必须使用Long封装类3.

Python文件操作与IO流的使用方式

《Python文件操作与IO流的使用方式》:本文主要介绍Python文件操作与IO流的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、python文件操作基础1. 打开文件2. 关闭文件二、文件读写操作1.www.chinasem.cn 读取文件2. 写

PyQt6中QMainWindow组件的使用详解

《PyQt6中QMainWindow组件的使用详解》QMainWindow是PyQt6中用于构建桌面应用程序的基础组件,本文主要介绍了PyQt6中QMainWindow组件的使用,具有一定的参考价值,... 目录1. QMainWindow 组php件概述2. 使用 QMainWindow3. QMainW

使用Python自动化生成PPT并结合LLM生成内容的代码解析

《使用Python自动化生成PPT并结合LLM生成内容的代码解析》PowerPoint是常用的文档工具,但手动设计和排版耗时耗力,本文将展示如何通过Python自动化提取PPT样式并生成新PPT,同时... 目录核心代码解析1. 提取 PPT 样式到 jsON关键步骤:代码片段:2. 应用 JSON 样式到

java变量内存中存储的使用方式

《java变量内存中存储的使用方式》:本文主要介绍java变量内存中存储的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、介绍2、变量的定义3、 变量的类型4、 变量的作用域5、 内存中的存储方式总结1、介绍在 Java 中,变量是用于存储程序中数据

关于Mybatis和JDBC的使用及区别

《关于Mybatis和JDBC的使用及区别》:本文主要介绍关于Mybatis和JDBC的使用及区别,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、JDBC1.1、流程1.2、优缺点2、MyBATis2.1、执行流程2.2、使用2.3、实现方式1、XML配置文件

macOS Sequoia 15.5 发布: 改进邮件和屏幕使用时间功能

《macOSSequoia15.5发布:改进邮件和屏幕使用时间功能》经过常规Beta测试后,新的macOSSequoia15.5现已公开发布,但重要的新功能将被保留到WWDC和... MACOS Sequoia 15.5 正式发布!本次更新为 Mac 用户带来了一系列功能强化、错误修复和安全性提升,进一步增

Java资源管理和引用体系的使用详解

《Java资源管理和引用体系的使用详解》:本文主要介绍Java资源管理和引用体系的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、Java的引用体系1、强引用 (Strong Reference)2、软引用 (Soft Reference)3、弱引用 (W

ubuntu系统使用官方操作命令升级Dify指南

《ubuntu系统使用官方操作命令升级Dify指南》Dify支持自动化执行、日志记录和结果管理,适用于数据处理、模型训练和部署等场景,今天我们就来看看ubuntu系统中使用官方操作命令升级Dify的方... Dify 是一个基于 docker 的工作流管理工具,旨在简化机器学习和数据科学领域的多步骤工作流。