# 统计卡 Stat

分类：展示

标签 · 数字（等宽数字）· 和上期比的变化 · 迷你折线。变化只有涨（成功色）跌（危险色）两种含义色。

## 示例
```html
<div class="xxd-stats" style="width:100%;max-width:640px">
  <div class="xxd-stat"><p class="xxd-stat__label">本周写入</p><p class="xxd-stat__value">1,284<span class="xxd-stat__unit">篇</span></p><span class="xxd-stat__delta" data-tone="up">↑ 12.4% 比上周</span><span class="xxd-stat__spark" data-spark="8,9,7,11,10,13,15"></span></div>
  <div class="xxd-stat"><p class="xxd-stat__label">新会员</p><p class="xxd-stat__value">86</p><span class="xxd-stat__delta" data-tone="down">↓ 3 比上周</span><span class="xxd-stat__spark" data-spark="12,11,13,10,9,10,8"></span></div>
  <div class="xxd-stat"><p class="xxd-stat__label">平均写入耗时</p><p class="xxd-stat__value">2.4<span class="xxd-stat__unit">秒</span></p><span class="xxd-stat__delta">持平</span><span class="xxd-stat__spark" data-spark="5,5,6,5,5,4,5"></span></div>
</div>
```

## 属性与类名
- 类名：`xxd-stats` `xxd-stat` `xxd-stat__label` `xxd-stat__value` `xxd-stat__unit` `xxd-stat__delta` `xxd-stat__spark`

## JS
```js
el.innerHTML = Xxd.sparkline([3, 5, 4, 8])  // 或者 data-spark="3,5,4,8" 再 Xxd.init()
```

## 键盘与读屏
- 迷你折线是 aria-hidden 的装饰；变化要写成文字（↑ 12.4% 比上周），不能只靠颜色。