微信小程序的云开发平台提供了三个基础能力：数据库、存储和云函数。我们这次利用微信小程序的云平台数据库的数据，通过echart这个前端可视化框架，实现百度2016、2017年每个季度的营收数据展示。
微信的云数据库是JSON 数据库，顾名思义，数据库中的每条记录都是一个 JSON 格式的对象。每一张表可以看成一个 JSON 数组。这里吐槽一下csv导入功能，本想用 csv 文件中数据直接导入导数据库，但是微信默认每一列都是关键字，不能有重复的值，而且像 12.5 和 12 这样值都被认为是相同的值，所以只能老老实实用微信的编辑工具手动录入数据。记得一定要录入 _openid!
数据库的一条记录
关于数据的获取
微信提供了数据库的异步接口
function () {
var that = this
db.collection('todos')
.where({
company: 'baidu'
})
.get({
success: function (res) {
...
}
})
}
关于数据的动态加载
echart 的官网给出的例子是静态数据的展示，如果要展示动态数据，需要使用懒加载的功能。在 onLoad 阶段再从数据库读入数据，然后初始化图表。
getData: function () {
var that = this
db.collection('todos')
.where({
company: 'baidu'
})
.get({
success: function (res) {
// res.data 是包含以上定义的两条记录的数组
var dic = {};
var arr = [];
var data = {};
var re = res.data;
for (var i = 0; i < re.length; i++) {
dic[re[i]['season'] + '-' + re[i]['year']] = re[i]['earning']
}
console.log(dic);
for (var year of ['2016', '2017']) {
var xAxis = ['Q1', 'Q2', 'Q3', 'Q4']
for (var i = 0; i < xAxis.length; i++) {
var index = xAxis[i] + '-' + year
if (index in dic) {
if (dic[index] == null) {
arr.push(null)
} else {
arr.push(dic[index])
}
}
}
data[year] = arr;
arr = [];
}
console.log(data);
that.data.line = data;
try {
that.init_echarts();//初始化图表
} catch (e) {
console.log(e)
}
}
});
},
//初始化图表
init_echarts: function () {
this.echartsComponnet.init((canvas, width, height) => {
// 初始化图表
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
canvas.setChart(chart);
chart.setOption(this.getOption());
// 注意这里一定要返回 chart 实例，否则会影响事件处理等
return chart;
});
}
最后的效果图
效果图
需要注意的问题
1.使用 echart 的时候需要修改app的css样式，不然展示不出图表。
2.关于数据的动态加载，有另一种方案，就是把读取数据的过程放在初始化函数中执行，然后把读到的数据放在一个全局变量中。这种方案有一个问题，echarts 的初始化函数和全局初始化函数同时执行，不分先后，不能实现读到数据。
3.在 coding 中会遇到 TypeError:xx is not a function 的问题。这时要在函数一开时的地方使用var that = this;，然后使用that调用数据
