图表组件

基于 ECharts 封装的图表组件，主题色自动同步。

RingChart 环形图

用于展示分类数据的占比分布，如设备状态、类型分布等。

基础用法

:::demo

dashboard/ring-chart-basic

:::

API

参数	说明	类型	默认值
data	图表数据	LabeledValue[]	—
showLegend	是否显示图例	boolean	true

LabeledValue 类型：

interface LabeledValue {
  label: string    // 数据项名称
  value: number    // 数值
  color?: string   // 自定义颜色（可选，不传则使用主题系列色）
  percent?: number // 百分比（可选，用于tooltip显示）
}

---

ProgressRing 进度环

用于展示单个百分比进度，如完成率、达成率。

基础用法

:::demo

dashboard/progress-ring-basic

:::

API

参数	说明	类型	默认值
percent	进度百分比 (0-100)	number	0
label	中心标签文字	string	''
color	进度条颜色（可选，不传则使用主题主色渐变）	string	—

---

BarLineChart 柱线混合图

用于展示趋势对比，如销售额（柱）+ 利润（线）。

基础用法

:::demo

dashboard/bar-line-chart-basic

:::

API

参数	说明	类型	默认值
xAxis	X轴数据	string[]	—
series	系列数据	ChartSeries[]	—

ChartSeries 类型：

interface ChartSeries {
  name: string           // 系列名称
  data: number[]         // 数据
  type?: 'bar' | 'line'  // 图表类型（默认bar）
  color?: string         // 自定义颜色（可选）
}

---

LiquidGauge 水球图

水波纹百分比可视化，适合展示完成度、达成率等。

基础用法

:::demo

dashboard/liquid-gauge-basic

:::

API

参数	说明	类型	默认值
percent	百分比 (0-100)	number	0
label	标签文字	string	''
color	水球颜色（可选，不传则使用主题主色）	string	—

---

RiskDonut 风险占比环形图

带引线标注的风险分布环形图，自动映射低/中/高风险到成功/警告/危险色。

基础用法

:::demo

dashboard/risk-donut-basic

:::

API

参数	说明	类型	默认值
data	图表数据	LabeledValue[]	内置演示数据
showAnnotations	是否显示两侧引线标注	boolean	true

颜色映射规则：

• label='低风险' → 成功色 (success)
• label='中风险' → 警告色 (warning)
• label='高风险' → 危险色 (danger)
• 其他 label → 按顺序使用主题系列色

Events

事件名	说明	回调参数
click	点击某个风险项时触发	(item: LabeledValue)

---

使用建议

1. 数据格式 — 所有图表组件都使用统一的 LabeledValue 或 ChartSeries 类型，便于数据流转
2. 颜色自定义 — 不传 color 时自动使用主题色，传入则覆盖（支持十六进制、rgba）
3. 响应式 — 图表会自动监听容器尺寸变化（基于 ResizeObserver）
4. 主题联动 — 切换 FScreenContainer 的 theme 后，所有图表色彩自动同步
5. ECharts 版本 — 需要 echarts >= 5.5.0，组件内部按需引入所需模块（PieChart、BarChart、LineChart、LiquidFillChart）

性能优化

• 图表组件内部使用 useEChart 封装，自动处理初始化、resize、销毁
• 大数据量场景（>1000条）建议分页或聚合数据后再传入
• 避免频繁切换主题（debounce 至少 300ms）