React 组件

UG 数据看板统计

面向数据看板的轻量统计组件，只接收展示数据，不读取接口、权限或业务路由。

导入方式

按需从包入口导入组件，并在应用入口引入一次样式文件。

tsx

import {
  UGBarChart,
  UGDonutChart,
  UGGaugeChart,
  UGHeatmapChart,
  UGRadarChart,
  UGRankingList,
  UGStackedBarChart,
  UGStatisticCard,
  UGTrendChart,
} from '@ug666/ui-react'

完整数据看板

指标、趋势、占比与排名可独立使用，也可以由业务项目按页面网格组合。

待处理任务

较昨日 +2

本周完成

较上周 +8

进行中项目

较上周 +1

存储使用

68GB

较上月 +6%

68 / 100 GB

工作趋势

交付达成率

区域渠道构成

直销渠道

华东区

华南区

时段活跃热力

周一

周二

团队能力对比

任务状态

60任务

任务类型

部门完成率

产品组92%

46 / 50 项+3.2

研发组86%

61 / 71 项+1.8

运营组78%

32 / 41 项+4.1

设计组71%

22 / 31 项-1.4

代码示例

数据请求、缓存、字段映射和权限判断由消费项目处理。

tsx

<UGTrendChart
  aria-label="近七日任务趋势"
  series={[
    { label: '新增任务', data: trendData },
    { label: '已完成', data: completedTrendData, color: 'success' },
  ]}
/>

<UGDonutChart
  items={statusData}
  totalLabel="任务"
/>

<UGRankingList
  items={departmentData}
  max={100}
  formatValue={(value) => `${value}%`}
/>

<UGBarChart
  data={typeData}
 />

<UGGaugeChart value={86} target={90} />

<UGStackedBarChart data={channelRows} />

<UGHeatmapChart rows={activityRows} />

<UGRadarChart
  axes={abilityAxes}
  series={abilitySeries}
/>

属性

属性	类型	默认值	说明
UGStatisticCard	title / value / sparkline / progress	value 必填	组合指标、微趋势或进度信息。
UGTrendChart.series	TrendChartSeries[]	—	支持多系列、图例筛选与逐点悬浮明细。
UGDonutChart.items	DonutChartItem[]	必填	传入分类、数值和可选语义色，组件计算占比。
UGRankingList.items	RankingListItem[]	必填	在统一 max 刻度下比较多项数值。
UGBarChart.data	BarChartPoint[]	必填	比较少量分类，并提供悬浮与键盘明细。
UGGaugeChart.value	number	必填	在设定区间中展示当前值和可选目标。
UGStackedBarChart.data	StackedBarRow[]	必填	比较多个对象的总量和内部构成。
UGHeatmapChart.rows	HeatmapRow[]	必填	以二维色阶展示密度和活跃度。
UGRadarChart.series	RadarChartSeries[]	必填	在同一组维度上比较多个数据系列。
formatValue	(value: number) => string	中文数字格式	只负责显示格式，不参与业务数据映射。