update the market page

show the price history into the line chart
Cha0s0000 · Apr 21, 2018 · 3ed3c5a · 3ed3c5a
1 parent a61ea39
commit 3ed3c5a
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 17 deletions.
diff --git a/pages/market/market.js b/pages/market/market.js
@@ -15,24 +15,68 @@ Page({
   onLoad: function (options) {
     var that = this;
     var priceHistory = new Object();
+    var priceMax = 1;
+    var priceMin = 0;
     priceHistory.price = [];
     priceHistory.time = [];
     wx.request({
-      url: 'https://min-api.cryptocompare.com/data/histohour?fsym=STEEM&tsym=SBD&limit=6',
+      url: 'https://min-api.cryptocompare.com/data/histoday?fsym=STEEM&tsym=SBD&limit=10',
       method: 'GET',
       success: function (res) {
         if(res.statusCode == '200'){
           var data = res.data.Data;
           console.log(data);
           for(var i in data){
             priceHistory.price.push(data[i].close);    
-            priceHistory.time.push(data[i].time);     
+            priceHistory.time.push(that.getTime(data[i].time*1000));     
           }
           console.log(priceHistory);
-
+          priceMax= Math.max.apply(null, priceHistory.price);
+          priceMin = Math.min.apply(null, priceHistory.price);
         }
       },
-
+      complete:function(res){
+        var windowWidth = 320;
+        try {
+          var res = wx.getSystemInfoSync();
+          windowWidth = res.windowWidth;
+        } catch (e) {
+          console.error('getSystemInfoSync failed!');
+        }
+        new wxCharts({
+          canvasId: 'priceHistory',
+          type: 'line',
+          categories: priceHistory.time,
+          animation: true,
+          // background: '#f5f5f5',
+          series: [{
+            name: 'STEEM/SBD',
+            data: priceHistory.price,
+            format: function (val, name) {
+              return val.toFixed(4);
+            }
+          }],
+          xAxis: {
+            disableGrid: true
+          },
+          yAxis: {
+            title: 'STEEM/SBD',
+            format: function (val) {
+              return val.toFixed(2);
+            },
+            min: priceMin - 0.01,
+            max: priceMax+0.01
+          },
+          width: windowWidth,
+          height: 200,
+          dataLabel: false,
+          dataPointShape: true,
+          legend:true,
+          extra: {
+            lineStyle: 'curve'
+          }
+        });
+      }
     })
 
   },
@@ -84,5 +128,44 @@ Page({
    */
   onShareAppMessage: function () {
 
-  }
+  },
+  getTime(time) {
+    var postTime = new Date(time);
+    // console.log(Date.parse(postTime));
+    var nowTime = Date.now() - 28800000;
+    // console.log(nowTime);
+    var ago = nowTime - postTime;
+    if (ago / 1000 / 60 / 60 / 24 >= 1) {
+      var dayNum = parseInt(ago / 1000 / 60 / 60 / 24);
+      var getTimeData = dayNum.toString();
+      getTimeData += "days ago";
+      // console.log(getTimeData);
+      return getTimeData;
+    }
+    else if (ago / 1000 / 60 / 60 >= 1) {
+      var hourNum = parseInt(ago / 1000 / 60 / 60);
+      var getTimeData = hourNum.toString();
+      getTimeData += "hours ago";
+      // console.log(getTimeData);
+      return getTimeData;
+    }
+    else if (ago / 1000 / 60 >= 1) {
+      var minNum = parseInt(ago / 1000 / 60);
+      var getTimeData = minNum.toString();
+      getTimeData += "mins ago";
+      // console.log(getTimeData);
+      return getTimeData;
+    }
+    else if (ago / 1000 >= 1) {
+      var secNum = parseInt(ago / 1000);
+      var getTimeData = secNum.toString();
+      getTimeData += "secs ago";
+      // console.log(getTimeData);
+      return getTimeData;
+    }
+    else {
+      var getTimeData = "1sec ago";
+      return getTimeData;
+    }
+  },
 })
diff --git a/pages/market/market.wxml b/pages/market/market.wxml
@@ -1,2 +1,5 @@
 <!--pages/market/market.wxml-->
-<canvas canvas-id="lineCanvas" class="myCanvas" disable-scroll="true" class="canvas"></canvas>
+<view class="container">
+    <canvas canvas-id="priceHistory" disable-scroll="true" class="canvas" bindtouchstart="touchHandler"></canvas>
+    <button type="primary" bindtap="updateData">更新数据</button>
+</view>
diff --git a/pages/market/market.wxss b/pages/market/market.wxss
@@ -1,13 +1,16 @@
 /* pages/market/market.wxss */
-page {
-  text-align: center;
-  background-color: #ffffff;
-}
-.downloadChart {
-  font-size: 16px;
-  background: #699fed;
-  border-radius: 6px;
-  color: white;
-  width: 70%;
-  margin-top: 32px;
+.container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    -webkit-text-size-adjust:none;
+    -webkit-user-select: none;
+    font-size: 35rpx;
+    color: #333;
+    font-family: Helvetica,Arial,"Helvetica Neue","Droid Sans","Microsoft YaHei",sans-serif;
 }
+.canvas {
+    width: 100%;
+    height: 200px;
+}