微信小程序中使用uChart更新数据时,图表抖动严重的问题。

这篇具有很好参考价值的文章主要介绍了微信小程序中使用uChart更新数据时,图表抖动严重的问题。。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用前须知:

  • 你已经引入了ucharts
  • 你已经使用ucharts的“演示-微信”部分的代码

直接上解决方法:

data: {
    opts: {
    	...
    	update: true
    }
  },

update: true时,即你使用chartData更新的数据不会使界面重新渲染,只会更新数据
update: false或不传时,即你使用chartData更新的数据会让界面重新渲染


思路:

在开发微信小程序charts有需求需要不断请求后端数据,然后更新界面,但是调用ucharts的更新数据时会造成界面不断抖动。

通过翻阅文档发现ucharts自带的有更新数据的方法:
ucharts更新数据,小程序,微信小程序,微信小程序,小程序,ucharts
但是很明显很多人开发时选择的是直接组件化开发,并且直接将qiun-wx-ucharts放在component中使用,所以我看了下源码中,发现了其实在qiun-wx-ucharts—>index.js中是有_updataUChart事件的,该事件与文档提供的updateData事件类似(至少名称类似,一看就知道应该就是我所需要的function,并且这个function里面就有说调用的就是updateData事件)
其实这个function很短,但是不影响大家理解

再回到引用_updataUChart的地方可以发现:有一个判断语句,这个语句中就表明以下情况才会触发此事件(1、option得有;2、update为true)

ucharts更新数据,小程序,微信小程序,微信小程序,小程序,ucharts

ucharts更新数据,小程序,微信小程序,微信小程序,小程序,ucharts


总结:
翻看源码也是一种习惯,很多你在文档中不了解的或不能实现的功能,你都可以通过源码或改变源码来实现文章来源地址https://www.toymoban.com/news/detail-610986.html

到了这里,关于微信小程序中使用uChart更新数据时,图表抖动严重的问题。的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序数据库更新update的使用

            微信小程序数据库的update功能不可以直接使用db.collection.update,此功能虽然在collection的使用说明文档中有,但是经过实际操作之后是无法成功更新的,必须使用db.collection.doc.update才可以完成。         使用db.collection.doc.update方式时,数据记录则应由add功能添加

    2024年02月03日
    浏览(55)
  • uniapp微信小程序中基于ucharts的柱状图示例

    详细介绍请详读-ucharts官网

    2024年02月03日
    浏览(34)
  • 微信小程序中简单使用echarts图表

       1.复制组件至page同级目录下(ec-canvas) 2. 在js中引入 3.在wxml写个标签 样式我是这么设置的(在wcss),差不多大写微信里尺寸可以 4.编写数据咯(数据肯定是从接口传的,我就不写死了 直接方法也贴出来) 先创建对象 初始化图表 定义option 定义方法掉接口数据定义optio

    2024年02月09日
    浏览(54)
  • 微信小程序——swiper抖动问题解决以及节流、防抖

    目录 一、引出 二、防抖函数 1.为什么需要防止抖动的原因 2.函数防止抖动的原理 3.防抖动代码函数实现 4.在小程序当中使用的防抖函数 三、节流函数 1.为什么需要节流的原因 2.函数节流的原理 3.节流函数代码的实现 四、区别与使用的场景 1.什么时候会用到节流函数和防抖函

    2024年02月04日
    浏览(88)
  • 【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)

    微信小程序中使用 echarts 需使用官方提供的 ec-canvas 组件 点击下方链接,下载 ec-canvas 组件 https://gitcode.net/mirrors/ecomfe/echarts-for-weixin/-/tree/master 将其中的 ec-canvas 文件夹拷贝到微信小程序的分包中 ( 因 ec-canvas 组件较大,约 1M,若放在主包中很容易超出 2M 的大小限制,不了解

    2024年02月09日
    浏览(54)
  • uni-app 使用uCharts-进行图表展示(折线图带单位)

    前言 在uni-app经常是需要进行数据展示,针对这个情况也是有人开发好了第三方包,来兼容不同平台展示 uCharts和pc端的Echarts使用差不多,甚至会感觉在uni-app使用uCharts更轻便,更舒服 但是这个第三方包有优点就会有缺点,还会有坑的地方下面我会一一讲解 uCharts使用-注意事项

    2024年02月09日
    浏览(50)
  • 【微信小程序】导出 Excel 报表并分享,使用xlsx库生成 Excel,使用echars插入图表、使用pdfmake导出为PDF文件

    要在微信小程序中导出 Excel 报表并分享,可以使用第三方库 xlsx 来生成 Excel 文件,并使用 wx.saveFile 方法将文件保存到本地,然后使用 wx.shareFile 方法来分享文件。 以下是一个示例代码,演示如何在微信小程序中导出 Excel 报表并分享: 首先,安装依赖库 xlsx ,可以使用 npm

    2024年02月13日
    浏览(142)
  • 微信小程序返回上一页面并更新的数据

    微信小程序开发过程中经常把当前页面数据传递给上一个页面,wx.navigateBack()返回上一页,无法传递数据,页面视图没有响应。其中一个办法就是巧妙利用页面栈。 getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素

    2024年02月11日
    浏览(78)
  • 【微信小程序】初始化 wxCharts,调用updateData动态更新数据

    要初始化 wxCharts,你需要按照以下步骤进行操作: 首先,确保已将 wx-charts.js 文件正确引入到小程序的相应页面或组件中。可以通过以下方式引入: 请根据你的项目结构和实际路径进行相应的调整。 在页面或组件的 onLoad 生命周期函数中,创建一个图表实例并传递必要的配置

    2024年02月14日
    浏览(50)
  • 【uniapp】中 微信小程序实现echarts图表组件的封装

     插件地址:echarts-for-uniapp - DCloud 插件市场 图例: 一、uniapp 安装   二、文件夹操作 将 node_modules 下的 uniapp-echarts 文件夹复制到 components 文件夹下  当前不操作此步骤的话,运行 - 运行到小程序模拟器 - 微信开发者工具 时,echarts图表显示不出来 原因:运行到小程序打包过

    2024年02月12日
    浏览(49)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包