开发预览更新于 2026-05-10

Sparkline 缩略走势

行内微缩走势线，常用于 KPI 卡的趋势线。

基础用法

数据通过 props 传入，纯 SVG 渲染，无第三方图表库依赖。配色取自 --viz-1..8 token，色盲友好。

背景

上升 13下降 4平稳 6

<script setup lang="ts">
import { CfSparkline } from '@chufix-design/vue';
const trendUp = [3, 5, 4, 7, 6, 9, 11, 10, 13];
const trendDown = [12, 11, 13, 9, 10, 7, 8, 5, 4];
const flat = [6, 6, 7, 6, 7, 6, 6, 7, 6];
</script>

<template>
  <div class="demo-row" style="align-items: center; gap: 24px;">
    <span>上升 <CfSparkline :data="trendUp" filled smooth :color-index="0" /> 13</span>
    <span>下降 <CfSparkline :data="trendDown" filled smooth :color-index="3" /> 4</span>
    <span>平稳 <CfSparkline :data="flat" :color-index="2" /> 6</span>
  </div>
</template>

<CfSparkline ... />

8 色调色板

通过 colorIndex（0..7）选 --viz-1..8 任一色号，色盲友好且与图表系列色统一。

背景

--viz-1 · indigo--viz-2 · amber--viz-3 · green--viz-4 · red--viz-5 · cyan--viz-6 · magenta--viz-7 · lime--viz-8 · azure

<script setup lang="ts">
import { CfSparkline } from '@chufix-design/vue';
const data = Array.from({ length: 14 }, (_, i) => 5 + Math.sin(i / 2) * 4 + Math.random() * 2);
const labels = ['indigo', 'amber', 'green', 'red', 'cyan', 'magenta', 'lime', 'azure'];
</script>

<template>
  <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px;">
    <span v-for="(label, i) in labels" :key="i" style="display: inline-flex; align-items: center; gap: 8px;">
      <CfSparkline :data="data" :color-index="i" filled smooth :width="100" :height="22" />
      <span style="font-size: 12px; color: var(--fg-3); font-family: var(--font-mono);">--viz-{{ i + 1 }} · {{ label }}</span>
    </span>
  </div>
</template>

<CfSparkline data={data} colorIndex={0} filled smooth />
<CfSparkline data={data} colorIndex={3} filled smooth />

API

属性	类型	默认值	说明
`data`	`number[]`	`—`	数据点数组
`width / height`	`number`	`80 / 24`
`filled`	`boolean`	`false`	显示填充面积
`smooth`	`boolean`	`false`	平滑曲线
`colorIndex`	`0..7`	`0`	颜色索引（—viz-{n+1}）
`showDot`	`boolean`	`true`	高亮最后一个点