---
title: "视图（View）"
description: "使用 G2 视图组织多个标记，理解数据与配置的继承关系，并配置视图样式和组合布局。"
language: "zh"
canonical: "https://g2.antv.antgroup.com/zh/manual/core/view/"
version: "5.4.8"
---

## 概述

在 G2 中，**视图（View）** 是图表的核心组成单元，用于承载和组织多个标记（Mark），并统一管理数据、坐标系、交互、样式等。每个视图拥有独立的数据、坐标系和交互配置，是应用交互和样式的最小单位。通过合理拆分视图，可以实现多图层、分面、嵌套等复杂可视化布局。

视图不仅支持灵活的数据和编码配置，还能继承和覆盖父级（如复合视图、分面等）传递的配置，实现灵活的组合与复用。

---

## 适用场景

- 单一图表（如柱状图、折线图等）的基础绘制
- 多图层叠加（如柱状图+折线图、点图+热力图等）
- 分面（Facet）、小 multiples、仪表盘等复合布局
- 局部交互、局部样式、局部数据的独立管理
- 主题、动画、状态等高级特性分区应用

---

## 配置项

视图支持丰富的配置项，涵盖数据、编码、坐标、样式、交互等各个方面。其配置项与顶层 Chart 基本一致，常用如下：

| 配置项      | 说明                  | 类型         | 作用范围/继承关系        |
| ----------- | --------------------- | ------------ | ------------------------ |
| data        | 数据源                | array/object | view 及其所有 children   |
| encode      | 数据到视觉通道的映射  | object       | view 及其所有 children   |
| scale       | 视觉通道的比例尺      | object       | 可继承/覆盖（view/mark） |
| transform   | 数据变换              | array        | 可继承/覆盖（view/mark） |
| coordinate  | 坐标系配置            | object       | 可继承/覆盖（view/mark） |
| style       | 视图区域样式          | object       | 仅本 view                |
| axis        | 坐标轴配置            | object       | 可继承/覆盖（view/mark） |
| legend      | 图例配置              | object       | 可继承/覆盖（view/mark） |
| tooltip     | 提示框配置            | object       | 仅本 view                |
| interaction | 交互配置              | object       | 可继承/覆盖（view/mark） |
| theme       | 主题配置              | object       | 可继承/覆盖              |
| children    | 子标记（marks）       | array        | 仅本 view                |

**说明：**

- `data`、`encode`、`scale`、`axis`、`legend`、`transform`、`coordinate`、`interaction` 等配置在 view 层级设置后，会自动作用于所有 children（mark），mark 层级也可单独覆盖。
- 其他如 `style`、`tooltip` 仅作用于当前 view。
- `children` 只能包含标记（mark），不能嵌套 view。如需多视图组合，请使用顶层容器（如 `spaceFlex`、`spaceLayer`、`facet` 等）。

**完整配置示例：**

```js
({
  type: 'view',
  data: [
    { type: 'A', value: 30 },
    { type: 'B', value: 50 },
    { type: 'C', value: 20 },
  ],
  encode: { x: 'type', y: 'value' },
  scale: { y: { nice: true } },
  coordinate: { type: 'rect' },
  style: { viewFill: '#f5f5f5' },
  axis: { y: { grid: true } },
  legend: { color: { position: 'top' } },
  tooltip: {
    title: { field: 'type' },
    items: [{ field: 'value' }],
  },
  interaction: { elementHighlight: true },
  theme: { color: ['#5B8FF9', '#5AD8A6', '#5D7092'] },
  children: [
    { type: 'interval' },
    { type: 'line', style: { stroke: '#faad14' } },
  ],
});
```

---

## 配置方式

### 1. 配置式声明

直接在 options 中声明视图及其子标记：

```js
({
  type: 'view',
  data: [...],
  encode: {...},
  children: [
    { type: 'interval', encode: {...} }, // ✅ 正确：使用 mark
    { type: 'line', encode: {...} },     // ✅ 正确：使用 mark
    // { type: 'view', ... },            // ❌ 错误：不支持嵌套 view
  ],
});
```

### 2. 使用 Spec 配置图表

通过 API 创建视图并添加标记：

```js
const chart = new G2.Chart();

chart.options({
  type: 'view',
  children: [
    { type: 'interval', encode: { x: 'type', y: 'value' } },
    { type: 'line', encode: { x: 'type', y: 'value' } },
  ],
});
chart.render();
```

### 3. 复合视图与分面

视图可作为复合节点（如分面、空间布局）的子节点。**注意：多视图组合应使用复合容器，而非在 view 的 children 中嵌套 view。**

```js
// ✅ 正确：使用 facet 组合多个 view
chart.options({
  type: 'facetRect',
  children: [
    {
      type: 'interval',
      encode: { x: 'type', y: 'value' },
    },
    {
      type: 'line',
      encode: { x: 'type', y: 'value' },
    },
  ],
});

// ✅ 正确：使用 spaceFlex 组合多个视图
chart.options({
  type: 'spaceFlex',
  children: [
    {
      type: 'interval',
      encode: { x: 'type', y: 'value' },
    },
    {
      type: 'line',
      encode: { x: 'date', y: 'sales' },
    },
  ],
});

// ❌ 错误：不要在 view 的 children 中嵌套 view
// chart.options({
//   type: 'view',
//   children: [
//     { type: 'view', ... }, // 会报错：Unknown Component: mark.view
//   ]
// });
```

---

## 视图与样式

视图支持设置自身区域的样式（如背景色、边框等），并可对子标记进行统一样式管理。详见[样式（Style）](/zh/manual/core/style/)。

```js
({
  type: 'interval',
  viewStyle: {
    viewFill: '#e6f7ff',
    plotFill: '#fffbe6',
    mainFill: '#fff',
    contentFill: '#f0f5ff',
  },
  style: { fill: '#5B8FF9' },
});
```