uniapp引入ucharts组件不显示

官网说明:

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

自行封装组件不显示问题

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

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

解决方式:

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

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

相关推荐
他叫自己MR张17 小时前
uni-app 应用启动报uni-ad业务状态异常(-9002)【已解决】
uni-app
2501_9159090617 小时前
iOS应用性能监控 Instruments工具与崩溃日志分析完整指南
android·ios·小程序·https·uni-app·iphone·webview
2501_915918411 天前
详解iOS App上架至App Store的全流程步骤与注意事项
android·macos·ios·小程序·uni-app·cocoa·iphone
anyup1 天前
终于在今天入选了 Gitee GVP,这真值得庆祝~
前端·uni-app·开源
虚惊一场2 天前
撤销为什么只需要 pop:用事件重放实现离线台球计分
微信小程序·uni-app
虚惊一场2 天前
从一个小程序到一座工具箱:uni-app 分包与 Flask 微服务实践
微信小程序·uni-app
Cry丶2 天前
【已解决】adb devices 能识别手机,但 HBuilderX 搜索不到设备的避坑指南
android·adb·uni-app·hbuilderx·真机调试
清风programmer3 天前
H5与小程序通信
前端·vue.js·uni-app
2501_915918414 天前
深入对比iOS开发中常用性能监控工具的底层原理与优缺点分析
android·ios·小程序·https·uni-app·iphone·webview
AI多Agent协作实战派4 天前
AI多Agent协作系统实战(二十三):Agent读HEARTBEAT.md不读AGENTS.md——openclaw的文件加载之谜
前端·数据库·人工智能·uni-app