# 图表标签规范 (`<chart>`)

## 1. 适用场景与禁令

当页面中需要展示数据图表时，必须统一使用 C2D 内置语义标签 `<chart>`。

- **严禁事项**：绝对禁止手写 `<svg>` / `<path>` / `canvas` 图表，严禁将图表用一堆 `div` 假画；禁止使用真实业务无关的 `TODO` 或空占位数据。

## 2. 属性协议全集

| 属性               | 必填   | 可选值 / 说明                                                                                                                                                                                   |
| :----------------- | :----- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `data-name`        | **是** | 语义化图层名称（如 `data-name="revenue-chart"`）。                                                                                                                                              |
| `type`             | **是** | 图表类型：`line` / `curve` / `area` / `step` / `bar` / `hbar` / `lollipop` / `scatter` / `pie` / `donut` / `funnel` / `radar`。（饼图固定用 `pie`；环图固定用 `donut` 可配 `pieInnerRadius`）。 |
| `variant`          | 否     | `default`（全量图表，含坐标轴与类目）/ `spark`（指标卡迷你图，隐藏轴线与文本，仅保留图形）。                                                                                                    |
| `fill`             | 否     | `solid`（单色）/ `gradient`（渐变，配合 metric 的 `stopEnd`）。                                                                                                                                 |
| `metrics`          | **是** | 单引号包裹 JSON 数组：`[{"name":"序列名", "stroke":"#Hex", "stopEnd":"#Hex"}]`。                                                                                                                |
| `data`             | **是** | 单引号包裹 2D JSON 数组：`[["Q1", 420, 280], ["Q2", 510, 310]]`。第一列为类目标签，后续按 metrics 顺序。                                                                                        |
| `width` / `height` | **是** | **`width` 可写 `100%`**（自适应父容器）**或明确像素**（如 `width="240"`）；**`height` 必须写明确整数像素**（如 `height="260"`）。                                                               |
| 结构色彩           | 否     | `text-color`（文字色）、`axis-color`（网格/轴线色）、`point-fill-color`（折线点背景色，须与卡片背景色一致）。                                                                                   |

> ⚠️ **`spark` 迷你图限定**：仅 `line` / `curve` / `area` / `step` / `bar` / `hbar` 支持 `variant="spark"`。

## 3. 示例范式

⚠️ **请严格遵循 chart 的格式进行生成。特别是 `metrics`、`data` 属性的数据格式**

### 1. 完整分析型图表（默认渐变面积图/折线图）

```html
<chart
  data-name="revenue-trend-chart"
  type="area"
  fill="gradient"
  text-color="#94A3B8"
  axis-color="#334155"
  point-fill-color="#0F172A"
  metrics='[
    { "name": "营收", "stroke": "#A855F7", "stopEnd": "#7E22CE" },
    { "name": "成本", "stroke": "#06B6D4", "stopEnd": "#0891B2" }
  ]'
  data='[
    ["Q1", 420, 280],
    ["Q2", 510, 310],
    ["Q3", 480, 295],
    ["Q4", 620, 340]
  ]'
  width="480"
  height="260"
/>
```

### 2. 指标卡迷你趋势图（Sparkline 定宽/自适应示例）

```html
<chart
  data-name="latency-spark"
  type="bar"
  variant="spark"
  fill="solid"
  metrics='[{ "name": "延时", "stroke": "#10B981" }]'
  data='[["1", 8], ["2", 12], ["3", 7], ["4", 14], ["5", 16]]'
  width="120"
  height="36"
/>
```