src/app/analysis/crowd/operators/operators.component.ts
| selector | analysis-crowd-operators |
| styleUrls | ./operators.component.scss |
| templateUrl | ./operators.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 : false
|
| explodeSlices |
Default value : false
|
| showLabels |
Default value : true
|
| showLegend |
Default value : true
|
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'analysis-crowd-operators',
templateUrl: './operators.component.html',
styleUrls: ['./operators.component.scss']
})
export class OperatorsComponent implements OnInit {
@Input()
data: any;
// options
showLegend = true;
colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
};
// pie
showLabels = true;
explodeSlices = false;
doughnut = false;
constructor() {}
ngOnInit() {}
onSelect(event) {
console.log(event);
}
}
<mat-card>
<mat-card-title>运营商分布</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>
./operators.component.scss
mat-card {
margin: 5px;
padding: 0;
}
mat-card-title {
padding: 16px 24px;
}
mat-card-content {
min-height: 400px;
}