迷你图 / Spark Chart

用于简化数据趋势展示，适合嵌入卡片、列表等紧凑场景中快速显示数据走势。支持线图、面积图、柱状图和饼图。

图表类型

折线图（Line）

面积图（Area）

柱状图（Bar）

饼图（Pie）

示例代码

{/* 折线图 */}
<SparkChart data={data} type="line" />

{/* 面积图 */}
<SparkChart data={data} type="area" />

{/* 柱状图 */}
<SparkChart data={data} type="bar" stroke="oklch(0.6 0.118 184.704)" />

{/* 饼图 */}
<SparkChart data={data} type="pie" width={140} height={80} />

多颜色展示

访问量（橙色）

收入（蓝色）

转化率（绿色）

用户增长（紫色）

示例代码

<SparkChart 
  data={data} 
  stroke="oklch(0.6 0.118 184.704)" 
/>

尺寸变化

小型（32px）

中型（48px）

大型（72px）

示例代码

<SparkChart 
  data={data} 
  width={120} 
  height={48}
/>

面积和线条变化

面积 - 线图

面积 - 蓝色

示例代码

<SparkChart 
  data={data} 
  type="area"
  stroke="oklch(0.646 0.222 41.116)" 
/>

实际应用

访问量

↑ 12%

2,543

收入

↑ 8%

¥12.5K

转化率

↑ 5%

3.8%

分类

占比

4 类

示例代码

<div className="rounded-lg border bg-card p-4">
  <div className="flex justify-between items-center mb-3">
    <h4 className="text-sm font-semibold">访问量</h4>
    <span className="text-xs text-muted-foreground">↑ 12%</span>
  </div>
  <p className="text-2xl font-bold mb-3">2,543</p>
  <SparkChart 
    data={weeklyData} 
    type="line"
    width={100} 
    height={32}
    stroke="oklch(0.646 0.222 41.116)"
  />
</div>

Loading dashboard...