rect
概述
rect 是用于绘制矩形标记的核心图表元素，它通过定义矩形的起点、终点、宽度、高度以及其他图形属性（如颜色、样式），实现不同的可视化需求。rect可以根据绑定的数据动态调整矩形的位置、大小和样式，从而直观地展示数据的分布、对比关系或密度信息。rect广泛应用于柱状图、热力图、矩阵图等场景。
rect核心功能特点：
- 绘制矩形形状：rect 是构建矩形类图表的基础单元，可以用来构建柱、块、热力等图表。 每个矩形单元通过映射数据的数值或分类信息，展示具体数据内容。
- 丰富的编码映射：用户可以自由将数据字段映射到矩形的 X 轴、Y 轴、大小、颜色等视觉属性。 提供灵活的自定义能力，通过字段和样式的结合，生成多种样式的矩形图形。
- 高扩展性和互动性：支持交互功能（如点击、高亮、缩放等），提升图形与用户间的动态互动。 适用于不同领域的矩形可视化需求，如栅格图（heatmap）、数据密度分布图等。
- 与 G2 生态无缝衔接：作为 G2 Mark 系统的一部分，rect 与其他组件（如 line、point 等）能够自由组合，满足复杂场景的数据可视化需求。
开始使用
import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
});
chart.options({
type: 'rect',
data: {
type: 'fetch',
value: 'https://assets.antv.antgroup.com/g2/athletes.json',
},
encode: { x: 'weight', y: 'height', color: 'sex' },
transform: [{ type: 'bin', opacity: 'count' }],
style: { inset: 0.5 },
});
chart.render(); // 渲染图标
更多的案例，可以查看图表示例页面。
配置项
| 属性 | 描述 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| encode | 配置 rect 标记的视觉通道，包括x、y、color等，用于指定视觉元素属性和数据之间的关系 |
encode | - | ✓ |
| transform | 配置 rect 数据转换操作（如分箱、排序、过滤等）。 |
transform | - | |
| style | 配置 rect 图形样式 |
style | - |
encode
配置 rect 标记的视觉通道，定义数据字段与视觉属性之间映射关系的重要配置，它决定了数据如何转化为视觉表现。
| 属性 | 描述 | 类型 | 默认值 | 必选 |
|---|---|---|---|---|
| color | 绑定 rect 标记的 color 属性通道，如果将数据字段映射到颜色通道，会对数据进行分组，将数据拆分成多个不同颜色的区域 |
encode | - | |
| shape | 绑定 rect 标记的 shape 属性通道，改变图形标记的绘制形状 |
encode | ‘rect’ |
color
color 视觉通道影响 rect 图形标记的填充颜色（在应用某些空心形状的时候，例如 hollow ，则会改变图形的 描边颜色）。在点图上应用时一般映射分类字段，对数据进行分组。
import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
});
chart.options({
type: 'rect',
data: [
{ x: 1, y: 1, type: 'type1' },
{ x: 1, y: 2, type: 'type2' },
{ x: 2, y: 1, type: 'type3' },
{ x: 2, y: 2, type: 'type1' },
],
transform: [{ type: 'bin' }],
encode: { shape: 'rect', x: 'x', y: 'y', color: 'type' },
style: { inset: 0.5 },
});
chart.render(); // 渲染图标
shape
通过 encode 的 shape 属性，您可以指定单元格的几何形状。shape 决定了每个单元格在画布上以什么样的形状渲染出来。shape 标记的支持的形状如下：
| 图形 | 描述 |
|---|---|
| rect | 矩形 |
| hollow | 空心矩形 |
import * as G2 from '@antv/g2';
const { Chart } = G2;
const chart = new Chart({
container: 'container',
});
const container = chart.getContainer();
const shapeMap = [
{
shape: 'rect',
label: '矩形',
},
{
shape: 'hollow',
label: '空心矩形',
},
];
chart.options({
type: 'rect',
data: {
type: 'fetch',
value: 'https://assets.antv.antgroup.com/g2/athletes.json',
},
encode: { shape: 'rect', x: 'weight', y: 'height', color: 'sex' },
transform: [{ type: 'bin', opacity: 'count' }],
style: { inset: 0.5 },
});
const handleSetShape = (shape) => {
// 设置选中的坐标系
chart.options({
encode: { shape },
});
chart.render(); // 重新渲染图表
};
// 插入Encode-Color 选择器
const selectorContainer = document.createElement('div');
selectorContainer.textContent = '选择形状 ';
const selector = document.createElement('select');
selector.innerHTML = shapeMap.map(
(shape, index) =>
`<option value="${shape.shape}" ${index === 0 ? 'selected' : ''}>${
shape.label
}</option>`,
);
selector.onchange = (e) => {
handleSetShape(e.target.value);
};
selectorContainer.appendChild(selector);
container.insertBefore(selectorContainer, container.childNodes[0]);
chart.render();
更多的encode配置，可以查查看 encode 介绍页面。
transform
transform 是用于数据转换的核心配置项，它允许在数据绑定到图形标记之前对原始数据进行预处理。通过对数据的加工，生成更适合可视化的结构化数据，从而更清晰地表达数据分布、密度或统计特征。
常用的转换类型 type 有以下几个：
- bin: 将连续数据分箱，生成直方图矩形
- stackY: 垂直方向堆叠矩形，自动计算每个分类的堆叠高度
import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
});
chart.options({
type: 'rect',
data: {
type: 'fetch',
value: 'https://assets.antv.antgroup.com/g2/athletes.json',
},
encode: { x: 'weight', color: 'sex' },
transform: [
{ type: 'binX', y: 'count' },
{ type: 'stackY', orderBy: 'series' },
],
});
chart.render();
更多的transform配置，可以查看 transform 介绍页面。
style
style 用于设置图表元素的外观样式，包括填充颜色、边框样式、阴影效果等。
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| radius | 矩形的四个圆角大小 | number | (datum, index, data, column) => number | 0 |
| radiusTopLeft | 左上角的圆角 | number | (datum, index, data, column) => number | 0 |
| radiusTopRight | 右上角的圆角 | number | (datum, index, data, column) => number | 0 |
| radiusBottomRight | 右下角的圆角 | number | (datum, index, data, column) => number | 0 |
| radiusBottomLeft | 左下角的圆角 | number | (datum, index, data, column) => number | 0 |
| inset | 矩形四个方向的内边距 | number | (datum, index, data, column) => number | 0 |
| insetLeft | 左边的内间距 | number | (datum, index, data, column) => number | 0 |
| insetRight | 右边的内间距 | number | (datum, index, data, column) => number | 0 |
| insetBottom | 下面的内间距 | number | (datum, index, data, column) => number | 0 |
| insetTop | 上面的内间距 | number | (datum, index, data, column) => number | 0 |
| fill | 图形的填充色 | number | (datum, index, data, column) => string | - |
| fillOpacity | 图形的填充透明度 | number | (datum, index, data, column) => number | - |
| stroke | 图形的描边 | number | (datum, index, data, column) => string | - |
| strokeOpacity | 描边透明度 | number | (datum, index, data, column) => number | - |
| lineWidth | 图形描边的宽度 | number | (datum, index, data, column) => number | - |
| lineDash | 描边的虚线配置，第一个值为虚线每个分段的长度，第二个值为分段间隔的距离。lineDash 设为[0, 0]的效果为没有描边。 | [number,number] |(datum, index, data, column) => [number, number] | - |
| opacity | 图形的整体透明度 | number | (datum, index, data, column) => number | - |
| shadowColor | 图形阴影颜色 | number | (datum, index, data, column) => string | - |
| shadowBlur | 图形阴影的高斯模糊系数 | number | (datum, index, data, column) => number | - |
| shadowOffsetX | 设置阴影距图形的水平距离 | number | (datum, index, data, column) => number | - |
| shadowOffsetY | 设置阴影距图形的垂直距离 | number | (datum, index, data, column) => number | - |
| cursor | 鼠标样式。同 css 的鼠标样式，默认 ‘default’。 | number | (datum, index, data, column) => string | ‘default’ |
尝试一下
import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
autoFit: true,
});
chart.options({
type: 'rect',
data: {
type: 'fetch',
value: 'https://assets.antv.antgroup.com/g2/athletes.json',
},
encode: { x: 'weight', color: 'sex' },
transform: [
{ type: 'binX', y: 'count' },
{ type: 'stackY', orderBy: 'series' },
],
style: { inset: 0.5 },
});
chart.render();
更多的style配置，可以查看 style 介绍页面。