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

File

src/app/analysis/scene-portrait/scene-portrait.component.ts

Implements

OnInit

Metadata

selector app-scene-portrait
styleUrls ./scene-portrait.component.scss
templateUrl ./scene-portrait.component.html

Index

Properties
Methods

Constructor

constructor(_service)
Defined in src/app/analysis/scene-portrait/scene-portrait.component.ts:22
Parameters :
Name Optional
_service No

Methods

ngOnInit
ngOnInit()
Defined in src/app/analysis/scene-portrait/scene-portrait.component.ts:26
Returns : void
scenes
scenes()
Defined in src/app/analysis/scene-portrait/scene-portrait.component.ts:31
Returns : void

Properties

bubble
Type : any
Default value : []
Defined in src/app/analysis/scene-portrait/scene-portrait.component.ts:9
colorScheme
Type : object
Default value : { domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA'] }
Defined in src/app/analysis/scene-portrait/scene-portrait.component.ts:20
gradient
Default value : false
Defined in src/app/analysis/scene-portrait/scene-portrait.component.ts:13
showLegend
Default value : false
Defined in src/app/analysis/scene-portrait/scene-portrait.component.ts:14
showXAxis
Default value : true
Defined in src/app/analysis/scene-portrait/scene-portrait.component.ts:11
showXAxisLabel
Default value : true
Defined in src/app/analysis/scene-portrait/scene-portrait.component.ts:15
showYAxis
Default value : true
Defined in src/app/analysis/scene-portrait/scene-portrait.component.ts:12
showYAxisLabel
Default value : true
Defined in src/app/analysis/scene-portrait/scene-portrait.component.ts:17
xAxisLabel
Type : string
Default value : 'Country'
Defined in src/app/analysis/scene-portrait/scene-portrait.component.ts:16
yAxisLabel
Type : string
Default value : 'Population'
Defined in src/app/analysis/scene-portrait/scene-portrait.component.ts:18
 
import { Component, OnInit, Inject } from '@angular/core';

@Component({
  selector: 'app-scene-portrait',
  templateUrl: './scene-portrait.component.html',
  styleUrls: ['./scene-portrait.component.scss']
})
export class ScenePortraitComponent implements OnInit {
  bubble: 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(@Inject('AnalysisService') private _service) {}

  ngOnInit() {
    this._service.scenesData();
    this.scenes();
  }

  scenes() {
    this._service.scenes$.subscribe(res => {
      if (res.datas) {
      }
    });
  }
}

<div fxLayout="column">
  <mat-card>
    <mat-card-title>场景概览</mat-card-title>
    <mat-card-content>
      <ngx-charts-bubble-chart [results]="bubble" [legend]="showLegend" [xAxis]="showXAxis" [yAxis]="showYAxis"
        [showXAxisLabel]="showXAxisLabel" [showYAxisLabel]="showYAxisLabel" [xAxisLabel]="xAxisLabel" [yAxisLabel]="yAxisLabel"
        [scheme]="colorScheme">
      </ngx-charts-bubble-chart>
    </mat-card-content>
  </mat-card>
</div>
<div fxLayout="column">
  <mat-card>
    <mat-card-title>场景偏好APP</mat-card-title>
    <mat-card-content>
    </mat-card-content>
  </mat-card>
</div>
<div fxLayout="column">
  <mat-card>
    <mat-card-title>场景使用分布</mat-card-title>
    <mat-card-content>
    </mat-card-content>
  </mat-card>
</div>
<div fxLayout="column">
  <mat-card>
    <mat-card-title>场景粘性</mat-card-title>
    <mat-card-content>
    </mat-card-content>
  </mat-card>
</div>

./scene-portrait.component.scss 

:host {
  display: block;
  margin: 5px;
}

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

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

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

result-matching ""

    No results matching ""