来源：https://ui.docs.xihanfun.com/components/sparkline # Sparkline 迷你图 `new` 在文字、表格单元格或指标卡里一眼看到一组数的趋势形状。没有坐标轴、图例与提示框，高度缺省是一行字高，随文排版。

Headless Styles Vue React Web Components

## 用法一组数画成一条折线，末点标出现在的位置；可及名写在 aria-label 上，摘要由组件生成 ```vue ``` ```html

``` ## 组件结构加粗的是必需部件。 `data-scope="sparkline"`：**`root`** · `summary` · `band` · `reference-line` · `area-fill` · `line` · `bar` · `dot` ## 示例 ### 变体 variant 切换同一组数的画法：line 折线、area 折线下铺一层淡洗、bar 柱 ```vue ``` ```html

``` ### 盈亏 variant="win-loss" 只看正负：正值在中线之上、负值在中线之下，柱等高，0 不画 ```vue ``` ```html ``` ### 极值 markers="extremes" 在末点之外再标出最高与最低点；markers="none" 一个点都不标 ```vue ``` ```html

``` ### 参考带 band 把正常区间画成一条淡底，一眼看出哪几次越界；纵向范围会扩到把它包进来 ```vue ``` ```html ``` ### 颜色颜色本身带好坏含义时写 tone：线与标记点整条取语气色；缺省 neutral 线取弱化色、末点取品牌色 ```vue ``` ```html ``` ### 随文缺省高度是所在行的一行字高、宽 6rem，放进正文或更小的说明文字里都不撑高这一行 ```vue ``` ```html

本周注册共 362 人，较上周多 18%。

数据截至今日 18:00

``` ### 指标卡与统计数值组合：数值给出现在是多少，迷你图给出是怎么走到这里的；尺寸由组件槽放大到铺满卡片 ```vue ``` ```html

本月营收 138 万元较上月 5.3%

``` ### 摘要文案读屏念出的描述由 translations.summary 按摘要模型写成，数值按 locale 与 format 格式化 ```vue ``` ```html ``` ### 参考线 reference 画一条横贯的虚线：写目标值看每天达没达标，写 mean / median 看高于还是低于平常；摘要一并读出它的值 ```vue ``` ```html

``` ## 设计指引 ### 何时使用 - 指标卡里给数值配上它是怎么走到这里的：近 12 周访问量、近 30 天营收。 - 表格的一列里并排比较多行的走势：每个接口的延迟、每个门店的销量。 - 正文里一句话带出一段趋势，读者不需要读具体的值。 ### 何时不用 - 需要读出具体的值、悬停查看或用键盘逐点浏览：改用[直角坐标图](./cartesian-chart)。 - 只有一个数：使用[统计数值](./statistic)。 - 要比较几组数的大小而不是各自的走势：并排的迷你图各自缩放，高低不能互相比较，改用直角坐标图把它们画在同一根数值轴上。 - 单值对量程（完成度、容量占用）：使用[进度条](./progress)。 ### 特性 - 数据可以是数值数组，也可以是对象数组配合 `y` 指明数值字段；null、undefined 与 NaN 是缺失，折线在缺失处断开，不按 0 画。对象数组没给 `y`、或字段在数据里不存在时报错，根上写 `data-state="error"`；没有一个有值的点时根上写 `data-state="empty"`，什么都不画。 - 形态由 `variant` 切换：`line` 折线（缺省）；`area` 在折线下铺一层淡洗，铺到根的下沿，只衬托形状；`bar` 一个值一根柱，纵向范围包含 0，柱从 0 长出；`win-loss` 只看正负，正值在中线之上、负值在中线之下，柱等高，0 与缺失不画，颜色取涨跌色（缺省绿涨红跌）。 - 对象数组给了 `x` 且它是数值或日期时，折线按横坐标的间距排开，间隔不均的采样也不会被拉平；`x` 是类目名或没给时按数据次序等距排开。柱与盈亏形态总是按次序等宽排开。数据按横坐标排好序再交给组件，组件按数据次序连线。 - `curve="monotone"` 把折线画得平滑，且不会越过数据点冒出数据里没有的高低。 - 标记点由 `markers` 控制：`last`（缺省）标出末点，读者先看到「现在在哪」；`extremes` 在末点之外再标出最高与最低点，末点恰是最高或最低时只标一次，全部相等时只标末点；`none` 不标。柱形态下是把对应的那几根柱换成强调色。盈亏形态不画标记点。 - `band` 把正常区间 `[下界, 上界]` 画成一条横贯的淡底，纵向范围会扩到把它包进来，越界的点一眼可见。下界大于上界或不是有限数时报错。盈亏形态不画参考带。 - `reference` 画一条横贯的细虚线（部件 `reference-line`）：写一个数是目标或阈值，写 `mean` / `median` 按有值的点算出均值 / 中位数。纵向范围同样扩到把它包进来；摘要里一并读出它的值，读屏用户也知道这条尺子在哪。既不是有限数也不是 `mean` / `median` 时报错。盈亏形态不画参考线，它的中线已经是 0。 - 缺省语气 `neutral`：线与柱取弱化色 `--xh-chart-deemphasis`，标记点与强调的柱取品牌色相的分类色 1。写了其他 `tone` 时整条取语气色：颜色本身带好坏含义（错误率、合格率）时用它，并在旁边用文字说明好坏。 - 尺寸由组件槽决定：宽 `--xh-sparkline-width`（缺省 6rem），高 `--xh-sparkline-height`（缺省一行字高，`1lh`）。放进指标卡时把宽改成 `100%`、高改成一格间距令牌即可铺满；几何在尺寸变化后重新计算，线宽与标记点大小不随之缩放。 - 首次出现时折线从头描到尾，标记点等描线的笔尖到了才出现，柱从基线长出，数据晚于挂载到达（异步取数，或 Web Components 连上之后才赋 `data`）时同样播这段入场；之后数据变化时从当前位置插值到新位置，数据整体平移一格（滚动窗口）时折线跟着滑动而不是变形。`animated={false}`（Web Components 写 `animated="false"`）关闭过渡；系统开了减弱动效或容器写了 `data-motion="reduce"` 时几何直接到位，只保留淡入。 - 三个适配器的作者侧写法不同，最终 DOM 一致：Vue 与 React 渲染一个 `