Ionic3 demo TallyBook 實例3

1.準備應用相關組件

    echarts--直接 npm install 安裝便可

2.home.ts

import { Component,ViewChild,ElementRef } from '@angular/core';
import { IonicPage,NavController,Slides,PopoverController  } from 'ionic-angular';
import {SQLiteService} from '../../app/sqlite.service'
import * as echarts from 'echarts'; //引入圖表插件 

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
 // @ViewChild(Slides) slides: Slides;
 @ViewChild('piecontainer') piecontainer:ElementRef;
  monthMoney:number = 0;
  dayMoney:number = 0;
  yearMoney:number = 0;
  optinpielegend : any = [];
  strdate:string ='';
  strdateMonth:string ='';
  stryear:string="";
  option = {
    title : {
        text: '消費類型統計',
        x:'center'
    },
    tooltip : {
        trigger: 'item',
        formatter: "￥{c}({d}%)"
    },
    legend: {
        x:'center',
        y:'bottom',
        data: []
      
    },
    series : [
        {
            type: 'pie',
            radius : '60%',
            center: ['45%', '35%'],
            data: [],
            itemStyle: {
                normal: {
                    label : {
                        show : false   //隱藏標示文字
                    },
                    labelLine : {
                        show : false   //隱藏標示線
                    }
                },
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            }
        }
    ]
};

  constructor(public navCtrl: NavController
    ,private sqlite: SQLiteService,
    public popoverCtrl: PopoverController
  ) {
    
  }
  
  getData(){
   // return  new Promise((resolve,reject)=>{
    this.optinpielegend=[];
      this.sqlite.database.executeSql("SELECT A.*,sum(ifnull(B.amount,0)) amount FROM consumType A  LEFT OUTER JOIN consum B on A.id=B.type group by  A.id ",{}).then(res=>{
        for(var i=0; i<res.rows.length; i++) {
          this.optinpielegend.push({value:res.rows.item(i).amount,name: res.rows.item(i).name});
        }
      }).catch(e=>{
      console.log(e);
      });
      let datetime=new Date();
      let m=datetime.getMonth()<10?"0"+(datetime.getMonth()+1):(datetime.getMonth()+1).toString();
      let d=datetime.getDate()<10?"0"+(datetime.getDate()):(datetime.getDate()).toString();
      let date=datetime.getFullYear()+"-"+m+"-"+d;
      this.strdate=date;
      this.strdateMonth=datetime.getFullYear()+"-"+m;
      this.stryear=datetime.getFullYear().toString();
      this.sqlite.database.executeSql("select ifnull(sum(amount),0)  amount from  consum where date=? ",[date]).then(
        r=>{
         this.dayMoney=r.rows.item(0).amount;
      }).catch(e=>{
      console.log(e);
      });
      this.sqlite.database.executeSql("select ifnull(sum(amount),0)  amount from  consum where strftime('%m',date)=? ",[m.toString()]).then(
        r=>{
         this.monthMoney=r.rows.item(0).amount;
      }).catch(e=>{
      console.log(e);
      });
      this.sqlite.database.executeSql("select ifnull(sum(amount),0)  amount from  consum where strftime('%Y',date)=? ",[datetime.getFullYear().toString()]).then(
        r=>{
         this.yearMoney=r.rows.item(0).amount;
      }).catch(e=>{
      console.log(e);
      });
    //});
  }
  
  ionViewWillEnter() {
   //修復輪播手動滑動後不能自動輪播問題
  // this.slides.autoplayDisableOnInteraction = false; 
   let that=this;
   setTimeout(()=>{
    that.getData();
   },1000); 
   setTimeout(()=>{
    let  lengend=[],lengenddata=[];
    for (var index = 0; index < this.optinpielegend.length; index++) {
        var element = this.optinpielegend[index];
        lengend.push(element.name);
        lengenddata.push({value:element.value, name:element.name});
    }
    this.option.legend.data=lengend;
    this.option.series[0].data=lengenddata;
    echarts.init(that.piecontainer.nativeElement).setOption(this.option,true);
   },2000);
  }
  presentPopover(myEvent) {
    let popover = this.popoverCtrl.create('AboutPage');
    popover.present({
      ev: myEvent
    });
  }
}

home.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { PipesModule } from '../../pipes/pipes.module';
@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    PipesModule,
    IonicPageModule.forChild(HomePage),
  ],
})
export class HomePageModule {}

home.html

<ion-header>
    <ion-toolbar>
        <ion-buttons start>
          <button ion-button icon-only color="royal" (tap)="tapSearch($event)">
            <ion-icon name="search"></ion-icon>
          </button>
        </ion-buttons>
        <ion-title>首頁</ion-title>
        <ion-buttons end>
          <button ion-button icon-only color="royal" (click)="presentPopover($event)">
              <ion-icon name="more" role="img" class="icon icon-ios ion-ios-more" aria-label="more"></ion-icon>
          </button>
        </ion-buttons>
      </ion-toolbar>
</ion-header>
<ion-content padding>
    <!-- <div class="slide-wrap">
        <ion-slides pager loop="true" autoplay="3000" >
            <ion-slide><img src="assets/imgs/100.png" /></ion-slide>
            <ion-slide><img src="assets/imgs/102.png" /></ion-slide>
            <ion-slide><img src="assets/imgs/103.png" /></ion-slide>
          </ion-slides>
    </div> -->

<div class="stamp stamp01">
  <div class="par"><p>{{strdate}}消費總額</p><sub class="sign">￥</sub><span>{{dayMoney| fmoney:2}}</span></div>
  <i></i>
</div>

<div class="stamp stamp02">
  <div class="par"><p>{{strdateMonth}}消費總額</p><sub class="sign">￥</sub><span>{{monthMoney| fmoney:2}}</span></div>
  <i></i>
</div>

<div class="stamp stamp03">
  <div class="par"><p>{{stryear}}消費總額</p><sub class="sign">￥</sub><span>{{yearMoney | fmoney:2}}</span></div>
  <i></i>
</div>

<div class="stamp stamp04" *ngFor="let consum of optinpielegend;">
    <div class="par"><p>{{consum.name}}</p><sub class="sign">￥</sub><span>{{consum.value | fmoney:2 }}</span></div>
    <i></i>
  </div>
  <div #piecontainer class="echart-pie"></div>
</ion-content>

3.pipes

import { NgModule } from '@angular/core';
import { FmoneyPipe } from './fmoney/fmoney';
@NgModule({
    declarations: [FmoneyPipe],
    imports: [],
    exports: [FmoneyPipe]
})
export class PipesModule {}

import { Pipe, PipeTransform } from '@angular/core';

/**
 * Generated class for the FmoneyPipe pipe.
 *
 * See https://angular.io/api/core/Pipe for more info on Angular Pipes.
 */
@Pipe({
  name: 'fmoney',
})
export class FmoneyPipe implements PipeTransform {
  /**
   * Takes a value and makes it lowercase.
   */
  transform(value: string, ...args) {
    //return value.toLowerCase();
     /*
     * 參數說明：
     * s：要格式化的數字
     * n：保留幾位小數
     * */
    let n = args[0] > 0 &&  args[0] <= 20 ?  args[0] : 2;
    value = parseFloat((value + "").replace(/[^\d\.-]/g, "")).toFixed(n) + "";
    let l = value.split(".")[0].split("").reverse(),
        r = value.split(".")[1];
    let t = "";
    for (let i = 0; i < l.length; i++) {
        t += l[i] + ((i + 1) % 3 == 0 && (i + 1) != l.length ? "," : "");
    }
    return t.split("").reverse().join("") + "." + r;
  }
}

4.修改app.module.ts

import {PipesModule} from '../pipes/pipes.module';

imports:...

PipesModule

...

5.about.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {SQLiteService} from '../../app/sqlite.service'
import { Toast } from '@ionic-native/toast';
/**
 * Generated class for the AboutPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-about',
  //templateUrl: 'about.html',

  template:`<ion-list class="list list-md">
        <ion-item-divider>
            <ion-label class="label label-md">
                設置
              </ion-label>
              <button (click)="cleardata()" ion-button="" item-end="" outline="" class=" item-button button button-md button-outline button-outline-md">
                <span class="button-inner">清空數據</span>
                <div class="button-effect"></div></button>
        </ion-item-divider>
        <button ion-item  (click)="callphone('1368336534')">
            <ion-icon name="call" item-start class="icon-md-secondary" ></ion-icon>
            <ion-label class="label label-md" id="lbl-5">1368336534</ion-label>
        </button>
        <button ion-item (click)="callemial('sulin11026@613.com')">
            <ion-icon name="link" item-start class="icon-md-secondary"></ion-icon>
            <ion-label class="label label-md" id="lbl-5">sulin11026@613.com</ion-label>
        </button>
    </ion-list>` 
})
export class AboutPage {

  constructor(public navCtrl: NavController, private sqlite: SQLiteService,
    private toast :Toast) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad AboutPage');
  }
  callphone(phone){
    window.location.href = "tel:" + phone;
  }
  callemial(email){
    window.location.href="mailto:"+email;
  }
  cleardata(){
    this.sqlite.database.executeSql("delet from  consum  ",{}).then(res=>{
      this.toast.show("清理成功", '5000', 'center').subscribe(
        toast => {
          console.log(toast);
        }
      );
    }).catch(e=>{
      this.toast.show(e, '5000', 'center').subscribe(
        toast => {
          console.log(toast);
        }
      );
    });
  }
}

6.效果展現

 

 

 

 

 

 

  

代碼下載