uniapp微信小程序开发踩坑日记:由于图表数据渲染不出来,我第一次在项目中用watch函数监听数据变化

一、发现问题

在我们团队自己开发的微信小程序中,引入了Echarts图表库

然后突然有一天,后端队友反应图表渲染有问题。后面我去试了一下,确实20次里面必有一次数据渲染不出来

 

断定代码没问题,于是我们将其鉴定为玄学

 

二、问题原因

后面我冷静下来有仔细分析了下代码,找到了图表渲染问题的原因

虽然我开发用的是Vue项目,Vue的数据是响应式的,但是Echarts图表的底层是JS实现的,图表的数据并不是响应式的

所以有时候后端数据还没返回,图表就已经渲染好了,那时候数据还是空

三、解决问题

要用watch来监听数据变化,等数据从空变为有值的时候再渲染图表

于是我写了如下代码

对了,别忘记import {  watch  } from "vue" ,我一开始忘了加,导致代码报错了

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

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

相关文章

VS2022 配置OpenCV开发环境详细教程

OpenCV OpenCV(Open Source Computer Vision Library)是一个开源的计算机视觉和机器学习软件库,由Intel开发并首先发布于1999年。OpenCV被广泛用于实时图像处理、视频分析、物体检测、面部识别、机器人视觉以及许多其他领域。它支持C、Pytho…

代码+视频,R语言绘制生存分析模型的时间依赖(相关)性roc曲线和时间依赖(相关)性cindex曲线

ROC曲线分析是用于评估一个因素预测能力的手段,是可以用于连续型变量分组的方法。在生存分析中,疾病状态和因素取值均会随时间发生变化。而标准的ROC曲线分析将个体的疾病状态和因素取值视作固定值,未将时间因素考虑在分析之中。在这种情况下…

selenium如何开启手机模式

在Python中使用Selenium进行网页自动化测试或爬取时,如果你想模拟手机模式(即移动端浏览器模式),可以通过设置用户代理(User-Agent)和使用移动端的视口(Viewport)来实现。以下是一些…

STM32入门_江协科技_1~2_OB记录的自学笔记_STM32简介

1.综述 1.1. 课程简介 手打代码是加入了实操,增加学习效果; STM最小系统板面包板的硬件平台; 配套0.96寸的显示屏,便于调试; 因为使用面板板,所以如果程序现象不出来也有可能是硬件连接的问题; …

Linux 小技巧1

目录 一. 统计文件的总行数二. 获取从第二行开始的内容三. 合并两个文件为一个文件四. 统计指定列唯一值的数量五. 列出文件的绝对路径六. 获取除了空白行和注释之外的部分 一. 统计文件的总行数 ⏹非压缩文件 统计当前文件夹下csv文件的行数 wc -l ./*.csv统计指定文件夹下…

Linux下深度学习虚拟环境的搭建与模型训练

在深度学习实践中,环境配置是十分重要且免不了的一步。本文以 YOLOv4 模型,介绍在Linux下虚拟环境配置到模型训练的过程。 安装Miniconda: Miniconda是Anaconda的一个轻量级版本,非常适合用于科学计算和数据处理。 wget https:…

微信小程序 - 登录(切屏后继续倒计时)

屏幕休眠或后台运行倒计时暂停问题 updateTime: function () {let promise new Promise((resolve, reject) > {var beginTime new Date().getTime();let setTimer setInterval(() > {var newTime new Date().getTime();var dTime (newTime - beginTime) / 1000;dTim…

甘特图是什么?利用甘特图来优化项目管理流程

在现代项目管理中,图表是一种强大而直观的工具,可以帮助项目经理和团队成员清晰地了解并掌控整个项目进程。其中,甘特图是最常用和最有效的图表之一。 甘特图是一种条形图,可以用来直观地展示项目中各个任务的进度、持续时间和相互关系。它由一个横轴和一个纵轴组成。横轴代表时…

基于单片机的多功能电子万年历系统

摘要:该题目要求学生综合运用单片机原理、低频电子线路、数字电路与逻辑设计等相关知识,设计完成多功能电子万年历系统。通过完成设计任务,使学生掌握单片机设计开发的基本流程,增强学生动手实践能力,培养学生分析和解决实际问题的能力,为后续课程的学习和工作打下良好基础。 关…

redis 使用互斥锁或逻辑过期两种方案解决缓存击穿,和缓存穿透(用缓存空值 或布隆过滤器)的解决方案

缓存穿透 缓存穿透是指在缓存中查找一个不存在的值,由于缓存一般不会存储这种无效的数据,所以每次查询都会落到数据库上,导致数据库压力增大,严重时可能会导致数据库宕机。解决方案: 1 缓存空值 (本文此方案) …

【c++】----STL简介string

目录 1. 什么是STL 2. STL的版本 3. STL的六大组件 4.STL的缺陷 5.string类 1. 为什么学习string类? 6.string类的常用接口说明(下面我们只讲解最常用的接口) 1.string 常见构造 2.string类的遍历 iterator 迭代器遍历 (…

初识BootStrap

目录 前言: 1.Bootstrap的特点包括: 1.1响应式设计: 1.2组件丰富: 1.3易于定制: 1.4兼容性良好: 1.5强大的社区支持: 1.6一致的样式和布局: 1.7 插件和扩展性 2.初识Ajax: 2.1同步请求…

CANopen学习笔记

1.CANopen的预定义报文ID分类 CANopen在设计时,对其定义为小网络、控制信号的实时通讯: 报文传输采用CAN标准帧格式。即11bit的ID域,以尽量减小传输时间。网络控制报均采用数据最小字节数。比如心跳报文,只有1个字节数据。实时更…

STM32应用开发教程进阶--Wi-Fi通信(ESP8266模块:STA、AP、STA+AP)

实现目标 1、熟悉Wi-F、ESP8266模块 2、掌握ESP8266模块共3种工作模式:STA、AP、STAAP的配置 3、具体实现目标:(1)AT固件烧录;(2)ESP8266模块STA、AP、STAAP的配置 一、Wi-Fi概述 1、Wi-Fi定…

【JavaScript】使用 AbortController 对象中断 fetch 的文本流传输

AbortController 正如我们所知道的,fetch 返回一个 promise。JavaScript 通常并没有“中止” promise 的概念。那么我们怎样才能取消一个正在执行的 fetch 呢?例如,如果用户在我们网站上的操作表明不再需要某个执行中的 fetch。 为此有一个…

【kettle006】kettle访问华为openGauss高斯数据库并处理数据至execl文件

1.一直以来想写下基于kettle的系列文章,作为较火的数据ETL工具,也是日常项目开发中常用的一款工具,最近刚好挤时间梳理、总结下这块儿的知识体系。 2.熟悉、梳理、总结下华为openGauss高斯数据库相关知识体系 3.欢迎批评指正,跪谢…

Spring Boot应用部署 - JAR包Docker部署

JAR包Docker部署 要使用Docker部署Spring Boot应用,需要创建一个Dockerfile来定义如何构建Docker镜像,并且可能还需要在Maven构建脚本中集成Docker插件以简化构建过程。以下是详细的步骤: 1. 创建Dockerfile 在Spring Boot项目的根目录下创…

【实时数仓架构】方法论(未完)

笔者不是专业的实时数仓架构,这是笔者从其他人经验和网上资料整理而来,仅供参考。写此文章意义,加深对实时数仓理解。 实时数仓背景和场景 一、实时数仓架构技术演进 1.1、四种架构演进 1)离线大数据架构 一种批处理离线数据分…

胡写乱写哈哈哈

message.from() 获取消息的发送者名称 const bot new Wechaty() .on(message, async message > { //这条消息是谁发送的const contact message.from()//这条消息的文本内容const text message.text()//这条消息是哪个群聊中发送的const room message.room()if (room) {/…

电脑开机后卡在开机LOGO画面如何排查处理

当电脑开机后长时间停滞在开机LOGO画面,无法继续进入操作系统,这一现象常令用户困扰不已。本文将深入探讨导致此类问题的多种可能原因,并提供相应的解决方法,帮助你有效地诊断和排除故障。 硬件故障或接触不良 1. 硬盘问题:硬盘是系统启动的关键组件,其故障或数据线接触…