微信小程序的云開發(fā)平臺提供了三個基礎(chǔ)能力：數(shù)據(jù)庫、存儲和云函數(shù)。我們這次利用微信小程序的云平臺數(shù)據(jù)庫的數(shù)據(jù)，通過echart這個前端可視化框架，實現(xiàn)百度2016、2017年每個季度的營收數(shù)據(jù)展示。

微信的云數(shù)據(jù)庫是JSON 數(shù)據(jù)庫，顧名思義，數(shù)據(jù)庫中的每條記錄都是一個 JSON 格式的對象。每一張表可以看成一個 JSON 數(shù)組。這里吐槽一下csv導(dǎo)入功能，本想用 csv 文件中數(shù)據(jù)直接導(dǎo)入導(dǎo)數(shù)據(jù)庫，但是微信默認(rèn)每一列都是關(guān)鍵字，不能有重復(fù)的值，而且像 12.5 和 12 這樣值都被認(rèn)為是相同的值，所以只能老老實實用微信的編輯工具手動錄入數(shù)據(jù)。記得一定要錄入 _openid!

數(shù)據(jù)庫的一條記錄

關(guān)于數(shù)據(jù)的獲取

微信提供了數(shù)據(jù)庫的異步接口

function () {
var that = this
db.collection('todos')
  .where({
    company: 'baidu'
  })
  .get({
    success: function (res) {
                ...
                }
       })
} 

關(guān)于數(shù)據(jù)的動態(tài)加載

echart 的官網(wǎng)給出的例子是靜態(tài)數(shù)據(jù)的展示，如果要展示動態(tài)數(shù)據(jù)，需要使用懶加載的功能。在 onLoad 階段再從數(shù)據(jù)庫讀入數(shù)據(jù)，然后初始化圖表。

getData: function () {
    var that = this
    db.collection('todos')
      .where({
        company: 'baidu'
      })
      .get({
        success: function (res) {
          // res.data 是包含以上定義的兩條記錄的數(shù)組
          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.關(guān)于數(shù)據(jù)的動態(tài)加載，有另一種方案，就是把讀取數(shù)據(jù)的過程放在初始化函數(shù)中執(zhí)行，然后把讀到的數(shù)據(jù)放在一個全局變量中。這種方案有一個問題，echarts 的初始化函數(shù)和全局初始化函數(shù)同時執(zhí)行，不分先后，不能實現(xiàn)讀到數(shù)據(jù)。

3.在 coding 中會遇到 TypeError:xx is not a function 的問題。這時要在函數(shù)一開時的地方使用var that = this;，然后使用that調(diào)用數(shù)據(jù)