Last change
on this file was baf4cc4, checked in by ppaunovski <paunovskipavel@…>, 4 weeks ago |
split group project and individual project into two separate folders
|
-
Property mode
set to
100644
|
File size:
1.4 KB
|
Rev | Line | |
---|
[baf4cc4] | 1 | import {Component, Input, OnInit} from '@angular/core';
|
---|
| 2 | import {NGX_ECHARTS_CONFIG, NgxEchartsModule} from "ngx-echarts";
|
---|
| 3 | import {Observable} from "rxjs";
|
---|
| 4 | import {PieChartValues} from "../../../model/PieChartValues";
|
---|
| 5 |
|
---|
| 6 |
|
---|
| 7 |
|
---|
| 8 | @Component({
|
---|
| 9 | selector: 'app-pie-chart',
|
---|
| 10 | standalone: true,
|
---|
| 11 | imports: [NgxEchartsModule],
|
---|
| 12 | providers: [
|
---|
| 13 | {
|
---|
| 14 | provide: NGX_ECHARTS_CONFIG,
|
---|
| 15 | useFactory: () => ({ echarts: () => import('echarts') }),
|
---|
| 16 | },
|
---|
| 17 | ],
|
---|
| 18 | templateUrl: './pie-chart.component.html',
|
---|
| 19 | styleUrl: './pie-chart.component.css'
|
---|
| 20 | })
|
---|
| 21 | export class PieChartComponent implements OnInit {
|
---|
| 22 | @Input() dataFn!: Observable<PieChartValues[]>
|
---|
| 23 | chartOptions: any;
|
---|
| 24 |
|
---|
| 25 | ngOnInit(): void {
|
---|
| 26 | this.dataFn.subscribe({
|
---|
| 27 | next: value => {
|
---|
| 28 | this.chartOptions = this._getOptions(value)
|
---|
| 29 | }
|
---|
| 30 | })
|
---|
| 31 |
|
---|
| 32 | }
|
---|
| 33 |
|
---|
| 34 | private _getOptions(value: PieChartValues[]) {
|
---|
| 35 | return {
|
---|
| 36 | title: {
|
---|
| 37 | text: 'Fines per Line',
|
---|
| 38 | subtext: 'Current Year',
|
---|
| 39 | left: 'center'
|
---|
| 40 | },
|
---|
| 41 | tooltip: {
|
---|
| 42 | trigger: 'item'
|
---|
| 43 | },
|
---|
| 44 | legend: {
|
---|
| 45 | orient: 'vertical',
|
---|
| 46 | left: 'left'
|
---|
| 47 | },
|
---|
| 48 | series: [
|
---|
| 49 | {
|
---|
| 50 | name: 'Fines',
|
---|
| 51 | type: 'pie',
|
---|
| 52 | radius: '50%',
|
---|
| 53 | data: [
|
---|
| 54 | ...value
|
---|
| 55 | ],
|
---|
| 56 | emphasis: {
|
---|
| 57 | itemStyle: {
|
---|
| 58 | shadowBlur: 10,
|
---|
| 59 | shadowOffsetX: 0,
|
---|
| 60 | shadowColor: 'rgba(0, 0, 0, 0.5)'
|
---|
| 61 | }
|
---|
| 62 | }
|
---|
| 63 | }
|
---|
| 64 | ]
|
---|
| 65 | };
|
---|
| 66 | }
|
---|
| 67 | }
|
---|
Note:
See
TracBrowser
for help on using the repository browser.