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}
    ]}
  ]
})

三、编写统计页面

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框架，页面绑定数据，我们一切操作只需要修改数据，页面自动改变。不需要直接操作页面元素。