趋势表更新为canvas

package.json

@@ -1,6 +1,6 @@
 {
   "name": "io.yutent.gaystat",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "搞基数据",
   "main": "src/main.js",
   "scripts": {

src/css/app.css

@@ -1 +1 @@
-html{font-size:12.8px;width:100%;height:100vh}body{display:flex;flex-direction:column;width:100%;height:100%;padding-top:.9375rem;line-height:1.25;font-size:1.09375rem;color:#f2f5fc;background:transparent}.app{position:relative;display:flex;flex-direction:column;height:100%;padding:1.25rem 0 .46875rem;border-radius:.46875rem;background:rgba(100,100,100,0.75)}.app::before{position:absolute;left:12.10938rem;top:-.54688rem;width:1.09375rem;height:1.09375rem;border-radius:.15625rem;background:linear-gradient(to bottom right, rgba(100,100,100,0.7) 50%, transparent 50%);-webkit-transform:rotate(45deg);transform:rotate(45deg);content:""}.app .option,.app .close{position:absolute;right:.46875rem;top:.15625rem;--size: 1.09375rem;cursor:pointer;opacity:0}.app .option:hover,.app .close:hover{opacity:1}.app .close{right:auto;left:.46875rem}.app .list{flex:1}.app .list .item{display:flex;align-items:center;height:4.21875rem;padding:.78125rem .9375rem;line-height:1.17188rem;border-bottom:.07812rem solid rgba(200,200,200,0.1);border-top:.07812rem solid rgba(0,0,0,0.1)}.app .list .item:first-child{border-top:0}.app .list .item:last-child{border-bottom:0}.app .list .item .info{overflow:hidden;flex:1}.app .list .item .info h3{font-size:1.09375rem}.app .list .item .info cite{color:#dae1e9}.app .list .item .last-week{display:flex;justify-content:space-between;flex-flow:wrap-reverse;width:3.75rem;height:1.95312rem;margin:0 1.25rem}.app .list .item .last-week li{width:.23438rem;height:0;background:#fff}.app .list .item .today{width:4.0625rem;font-size:.9375rem;color:#fff;text-align:right}.app .list .item .today span{display:block;padding:0 .3125rem}.app .list .item .today .percent{border-radius:.15625rem}.app .list .item .today .percent.red{background:#ff5061}.app .list .item .today .percent.green{background:#4caf50}
+html{font-size:12.8px;width:100%;height:100vh}body{display:flex;flex-direction:column;width:100%;height:100%;padding-top:.9375rem;line-height:1.25;font-size:1.09375rem;color:#f2f5fc;background:transparent}.app{position:relative;display:flex;flex-direction:column;height:100%;padding:1.25rem 0 .46875rem;border-radius:.46875rem;background:rgba(88,88,88,0.85)}.app::before{position:absolute;left:12.10938rem;top:-.54688rem;width:1.09375rem;height:1.09375rem;border-radius:.15625rem;background:linear-gradient(to bottom right, rgba(100,100,100,0.85) 50%, transparent 50%);-webkit-transform:rotate(45deg);transform:rotate(45deg);content:""}.app .option,.app .close{position:absolute;right:.46875rem;top:.15625rem;--size: 1.09375rem;cursor:pointer;opacity:0}.app .option:hover,.app .close:hover{opacity:1}.app .close{right:auto;left:.46875rem}.app .list{flex:1}.app .list .item{display:flex;align-items:center;height:4.21875rem;padding:.78125rem .9375rem;line-height:1.17188rem;border-bottom:.07812rem solid rgba(200,200,200,0.1);border-top:.07812rem solid rgba(0,0,0,0.1)}.app .list .item:first-child{border-top:0}.app .list .item:last-child{border-bottom:0}.app .list .item .info{overflow:hidden;flex:1}.app .list .item .info h3{font-size:1.09375rem}.app .list .item .info cite{color:#dae1e9}.app .list .item .last-week{display:flex;width:3.75rem;height:2.34375rem;margin:0 1.25rem}.app .list .item .today{width:4.0625rem;font-size:.9375rem;color:#fff;text-align:right}.app .list .item .today span{display:block;padding:0 .3125rem}.app .list .item .today .percent{border-radius:.15625rem}.app .list .item .today .percent.red{background:#ff5061}.app .list .item .today .percent.green{background:#4caf50}

src/css/app.scss

@@ -28,14 +28,14 @@ body {
   height:100%;
   padding:px(16) 0 px(6);
   border-radius:px(6);
-  background:rgba(100, 100, 100, .75);
+  background:rgba(88, 88, 88, .85);
 
   &::before {
     position:absolute;
     left:px(155); top:px(-7);
     width:px(14); height:px(14);
     border-radius:px(2);
-    background: linear-gradient(to bottom right, rgba(100, 100, 100, .7) 50%, transparent 50%);
+    background: linear-gradient(to bottom right, rgba(100, 100, 100, .85) 50%, transparent 50%);
     transform:rotate(45deg);
     content:"";
   }
@@ -78,12 +78,8 @@ body {
 
       .last-week {
         display:flex;
-        justify-content:space-between;
+        width:px(48);height:px(30);
-        flex-flow: wrap-reverse;
-        width:px(48);height:px(25);
         margin:0 px(16);
-
-        li {width:px(3);height:0;background:#fff;}
       }
 
       .today {

src/css/var.scss

@@ -15,4 +15,3 @@ $cd: #62778d #526273 #425064;
 @function px($n: 1) {
   @return ($n / 12.8) + rem;
 }
-

src/index.html

@@ -21,12 +21,9 @@
           <h3 class="do-fn-ell" :text="it.name"></h3>
           <cite :text="it.code"></cite>
         </div>
-        <ul class="last-week">
+
-          <li 
+        <canvas class="last-week" width="70" height="30" :draw="it.last"></canvas>
-            :for="d in it.last"
+
-            :css="{height: d.h}">
-          </li>
-        </ul>
         <div class="today" @dblclick="updateGay(it)">
           <span class="money" :text="it.curr"></span>
           <span 

src/js/app.js

@@ -9,6 +9,7 @@
 import '/lib/anot.js'
 import '/lib/form/button.js'
 import '/lib/scroll/index.js'
+import '/lib/canvas-draw.js'
 
 import layer from '/lib/layer/index.js'
 import Utils from '/lib/utils.js'
@@ -32,16 +33,19 @@ function getTableData(str) {
   var max = 0
 
   table.innerHTML = match[0]
-  list = Array.from(table.children[0].children).map(it => {
+  list = Array.from(table.children[0].children)
+    .map(it => {
       let m = +it.children[1].textContent
       if (m > max) {
         max = m
       }
       return { m }
     })
+    .reverse()
+
   max = Math.ceil(max)
   list.forEach(it => {
-    it.h = ((100 * it.m) / max).toFixed(2) + '%'
+    it.h = +((it.m * 30) / max).toFixed(2)
   })
   return list
 }
@@ -89,13 +93,14 @@ Anot({
       return getJsonp(res)
     },
 
-    getLastWeek(id) {
+    getLastMonth(id) {
       var res = ipcRenderer.sendSync(
         'net',
-        `https://fund.eastmoney.com/f10/F10DataApi.aspx?type=lsjz&code=${id}`
+        `https://fund.eastmoney.com/f10/F10DataApi.aspx?type=lsjz&per=30&code=${id}`
       )
       return getTableData(res)
     },
+
     addGay() {
       layer
         .prompt('请输入鸡精代号', (val, done) => {
@@ -109,7 +114,7 @@ Anot({
           }
           Anot.nextTick(_ => {
             var info = this.getTodayStat(id)
-            var last = this.getLastWeek(id)
+            var last = this.getLastMonth(id)
             if (info) {
               var tmp = {
                 code: info.fundcode,
@@ -131,13 +136,13 @@ Anot({
     updateGay(item) {
       var info = this.getTodayStat(item.code)
       if (info.dwjz !== item.yesterday) {
-        item.last = this.getLastWeek(item.code)
+        item.yesterday = info.dwjz
+        item.last = this.getLastMonth(item.code)
       }
       item.curr = info.gsz
       item.percent = +info.gszzl
 
       Anot.ls('watch_list', this.list.$model)
-      // layer.toast('更新成功', 'success')
     },
 
     removeGay(item) {

src/lib/canvas-draw.js

@@ -0,0 +1,40 @@
+/**
+ * canvas渲染
+ * @author yutent<yutent.io@gmail.com>
+ * @date 2020/07/27 11:34:59
+ */
+
+'use strict'
+
+const log = console.log
+
+Anot.directive('draw', {
+  priority: 1500,
+  init(binding) {
+    var elem = binding.element
+    var ctx = elem.getContext('2d')
+    binding.$ctx = ctx
+  },
+  update: function(val) {
+    var list = val.$model
+    var start = list.shift()
+    var x = 0
+
+    this.$ctx.clearRect(0, 0, 70, 30)
+    this.$ctx.fillStyle = '#a7a8ab'
+    this.$ctx.fillRect(0, 0, 1, 30)
+    this.$ctx.fillRect(0, 29, 70, 1)
+
+    this.$ctx.beginPath()
+    this.$ctx.strokeStyle = '#ff5061'
+    this.$ctx.lineWidth = 1
+    this.$ctx.moveTo(0, 30 - start.h)
+
+    while (list.length) {
+      start = list.shift()
+      x += 2
+      this.$ctx.lineTo(x, 30 - start.h)
+    }
+    this.$ctx.stroke()
+  }
+})