uniapp引入ucharts组件不显示

官网说明:

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

自行封装组件不显示问题

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

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

解决方式:

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

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

相关推荐
用户6990304848751 天前
try catch使用场景 处理同步代码错误兼容用的
javascript·uni-app
ITKEY_1 天前
uniapp微信开发者工具 更改AppID失败 touristappid
uni-app
Geek_Vison1 天前
APP瘦身实战:从80MB+砍到15MB——基于小程序容器技术剥离APP非核心业务的实践分享
小程序·uni-app·mpaas
CHB2 天前
HDC2026 演讲实录|AI 驱动的跨端进化:利用 uni-agent 快速构建高性能鸿蒙应用
uni-app·harmonyos
2501_915918412 天前
iOS App性能测试工具的实现方法与优化循环指南
android·ios·小程序·https·uni-app·iphone·webview
斯内普吖2 天前
(开源)高校素拓分管理系统小程序实战指南 基于 Java + SpringBoot + uni-app + Vue + MySQL
java·spring boot·mysql·小程序·uni-app·开源
海阔天空66882 天前
uniapp开启调试模式
uni-app·uniapp开启调试模式
anyup3 天前
分享 5 套 uni-app 实用主题,一键适配暗黑模式
前端·uni-app·视觉设计
gg159357284603 天前
Uni-app跨平台开发全解课程:从零基础到企业级多端落地实战
vue.js·uni-app
xshirleyl4 天前
uniapp小兔鲜儿day3
uni-app