图标统计调整

2023-02-11 13:36:19 +08:00
parent 4f492c259a
commit 5a43cf3f0b
7 changed files with 156 additions and 154 deletions
--- a/app.js
+++ b/app.js
@@ -20,33 +20,33 @@ App({
    TRANSFER: 'TRANSFER',
    REPAYMENT: 'REPAYMENT',
    billIcon : [
-      {label: '度假', icon: '/image/bill/0.png'},
-      {label: '电影', icon: '/image/bill/1.png'},
-      {label: '聚餐', icon: '/image/bill/2.png'},
-      {label: '网购', icon: '/image/bill/3.png'},
-      {label: '医疗', icon: '/image/bill/4.png'},
-      {label: '游戏', icon: '/image/bill/5.png'},
-      {label: '孩子', icon: '/image/bill/6.png'},
-      {label: '化妆品', icon: '/image/bill/7.png'},
-      {label: '生日', icon: '/image/bill/8.png'},
-      {label: '车票', icon: '/image/bill/9.png'},
-      {label: '水果', icon: '/image/bill/10.png'},
-      {label: '红包', icon: '/image/bill/11.png'},
-      {label: '借钱', icon: '/image/bill/11.png'}
+      {icon: '/image/bill/0.png'},
+      {icon: '/image/bill/1.png'},
+      {icon: '/image/bill/2.png'},
+      {icon: '/image/bill/3.png'},
+      {icon: '/image/bill/4.png'},
+      {icon: '/image/bill/5.png'},
+      {icon: '/image/bill/6.png'},
+      {icon: '/image/bill/7.png'},
+      {icon: '/image/bill/8.png'},
+      {icon: '/image/bill/9.png'},
+      {icon: '/image/bill/10.png'},
+      {icon: '/image/bill/11.png'},
+      {icon: '/image/bill/12.png'}
    ],
    accountIcon : [
-      {label: '工商银行', icon: '/image/account/0.png'},
-      {label: '基金', icon: '/image/account/1.png'},
-      {label: '交通银行', icon: '/image/account/2.png'},
-      {label: '农信社', icon: '/image/account/3.png'},
-      {label: '农业银行', icon: '/image/account/4.png'},
-      {label: '建设银行', icon: '/image/account/5.png'},
-      {label: '招商银行', icon: '/image/account/6.png'},
-      {label: '中国银行', icon: '/image/account/7.png'},
-      {label: '现金', icon: '/image/account/8.png'},
-      {label: '微信', icon: '/image/account/9.png'},
-      {label: '负债', icon: '/image/account/10.png'},
-      {label: '支付宝', icon: '/image/account/11.png'}
+      {icon: '/image/account/0.png'},
+      {icon: '/image/account/1.png'},
+      {icon: '/image/account/2.png'},
+      {icon: '/image/account/3.png'},
+      {icon: '/image/account/4.png'},
+      {icon: '/image/account/5.png'},
+      {icon: '/image/account/6.png'},
+      {icon: '/image/account/7.png'},
+      {icon: '/image/account/8.png'},
+      {icon: '/image/account/9.png'},
+      {icon: '/image/account/10.png'},
+      {icon: '/image/account/11.png'}
    ]
  },
  $api: api,
--- a/app.wxss
+++ b/app.wxss
@@ -89,7 +89,6 @@ t-cell {
 }
 /* 占位置 */
 .empty-view {
-  color: red;
  margin-top: 200rpx;
 }
 .placeholder {
--- a/pages/account/detail/index.js
+++ b/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() {
--- a/pages/chart/index.js
+++ b/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){
-        return;
-    }
-    const chart = echarts.init(canvas, null, {
+    pieChart = 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: pieData
-        }]
-    };
-    chart.setOption(option);
-    chart.on('click', 'series.pie', function(param) {
-        console.log(param);
+    canvas.setChart(pieChart);
+    let option = app.$utils.getPieOption(pieData);
+    pieChart.setOption(option);
+    pieChart.on('click', 'series.pie', function(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);
-    var 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: line1Data
-    };
-    chart.setOption(option);
-    return chart;
+    canvas.setChart(line1Chart);
+    let option = app.$utils.getDayLineOption(line1Data);
+    line1Chart.setOption(option);
+    return line1Chart;
 }
 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);
-    var 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: line2Data
-    };
-    chart.setOption(option);
-    return chart;
+    canvas.setChart(line2Chart);
+    let option = app.$utils.getMonthLineOption(line2Data);
+    line2Chart.setOption(option);
+    return line2Chart;
 }
-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})
    }

 });
--- a/pages/chart/index.wxml
+++ b/pages/chart/index.wxml
@@ -44,24 +44,21 @@
                    />
                </t-cell-group>
            </view>
-            <view wx:else class="empty-view" >
-                <t-empty icon="chart-bubble" description="本月无账单记录" />
-            </view>
+            <t-empty wx:else icon="chart-bubble" description="本月无账单记录" />
            <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">
-            <view class="chart-title2">近6月</view>
+    </t-tab-panel>
+    <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"/>
--- a/pages/chart/index.wxss
+++ b/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%;
--- a/utils/util.js
+++ b/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
 }