微信小程序的云开发平台提供了三个基础能力:数据库、存储和云函数。我们这次利用微信小程序的云平台数据库的数据,通过echart这个前端可视化框架,实现百度2016、2017年每个季度的营收数据展示。
微信的云数据库是JSON 数据库,顾名思义,数据库中的每条记录都是一个 JSON 格式的对象。每一张表可以看成一个 JSON 数组。这里吐槽一下csv导入功能,本想用 csv 文件中数据直接导入导数据库,但是微信默认每一列都是关键字,不能有重复的值,而且像 12.5 和 12 这样值都被认为是相同的值,所以只能老老实实用微信的编辑工具手动录入数据。记得一定要录入 _openid!
关于数据的获取
微信提供了数据库的异步接口
1 | function () { |
关于数据的动态加载
echart 的官网给出的例子是静态数据的展示,如果要展示动态数据,需要使用懒加载的功能。在 onLoad 阶段再从数据库读入数据,然后初始化图表。
1 | getData: function () { |
最后的效果图
需要注意的问题
1.使用 echart 的时候需要修改app的css样式,不然展示不出图表。
2.关于数据的动态加载,有另一种方案,就是把读取数据的过程放在初始化函数中执行,然后把读到的数据放在一个全局变量中。这种方案有一个问题,echarts 的初始化函数和全局初始化函数同时执行,不分先后,不能实现读到数据。
3.在 coding 中会遇到 TypeError:xx is not a function 的问题。这时要在函数一开时的地方使用var that = this;,然后使用that调用数据