美文网首页微信小程序开发微信小程序开发
基于echart实现动态加载微信云平台数据库的数据

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

作者: 梦想家小洋 | 来源:发表于2018-09-20 16:58 被阅读5次

    微信小程序的云开发平台提供了三个基础能力:数据库、存储和云函数。我们这次利用微信小程序的云平台数据库的数据,通过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调用数据

    相关文章

      网友评论

        本文标题:基于echart实现动态加载微信云平台数据库的数据

        本文链接:https://www.haomeiwen.com/subject/oyennftx.html