src/app/analysis/equipment/brand/brand.component.ts
| selector | analysis-equipment-brand |
| styleUrls | ./brand.component.scss |
| templateUrl | ./brand.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']
}
|
| gradient |
Default value : false
|
| showLegend |
Default value : false
|
| showXAxis |
Default value : true
|
| showXAxisLabel |
Default value : true
|
| showYAxis |
Default value : true
|
| showYAxisLabel |
Default value : true
|
| xAxisLabel |
Type : string
|
Default value : 'Country'
|
| yAxisLabel |
Type : string
|
Default value : 'Population'
|
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'analysis-equipment-brand',
templateUrl: './brand.component.html',
styleUrls: ['./brand.component.scss']
})
export class EquipmentBrandComponent implements OnInit {
@Input()
data: any;
// options
showXAxis = true;
showYAxis = true;
gradient = false;
showLegend = false;
showXAxisLabel = true;
xAxisLabel = 'Country';
showYAxisLabel = true;
yAxisLabel = 'Population';
colorScheme = {
domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
};
constructor() {}
ngOnInit() {}
onSelect(event) {
console.log(event);
}
}
<mat-card>
<mat-card-title>品牌偏好</mat-card-title>
<mat-card-content>
<ngx-charts-bar-vertical *ngIf="data?.length" [scheme]="colorScheme" [results]="data" [gradient]="gradient" [xAxis]="showXAxis"
[yAxis]="showYAxis" [legend]="showLegend" [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel"
(select)="onSelect($event)">
</ngx-charts-bar-vertical>
</mat-card-content>
</mat-card>
./brand.component.scss
mat-card {
margin: 5px;
padding: 0;
}
mat-card-title {
padding: 16px 24px;
}
mat-card-content {
min-height: 400px;
}