uniapp引入ucharts组件不显示

官网说明:

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

自行封装组件不显示问题

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

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

解决方式:

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

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

相关推荐
笨笨狗吞噬者1 天前
维护 uniapp 小程序端近一年,我想拉一个开发者交流群
前端·程序员·uni-app
你的眼睛會笑2 天前
uni-app 实战:使用 lime-painter 实现页面内容一键生成海报并下载
uni-app
一只程序熊2 天前
uniapp 高德地图 打开选择地址报错,也没有展示出附近的位置
android·uni-app
2501_915909063 天前
不用越狱就看不到 iOS App 内部文件?使用 Keymob 查看和导出应用数据目录
android·ios·小程序·https·uni-app·iphone·webview
万物得其道者成3 天前
uni-app Android 离线打包:多环境(prod/dev)配置
android·opencv·uni-app
学习3人组3 天前
Uniapp快速上手了解
uni-app
小鲤鱼ya3 天前
vue3 + ts + uni-app 移动端封装图片上传添加水印
前端·typescript·uni-app·vue3
2501_915921433 天前
常用iOS性能测试工具大全及使用指南
android·测试工具·ios·小程序·uni-app·cocoa·iphone
桐溪漂流3 天前
Uni-app H5 环境下 ResizeObserver 监听 mp-html 动态高度
前端·uni-app·html
芒果大胖砸3 天前
uniapp 在h5中预览pdf hybrid方法
pdf·uni-app