图标统计调整

app.js

@@ -20,33 +20,33 @@ App({
     TRANSFER: 'TRANSFER',
     REPAYMENT: 'REPAYMENT',
     billIcon : [
-      {label: '度假', icon: '/image/bill/0.png'},
+      {icon: '/image/bill/0.png'},
-      {label: '电影', icon: '/image/bill/1.png'},
+      {icon: '/image/bill/1.png'},
-      {label: '聚餐', icon: '/image/bill/2.png'},
+      {icon: '/image/bill/2.png'},
-      {label: '网购', icon: '/image/bill/3.png'},
+      {icon: '/image/bill/3.png'},
-      {label: '医疗', icon: '/image/bill/4.png'},
+      {icon: '/image/bill/4.png'},
-      {label: '游戏', icon: '/image/bill/5.png'},
+      {icon: '/image/bill/5.png'},
-      {label: '孩子', icon: '/image/bill/6.png'},
+      {icon: '/image/bill/6.png'},
-      {label: '化妆品', icon: '/image/bill/7.png'},
+      {icon: '/image/bill/7.png'},
-      {label: '生日', icon: '/image/bill/8.png'},
+      {icon: '/image/bill/8.png'},
-      {label: '车票', icon: '/image/bill/9.png'},
+      {icon: '/image/bill/9.png'},
-      {label: '水果', icon: '/image/bill/10.png'},
+      {icon: '/image/bill/10.png'},
-      {label: '红包', icon: '/image/bill/11.png'},
+      {icon: '/image/bill/11.png'},
-      {label: '借钱', icon: '/image/bill/11.png'}
+      {icon: '/image/bill/12.png'}
     ],
     accountIcon : [
-      {label: '工商银行', icon: '/image/account/0.png'},
+      {icon: '/image/account/0.png'},
-      {label: '基金', icon: '/image/account/1.png'},
+      {icon: '/image/account/1.png'},
-      {label: '交通银行', icon: '/image/account/2.png'},
+      {icon: '/image/account/2.png'},
-      {label: '农信社', icon: '/image/account/3.png'},
+      {icon: '/image/account/3.png'},
-      {label: '农业银行', icon: '/image/account/4.png'},
+      {icon: '/image/account/4.png'},
-      {label: '建设银行', icon: '/image/account/5.png'},
+      {icon: '/image/account/5.png'},
-      {label: '招商银行', icon: '/image/account/6.png'},
+      {icon: '/image/account/6.png'},
-      {label: '中国银行', icon: '/image/account/7.png'},
+      {icon: '/image/account/7.png'},
-      {label: '现金', icon: '/image/account/8.png'},
+      {icon: '/image/account/8.png'},
-      {label: '微信', icon: '/image/account/9.png'},
+      {icon: '/image/account/9.png'},
-      {label: '负债', icon: '/image/account/10.png'},
+      {icon: '/image/account/10.png'},
-      {label: '支付宝', icon: '/image/account/11.png'}
+      {icon: '/image/account/11.png'}
     ]
   },
   $api: api,

app.wxss

@@ -89,7 +89,6 @@ t-cell {
 }
 /* 占位置 */
 .empty-view {
-  color: red;
   margin-top: 200rpx;
 }
 .placeholder {

pages/account/detail/index.js

@@ -27,6 +27,9 @@ Page({
         this.setData({dateRange,dateRangeText})
     },
     onShow() {
+        this.updateList()
+    },
+    updateList() {
         app.$api.listBillByAccount({
             sid:this.data.sid,
             dateRange:this.data.dateRangeText,
@@ -55,6 +58,7 @@ Page({
             dateRange: value,
             dateRangeText: valueText
         });
+        this.updateList()
     },
 
     showDialog() {

pages/chart/index.js

@@ -1,128 +1,51 @@
+const app = getApp();
 import * as echarts from '../../ec-canvas/echarts';
 let pieData = [];
+let pieChart;
+let line1Chart;
 let line1Data = [];
+let line2Chart;
 let line2Data = [];
 function initPieChart(canvas, width, height, dpr) {
-    if (pieData.length <= 0){
+    pieChart = echarts.init(canvas, null, {
-        return;
-    }
-    const chart = echarts.init(canvas, null, {
         width: 400,
         height: 250,
         devicePixelRatio: dpr // new
     });
-    canvas.setChart(chart);
+    canvas.setChart(pieChart);
-    var option = {
+    let option = app.$utils.getPieOption(pieData);
-        backgroundColor: "#3C4043",
+    pieChart.setOption(option);
-        series: [{
+    pieChart.on('click', 'series.pie', function(param) {
-            label: {
-                normal: {
-                    fontSize: 14
-                }
-            },
-            type: 'pie',
-            center: ['50%', '50%'],
-            radius: ['0%', '70%'],
-            data: pieData
-        }]
-    };
-    chart.setOption(option);
-    chart.on('click', 'series.pie', function(param) {
-        console.log(param);
         wx.navigateTo({
             url: "./group/index?expendId=" + param.data.sId + '&rangeDate=' + param.data.sDate
         })
     });
-    return chart;
+    return pieChart
 }
-
 function initLineChart1(canvas, width, height, dpr) {
-    const chart = echarts.init(canvas, null, {
+    line1Chart = echarts.init(canvas, null, {
         width: 400,
         height: 300,
         devicePixelRatio: dpr // new
     });
-    canvas.setChart(chart);
+    canvas.setChart(line1Chart);
-    var option = {
+    let option = app.$utils.getDayLineOption(line1Data);
-        legend: {
+    line1Chart.setOption(option);
-            data: ['支出', '收入', '转账','还款'],
+    return line1Chart;
-            top: 20,
-            left: 'center',
-            backgroundColor: 'white',
-            z: 100
-        },
-        grid: {
-            containLabel: true
-        },
-        tooltip: {
-            show: true,
-            trigger: 'axis'
-        },
-        xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            show: false
-        },
-        yAxis: {
-            x: 'center',
-            type: 'value',
-            splitLine: {
-                lineStyle: {
-                    type: 'dashed'
-                }
-            }
-        },
-        series: line1Data
-    };
-    chart.setOption(option);
-    return chart;
 }
 function initLineChart2(canvas, width, height, dpr) {
-    const chart = echarts.init(canvas, null, {
+    line2Chart = echarts.init(canvas, null, {
         width: 400,
         height: 300,
         devicePixelRatio: dpr // new
     });
-    canvas.setChart(chart);
+    canvas.setChart(line2Chart);
-    var option = {
+    let option = app.$utils.getMonthLineOption(line2Data);
-        legend: {
+    line2Chart.setOption(option);
-            data: ['支出', '收入', '转账','还款'],
+    return line2Chart;
-            top: 20,
-            left: 'center',
-            backgroundColor: 'white',
-            z: 100
-        },
-        grid: {
-            containLabel: true
-        },
-        tooltip: {
-            show: true,
-            trigger: 'axis'
-        },
-        xAxis: {
-            type: 'category',
-            boundaryGap: false,
-            show: false
-        },
-        yAxis: {
-            x: 'center',
-            type: 'value',
-            splitLine: {
-                lineStyle: {
-                    type: 'dashed'
-                }
-            }
-            // show: false
-        },
-        series: line2Data
-    };
-    chart.setOption(option);
-    return chart;
 }
-const app = getApp();
 Page({
     data: {
-        // 指定选择区间起始值
         start: '2000-01-01 00:00:00',
         end: '2030-09-09 12:12:12',
         showDateVisible:false,
@@ -172,6 +95,8 @@ Page({
                         });
                     })
                 }
+                let option = app.$utils.getPieOption(pieData);
+                pieChart.setOption(option);
                 this.setData({payTypeList})
             }
         })
@@ -228,6 +153,10 @@ Page({
                     smooth: true,
                     data: res.data.lineMonthRepayment
                 })
+                let line1Option = app.$utils.getDayLineOption(line1Data);
+                line1Chart.setOption(line1Option);
+                let line2Option = app.$utils.getDayLineOption(line2Data);
+                line2Chart.setOption(line2Option);
             }
         })
         app.$api.listBillByAMonth({'rangeDate':this.data.showDate}).then(res => {
@@ -273,9 +202,8 @@ Page({
             [mode]: value
             // [`${mode}Text`]: value,
         });
-        // this.updateView()
+        this.updateView()
         this.hidePicker()
-        wx.redirectTo({url:"./index?rangeDate=" + this.data.showDate})
     }
 
 });

pages/chart/index.wxml

@@ -44,24 +44,21 @@
                     />
                 </t-cell-group>
             </view>
-            <view wx:else class="empty-view" >
+            <t-empty wx:else icon="chart-bubble" description="本月无账单记录" />
-                <t-empty icon="chart-bubble" description="本月无账单记录" />
-            </view>
             <view class="placeholder"/>
         </view>
     </t-tab-panel>
-    <t-tab-panel label="趋势" value="2">
+    <t-tab-panel label="当月趋势" value="2">
         <view class="chart-box">
-            <view class="chart_title">本月</view>
             <ec-canvas id="mychart-dom-line1" canvas-id="mychart-line1" ec="{{ ecLine1 }}"></ec-canvas>
         </view>
-        <view class="chart-box2">
+    </t-tab-panel>
-            <view class="chart-title2">近6月</view>
+    <t-tab-panel label="近6月趋势" value="3">
+        <view class="chart-box">
             <ec-canvas id="mychart-dom-line2" canvas-id="mychart-line2" ec="{{ ecLine2 }}"></ec-canvas>
-            <view class="chart-chart-bottom"></view>
         </view>
     </t-tab-panel>
-    <t-tab-panel label="排行" value="3">
+    <t-tab-panel label="排行" value="4">
         <t-tabs defaultValue="{{0}}" t-class="custom-tabs" theme="card">
             <t-tab-panel label="支出" value="0">
                 <view class="tabs_crevice"/>

pages/chart/index.wxss

@@ -2,29 +2,11 @@
     width:100%;
     height:500rpx;
     position: absolute;
-    top: 78rpx;
+    top: 200rpx;
     bottom: 0;
     left: -20rpx;
     right: 0;
 }
-.chart-box2 {
-    width:100%;
-    height:500rpx;
-    position: absolute;
-    top: 498rpx;
-    left: -20rpx;
-    right: 0;
-}
-.chart_title{
-    margin-top: 18rpx;
-    margin-left: 25rpx;
-    color: orange;
-}
-.chart-title2{
-    margin-top: 50rpx;
-    margin-left: 25rpx;
-    color: orange;
-}
 ec-canvas {
     width: 100%;
     height: 100%;

utils/util.js

@@ -27,6 +27,95 @@ const formatNumber = n => {
   return n[1] ? n : `0${n}`
 }
 
+const getPieOption = pieData => {
+  let option = {
+    backgroundColor: "#3C4043",
+    series: [{
+      label: {
+        normal: {
+          fontSize: 14
+        }
+      },
+      type: 'pie',
+      center: ['50%', '50%'],
+      radius: ['0%', '70%'],
+      data: pieData
+    }]
+  }
+  return option
+}
+
+const getDayLineOption = lineData => {
+  let option = {
+    legend: {
+      data: ['支出', '收入', '转账','还款'],
+      top: 20,
+      left: 'center',
+      backgroundColor: 'white',
+      z: 100
+    },
+    grid: {
+      containLabel: true
+    },
+    tooltip: {
+      show: true,
+      trigger: 'axis'
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      show: false
+    },
+    yAxis: {
+      x: 'center',
+      type: 'value',
+      splitLine: {
+        lineStyle: {
+          type: 'dashed'
+        }
+      }
+    },
+    series: lineData
+  }
+  return option
+}
+
+const getMonthLineOption = lineData => {
+  let option = {
+    legend: {
+      data: ['支出', '收入', '转账','还款'],
+      top: 20,
+      left: 'center',
+      backgroundColor: 'white',
+      z: 100
+    },
+    grid: {
+      containLabel: true
+    },
+    tooltip: {
+      show: true,
+      trigger: 'axis'
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      show: false
+    },
+    yAxis: {
+      x: 'center',
+      type: 'value',
+      splitLine: {
+        lineStyle: {
+          type: 'dashed'
+        }
+      }
+      // show: false
+    },
+    series: lineData
+  };
+  return option
+}
+
 const getToken = () => {
   const map = ['E','q','u','i','n','W','A','b','C','d']
   const errKey = ['f','g','h','j','k','l']
@@ -56,5 +145,8 @@ module.exports = {
   formatTime,
   formatDate,
   formatDateMonth,
-  getToken
+  getToken,
+  getPieOption,
+  getDayLineOption,
+  getMonthLineOption
 }