Angualr2 ChartModle图表

1.ts代码

import { Component, OnInit, OnDestroy } from '@angular/core';

import { Http, Headers } from '@angular/http';

import { Observable } from 'rxjs/Rx';

import { AlertService } from 'ng-jhipster';

import { ITEMS_PER_PAGE, Principal } from '../shared'; // 分页设置，权限验证等

import { API_URL } from '../app.constants';

import { TreeModule, TreeNode } from 'primeng/primeng';

import { WrRvRecQuery } from './wr-RvRecQuery.model';

import { UIChart, ChartModule } from 'primeng/primeng';

 

@Component({

selector: 'wr-rv-rec-query',

styles: [`

p-tree{

float:left;

margin-right:0.5rem;

}

p-datatable{

display:flex;

}

.form-inline button{

margin-left:0.5rem;

}

h2{

margin:0.5rem 0;

}

 

.data-table-wrap p-tree{

float: left;

height: 50rem;

margin-right: 1rem;

}

:host >>> .ui-tree{

height: 100%;

}

.areaTable{

display: flex;

}

:host >>> .col-button{

text-align:center;

}

:host >>> .col-button button{

margin:0.5rem 0;

}

:host >>> .data-table-search{

display: flex;

margin-top:0.5rem;

margin-bottom:0.5rem;

}

:host >>> .form-group:nth-child(2){

margin:0 1rem;

}

:host >>> .form-inline{

flex:1;

-webkit-box-flex:1;

}

:host >>> .modal-dialog{

margin-top:15%;

}

p-calendar{

display: -webkit-box;

-webkit-box-flex: 1;

}

:host >>> .dialog-datepick{

display: -webkit-box;

-webkit-box-flex: 1;

}

:host >>> .ui-inputtext {

display: -webkit-box;

padding: .5rem .75rem;

font-size: 1rem;

line-height: 1.25;

}

:host >>> .btn-update{

position: absolute;

right: 25px;

top: 0;

border-top-left-radius: 0;

border-bottom-left-radius: 0;

}

 

`],

templateUrl: './wr-rvRecQuery.component.html'

})

export class WrRvRecQueryComponent implements OnInit, OnDestroy {

chartTitle: any;

pieChart: UIChart;

barChart: UIChart;

parentCode: string;

// 河段树选择的节点

selectedNode: TreeNode;

// 查询条件

query: any = {};

queryChar: any = {};

wrRvRecQuerys: WrRvRecQuery[];

wrRvRecQueryChar: WrRvRecQuery[];

itemsPerPage: number = ITEMS_PER_PAGE;

totalRecords: number;

sortBy: string;

page: number;

loading: boolean = true;

loadingChar: boolean = false;

data: any;

barData: any;

pieData: any;

 

/**

* 巡河统计构造函数

* @param http

* @param alertService

*/

constructor(private http: Http,

private alertService: AlertService) { }

/**

* 页面初期加载

*/

ngOnInit() {

// 示例里面使用荣昌区，实际用的时候应该是根据登录人的所在区域来获取

this.parentCode = '500153000000';

this.query.addvcdPath = '/500153000000';

//this.query.l = 3;

//图表

this.defaultChart();

}

 

showChar(RvRecQuery, pieChart: UIChart, barChart: UIChart) {

this.chartTitle = RvRecQuery.addvnm;

this.pieChart = pieChart;

this.barChart = barChart;

if (RvRecQuery.type == 1) {

this.queryChar.addvcdPath = RvRecQuery.addvcdPath;

this.queryChar.l = RvRecQuery.l + 1;

this.queryChar.type = 1;

}

if (RvRecQuery.type == 2) {

this.queryChar.addvcdPath = RvRecQuery.addvcdPath;

this.queryChar.rvId = RvRecQuery.addvcd;

this.queryChar.l = RvRecQuery.l + 1;

this.queryChar.type = 2;

}

if (RvRecQuery.type == 3) {

this.queryChar.addvcdPath = RvRecQuery.addvcdPath;

this.queryChar.l = RvRecQuery.l + 1;

this.queryChar.type = 3;

}

this.loadDataChar();

 

//pieData.refresh();

}

 

/**

* 页面销毁时的操作

*/

ngOnDestroy() {

 

}

 

/**

* 河段树的节点选择事件

* @param node 选中的树节点

*/

onNodeSelect(node) {

this.selectedNode = node;

this.query.l = null;

this.query.type = node.type;

if (node.type == 1) {

// 表示选择的是行政区划

this.query.addvcdPath = node.addvcdPath;

}

else if (node.type == 2) {

// 选择的是河流信息

this.query.addvcdPath = node.addvcdPath;

this.query.rvId = node.rvCd;

}

else {

// 选择的是河段信息

this.query.addvcdPath = node.rvSegIdPath;

}

 

// 设置pageIndex到第一页

this.page = 0;

this.loadData();

}

 

/**

* 搜索

*/

search() {

// TODO 这里搜索的时候需要组织搜索条件

this.page = 0; // 搜索的时候重置分页

this.loadData();

}

 

/**

* 表格的自动加载

*/

lazyLoad(e, pieChart: UIChart, barChart: UIChart) {

this.pieChart = pieChart;

this.barChart = barChart;

//this.sortBy = e.sortField ? e.sortField + ' ' + (e.sortOrder === 1 ? 'asc' : 'desc') : null;

this.page = e.first / e.rows;

console.log(this.page);

// 树节点加载出来以后再进行grid的加载

if (this.selectedNode != null) {

this.loadData();

}

}

 

/**

* 加载数据

*/

loadData() {

this.loading = true;

let body = this.query || {};

let options = {

headers: new Headers({

pageIndex: this.page,

pageSize: this.itemsPerPage,

//orderBy: this.sortBy

})

};

return this.http.post(`${API_URL}/api/rvCount/page`, body, options)

.subscribe(

(res) => this.onSuccess(res.json(), res.headers),

(res) => this.onError(res.json()));

}

 

onSuccess(data, headers) {

this.loading = false;

if (+data.responseCode !== 100) {

this.alertService.error(data.messageList[0].key, data.messageList[0].message, null);

return;

}

 

this.wrRvRecQuerys = data.a0804F0004RespL001List;

this.totalRecords = data.pageControllerInfo.totalRecordCount;

if (data.a0804F0004RespL001List != null && data.a0804F0004RespL001List.length > 0) {

let RvRecQuery: any = data.a0804F0004RespL001List[0];

this.chartTitle = RvRecQuery.addvnm;

if (RvRecQuery.type == 1) {

this.queryChar.addvcdPath = RvRecQuery.addvcdPath;

this.queryChar.l = RvRecQuery.l + 1;

this.queryChar.type = 1;

}

if (RvRecQuery.type == 2) {

this.queryChar.addvcdPath = RvRecQuery.addvcdPath;

this.queryChar.rvId = RvRecQuery.addvcd;

this.queryChar.l = RvRecQuery.l + 1;

this.queryChar.type = 2;

}

if (RvRecQuery.type == 3) {

this.queryChar.addvcdPath = RvRecQuery.addvcdPath;

this.queryChar.l = RvRecQuery.l + 1;

this.queryChar.type = 3;

}

this.loadDataChar();

} else {

this. defaultChart();

if (this.pieChart != null) {

this.pieChart.data = this.pieData;

this.pieChart.reinit();

}

if (this.barChart != null) {

this.barChart.data = this.barData;

this.barChart.reinit();

}

}

}

 

onError(error) {

this.loading = false;

this.alertService.error(error.error, error.message, null);

}

 

/**

* 加载图表数据

*/

loadDataChar() {

this.loading = true;

 

let body = this.queryChar || {};

let options = {

headers: new Headers({

//pageIndex: this.page,

//pageSize: this.itemsPerPage,

//orderBy: this.sortBy

})

};

return this.http.post(`${API_URL}/api/rvCount/page`, body, options)

.subscribe(

(res) => this.onSuccessChar(res.json(), res.headers),

(res) => this.onErrorChar(res.json()));

}

 

onSuccessChar(data, headers) {

this.loading = false;

if (+data.responseCode !== 100) {

this.alertService.error(data.messageList[0].key, data.messageList[0].message, null);

return;

}

 

this.wrRvRecQueryChar = data.a0804F0004RespL001List;

 

let piex: any = [];

let piey: any = [];

 

for (let i = 0; i < this.wrRvRecQueryChar.length; i++) {

piex.push(this.wrRvRecQueryChar[i].addvnm);

piey.push(this.wrRvRecQueryChar[i].sbCount);

}

this.pieData = {

labels: piex,

datasets: [

{

data: piey,

backgroundColor: [

"#FF6384", "#36A2EB", "#FFCE56", "#6495ED", "#00FFFF",

"#1E90FF", "#00FF7F", "#008080", "#66CDAA", "#008B8B",

"#BDB76B", "#B8860B", "#00CEDE", "#696969", "#20B2AA",

"#CC9999", "#003399", "#993333", "#0099CC", "#EEE8AA",

"#003366", "#FFFFCC", "#FFCCFF", "#99CCFF", "#32CD32",

"#99CC33", "#CCCCFF", "#0000FF", "#191970", "#ADFF2F"

],

hoverBackgroundColor: [

"#FF6384", "#36A2EB", "#FFCE56", "#6495ED", "#00FFFF",

"#1E90FF", "#00FF7F", "#008080", "#66CDAA", "#008B8B",

"#BDB76B", "#B8860B", "#00CEDE", "#696969", "#20B2AA",

"#CC9999", "#003399", "#993333", "#0099CC", "#EEE8AA",

"#003366", "#FFFFCC", "#FFCCFF", "#99CCFF", "#32CD32",

"#99CC33", "#CCCCFF", "#0000FF", "#191970", "#ADFF2F"

]

}]

}

if (this.pieChart != null) {

this.pieChart.data = this.pieData;

this.pieChart.reinit();

}

 

this.barData = {

labels: piex,

datasets: [

{

label: this.chartTitle,

backgroundColor: '#42A5F5',

borderColor: '#1E88E5',

data: piey

}

]

}

if (this.barChart != null) {

this.barChart.data = this.barData;

this.barChart.reinit();

}

this.loadingChar = true;

//this.totalRecords = data.pageControllerInfo.totalRecordCount;

}

 

onErrorChar(error) {

this.loading = false;

this.alertService.error(error.error, error.message, null);

}

 

//置空图表

defaultChart(){

this.barData = {

labels: [],

datasets: [

{

label: '',

backgroundColor: '#42A5F5',

borderColor: '#1E88E5',

data: []

}

 

]

}

this.pieData = {

labels: [],

datasets: [

{

data: [],

backgroundColor: [

"#FF6384",

"#36A2EB",

"#FFCE56"

],

hoverBackgroundColor: [

"#FF6384",

"#36A2EB",

"#FFCE56"

]

}]

}

}

}

 

 

2.html 页面

 

<div>

<h2>

<span>巡河统计</span>

</h2>

<jhi-alert></jhi-alert>

<div class="data-table-wrap">

<rv-seg [parentCode]="parentCode" (onNodeSelect)="onNodeSelect($event)"></rv-seg>

<div class="data-table-loading" *ngIf="loading">

<i class="loading"></i>

</div>

<div class="data-table-search">

<form class="form-inline" (ngSubmit)="search()">

<div class="form-group">

<label>开始时间：</label>从

<p-calendar [styleClass]="'dialog-datepick'" inputStyleClass="form-control" name="beginTm" [(ngModel)]="query.beginTm" dateFormat="yy-mm-dd">

</p-calendar>

到

<p-calendar [styleClass]="'dialog-datepick'" inputStyleClass="form-control" name="endTm" [(ngModel)]="query.endTm" dateFormat="yy-mm-dd">

</p-calendar>

</div>

<button type="submit" class="btn btn-primary">搜索</button>

</form>

</div>

<p-dataTable #dt [value]="wrRvRecQuerys" [lazy]="true" [rows]="itemsPerPage" [paginator]="true" [totalRecords]="totalRecords"

emptyMessage="没有记录" class="areaTable" (onLazyLoad)="lazyLoad($event,pieChart,barChart)">

<p-column field="addvcd" header="区域" [hidden]="true"></p-column>

<p-column field="l" header="层级" [hidden]="true"></p-column>

<p-column field="type" header="类型" [hidden]="true"></p-column>

<p-column field="addvcdPath" header="区域Path" [hidden]="true"></p-column>

<p-column field="addvnm" header="区域名称"></p-column>

<p-column field="jhCount" header="计划次数" [style]="{'width':'120px'}"></p-column>

<p-column field="sjCount" header="实际次数" [style]="{'width':'120px'}"></p-column>

<p-column field="sbCount" header="上报次数" [style]="{'width':'120px'}"></p-column>

<p-column field="caozuo" header="操作" styleClass="col-button" [style]="{'width':'300px'}">

<template let-WrRvRecQuery="rowData" pTemplate="body">

<button type="button" pButton label="查看" (click)="showChar(WrRvRecQuery,pieChart,barChart)"></button>

</template>

</p-column>

</p-dataTable>

<p-chart type="bar" #barChart [data]="barData"></p-chart>

<p-chart type="pie" #pieChart [data]="pieData"></p-chart>

</div>

</div>