基于echart实现动态加载微信云平台数据库的数据

发表于 | 分类于 |   |   次阅读

微信小程序的云开发平台提供了三个基础能力：数据库、存储和云函数。我们这次利用微信小程序的云平台数据库的数据，通过echart这个前端可视化框架，实现百度2016、2017年每个季度的营收数据展示。

微信的云数据库是JSON 数据库，顾名思义，数据库中的每条记录都是一个 JSON 格式的对象。每一张表可以看成一个 JSON 数组。这里吐槽一下csv导入功能，本想用 csv 文件中数据直接导入导数据库，但是微信默认每一列都是关键字，不能有重复的值，而且像 12.5 和 12 这样值都被认为是相同的值，所以只能老老实实用微信的编辑工具手动录入数据。记得一定要录入 _openid!

关于数据的获取

微信提供了数据库的异步接口
image

1
2
3
4
5
6
7
8
9
10
11
12
function () {
var that = this
db.collection('todos')
  .where({
    company: 'baidu'
  })
  .get({
    success: function (res) {
                ...
                }
       })
}

关于数据的动态加载

echart 的官网给出的例子是静态数据的展示，如果要展示动态数据，需要使用懒加载的功能。在 onLoad 阶段再从数据库读入数据，然后初始化图表。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
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;
    });
  }

最后的效果图

image

需要注意的问题

1.使用 echart 的时候需要修改app的css样式，不然展示不出图表。

2.关于数据的动态加载，有另一种方案，就是把读取数据的过程放在初始化函数中执行，然后把读到的数据放在一个全局变量中。这种方案有一个问题，echarts 的初始化函数和全局初始化函数同时执行，不分先后，不能实现读到数据。

3.在 coding 中会遇到 TypeError:xx is not a function 的问题。这时要在函数一开时的地方使用var that = this;，然后使用that调用数据