diff --git a/app.js b/app.js index 73eb13e..2298819 100644 --- 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, diff --git a/app.wxss b/app.wxss index 8458ada..e02345e 100644 --- a/app.wxss +++ b/app.wxss @@ -89,7 +89,6 @@ t-cell { } /* 占位置 */ .empty-view { - color: red; margin-top: 200rpx; } .placeholder { diff --git a/pages/account/detail/index.js b/pages/account/detail/index.js index f407dcd..1c1007d 100644 --- 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() { diff --git a/pages/chart/index.js b/pages/chart/index.js index 4c3d6d2..11e2dd5 100644 --- 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}) } }); diff --git a/pages/chart/index.wxml b/pages/chart/index.wxml index 686edfe..ea8c9ed 100644 --- a/pages/chart/index.wxml +++ b/pages/chart/index.wxml @@ -44,24 +44,21 @@ /> - - - + - + - 本月 - - 近6月 + + + - - + diff --git a/pages/chart/index.wxss b/pages/chart/index.wxss index e98ea02..5c9dd8d 100644 --- 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%; diff --git a/utils/util.js b/utils/util.js index b8e1511..10c39b3 100644 --- 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 }