微信小程序异步加载f2图表

微信小程序版本：2.8.1
wx-f2 版本：27 Aug 2020
数据库：微信云开发

刚开始入手小程序的时候，需要做一些图表，去对比了很多不同的小程序开源图表，还是觉得F2看着最舒服，只是F2的文档不够完善，让人头大。

官方文档给出的F2加载示例是直接使用了现成数据，但实际上我们在运行小程序过程中，经常需要先从数据库里查询数据，再加载图表，这里就涉及到异步加载的问题。

那么具体怎么解决呢，我这里结合微信云开发为例：

首先在js文件的data里设置

  data: {showRoseChart:false,  //先设置图表不显示roseChart:{onInit: () => {}   //这一步很重要}},

然后定义图表配置（这个参考F2官方文档配置就行）

roseChartConf(F2, config, data) {const chart = new F2.Chart(config);chart.source(data);chart.coord('polar');chart.legend({position: 'right'});chart.axis(false);chart.interval().position('_id*length').color('_id').style({lineWidth: 1,stroke: '#fff'});chart.render();return chart;
},

再从云数据库里加载数据，在数据加载完成以后，接着加载图表配置

aggTags1yFuc() {wx.cloud.callFunction({ //调用云函数加载数据name: 'aggTags',data: {openid:app.globalData.openid,date: this.pastYears(1)},}).then(res => {console.log("最近一年时间数据",res.result)this.setData({roseChart: (F2, config) => this.roseChartConf(F2, config, res.result),   //数据加载成功，开始加载F2图表}),this.setData({showRoseChart: true  //显示图表})}).catch(console.error)},

记得在json文件中引入组件

{"usingComponents": {"f2": "@antv/wx-f2"}
}

wxml文件布局

<view class="margin-l padding-xl bg-white radius  shadow-lg"><view  class="td"> 最近一年时间分布</view>
<view wx:if="{{showRoseChart}}"  class="container">
<f2 class="f2-chart" onInit="{{roseChart}}" />
</view>
</view>

在wxss里加入字体及卡片格式的设置

.td {display: flex;align-items: center;justify-content: center;font-size: 30rpx;color: black;
}
.f2-chart {width: 100%;height: 500rpx;
}
.container{display: flex;flex-direction: row;align-items: flex-end;flex-wrap: wrap;
}

给大家看一下从云函数里调用生成的数据

还有最后的展示效果

有问题欢迎评论或私信~

此处是微信小程序F2图表
官方 GitHub链接：https://github.com/antvis/wx-f2

微信小程序异步加载f2图表相关推荐

微信小程序分页加载列表
微信小程序分页加载列表: 项目开发时很多页面都需要用到分页加载列表,为了方便,自己封装了分页加载列表组件,下拉刷新列表,滑动至底部,加载更多组件界面: 可以扫码查看是否符合自己的需求 wxml: & ...
微信小程序分包加载，分包加载的优势
微信小程序分包加载: 有时候我们的小程序太大,首次打开小程序的时候会比较慢,可以进行分包处理,按照功能的划分,拆分成几个分包,让用户在操作小程序的时候按需下载资源(用户在进入某些页面的时候才去下载相应 ...
微信小程序，Eror代码包大小为12497kb,上限为 2048 kb,请删除文件后重试？微信小程序分包加载
微信小程序如何解决预览超过2M的问题?微信小程序分包加载在微信小程序开发过程中有个问题让人很头疼,就是预览的项目不能超过2M,我们的项目通常都会超过这个大小限制.那到底怎么解决呢?其实官方给出了解决 ...
微信小程序列表加载动画示例
微信小程序列表加载动画微信小程序列表加载动画示例实现思路什么是动画? 导航栏设置列表动画加载完整代码demo 微信小程序列表加载动画示例初学微信小程序开发,记录一下.网上找了很久这种效果, ...
微信小程序上传视频到服务器太慢,微信小程序视频播放加载很慢
- 当前 Bug 的表现(可附上截图) - 预期表现 - 复现路径 - 提供一个最简复现 Demo 微信小程序视频播放加载很慢,一直转圈,3分钟后才能播放,而且播放很卡,加了带宽和cdn也没有效果,官 ...
微信小程序踩坑日记-微信小程序首次加载样式错乱问题
微信小程序踩坑日记-微信小程序首次加载样式错乱问题在实际开发项目中,遇到了个棘手的问题,就是在某些因素下,进入小程序发现有些样式发生偏移.错乱等问题问题原因:-未知(估计是组件的问题) ↓ 解决办 ...
微信小程序web-view加载网页字体非常小的问题
一.问题如下图所示,微信小程序web-view加载网页的字体非常小: 二.问题解决,在网页中加上 <meta name=viewport content="width=device-w ...
微信小程序怎么取mysql_微信小程序如何加载数据库真实数据？
微信小程序要加载网站数据库里面的真实数据,有一个硬性的要求,就是你的网站域名必须是https协议才行,要不然你第一步服务器域名配置你都通过不了,小编我也是前不久申请的https://www.100tx ...
微信小程序自动解决分包大小问题_微信小程序分包加载设置
设置分包加载微信小程序分包限制为: 主包或者单个分包最大为2M 整体小程序所有包最大为8M 为什么需要设置分包? 小程序项目中,有多种角色(公共页面很少),设置分包加载方便管理整个小程序压缩后代码 ...
微信小程序 - 图像加载时渐隐淡入效果（image）
前言由于微信小程序图片组件加载成功后,会突然显示出来比较生硬,所以需要对其进行动画修饰. 我们可以利用简单的动画对其进行修饰,当图片加载完毕后应用自己设置一个渐隐的过渡效果时间,如下图所示: 解决 ...

微信小程序异步加载f2图表

微信小程序异步加载f2图表相关推荐

最新文章

热门文章

微信小程序 异步加载f2图表

微信小程序 异步加载f2图表相关推荐

最新文章

热门文章

微信小程序异步加载f2图表

微信小程序异步加载f2图表相关推荐