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
     
      {      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

         
              
                 
                    
                           
               
       
        首页
               
                 
                      
                           
             
      
     
         
      
      
  
       
        
{
   {strdate}}消费总额
        ￥
        {
   {dayMoney| fmoney:2}}
       
  
       
      
      
  
       
        
{
   {strdateMonth}}消费总额
        ￥
        {
   {monthMoney| fmoney:2}}
       
  
       
      
      
  
       
        
{
   {stryear}}消费总额
        ￥
        {
   {yearMoney | fmoney:2}}
       
  
       
      
      
    
       
        
{
   {consum.name}}
        ￥
        {
   {consum.value | fmoney:2 }}
       
    
         
      
  
      
     

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:`
             
                  
       
                        设置              
                     
                       清空数据                
        
        
              
                  
                   
       
        1368336534
                       
                  
                   
       
        sulin11026@613.com
                   
     ` })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.效果展示