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.效果展示

 

 

 

 

 

 

  

代码下载