Bklit UI

简介

适用于 React 应用程序的现代美观 UI 组件。

Bklit UI 是一个基于 shadcn/ui 构建的组件库，旨在帮助您更轻松地构建图表和数据可视化。

用法

面积图使用了与折线图相同的可组合 API。有关交互式示例，请参阅图表画廊。

import { AreaChart, Area, Grid, XAxis, ChartTooltip } from "@bklitui/ui/charts";

const data = [
  { date: new Date("2025-01-01"), revenue: 12000, costs: 8500 },
  { date: new Date("2025-01-02"), revenue: 13500, costs: 9200 },
  // ... more data
];

export default function RevenueChart() {
  return (
    <AreaChart data={data}>
      <Grid horizontal />
      <Area dataKey="revenue" fill="var(--chart-line-primary)" />
      <Area dataKey="costs" fill="var(--chart-line-secondary)" />
      <XAxis />
      <ChartTooltip />
    </AreaChart>
  );
}