小程式中獲取使用者github的一些資料進行視覺化

Izaya發表於2018-09-06
Github視覺化

前言

一直想做一些資料視覺化的東西，所以就嘗試在微信小程式中獲取使用者的一些GitHub上的資料以後，使用wx-charts來進行開發，GitHub的api可參考GitHubApi。

完成

暫時完成了：
18/09/06

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

18/09/07

  • 返回重輸
  • 輸入為空和成功的優化
  • 點選跟隨人跳轉進相應人資訊
  • 點選環形圖彈出對應資訊

預覽

git地址

小程式中獲取使用者github的一些資料進行視覺化

所用

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,
})
複製程式碼

效果：

小程式中獲取使用者github的一些資料進行視覺化

GitHubApi：這裡別人總結的github的api的一些用法，感謝！（api的請求次數有限制，如果自己在開發時需要經常請求，可以把一次請求的資料暫時存起來）
weui-wexx：去這裡直接複製到你的專案根目錄下取名weui.wxss，然後在app.wxss中 @import 'weui.wxss'就好了，具體使用還是要去看他的官網

相關文章