syncfusion-angular-smith-chart

概述

Syncfusion Angular Smith Chart 是一个面向高频电路场景的专用数据可视化组件，用于绘制传输线参数并做阻抗与导纳分析。它以两套同心圆（恒电阻圆与恒电抗圆）构成的双轴体系呈现数据：水平轴为电阻对应的直线，径向轴为电抗对应的圆周路径。

该组件以技能（skill）形式提供，文档按主题拆分在 references 目录下的多个指引文件中，便于按需查阅。

主要能力

渲染类型：支持 Impedance（默认）与 Admittance 两种参数渲染。
多系列：可在同一图表中同时显示多条传输线系列，使用不同颜色与样式区分。
数据绑定：提供两种方式——points 数组，或 dataSource 配合 resistance / reactance 属性映射。
轴定制：水平轴与径向轴可配置标签（位置、交集处理、样式）以及主/次网格线（可见性、宽度、虚线样式、不透明度）。
交互元素：标记点、数据标签、提示框、图例（支持位置、对齐、形状与点击切换系列可见性）。
导出与打印：支持 PNG、JPEG、SVG 格式导出以及打印，便于报告与文档使用。
样式与主题：内置主题（Material、Bootstrap、Tailwind 等），支持自定义颜色与响应式尺寸。
可访问性：WCAG 合规、键盘导航、RTL（从右到左）布局与屏幕阅读器支持。
事件驱动：加载事件、系列渲染、图例交互与提示框定制。

使用方式

基本用法是在 Angular 19+ 项目中安装并导入 SmithchartModule（来自 @syncfusion/ej2-angular-charts），并在组件模板中使用 <ejs-smithchart> 并绑定 series。仅需图表本身时只导入 SmithchartModule；使用提示框时按需注入 TooltipRenderService；需要自定义图例点击交互时按需注入 SmithchartLegendService。数据既可通过 points 数组的内联 { resistance, reactance } 对象提供，也可通过 dataSource 绑定外部数据并映射字段。

快速示例（保留原始代码）：

import { SmithchartModule } from '@syncfusion/ej2-angular-charts'
import { Component } from '@angular/core';

@Component({
  imports: [SmithchartModule],
  standalone: true,
  selector: 'app-container',
  template: `<ejs-smithchart 
    id='smithchart-container'
    [series]="series">
  </ejs-smithchart>`
})
export class AppComponent {
  series = [{
    points: [
      { resistance: 10, reactance: 10 },
      { resistance: 20, reactance: 15 },
      { resistance: 30, reactance: 5 },
      { resistance: 40, reactance: -5 },
      { resistance: 50, reactance: -15 }
    ]
  }]
}

数据驱动系列可通过 dataSource 绑定并指定字段映射（保留原始代码）：

series = [
  {
    name: 'Test Results',
    dataSource: [
      { impedance: 50, phase: 0 },     // Will be mapped to resistance/reactance
      { impedance: 75, phase: 15 },
      { impedance: 100, phase: 30 }
    ],
    resistance: 'impedance',
    reactance: 'phase'
  }
];

导出与打印可通过组件引用调用方法（保留原始代码）：

exportChart(format: string) {
  this.smithchart.export(format, 'smith-chart-export');
}

printChart() {
  this.smithchart.print();
}

关键配置属性

series（数组，默认 []）、points（数据数组，含 resistance/reactance 对）、dataSource（外部数据源）、resistance（dataSource 中电阻字段名）、reactance（dataSource 中电抗字段名）、name（图例名称）、renderType（'Impedance' 或 'Admittance'，默认 'Impedance'）、fill（系列线颜色）、width（线宽，默认 2）、opacity（不透明度，默认 1）、marker、dataLabel、tooltip、title、height（默认 '400px'）、width（默认 '100%'）、theme（默认 'Material'）、legendSettings、horizontalAxis、radialAxis、enableRtl（默认 false）、ariaLabel。

适用场景

根据资料，可用于：电路分析与阻抗匹配；网络与滤波器调优（对比多组滤波器响应与网络参数）；天线设计与优化（阻抗曲线、SWR 分析、频率响应可视化）；RF 工程（反射系数、驻波与传输线特性分析）；微波工程（传输线、波导与微波器件设计与分析）；教学演示高频电路概念；性能看板实时监控多条传输线指标；器件测试与验证（对比实测与仿真阻抗数据）；质量控制（在史密斯圆图上可视化电子元件生产测试结果）；信号完整性分析（端接阻抗与信号反射，用于 PCB 设计验证）。

限制与说明

资料未提供该技能的授权模式、价格或收费信息。组件针对 Angular 19+，依赖 @syncfusion/ej2-angular-charts 包；除上述已列出的渲染类型、导出格式、主题与可访问性能力外，其余功能细节暂未在资料中展开。安装命令、包管理器版本要求与完整 API 细节需参考 references 目录下对应的 getting-started、series-and-data、axis-customization、markers-and-labels、legend-and-interaction、advanced-features、troubleshooting 与 api-reference 文档。