视图（View）

概述

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

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

适用场景

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

配置项

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

说明：

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

完整配置示例：

({
  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 中声明视图及其子标记：

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

2. 使用 Spec 配置图表

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

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。

// ✅ 正确：使用 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）。

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