project init

app.json

@@ -11,10 +11,13 @@
         "t-button": "miniprogram_npm/tdesign-miniprogram/button/button",
         "t-divider": "miniprogram_npm/tdesign-miniprogram/divider/divider",
         "t-result": "miniprogram_npm/tdesign-miniprogram/result/result",
+        "t-cell-group": "miniprogram_npm/tdesign-miniprogram/cell-group/cell-group",
         "t-cell": "miniprogram_npm/tdesign-miniprogram/cell/cell",
         "t-date-time-picker": "miniprogram_npm/tdesign-miniprogram/date-time-picker/date-time-picker",
         "t-tabs": "miniprogram_npm/tdesign-miniprogram/tabs/tabs",
-        "t-tab-panel": "miniprogram_npm/tdesign-miniprogram/tabs/tab-panel"
+        "t-tab-panel": "miniprogram_npm/tdesign-miniprogram/tabs/tab-panel",
+        "t-empty": "miniprogram_npm/tdesign-miniprogram/empty/empty",
+        "t-progress": "miniprogram_npm/tdesign-miniprogram/progress/progress"
     },
     "window": {
         "backgroundTextStyle": "dark",

app.wxss

@@ -12,18 +12,37 @@ page {
   background: #3C4043;
   font-size: 28rpx;
   color: whitesmoke;
-  /*--td-primary-color: #3C4043;*/
+  --td-primary-color: orange;
   --td-bg-color: #3C4043;
   --td-bg-color-fade: red;
   --td-bg-color-block: #2B2B2B;
   --td-color-block-check: #777777;
 }
 /* 记账类型颜色 */
-.t_income {
+.t-color-income {
-  --td-cell-note-color: red
+  color: red;
 }
-.t_expend {
+.t-color-expend {
-  --td-cell-note-color: green
+  color: green;
+}
+.t-color-transfer {
+  color: blue;
+}
+.t-color-repayment {
+  color: yellow;
+}
+/* 记账类型颜色 */
+.t-cell-income {
+  --td-cell-note-color: red;
+}
+.t-cell-expend {
+  --td-cell-note-color: green;
+}
+.t-cell-transfer {
+  --td-cell-note-color: blue;
+}
+.t-cell-repayment {
+  --td-cell-note-color: yellow;
 }
 /* 字体大小 */
 .font_big {
@@ -38,7 +57,7 @@ page {
   justify-content: flex-start;
 }
 .space_box {
-  padding: 20rpx;
+  padding: 0 20rpx;
   display: flex;
   justify-content: space-between;
 }

ec-canvas/ec-canvas.js

@@ -0,0 +1,265 @@
+import WxCanvas from './wx-canvas';
+import * as echarts from './echarts';
+
+let ctx;
+
+function compareVersion(v1, v2) {
+  v1 = v1.split('.')
+  v2 = v2.split('.')
+  const len = Math.max(v1.length, v2.length)
+
+  while (v1.length < len) {
+    v1.push('0')
+  }
+  while (v2.length < len) {
+    v2.push('0')
+  }
+
+  for (let i = 0; i < len; i++) {
+    const num1 = parseInt(v1[i])
+    const num2 = parseInt(v2[i])
+
+    if (num1 > num2) {
+      return 1
+    } else if (num1 < num2) {
+      return -1
+    }
+  }
+  return 0
+}
+
+Component({
+  properties: {
+    canvasId: {
+      type: String,
+      value: 'ec-canvas'
+    },
+
+    ec: {
+      type: Object
+    },
+
+    forceUseOldCanvas: {
+      type: Boolean,
+      value: true
+    }
+  },
+
+  data: {
+    isUseNewCanvas: true
+  },
+
+  ready: function () {
+    // Disable prograssive because drawImage doesn't support DOM as parameter
+    // See https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html
+    echarts.registerPreprocessor(option => {
+      if (option && option.series) {
+        if (option.series.length > 0) {
+          option.series.forEach(series => {
+            series.progressive = 0;
+          });
+        }
+        else if (typeof option.series === 'object') {
+          option.series.progressive = 0;
+        }
+      }
+    });
+
+    if (!this.data.ec) {
+      console.warn('组件需绑定 ec 变量，例：<ec-canvas id="mychart-dom-bar" '
+        + 'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>');
+      return;
+    }
+
+    if (!this.data.ec.lazyLoad) {
+      this.init();
+    }
+  },
+
+  methods: {
+    init: function (callback) {
+      const version = wx.getSystemInfoSync().SDKVersion
+
+      const canUseNewCanvas = compareVersion(version, '2.9.0') >= 0;
+      const forceUseOldCanvas = this.data.forceUseOldCanvas;
+      const isUseNewCanvas = canUseNewCanvas && !forceUseOldCanvas;
+      this.setData({ isUseNewCanvas });
+
+      if (forceUseOldCanvas && canUseNewCanvas) {
+        console.warn('开发者强制使用旧canvas,建议关闭');
+      }
+
+      if (isUseNewCanvas) {
+        // console.log('微信基础库版本大于2.9.0，开始使用<canvas type="2d"/>');
+        // 2.9.0 可以使用 <canvas type="2d"></canvas>
+        this.initByNewWay(callback);
+      } else {
+        const isValid = compareVersion(version, '1.9.91') >= 0
+        if (!isValid) {
+          console.error('微信基础库版本过低，需大于等于 1.9.91。'
+            + '参见：https://github.com/ecomfe/echarts-for-weixin'
+            + '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82');
+          return;
+        } else {
+          console.warn('建议将微信基础库调整大于等于2.9.0版本。升级后绘图将有更好性能');
+          this.initByOldWay(callback);
+        }
+      }
+    },
+
+    initByOldWay(callback) {
+      // 1.9.91 <= version < 2.9.0：原来的方式初始化
+      ctx = wx.createCanvasContext(this.data.canvasId, this);
+      const canvas = new WxCanvas(ctx, this.data.canvasId, false);
+
+      echarts.setCanvasCreator(() => {
+        return canvas;
+      });
+      // const canvasDpr = wx.getSystemInfoSync().pixelRatio // 微信旧的canvas不能传入dpr
+      const canvasDpr = 1
+      var query = wx.createSelectorQuery().in(this);
+      query.select('.ec-canvas').boundingClientRect(res => {
+        if (typeof callback === 'function') {
+          this.chart = callback(canvas, res.width, res.height, canvasDpr);
+        }
+        else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
+          this.chart = this.data.ec.onInit(canvas, res.width, res.height, canvasDpr);
+        }
+        else {
+          this.triggerEvent('init', {
+            canvas: canvas,
+            width: res.width,
+            height: res.height,
+            canvasDpr: canvasDpr // 增加了dpr，可方便外面echarts.init
+          });
+        }
+      }).exec();
+    },
+
+    initByNewWay(callback) {
+      // version >= 2.9.0：使用新的方式初始化
+      const query = wx.createSelectorQuery().in(this)
+      query
+        .select('.ec-canvas')
+        .fields({ node: true, size: true })
+        .exec(res => {
+          const canvasNode = res[0].node
+          this.canvasNode = canvasNode
+
+          const canvasDpr = wx.getSystemInfoSync().pixelRatio
+          const canvasWidth = res[0].width
+          const canvasHeight = res[0].height
+
+          const ctx = canvasNode.getContext('2d')
+
+          const canvas = new WxCanvas(ctx, this.data.canvasId, true, canvasNode)
+          echarts.setCanvasCreator(() => {
+            return canvas
+          })
+
+          if (typeof callback === 'function') {
+            this.chart = callback(canvas, canvasWidth, canvasHeight, canvasDpr)
+          } else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
+            this.chart = this.data.ec.onInit(canvas, canvasWidth, canvasHeight, canvasDpr)
+          } else {
+            this.triggerEvent('init', {
+              canvas: canvas,
+              width: canvasWidth,
+              height: canvasHeight,
+              dpr: canvasDpr
+            })
+          }
+        })
+    },
+    canvasToTempFilePath(opt) {
+      if (this.data.isUseNewCanvas) {
+        // 新版
+        const query = wx.createSelectorQuery().in(this)
+        query
+          .select('.ec-canvas')
+          .fields({ node: true, size: true })
+          .exec(res => {
+            const canvasNode = res[0].node
+            opt.canvas = canvasNode
+            wx.canvasToTempFilePath(opt)
+          })
+      } else {
+        // 旧的
+        if (!opt.canvasId) {
+          opt.canvasId = this.data.canvasId;
+        }
+        ctx.draw(true, () => {
+          wx.canvasToTempFilePath(opt, this);
+        });
+      }
+    },
+
+    touchStart(e) {
+      if (this.chart && e.touches.length > 0) {
+        var touch = e.touches[0];
+        var handler = this.chart.getZr().handler;
+        handler.dispatch('mousedown', {
+          zrX: touch.x,
+          zrY: touch.y,
+          preventDefault: () => {},
+          stopImmediatePropagation: () => {},
+          stopPropagation: () => {}
+        });
+        handler.dispatch('mousemove', {
+          zrX: touch.x,
+          zrY: touch.y,
+          preventDefault: () => {},
+          stopImmediatePropagation: () => {},
+          stopPropagation: () => {}
+        });
+        handler.processGesture(wrapTouch(e), 'start');
+      }
+    },
+
+    touchMove(e) {
+      if (this.chart && e.touches.length > 0) {
+        var touch = e.touches[0];
+        var handler = this.chart.getZr().handler;
+        handler.dispatch('mousemove', {
+          zrX: touch.x,
+          zrY: touch.y,
+          preventDefault: () => {},
+          stopImmediatePropagation: () => {},
+          stopPropagation: () => {}
+        });
+        handler.processGesture(wrapTouch(e), 'change');
+      }
+    },
+
+    touchEnd(e) {
+      if (this.chart) {
+        const touch = e.changedTouches ? e.changedTouches[0] : {};
+        var handler = this.chart.getZr().handler;
+        handler.dispatch('mouseup', {
+          zrX: touch.x,
+          zrY: touch.y,
+          preventDefault: () => {},
+          stopImmediatePropagation: () => {},
+          stopPropagation: () => {}
+        });
+        handler.dispatch('click', {
+          zrX: touch.x,
+          zrY: touch.y,
+          preventDefault: () => {},
+          stopImmediatePropagation: () => {},
+          stopPropagation: () => {}
+        });
+        handler.processGesture(wrapTouch(e), 'end');
+      }
+    }
+  }
+});
+
+function wrapTouch(event) {
+  for (let i = 0; i < event.touches.length; ++i) {
+    const touch = event.touches[i];
+    touch.offsetX = touch.x;
+    touch.offsetY = touch.y;
+  }
+  return event;
+}

ec-canvas/ec-canvas.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

ec-canvas/ec-canvas.wxml

@@ -0,0 +1,4 @@
+<!-- 新的：接口对其了H5 -->
+<canvas wx:if="{{isUseNewCanvas}}" type="2d" class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>
+<!-- 旧的 -->
+<canvas wx:else class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>

ec-canvas/ec-canvas.wxss

@@ -0,0 +1,4 @@
+.ec-canvas {
+  width: 100%;
+  height: 100%;
+}

ec-canvas/wx-canvas.js

@@ -0,0 +1,111 @@
+export default class WxCanvas {
+  constructor(ctx, canvasId, isNew, canvasNode) {
+    this.ctx = ctx;
+    this.canvasId = canvasId;
+    this.chart = null;
+    this.isNew = isNew
+    if (isNew) {
+      this.canvasNode = canvasNode;
+    }
+    else {
+      this._initStyle(ctx);
+    }
+
+    // this._initCanvas(zrender, ctx);
+
+    this._initEvent();
+  }
+
+  getContext(contextType) {
+    if (contextType === '2d') {
+      return this.ctx;
+    }
+  }
+
+  // canvasToTempFilePath(opt) {
+  //   if (!opt.canvasId) {
+  //     opt.canvasId = this.canvasId;
+  //   }
+  //   return wx.canvasToTempFilePath(opt, this);
+  // }
+
+  setChart(chart) {
+    this.chart = chart;
+  }
+
+  addEventListener() {
+    // noop
+  }
+
+  attachEvent() {
+    // noop
+  }
+
+  detachEvent() {
+    // noop
+  }
+
+  _initCanvas(zrender, ctx) {
+    zrender.util.getContext = function () {
+      return ctx;
+    };
+
+    zrender.util.$override('measureText', function (text, font) {
+      ctx.font = font || '12px sans-serif';
+      return ctx.measureText(text);
+    });
+  }
+
+  _initStyle(ctx) {
+    ctx.createRadialGradient = () => {
+      return ctx.createCircularGradient(arguments);
+    };
+  }
+
+  _initEvent() {
+    this.event = {};
+    const eventNames = [{
+      wxName: 'touchStart',
+      ecName: 'mousedown'
+    }, {
+      wxName: 'touchMove',
+      ecName: 'mousemove'
+    }, {
+      wxName: 'touchEnd',
+      ecName: 'mouseup'
+    }, {
+      wxName: 'touchEnd',
+      ecName: 'click'
+    }];
+    eventNames.forEach(name => {
+      this.event[name.wxName] = e => {
+        const touch = e.touches[0];
+        this.chart.getZr().handler.dispatch(name.ecName, {
+          zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
+          zrY: name.wxName === 'tap' ? touch.clientY : touch.y,
+          preventDefault: () => {},
+          stopImmediatePropagation: () => {},
+          stopPropagation: () => {}
+        });
+      };
+    });
+  }
+
+  set width(w) {
+    if (this.canvasNode) this.canvasNode.width = w
+  }
+  set height(h) {
+    if (this.canvasNode) this.canvasNode.height = h
+  }
+
+  get width() {
+    if (this.canvasNode)
+      return this.canvasNode.width
+    return 0
+  }
+  get height() {
+    if (this.canvasNode)
+      return this.canvasNode.height
+    return 0
+  }
+}

miniprogram_npm/tdesign-miniprogram/icon/icon.wxss

@@ -47,7 +47,7 @@
   font-variant: normal;
   text-transform: none;
   line-height: 1;
-  text-align: center;
+  /*text-align: center;*/
   display: block;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;

pages/account/index.js

@@ -1,5 +1,23 @@
 Page({
-    data: {},
+    data: {
+        noMoney : "****",
+        hiddenMoney: false,
+        cashAccountList : [
+            {"name":"现金","money":"2000.00"},
+            {"name":"银行卡","money":"30500.03"}
+        ],
+        visualAccountList : [
+            {"name":"支付宝","money":"200.00"},
+            {"name":"微信","money":"00.03"}
+        ],
+        oweAccountList : [
+            {"name":"信用卡","money":"-200.00"},
+        ],
+        payAccountList : [
+            {"name":"基金","money":"31200.00"},
+            {"name":"长江证券","money":"200.00"},
+        ],
+    },
     onLoad: function (options) {
 
     },
@@ -8,4 +26,11 @@ Page({
             wx.hideHomeButton()
         }
     },
+    changeHidden () {
+        let isHidden = this.data.hiddenMoney;
+        this.setData({
+            hiddenMoney : !isHidden
+        });
+    }
+
 });

pages/account/index.wxml

@@ -1,2 +1,45 @@
-账户
+<view class="main_look">
+    <view class="look_content">
+        <view class="pay_look">
+            <view class="inline_box font_big">净资产<t-icon bind:tap="changeHidden" name="{{ hiddenMoney ? 'browse' : 'browse-off'}}"/></view>
+            <text class="font_big">{{ hiddenMoney ? noMoney : 1200.00 }}</text>
+        </view>
+        <view class="balance_look">
+            <text>总资产: {{ hiddenMoney ? noMoney : 900.00 }}</text>
+            <text> | </text>
+            <text>总负债: {{ hiddenMoney ? noMoney : -300.00 }}</text>
+        </view>
+    </view>
+</view>
+<view class="padding_box">
+    <t-divider dashed content="现金账户"/>
+    <t-cell wx:for="{{cashAccountList}}" wx:key="index"
+            title="{{item.name}}"
+            align="top"
+            image="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png"
+            note="{{hiddenMoney ? noMoney : item.money}}"
+    />
+    <t-divider dashed content="虚拟账户"/>
+    <t-cell wx:for="{{visualAccountList}}" wx:key="index"
+            title="{{item.name}}"
+            align="top"
+            image="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png"
+            note="{{hiddenMoney ? noMoney : item.money}}"
+    />
+    <t-divider dashed content="负债账户"/>
+    <t-cell wx:for="{{oweAccountList}}" wx:key="index"
+            title="{{item.name}}"
+            align="top"
+            image="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png"
+            note="{{hiddenMoney ? noMoney : item.money}}"
+    />
+    <t-divider dashed content="投资账户"/>
+    <t-cell wx:for="{{payAccountList}}" wx:key="index"
+            title="{{item.name}}"
+            align="top"
+            image="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png"
+            note="{{hiddenMoney ? noMoney : item.money}}"
+    />
+    <view class="placeholder"/>
+</view>
 <foot-tab value="label_3"/>

pages/account/index.wxss

@@ -0,0 +1,26 @@
+.main_look {
+    margin: 0 20rpx;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    height: 200rpx;
+    background-image: url("https://yigger.cn/covers/default-7.jpeg");
+    background-size:100% 100%;
+}
+.look_content {
+    font-weight: bold;
+}
+.pay_look {
+    padding: 0 20rpx;
+}
+.balance_look {
+    padding: 20rpx;
+    /*display: flex;*/
+    /*justify-content: space-between;*/
+}
+.t-divider__content {
+    --td-divider-content-font-size:25rpx;
+}
+t-cell {
+    --td-cell-note-color: orange;
+}

pages/chart/index.js

@@ -1,3 +1,113 @@
+import * as echarts from '../../ec-canvas/echarts';
+function initPieChart(canvas, width, height, dpr) {
+    const chart = echarts.init(canvas, null, {
+        width: 400,
+        height: 250,
+        devicePixelRatio: dpr // new
+    });
+    canvas.setChart(chart);
+    var option = {
+        backgroundColor: "#3C4043",
+        series: [{
+            label: {
+                normal: {
+                    fontSize: 14
+                }
+            },
+            type: 'pie',
+            center: ['50%', '50%'],
+            radius: ['0%', '70%'],
+            data: [{
+                value: 55,
+                name: '数码产品'
+            }, {
+                value: 20,
+                name: '零食'
+            }, {
+                value: 10,
+                name: '娱乐'
+            }, {
+                value: 20,
+                name: '房贷'
+            }, {
+                value: 38,
+                name: '房租'
+            }]
+        }]
+    };
+
+    chart.setOption(option);
+    return chart;
+}
+
+function initLineChart(canvas, width, height, dpr) {
+    const chart = echarts.init(canvas, null, {
+        width: 400,
+        height: 300,
+        devicePixelRatio: dpr // new
+    });
+    canvas.setChart(chart);
+
+    var option = {
+        title: {
+            text: '的撒打',
+            left: 'center'
+        },
+        legend: {
+            data: ['支出', '收入', '转账','还款'],
+            top: 20,
+            left: 'center',
+            backgroundColor: 'white',
+            z: 100
+        },
+        grid: {
+            containLabel: true
+        },
+        tooltip: {
+            show: true,
+            trigger: 'axis'
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+            // show: false
+        },
+        yAxis: {
+            x: 'center',
+            type: 'value',
+            splitLine: {
+                lineStyle: {
+                    type: 'dashed'
+                }
+            }
+            // show: false
+        },
+        series: [{
+            name: '支出',
+            type: 'line',
+            smooth: true,
+            data: [18, 36, 65, 30, 78, 40, 33]
+        }, {
+            name: '收入',
+            type: 'line',
+            smooth: true,
+            data: [12, 50, 51, 35, 70, 30, 20]
+        }, {
+            name: '转账',
+            type: 'line',
+            smooth: true,
+            data: [10, 30, 31, 50, 40, 20, 10]
+        }, {
+            name: '还款',
+            type: 'line',
+            smooth: true,
+            data: [50, 80, 11, 25, 30, 110, 20]
+        }]
+    };
+    chart.setOption(option);
+    return chart;
+}
 Page({
     data: {
         // 指定选择区间起始值
@@ -5,6 +115,16 @@ Page({
         end: '2030-09-09 12:12:12',
         showDateVisible:false,
         showDate:'2022-01',
+        accountList: [
+            {"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
+            {"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
+        ],
+        ecPie: {
+            onInit: initPieChart
+        },
+        ecLine: {
+            onInit: initLineChart
+        }
     },
     onLoad: function (options) {
 
@@ -15,8 +135,6 @@ Page({
         }
     },
     showPicker(e) {
-        console.log('12312312')
-        console.log(e.currentTarget.dataset)
         const { mode } = e.currentTarget.dataset;
         this.setData({
             mode,
@@ -37,7 +155,6 @@ Page({
             [mode]: value
             // [`${mode}Text`]: value,
         });
-
         this.hidePicker();
     }
 

pages/chart/index.json

@@ -1,5 +1,6 @@
 {
   "usingComponents": {
+    "ec-canvas": "/ec-canvas/ec-canvas"
   },
   "navigationBarTitleText": "统计"
 }

pages/chart/index.wxml

@@ -3,22 +3,70 @@
 </view>
 <t-tabs defaultValue="{{0}}" t-class="custom-tabs" theme="card">
     <t-tab-panel label="总览" value="0" class="tab_content">
-        <view class="space_box">
+        <view class="space_box font_big">
-            <text>总资产\n {{1203.00}}</text>
+            <text class="t-color-expend">支出\n {{1203.00}}</text>
-            <text>总资产\n {{1203.00}}</text>
+            <text class="t-color-income">收入\n {{1203.00}}</text>
-            <text>总资产\n {{1203.00}}</text>
+            <text class="t-color-transfer">转账\n {{1203.00}}</text>
-            <text>总资产\n {{1203.00}}</text>
+            <text class="t-color-repayment">还款\n {{1203.00}}</text>
-            <text>总资产\n {{1203.00}}</text>
+        </view>
+        <view class="padding_box">
+            <t-divider dashed content="账单明细"/>
+            <view wx:if="{{accountList != null && accountList.length > 0}}">
+                <t-cell wx:for="{{accountList}}" wx:key="index"
+                        title="{{item.title}}"
+                        description="{{item.dateTime}} • {{item.from}}"
+                        align="top"
+                        image="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png"
+                        note="{{item.money}}"
+                        class="t-cell-{{item.type}}"
+                />
+            </view>
+            <view wx:else class="empty-view" >
+                <t-empty icon="chart-bubble" description="今日还未记账" />
+            </view>
         </view>
     </t-tab-panel>
-    <t-tab-panel label="分类" value="1" class="tab_content">
+    <t-tab-panel label="支出分类" value="1">
-        Jodijawoidjwoaidjwaoij
+        <view class="chart-box">
+            <ec-canvas id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ecPie }}"></ec-canvas>
+            <view class="padding_box">
+                <t-progress label="数码产品55%" theme="plump" percentage="{{55}}" status="{{55 > 80 ? 'error' : 'success' }}" />
+                <t-divider/>
+                <t-progress label="零食20%" theme="plump" percentage="{{20}}" status="{{81 > 80 ? 'error' : 'success' }}" />
+                <t-divider/>
+                <t-progress label="娱乐10%" theme="plump" percentage="{{10}}" status="{{10 > 80 ? 'error' : 'success' }}" />
+                <t-divider/>
+                <t-progress label="房贷20%" theme="plump" percentage="{{20}}" status="{{20 > 80 ? 'error' : 'success' }}" />
+                <t-divider/>
+                <t-progress label="房租38%" theme="plump" percentage="{{38}}" status="{{38 > 80 ? 'error' : 'success' }}" />
+                <t-divider/>
+            </view>
+        </view>
     </t-tab-panel>
-    <t-tab-panel label="趋势" value="2" class="tab_content">
+    <t-tab-panel label="趋势" value="2">
-
+        <view class="chart-box">
+            <ec-canvas id="mychart-dom-line" canvas-id="mychart-line" ec="{{ ecLine }}"></ec-canvas>
+        </view>
     </t-tab-panel>
-    <t-tab-panel label="排行" value="3" class="tab_content">
+    <t-tab-panel label="排行" value="3">
-
+        <t-divider/>
+        <t-tabs defaultValue="{{0}}" t-class="custom-tabs" theme="card">
+            <t-tab-panel label="支出" value="0">
+                <t-divider/>
+                <view class="test">
+                    <t-progress label="数码产品45%" theme="plump" percentage="{{45}}" status="error" />
+                    <t-progress label="房租25%" theme="plump" percentage="{{25}}" status="error" />
+                    <t-progress label="干饭10%" theme="plump" percentage="{{15}}" status="error" />
+                </view>
+            </t-tab-panel>
+            <t-tab-panel label="收入" value="1">
+                <t-divider/>
+                <view class="test">
+                    <t-progress label="工资收入80%" theme="plump" percentage="{{80}}" status="success" />
+                    <t-progress label="捡钱20%" theme="plump" percentage="{{20}}" status="success" />
+                </view>
+            </t-tab-panel>
+        </t-tabs>
     </t-tab-panel>
 </t-tabs>
 <view class="placeholder"/>

pages/chart/index.wxss

@@ -1,4 +1,25 @@
-.tab_content {
+.chart-box {
-    height: 100%;
+    width:100%;
-    background: #3C4043 !important;
+    height:500rpx;
+    position: absolute;
+    top: 100rpx;
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+ec-canvas {
+    width: 100%;
+    height: 100%;
+}
+.test .t-progress--plump {
+    height: 100rpx !important;
+    border-bottom: 2rpx solid orange;
+    border-radius: 0 !important;
+    /*--td-font-size-s: 28rpx;*/
+}
+.test .t-progress__inner {
+    --td-radius-round: 0;
+}
+.test .t-progress__bar {
+    --td-progress-track-bg-color: --td-bg-color;
 }

pages/index/index.js

@@ -15,11 +15,27 @@ Page({
         ]
     },
     onLoad: function (options) {
-
     },
     onShow: function () {
         if (wx.canIUse('hideHomeButton')) {
             wx.hideHomeButton()
         }
+        let isRun = wx.getStorageSync("isRun");
+        if (!isRun) {
+            this.startInter();
+        }
     },
+    /**
+     * 启动定时器
+     */
+    startInter : function(){
+        wx.setStorageSync("isRun",true);
+        let times = 1;
+        setInterval(
+            function () {
+                times ++;
+                // 提交远程服务器修改的内容，降低服务器压力，如果网络异常，也可以正常操作
+                console.log('setInterval 每过500毫秒执行一次任务' + times)
+            }, 5000);
+    }
 });

pages/index/index.json

@@ -1,6 +1,5 @@
 {
   "usingComponents": {
-    "t-progress": "/miniprogram_npm/tdesign-miniprogram/progress/progress"
   },
   "navigationBarTitleText": "首页"
 }

pages/index/index.wxml

@@ -24,14 +24,20 @@
 <view class="padding_box">
     <t-button theme="primary" size="medium" block>记一笔</t-button>
     <t-divider dashed content="今日记账清单"/>
-<t-cell wx:for="{{todayList}}" wx:key="index"
+    <view wx:if="{{todayList != null && todayList.length > 0}}">
-        title="{{item.title}}"
+        <t-cell wx:for="{{todayList}}" wx:key="index"
-        description="{{item.dateTime}} • {{item.from}}"
+                title="{{item.title}}"
-        align="top"
+                description="{{item.dateTime}} • {{item.from}}"
-        image="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png"
+                align="top"
-        note="{{item.money}}"
+                image="https://tdesign.gtimg.com/mobile/%E5%9B%BE%E7%89%87.png"
-        class="t_{{item.type}}"
+                note="{{item.money}}"
-/>
+                class="t-cell-{{item.type}}"
+        />
+    </view>
+    <view wx:else class="empty-view" >
+        <t-empty icon="chart-bubble" description="今日还未记账" />
+    </view>
+<!--    <t-empty wx:else t-class="empty-cls" t-class-image="t-empty__image" image="{{image}}" description="描述文字" />-->
 </view>
 <view class="placeholder"/>
 <foot-tab value="label_1"/>

pages/index/index.wxss

@@ -18,4 +18,7 @@
     display: flex;
     justify-content: space-between;
 }
+.empty-view {
+    margin-top: 200rpx;
+}
 

pages/myself/index.wxml

@@ -1,2 +1,26 @@
-我的
+<t-cell-group theme="card">
+    <t-cell title="浙A88FU7" description="下午好！">
+        <view class="avatar" slot="left-icon">
+            <open-data type="userAvatarUrl" />
+        </view>
+    </t-cell>
+    <t-cell title="预算管理" arrow>
+        <t-icon name="tools" slot="left-icon" />
+    </t-cell>
+    <t-cell title="资产分类管理" arrow>
+        <t-icon name="tools" slot="left-icon" />
+    </t-cell>
+    <t-cell title="支出分类管理" arrow>
+        <t-icon name="tools" slot="left-icon" />
+    </t-cell>
+    <t-cell title="收入分类管理" arrow>
+        <t-icon name="tools" slot="left-icon" />
+    </t-cell>
+    <t-cell title="反馈建议" arrow>
+        <t-icon name="chat" slot="left-icon" />
+    </t-cell>
+    <t-cell title="关于我们" arrow>
+        <t-icon name="gift" slot="left-icon" />
+    </t-cell>
+</t-cell-group>
 <foot-tab value="label_4"/>

pages/myself/index.wxss

@@ -0,0 +1,6 @@
+.avatar {
+    width: 96rpx;
+    height: 96rpx;
+    border-radius: 50%;
+    overflow: hidden;
+}