Asp.net+Vue2构建简单记账WebApp之六（vue.js构建记账统计页面）

Asp.net+Vue2构建简单记账WebApp之一（设计）

Asp.net+Vue2构建简单记账WebApp之二（使用ABP迅速搭建.Net后台）

Asp.net+Vue2构建简单记账WebApp之三（使用Vue-cli构建vue.js应用）

Asp.net+Vue2构建简单记账WebApp之四（vue.js构建记账主页面）

Asp.net+Vue2构建简单记账WebApp之五（vue.js构建记账页面）

Asp.net+Vue2构建简单记账WebApp之六（vue.js构建记账统计页面）

源码下载

一、添加两个新页面

/components/ MonthCount.vue

<template>
<div id="MonthCount" >
<div class="chart">
<div id="Chart"></div>
</div>
<ul class="list">
<li v-for="item in listData">
<mt-cell-swipe v-bind:title="item.name" v-bind:label="item.creationTime" :right="[{
content: '删除',
style: { background: 'red', color: '#fff' },
handler: () => DeleteBill(item.id)}]" >
<span>￥{{item.money}}</span>
<i slot="icon" class="fa" v-bind:class="item.fontStyle" width="24" height="24"></i>
</mt-cell-swipe>
</li>
<li v-if="loading" style="text-align: center">
<mt-spinner :type="3" color="#26a2ff"></mt-spinner>
</li>
<li v-else-if="loadMore" v-on:click="GetListData" style="text-align: center">
点击更多
</li>
</ul>
</div>

</template>
<script>
import { Toast } from 'mint-ui';
// 按需引入echart模板
let echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/pie');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

export default{
data(){
return{
listData:[],//列表数据
chartData:[],// 图表数据
date:new Date(), // 时间
loadMore:false,
loading:false
}
},
methods:{
DeleteBill(id){
this.$http.post('/bill/DeleteBill', {
key: id
}).then(response => {
if(response.body.result.result)
{
Toast("删除成功");
this.GetChartData();
this.GetListData();
}else
{
Toast(response.body.result.data)
}
}, response => {
Toast("服务器连接失败");
});
},
// 获取图表数据
GetChartData(){
this.$http.post('/bill/GetCount', {
Date: this.date,
Type:1,
User: '1'
}).then(response => {
if(response.body.result.result)
{
this.chartData = response.body.result.data;
}else
{
Toast(response.body.result.data)
}
}, response => {
Toast("获取数据出错");
});
},
// 获取列表数据
GetListData(){
this.loading=true;
this.$http.post('/bill/GetBills', {
Date:this.date,
SkipCount:this.listData.length,
Type:1,
User: '1',
}).then(response => {
if(response.body.result.result)
{
let newlistdata =[...this.listData,...response.body.result.data.items];
this.listData = newlistdata;
this.loadMore = response.body.result.data.totalCount>this.listData.length;
}else
{
Toast(response.body.result.data);
}
this.loading=false;
}, response => {
this.loading=false;
Toast("获取数据出错");
});
},
// 绘制图表
DrawChart(){
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('Chart'));
let data = this.chartData;
let count =0;   // 从新计算总值
for (let i of this.chartData) {
count+=i.value;
}
// 绘制图表
myChart.setOption({
title : {
text: count,
subtext: '单位（元）',
x:'right'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: [
{
name: '消费',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: data
}
]
});
},
},
// 监测变化
watch:{
chartData:function () {
this.DrawChart(); // 绘制表格

}
},
// 创建后执行
created(){
this.GetChartData();
this.GetListData();
}
}
</script>

<style scoped>
#Chart{
height: 300px;
width: 100%;
}
ul{
list-style: none;
padding-left: 0;
}
ul li{
text-align: left;
margin-bottom: 5px;
}
.bottom{
position: fixed;
height: 1px;
width: 100%;
bottom: 65px;
}
</style>

components/YearCount.vue

<template>
<div>
<div id="ChartLine" class="chart"></div>
<div id="ChartPie" class="chart"></div>
</div>
</template>
<script>
import { Toast } from 'mint-ui';
// 按需引入echart模板
let echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/pie');
require('echarts/lib/chart/line');
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

export default{
data(){
return{
LineData:[],//曲线图数据
PieData:[],// 饼图数据
date:new Date(), // 时间
}
},
methods:{
// 获取曲线图数据
GetChartLineData(){
this.$http.post('/bill/GetCount', {
Date: this.date,
Type:0,
GroupBy:1,
User: '1'
}).then(response => {
if(response.body.result.result)
{
this.LineData = response.body.result.data;
}else
{
Toast(response.body.result.data)
}
}, response => {
Toast("获取数据出错");
});
},
// 获取饼图数据
GetPieData(){
this.$http.post('/bill/GetCount', {
Date:this.date,
Type:0,
User: '1',
}).then(response => {
if(response.body.result.result)
{
this.PieData = response.body.result.data;
}else
{
Toast(response.body.result.data)
}
}, response => {
Toast("获取数据出错");
});
},
// 绘制图表
DrawPieChart(){
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('ChartPie'));
let data = this.PieData;
// 绘制图表
myChart.setOption({
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
series: [
{
name: '消费',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: data
}
]
});
},
DrawLineChart(){
// 基于准备好的dom，初始化echarts实例
let myChart = echarts.init(document.getElementById('ChartLine'));
let data = this.LineData;
let x=[],y=[],count=0;
for(let i of data)
{
x.push(i.name);
y.push(i.value);
count+=i.value;
}
// 绘制图表
myChart.setOption({
title : {
text: count,
subtext: '单位（元）',
x:'right'
},
tooltip: {
trigger: 'axis'
},
calculable: false,
grid: { x: 12, y: 10, x2: 12, y2: 30, borderWidth: 0 },
xAxis: [
{
splitLine: { show: false },
type: 'category',
boundaryGap: false,
data: x
}
],
yAxis: [
{
show: false,
type: 'value'
}
],
series: [
{
name: '消费',
type: 'line',
center: ['10%', '10%'],
smooth: true,
itemStyle: { normal: { areaStyle: { type: 'default' } } },
data: y
},

]
});
}
},
// 监测变化
watch:{
PieData:function () {
this.DrawPieChart(); // 绘制表格

},
LineData:function () {
this.DrawLineChart(); // 绘制表格

}
},
// 创建后执行
mounted(){
this.GetChartLineData();
this.GetPieData();
}
}
</script>
<style scoped>
.chart{
width: 100%;
height: 300px;
}

</style>

二、添加新页面的路由

这里用到了路由的嵌套

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello' // 记账页面
import Count from "@/components/Count" // 统计页面
import MonthCount from "@/components/MonthCount"
import YearCount from "@/components/YearCount"
Vue.use(Router)

export default new Router({
routes: [
{path: '/', component: Hello},
{path: '/Count', component: Count,children:[
{path: '', component: MonthCount},
{path: 'year', component: YearCount}
]}
]
}
da5d
)

三、编写统计页面

Count.vue

<template>
<div id="Count">
<div class="Count_Top">
<label >当前历史记账金额（元）</label><br>
<label class="Money">{{TotallCount}}</label>
</div>
<div>
<mt-navbar v-model="selected">
<router-link to="/Count" v-bind:class="ClassMenuMonth" v-on:click.native="select(0)" >当月 </router-link>
<router-link to="/Count/year"  v-bind:class="ClassMenuyear" v-on:click.native="select(1)"> 当年 </router-link>
</mt-navbar>
<router-view ></router-view>
</div>

</div>
</template>

<script>
import { Toast } from 'mint-ui';
export default {
methods: {
select(m){
this.selected = m;
},
GetTotallCount(){
this.$http.post('/bill/GetTotallCount', {
User: '1'
}).then(response => {
if(response.body.result.result)
{
this.TotallCount=response.body.result.data;
}else
{
Toast(response.body.result.data)
}
}, response => {
Toast("获取数据出错")
});
},
},
created(){
this.GetTotallCount();
},
data() {
return {
TotallCount: 0,
selected:-1,
}
},
computed:{ // 使用计算属性给菜单动态添加样式
ClassMenuMonth(){
return{
'mint-tab-item':true,
'is-selected':this.selected==0,
}
},
ClassMenuyear(){
return{
'mint-tab-item':true,
'is-selected':this.selected==1,
}
}
},
};
</script>
<style scoped>
#Count .Count_Top{
padding: 16px;
color: #26a2ff;
}
#Count .Count_Top label{
font-size: 12px;
}
#Count .Count_Top .Money{
font-size: 30px;
}
#Count{
margin-top: 0;
position: relative;
height: auto;
background-color: #eee;}
.mint-tab-item{
padding: 12px;
}
</style>

四、发布查看

五、总结

1、没有用到vuex，菜单选择样式可以通过这个来解决现有问题，我觉得vuex主要是data数据管理，解决了组件之间数据传递的麻烦。

2、watch监测数据变化。

3、echarts 更多图表绘制参看官网

4、本想使用mint-ui的无限加载或者上拉加载，但是在这个页面里没弄成功，就自己写了个点击加载的。

5、vue.js 的是mvvm框架，页面绑定数据，我们一切操作只需要修改数据，页面自动改变。不需要直接操作页面元素。