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

三、編寫統計頁面

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框架，頁面綁定數據，我們一切操作只需要修改數據，頁面自動改變。不需要直接操作頁面元素。