angular-material-app documentation
  1. Components
  2. OperatorsComponent

File

src/app/analysis/crowd/operators/operators.component.ts

Implements

OnInit

Metadata

selector analysis-crowd-operators
styleUrls ./operators.component.scss
templateUrl ./operators.component.html

Index

Properties
Methods
Inputs

Constructor

constructor()
Defined in src/app/analysis/crowd/operators/operators.component.ts:22

Inputs

data
Type : any
Defined in src/app/analysis/crowd/operators/operators.component.ts:10

Methods

ngOnInit
ngOnInit()
Defined in src/app/analysis/crowd/operators/operators.component.ts:26
Returns : void
onSelect
onSelect(event)
Defined in src/app/analysis/crowd/operators/operators.component.ts:28
Parameters :
Name Optional
event No
Returns : void

Properties

colorScheme
Type : object
Default value : { domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'] }
Defined in src/app/analysis/crowd/operators/operators.component.ts:15
doughnut
Default value : false
Defined in src/app/analysis/crowd/operators/operators.component.ts:22
explodeSlices
Default value : false
Defined in src/app/analysis/crowd/operators/operators.component.ts:21
showLabels
Default value : true
Defined in src/app/analysis/crowd/operators/operators.component.ts:20
showLegend
Default value : true
Defined in src/app/analysis/crowd/operators/operators.component.ts:13
 
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);
  }
}
Copy
<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>
Copy

./operators.component.scss 

mat-card {
  margin: 5px;
  padding: 0;
}

mat-card-title {
  padding: 16px 24px;
}

mat-card-content {
  min-height: 400px;
}
Copy
Legend
Html element
Component
Html element with directive

result-matching ""

    No results matching ""