图表类型

Graphic Walker 通过 geoms 配置支持多种图表类型。每种几何类型将数据映射为不同的视觉表示。

通用图表

这些图表使用默认的 'generic' 坐标系。

几何类型	名称	适用场景
`'bar'`	柱状图	比较分类、显示分布
`'line'`	折线图	时间趋势、连续数据
`'area'`	面积图	累计总量、随时间变化的构成
`'point'`	散点图	两个度量之间的相关性
`'circle'`	圆点图	与散点图相同，使用填充圆点
`'tick'`	刻度图	沿轴的值分布
`'rect'`	热力图	二维分布、密度
`'arc'`	饼图/环形图	整体中的部分占比
`'boxplot'`	箱线图	统计分布（四分位数、异常值）
`'table'`	数据表格	在图表视图中显示原始数据

地理图表

这些图表需要 coordSystem: 'geographic'。

几何类型	名称	适用场景
`'poi'`	散点地图	基于位置的数据点
`'choropleth'`	等值区域图	使用颜色区域进行区域比较

视觉编码通道

每种图表类型使用视觉编码通道将数据字段映射到视觉属性：

通道	说明	适用类型
`columns`	X 轴位置	所有通用图表
`rows`	Y 轴位置	所有通用图表
`color`	颜色色相	所有图表
`opacity`	透明度	所有图表
`size`	元素大小	point、circle
`shape`	元素形状	point
`theta`	角度	arc（饼图/环形图）
`radius`	半径	arc（环形图内径）
`longitude`	地图经度	poi
`latitude`	地图纬度	poi
`geoId`	地理区域 ID	choropleth
`details`	详细分组（无视觉编码）	所有图表
`text`	文本标签	所有图表
`filters`	行级筛选	所有图表

聚合

当 defaultAggregated 为 true（默认值）时，度量字段会自动聚合。可用的聚合函数：

聚合器	说明
`sum`	求和
`mean`	算术平均值
`count`	记录数
`min`	最小值
`max`	最大值
`median`	中位数
`variance`	统计方差
`stdev`	标准差
`distinctCount`	去重计数

堆叠模式

堆叠模式控制重叠标记的排列方式。通过 layout.stack 设置：

模式	说明
`'none'`	不堆叠 — 标记重叠
`'stack'`	将标记堆叠在一起
`'normalize'`	堆叠并归一化为 100%
`'zero'`	从零基线堆叠
`'center'`	居中堆叠（流图）

分面

在 rows 或 columns 中同时放置维度字段和度量字段，即可将可视化拆分为多个面板。Graphic Walker 会自动创建分面（小倍数）布局。

例如，将 Region 放在列中，Sales 放在行中，同时 Month 也在列中，会创建一行图表 — 每个区域一个 — 分别显示随时间变化的销售额。

大小模式

通过 layout.size.mode 控制图表大小：

模式	行为
`'auto'`	根据内容自动调整大小
`'fixed'`	使用指定的 `width` 和 `height` 值
`'full'`	填满父容器

配置示例

const chart: IChart = {
  visId: 'example',
  name: 'Sales Trend',
  encodings: {
    dimensions: [],
    measures: [],
    rows: [{ fid: 'sales', name: 'Sales', analyticType: 'measure', semanticType: 'quantitative' }],
    columns: [{ fid: 'month', name: 'Month', analyticType: 'dimension', semanticType: 'temporal' }],
    color: [{ fid: 'region', name: 'Region', analyticType: 'dimension', semanticType: 'nominal' }],
    opacity: [],
    size: [],
    shape: [],
    theta: [],
    radius: [],
    longitude: [],
    latitude: [],
    geoId: [],
    details: [],
    filters: [],
    text: [],
  },
  config: {
    defaultAggregated: true,
    geoms: ['line'],
    coordSystem: 'generic',
    limit: -1,
  },
  layout: {
    showTableSummary: false,
    stack: 'none',
    showActions: false,
    interactiveScale: true,
    zeroScale: true,
    size: { mode: 'auto', width: 800, height: 400 },
    format: {},
    resolve: {},
  },
};