我们在开发小程序时，通常管理端需要提供各类统计功能，比如统计商品类别下商品的平均销量。在小程序中提供了统计组件，我们本篇就介绍一下如何实现一个销量求平均的功能。
1 创建数据源
一般需要统计的数据存放在数据源中，我们可以新建一个商品数据源，字段如下：
其中商品类别我们可以创建一个通用选项集来存储
2 添加数据
为了实现功能，我们需要先录入一些数据，点击数据源的更多，点击管理数据
在数据管理后台里录入数据
APIs开发
微搭中的后台方法是在APIs中编制，登录控制台，点击新建APIs
选择自定义
输入名称和标识
点击立即新建
输入名称和标识，方法意图选择查询列表，类型选择自定义代码
输入如下代码
module.exports = async function (params, context) {
const db = context.database
const $ = db.command.aggregate
const result = await db.collection('lcap-data-2roskcyPE-sptj_buh3s33-preview').aggregate()
.group({
// 按 category 字段分组
_id: '$splb',
// 每组有一个 avgSales 字段，其值是组内所有记录的 sales 字段的平均值
avgSales: $.avg('$xl')
})
.end()
return result;
};
这里使用聚合语法，来进行分类统计，统计的结果是
{
"requestId": "183ca10cb23_1",
"data": [
{
"_id": "2",
"avgSales": 45
},
{
"_id": "3",
"avgSales": 30
},
{
"_id": "1",
"avgSales": 30
}
]
}
因为枚举类型在数据源中存储的是选项的标识，我们需要处理一下数据将标识处理成值
module.exports = async function (params, context) {
const db = context.database
const $ = db.command.aggregate
const result = await db.collection('lcap-data-2roskcyPE-sptj_buh3s33-preview').aggregate()
.group({
// 按 category 字段分组
_id: '$splb',
// 每组有一个 avgSales 字段，其值是组内所有记录的 sales 字段的平均值
avgSales: $.avg('$xl')
})
.end()
return result.data.map((item, index) => {
let splb="";
if(item._id==1){
splb="鱼类"
}else if(item._id==2){
splb="贝类"
}else if(item._id==3){
splb="面点类"
}else{
splb="未选择分类"
}
return {
splb: splb,
avgSales: item.avgSales,
}
})
};
最终处理好的结果是
[
{
"splb": "贝类",
"avgSales": 45
},
{
"splb": "面点类",
"avgSales": 30
},
{
"splb": "鱼类",
"avgSales": 30
}
]
柱状图要求
翻看了API，柱状图要求的返回参数是
[
{
XLabel: {
Value: "张三"},
YLabels: [
{
Name: "娃的数量", Value: 3},
{
Name: "销售金额", Value: 123123}
]
},
{
XLabel: {
Value: "李四"}, YLabels: [
{
Name: "娃的数量", Value: 3},
{
Name: "销售金额", Value: 123123}
]
},
{
XLabel: {
Value: "麻子"},
YLabels: [
{
Name: "娃的数量", Value: 3},
{
Name: "销售金额", Value: 123123}
]
},
]
看来我们上边的封装的返回结果还需要改造一下，按照柱状图的要求重新改造一下结果
module.exports = async function (params, context) {
const db = context.database
const $ = db.command.aggregate
const result = await db.collection('lcap-data-2roskcyPE-sptj_buh3s33-preview').aggregate()
.group({
// 按 category 字段分组
_id: '$splb',
// 每组有一个 avgSales 字段，其值是组内所有记录的 sales 字段的平均值
avgSales: $.avg('$xl')
})
.end()
return result.data.map((item, index) => {
let splb="";
if(item._id==1){
splb="鱼类"
}else if(item._id==2){
splb="贝类"
}else if(item._id==3){
splb="面点类"
}else{
splb="未选择分类"
}
return {
XLabel: {
Value: splb},
YLabels: [
{
Name: "平均销量", Value: item.avgSales}
]
}
})
};
最终的结果
[
{
"XLabel": {
"Value": "贝类"
},
"YLabels": [
{
"Name": "平均销量",
"Value": 45
}
]
},
{
"XLabel": {
"Value": "面点类"
},
"YLabels": [
{
"Name": "平均销量",
"Value": 30
}
]
},
{
"XLabel": {
"Value": "鱼类"
},
"YLabels": [
{
"Name": "平均销量",
"Value": 30
}
]
}
]
小程序端调用
小程序端如果想调用，发现直接选择api是不行的，我们先需要创建一个数组变量
然后在生命周期函数里调用api并且赋值给变量
export default {
async onPageLoad(query) {
//console.log('---------> LifeCycle onPageLoad', query)
const result = await app.cloud.callConnector({
name:'tj_iwz1ixo',
methodName:'tj',
params:{
}
})
$page.dataset.state.tj = result
console.log("result",result)
},
onPageShow() {
//console.log('---------> LifeCycle onPageShow')
},
onPageReady() {
//console.log('---------> LifeCycle onPageReady')
},
onPageHide() {
//console.log('---------> LifeCycle onPageHide')
},
onPageUnload() {
//console.log('---------> LifeCycle onPageUnload')
},
}
构造好变量之后我们可以往页面中添加一个柱状图组件
在右侧的属性面板上绑定我们的变量即可
总结
如果我们想在小程序端显示图表组件的，首先需要定义数据源，接着要按要求编写后端方法，在组件中调用后端方法并且赋值给数组变量。经过这一系列的步骤就做好一个图表展示功能了，还不会的赶紧试试吧。