# 图表类组件（18 种，ECharts 系）

> `chart-bar` / `chart-pie` 详解 + 其余 16 种图表的特有项与绑定字段。
> 返回目录：[index.md](index.md)；全量选项字典（最权威）：[widget-schema.generated.json](../widget-schema.generated.json)。

## 2. chart-bar —— 柱状图

- **type**: `chart-bar`　**默认尺寸**: `[420,300]`　**默认名**: `title` 值或"柱状图"
- 自定义触发器：`itemClicked`（点击某项）。

样式 options（`style.chart`）：

| name | 类型 | 默认 |
|---|---|---|
| `title` | `string` | `柱状图` |
| `title-show` | `boolean` | `true` |
| `title-color` | `color` | `#ffffff` |
| `direction` | `select` | `vertical`（或 `horizontal` 横向） |
| `bar-color` | `color` | `#3aa1ff` |
| `bar-width` | `slider 10~100%` | `45` |
| `bar-radius` | `number` | `4` |
| `show-label` | `boolean` | `false`（显示数值） |
| `show-legend` | `boolean` | `false` |

坐标轴（`style.axis`）：`chart-axis-color`(`#3a4252`)、`chart-axis-label-color`(`#9aa4b2`)、`split-line`(`true`)。

**绑定字段**：

| name | 约束 | 说明 |
|---|---|---|
| `category-field` | `field(recommend=string,min=1,max=1)` | 类目轴，恰 1 个 |
| `metric-fields` | `field(recommend=number,min=1)` | 数值，≥1 个；**每个字段=一条系列** |

未绑定时回退示例数据（`categories`/`values` 逗号串）。

---

## 3. chart-pie —— 饼图

- **type**: `chart-pie`　**默认尺寸**: `[420,320]`　**默认名**: `title` 值或"饼图"
- 自定义触发器：`itemClicked`。

样式 options：

| name | 类型 | 默认 |
|---|---|---|
| `title` | `string` | `饼图` |
| `title-show` | `boolean` | `true` |
| `radius` | `slider 10~90%` | `65` |
| `rose` | `boolean` | `false`（南丁格尔玫瑰） |
| `show-legend` | `boolean` | `true` |
| `show-label` | `boolean` | `true` |
| `label-color` | `color` | `#9aa4b2` |

**绑定字段**：

| name | 约束 | 说明 |
|---|---|---|
| `category` | `field(recommend=string,min=1,max=1)` | 扇区类目 |
| `value` | `field(recommend=number,min=1,max=1)` | 扇区数值 |

> 未绑字段时回退 `demo-names`(`一类,二类,三类,四类`)/`demo-values`(`40,30,20,10`) 逗号串——注意选项名与 chart-bar 的 `categories`/`values` **不同**（`categories` 选项在 pie 上为 undefined）。

---

## 3b. 其余图表族（16 种，ECharts 系）

共享设计：`title`/`title-show`/`title-color` 标题三件套；有图例的配 `show-legend`、有数值标签的配 `show-label`；直角坐标类共享 `chart-axis-color`(`#3a4252`)/`chart-axis-label-color`(`#9aa4b2`)/`split-line`(轴线/文字/分割线)。全部支持 `itemClicked` 触发器（payload=选中项维度）。未绑定字段时回退各自的 `demo-*`/`categories`/`values` 静态串（逗号分隔）。下面每图只列**特有**高频项与绑定字段。

### chart-line 折线图 / chart-area 面积图

- 默认尺寸 `[420,300]`。两者同构，`chart-area` 是 `chart-line` 的预设变体（编辑器插入/`addWidget` 预置 `show-area:true, area-opacity:40`、标题「面积图」）。⚠️ 这是 `meta.defaultOptions`，**手写 JSON 载入不补**——按折线蓝图回落 `show-area:false`、`area-opacity:25`、标题「折线图」，看着就是折线图；手写 chart-area 须显式写 `"show-area": true`。
- 样式：`line-color`(`#3aa1ff`)、`line-width`(2)、`smooth`(平滑)、`show-symbol`(数据点)+`symbol-size`、`show-area`+`area-opacity`、`flow-light`(流光动画)。
- 绑定：`category-field`(string,恰1) + `metric-fields`(number,≥1，**每字段一条线**)。

### chart-biaxial 双轴图 / chart-biaxial-stack 双轴堆叠图

- 默认尺寸 `[460,320]`。一个类目轴 + 左轴柱 + 右轴线（「量+率」同图）；`-stack` 变体由编辑器插入/`addWidget` 预置 `bar-stack:true`（多柱堆叠）；⚠️ 手写 JSON 载入不补（蓝图默认 `false`，不堆叠），须显式写 `"bar-stack": true`。
- 样式：柱 `bar-color`/`bar-width`(18)/`bar-radius`/`bar-stack`/`left-axis-name`；线 `line-color`(`#f7b500`)/`line-width`/`smooth`/`show-symbol`/`right-axis-name`。
- 绑定：`category-field`(恰1)、`metric-fields`(柱·左轴,≥0)、`line-metric-fields`(线·右轴,≥0)——柱线至少一边有字段。

### chart-scatter 散点图

- 默认尺寸 `[420,300]`。相关性/分布；`bubble-mode:true` 开气泡（点大小随 `size-field`）。
- 样式：`point-color`、`point-size`(12)、`bubble-mode`。
- 绑定：`x-field`/`y-field`(number,各恰1)、`size-field`(number,0~1，气泡模式用)。

### chart-radar 雷达图

- 默认尺寸 `[420,320]`。多维对比。
- 样式：`radar-shape`(`polygon`/`circle`)、`radar-radius`(60%)、`area-opacity`(10)、`axis-name-color`。
- 绑定：`indicator-field`(指标名,string,恰1) + `metric-fields`(number,1~6，**每字段一个系列多边形**)。

### chart-funnel 漏斗图

- 默认尺寸 `[420,320]`。转化/递减。
- 样式：`funnel-sort`(`descending`倒三角/`ascending`正三角)、`label-position`(`inside`/`left`/`right`/…)、`gap`(层间距)、`label-color`。
- 绑定：`category` + `value`（各恰 1）。

### chart-gauge 仪表盘

- 默认尺寸 `[360,320]`。单指标占比表盘；无数据时显示 `static-value`(70)。
- 样式：`min-value`/`max-value`(0/100)、`split-number`(刻度段数)、`pointer-color`/`arc-color`/`ring-color`/`tick-color`、`show-detail`+`detail-color`+`unit`。
- 绑定：`value-field`(number,0~1)。⚠️ `resolveValue()` 是**全行求和**（`rows.reduce((s,r)=>s+Number(r[field]),0)`，与 basic-card/basic-progress 同实现），不是"取首行值"——两行 `[60,15]` → 75。要首行值请把数据预处理成单行。

### chart-heatmap 热力图

- 默认尺寸 `[460,320]`。二维密度矩阵（X 类目 × Y 类目 → 值上色）。
- 样式：`low-color`/`high-color`（色带两端）、`show-visualmap`(色条)、`show-label`。
- 绑定：`x-field`/`y-field`(string,各恰1) + `value-field`(number,恰1)。

### chart-treemap 矩形树图

- 默认尺寸 `[460,320]`。层级占比。
- 样式：`gap-width`(块间距)、`show-breadcrumb`(面包屑)、`show-label`+`label-color`。
- 绑定：`name-field`/`value-field`(各恰1)、`group-field`(父级分组,string,0~1，给了即两层树)。

### chart-sankey 桑基图

- 默认尺寸 `[520,340]`。流向/分配（来源→去向：数值）。
- 样式：`node-width`(16)/`node-gap`(8)/`link-curveness`(50%)/`label-color`。
- 绑定：`source-field`/`target-field`(string,各恰1) + `value-field`(number,恰1)——**长表**每行一条链路。

### chart-graph 关系图

- 默认尺寸 `[520,360]`。力导向网络/拓扑。
- 样式：`node-color`/`node-size`(24)/`link-color`/`repulsion`(斥力,320)/`show-label`。
- 绑定：`source-field`/`target-field`(各恰1) + `value-field`(0~1，边权重→节点大小)。

### chart-liquid 水球图

- 默认尺寸 `[300,300]`。单百分比水位球；无数据显示 `static-value`(50)。
- 样式：`liquid-shape`(`circle`/`rect`/`roundRect`/`triangle`/`diamond`/`pin`/`arrow`)、`wave-color-from`/`wave-color-to`(波浪渐变)、`bg-color`、`show-outline`、`label-size`/`label-color`、`max-value`。
- 绑定：`value-field`(number,0~1)——同 gauge，`resolveRatio()` 也是**全行求和**再除以 `max-value` 钳到 0~1。

### chart-wordcloud 词云

- 默认尺寸 `[460,320]`。词频云图。
- 样式：`cloud-shape`(`circle`/`cardioid`心形/`diamond`/`triangle`/`pentagon`/`star`…)、`font-min`/`font-max`(12/48)、`allow-rotate`。
- 绑定：`word-field`(string) + `weight-field`(number)（各恰 1）。

### chart-capsule 胶囊柱图

- 默认尺寸 `[420,280]`。横向排名胶囊条（goview 风）。
- 样式：`item-height`(10)、`show-value`、`unit`、`capsule-colors`(逗号色列表，循环取色)。
- 绑定：`category` + `value`（各恰 1）。

### chart-map 区域地图（choropleth）

- 默认尺寸 `[520,420]`。**行政区按值填色**的 ECharts 地图（中国全国或单省，内置 GeoJSON）；要做标绘/瓦片/CAD 请用 `map-2d`。
- 样式：`map-region`(`china` 或省级 adcode 如 `440000`)、`area-color`/`area-border-color`、`low-color`/`high-color`(值→色带)、`hover-color`、`show-label`(地名)+`label-color`、`show-visualmap`、`enable-roam`(滚轮缩放拖拽)。
- 绑定：`region-field`(区域名,string,恰1) + `value-field`(number,恰1)。名称可写简称（`湖北`/`广东`），组件会映射到内置 GeoJSON 全称（`湖北省`/`广东省`）；对不上的省份悬停显示「暂无数据」，而不是 NaN。
- 交互：点区域触发 `itemClicked` + 选中传递（`select-sync-emit`/`select-sync-receive`），高亮与业务表名称对齐。