用途
本技能用于构建数据可视化与指标仪表盘（Analytics & Metrics Dashboards），帮助开发者在项目中创建图表、KPI 展示、指标仪表盘或数据可视化组件。核心图表实现基于 Recharts 库。
主要能力
- 折线图（Line Chart）：支持多数据系列对比，示例中同时展示 revenue 与 users 两条曲线，包含网格、坐标轴、提示框和图例。
- 柱状图（Bar Chart）：示例展示了按类别的销售数据展示，含圆角柱形样式。
- 饼图（Pie Chart）：示例展示了数据分布，使用固定色板与扇区颜色分配。
- KPI 卡片（KPI Card）：可展示标题、数值、变化百分比（带上升/下降趋势指示）及可选图标。
- 仪表盘布局（Dashboard Layout）：使用网格布局组合 KPI 卡片区与图表区。
- 格式化工具函数：
formatNumber（数字转 K/M 缩写）、formatCurrency（货币格式化）、formatPercent（百分比格式化）。
使用方式
安装依赖：
npm install recharts
随后在 React 组件中按需引入对应的 Recharts 组件（如 LineChart、BarChart、PieChart、ResponsiveContainer 等），并参照示例传入数据即可。KPI 卡片与仪表盘布局示例使用 Tailwind CSS 类名进行样式组织。
适用场景
- 需要展示时间序列趋势（如收入、用户数）的图表。
- 需要按类别比较数值（如各品类销售额）的场景。
- 需要展示构成或占比分布的饼图场景。
- 需要在仪表盘顶部展示关键指标（收入、活跃用户、转化率、客单价等）的 KPI 卡片区域。
- 需要统一数字、货币与百分比展示格式的项目。
限制
暂未提供关于浏览器兼容性、性能优化、无障碍支持、主题定制、服务端渲染兼容性等方面的说明。收费、价格、平台等商业信息暂未提供。