src/app/analysis/crowd/age/age.component.ts
| selector | analysis-crowd-age |
| styleUrls | ./age.component.scss |
| templateUrl | ./age.component.html |
Properties |
Methods |
Inputs |
constructor()
|
| data | |
Type : any
|
|
| ngOnInit |
ngOnInit()
|
|
Returns :
void
|
| onSelect | ||||
onSelect(event)
|
||||
|
Parameters :
Returns :
void
|
| colorScheme |
Type : object
|
Default value : {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
}
|
| doughnut |
Default value : true
|
| explodeSlices |
Default value : false
|
| showLabels |
Default value : true
|
| showLegend |
Default value : true
|
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'analysis-crowd-age',
templateUrl: './age.component.html',
styleUrls: ['./age.component.scss']
})
export class AgeComponent implements OnInit {
@Input()
data: any;
// options
showLegend = true;
colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
};
// pie
showLabels = true;
explodeSlices = false;
doughnut = true;
constructor() {}
ngOnInit() {}
onSelect(event) {
console.log(event);
}
}
<mat-card>
<mat-card-title>人群年龄分布TOP3</mat-card-title>
<mat-card-content>
<ngx-charts-pie-chart *ngIf="data?.length"
[scheme]="colorScheme"
[results]="data"
[legend]="showLegend"
[explodeSlices]="explodeSlices"
[labels]="showLabels"
[doughnut]="doughnut"
(select)="onSelect($event)">
</ngx-charts-pie-chart>
</mat-card-content>
</mat-card>
./age.component.scss
mat-card {
margin: 5px;
padding: 0;
}
mat-card-title {
padding: 16px 24px;
}
mat-card-content {
min-height: 400px;
}