uniapp引入ucharts组件不显示

官网说明:

uCharts官网 - 秋云uCharts跨平台图表库

自行封装组件不显示问题

在自行封装组件的过程中经常遇到的问题就是不显示问题,很多开发者把官网【演示】中的【原生】代码直接变成组件引用,这样的作法是错误的。我们在指南中的《组件概述》章节已经详细介绍过为何使用官方组件,我们相信您有实力和能力自行封装,但也请您相信我们多年专业的经验,如果您仍需自行封装,请注意以下问题:

  1. 官网【演示】中的【原生】代码,初始化方法是从onReady()开始执行,而组件没有这个生命周期,请参考各平台的组件生命周期来确定组件初始化的方法。
  2. 执行实例化 new uCharts(opts) 前,请一定确保在子组件完全挂载之后执行,否则会导致 dom 没有加载完毕就进行了渲染,必然会导致图表不显示的问题。
  3. 如果使用 canvas2d 的方式,一定要注意获取 context 的方式的区别,具体详见各平台的原生文档。

解决方式:

我们将官网给出的例子里面的onReady(),换成我们开发的平台的生命周期即可,

例如我正在开发vue2+uniapp,我可以换成mounted()。

相关推荐
笨笨狗吞噬者12 小时前
记录一个uniapp小程序端编译时问题
前端·微信小程序·uni-app
会一丢丢蝶泳的咻狗1 天前
uni-app安卓端强制更新apk包
android·前端·uni-app
iOS阿玮2 天前
苹果审核被拒,其实可以靠回复也能过审
uni-app·app·apple
程序员小刘2 天前
HarmonyOS 5中UniApp的调试步骤
华为·uni-app·harmonyos
饭啦啦2 天前
uniapp音乐播放createInnerAudioContext
uni-app
米粒宝的爸爸2 天前
uniapp中vue3 ,uview-plus使用!
前端·vue.js·uni-app
狂龙骄子2 天前
uniapp Switch控件背景颜色自定义
css·uni-app·switch·hbuilderx·colorui
qq_424409192 天前
uniapp的app项目,在华为pad上运行,页面显示异常
uni-app
涛々2 天前
uniapp-vue3-js-vite-pinia-eslint 快速开发模板
javascript·uni-app·uniapp+vue3模板
三天不学习2 天前
使用Cursor + Devbox + Uniapp 一站式AI编程开发移动端(App、H5、小程序)
小程序·uni-app·ai编程