Angular 环状图组件：展示数据状态占比

import { Component, Input } from '@angular/core';

@Component({ selector: 'app-progress-chart', template: <div class='chart-container'> <svg viewBox='0 0 120 120' class='chart-svg'> <circle cx='60' cy='60' r='50' class='chart-circle chart-circle-all'></circle> <circle cx='60' cy='60' r='50' class='chart-circle chart-circle-pending' [style.strokeDasharray]='pendingDash'></circle> <circle cx='60' cy='60' r='50' class='chart-circle chart-circle-processing' [style.strokeDasharray]='processingDash'></circle> <circle cx='60' cy='60' r='50' class='chart-circle chart-circle-success' [style.strokeDasharray]='successDash'></circle> <circle cx='60' cy='60' r='50' class='chart-circle chart-circle-fail' [style.strokeDasharray]='failDash'></circle> </svg> <div class='chart-label'> <div class='chart-label-row'>{{pendingText}}/{{processingText}}/{{successText}}/{{failText}}</div> <div class='chart-label-row'>等待/处理中/成功/失败</div> </div> </div>, styles: [.chart-container { position: relative; width: 120px; height: 120px; } .chart-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .chart-circle { fill: transparent; stroke-width: 10; stroke-linecap: round; transform-origin: center; transition: stroke-dasharray 0.5s ease-out; } .chart-circle-all { stroke: #ddd; } .chart-circle-pending { stroke: #f1c40f; } .chart-circle-processing { stroke: #3498db; } .chart-circle-success { stroke: #2ecc71; } .chart-circle-fail { stroke: #e74c3c; } .chart-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; font-size: 12px; line-height: 1; color: #666; } .chart-label-row + .chart-label-row { margin-top: 4px; font-size: 10px; color: #999; }] }) export class ProgressChartComponent { @Input() pending: number = 0; @Input() processing: number = 0; @Input() success: number = 0; @Input() fail: number = 0; @Input() all: number = 0;

get pendingText(): string { return this.pending.toString(); }

get processingText(): string { return this.processing.toString(); }

get successText(): string { return this.success.toString(); }

get failText(): string { return this.fail.toString(); }

get pendingDash(): string { return this.getDasharray(this.pending, this.all); }

get processingDash(): string { return this.getDasharray(this.processing, this.all); }

get successDash(): string { return this.getDasharray(this.success, this.all); }

get failDash(): string { return this.getDasharray(this.fail, this.all); }

private getDasharray(value: number, total: number): string { const percentage = value / total; const circumference = Math.PI * 100; const dasharray = circumference * percentage + ' ' + circumference * (1 - percentage); return dasharray; } }