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

代码下载

Ionic3 demo TallyBook 实例3的更多相关文章

  1. Ionic3 demo TallyBook 实例1

    1.创建项目 ionic start  TallyBook  blank  创建一个空的项目 ionic cordova  platform  add android   添加andorid平台 io ...

  2. Ionic3 demo TallyBook 实例2

    1.添加插件 2.相关页面 消费页面: <ion-header> <ion-navbar> <ion-title> 消费记录 </ion-title> ...

  3. appium跑demo简单实例讲解

    安装appium,设置 demo.pyfrom appium import webdriver #要装webdriver,方法查看http://www.cnblogs.com/sincoolvip/p ...

  4. react介绍、环境搭建、demo运行实例

    React官网:https://reactjs.org/docs/create-a-new-react-app.html cnpm网址:http://npm.taobao.org/ 1.react介绍 ...

  5. Ionic3 Demo

    本文为原创文章,转载请标明出处 最近又开源了一个小 Demo,基于 Ionic 3.9.2.注册登录功能使用的是 WildDog 野狗通信云,大家可以放心的注册登录玩.电影相关数据来源自"某 ...

  6. js实现『加载更多』功能实例

    DEMO : 滚动加载示例 关于如何实现『加载更多』功能,网上有插件可用,例如比较著名的使用iscroll.js实现的上拉加载更多.下拉刷新功能. 但实际用起来却是很麻烦.由于是第三方插件,要按照对方 ...

  7. nodejs入门demo

    demo的实例引用自:http://www.runoob.com/nodejs/nodejs-event.html, 官方文档:https://nodejs.org/dist/latest-v6.x/ ...

  8. DWR入门实例(二)

    DWR(Direct Web Remoting) DWR is a Java library that enables Java on the server and JavaScript in a b ...

  9. JDBC连接SqlServer数据库(非默认实例)方法

    一般我们在连接数据库的时候都是用的默认实例名,今天遇到了用非默认是实例名:连接代码如下(Java): URL=jdbc:microsoft:sqlserver://192.168.1.85//DEMO ...

随机推荐

  1. POJ2406-Power Strings-KMP循环节/哈希循环节

    Given two strings a and b we define a*b to be their concatenation. For example, if a = "abc&quo ...

  2. String类的substring()方法

    截取字符串,在java语言中的用法 1.  public String substring(int beginIndex) 返回一个新字符串,它是此字符串的一个子字符串.该子字符串始于指定索引处的字符 ...

  3. 手机网站Meta的使用

    meta指元素可提供有关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词. 标签位于文档的头部,不包含任何内容. 标签的属性定义了与文档相关联的名称/值对. ...

  4. 2018-8-10-使用-IncrediBuild-提升-VisualStudio-编译速度

    title author date CreateTime categories 使用 IncrediBuild 提升 VisualStudio 编译速度 lindexi 2018-08-10 19:1 ...

  5. sysobjects syscolumns

    在sysobjects系统表中存储着数据库的所有对象,每个对象都有一个唯一的id号进行标识.object_id就是根据对象名称返回该对象的id.反之,object_name是根据对象id返回对象名称. ...

  6. 当对象转换成JSON的时候处理时间格式

    /// <summary> /// 格式化日期 /// </summary> /// <param name="foramt">格式化规则< ...

  7. PHP算法之无重复字符的最长子串

    给定一个字符串,请你找出其中不含有重复字符的 最长子串 的长度. 示例 1: 输入: "abcabcbb"输出: 3 解释: 因为无重复字符的最长子串是 "abc&quo ...

  8. leetcode-5-最长回文子串*马拉车

    方法一:动态规划 O(n2) O(n2) class Solution: def longestPalindrome(self, s: str) -> str: size = len(s) if ...

  9. 廖雪峰Java16函数式编程-2Stream-6reduce

    1. 聚合方法 Stream.reduce()是一个Stream的聚合方法:把一个Stream的所有元素聚合成一个结果 例如: Stream.of(1, 2, 3, 4, 5).count(); // ...

  10. ETL工具-Kattle:初识kattle

    ETL是EXTRACT(抽取).TRANSFORM(转换).LOAD(加载)的简称,实现数据从多个异构数据源加载到数据库或其他目标地址,是数据仓库建设和维护中的重要一环也是工作量较大的一块.当前知道的 ...