小程序中獲取用戶github的一些數據進行可視化

前言

一直想作一些數據可視化的東西，因此就嘗試在微信小程序中獲取用戶的一些GitHub上的數據之後，使用wx-charts來進行開發，GitHub的api可參考GitHubApi。

完成

暫時完成了：
18/09/06

• following
• follows
• repositories和starts
• 倉庫的語言類型

18/09/07

• 返回重輸
• 輸入爲空和成功的優化
• 點擊跟隨人跳轉進相應人信息
• 點擊環形圖彈出對應信息

預覽

git地址

所用

wx-charts：去這裏直接複製到你的項目隨便哪裏，在須要引用的地方 var wxCharts = require('../../utils/wxcharts.js'); ，例子都在他官網,須要下載到小程序中看效果，這裏就展現一個餅圖的基本代碼：
index.wxml:

<view>
    <canvas canvas-id="pieCanvas" class="canvas" style="height:300px;width:100%;"></canvas>
  </view>
複製代碼

index.js

var windowWidth = 320;
try {
  var res = wx.getSystemInfoSync();
  windowWidth = res.windowWidth;
} catch (e) {
  console.error('getSystemInfoSync failed!');
}
new wxCharts({
  animation: true,
  canvasId: 'pieCanvas',
  type: 'pie',
  series: [{
    name: 'javascript',
    data: 3
  }, {
    name: 'java',
    data: 1
  }, {
    name: 'vue',
    data: 6
  }],
  width: windowWidth,
  height: 300,
  dataLabel: true,
})
複製代碼

效果：

GitHubApi：這裏別人總結的github的api的一些用法，感謝！（api的請求次數有限制，若是本身在開發時須要常常請求，能夠把一次請求的數據暫時存起來）
weui-wexx：去 這裏直接複製到你的項目根目錄下取名weui.wxss，而後在app.wxss中 @import 'weui.wxss'就行了，具體使用仍是要去看他的 官網