logo

G2

  • 文档
  • 图表介绍
  • API
  • 图表示例
  • 主题
  • 周边生态
  • 所有产品antv logo arrow
  • 5.3.3
  • 快速上手
  • 简介
    • 什么是 G2
    • 在前端框架中使用
    • Spec 和 API
  • 核心概念
    • 图表(Chart)
      • G2 图表组成
      • 如何使用图表
    • 标记(Mark)
      • 概览
      • area
      • box
      • boxplot
      • cell
      • chord
      • density
      • gauge
      • heatmap
      • image
      • interval
      • line
      • lineX
      • lineY
      • link
      • liquid
      • sunburst
      • point
      • polygon
      • range
      • rangeX
      • rangeY
      • rect
      • shape
      • text
      • vector
      • wordCloud
    • 视图(View)
    • 数据(Data)
      • 概览
      • custom
      • ema
      • fetch
      • filter
      • fold
      • inline
      • join
      • kde
      • log
      • map
      • pick
      • rename
      • slice
      • sort
      • sortBy
    • 编码(Encode)
    • 比例尺(Scale)
      • 概览
      • band
      • linear
      • log
      • ordinal
      • point
      • quantile
      • quantize
      • sqrt
      • threshold
      • time
      • pow
    • 转换(Transform)
      • 概览
      • bin
      • binX
      • diffY
      • dodgeX
      • flexX
      • group
      • groupColor
      • groupX
      • groupY
      • jitter
      • jitterX
      • jitterY
      • normalizeY
      • pack
      • sample
      • select
      • selectX
      • selectY
      • sortColor
      • sortX
      • sortY
      • stackEnter
      • stackY
      • symmetryY
    • 坐标系(Coordinate)
      • 概览
      • fisheye
      • parallel
      • polar
      • theta
      • transpose
      • radial
      • cartesian3D
      • helix
    • 样式(Style)
    • 动画(Animate)
      • 概览
      • fadeIn
      • fadeOut
      • growInX
      • growInY
      • morphing
      • pathIn
      • scaleInX
      • scaleInY
      • scaleOutX
      • scaleOutY
      • waveIn
      • zoomIn
      • zoomOut
    • 状态(State)
    • 交互(Interaction)
      • 概览
      • brushAxisHighlight
      • brushHighlight
      • brushXHighlight
      • brushYHighlight
      • brushFilter
      • brushXFilter
      • brushYFilter
      • chartIndex
      • elementHighlight
      • elementHighlightByColor
      • elementHighlightByX
      • elementSelect
      • elementSelectByColor
      • elementSelectByX
      • fisheye
      • legendFilter
      • legendHighlight
      • poptip
      • scrollbarFilter
      • sliderFilter
    • 复合(Composition)
      • 概览
      • facetCircle
      • facetRect
      • repeatMatrix
      • spaceFlex
      • spaceLayer
      • timingKeyframe
    • 主题(Theme)
      • 概览
      • academy
      • classic
      • classicDark
    • 事件(Event)
    • 颜色映射(Color)
  • 图表 API
  • 图表组件
    • 标题(Title)
    • 坐标轴(Axis)
    • 图例(Legend)
    • 滚动条(Scrollbar)
    • 缩略轴(Slider)
    • 提示信息(Tooltip)
    • 数据标签(Label)
  • 进阶主题
    • 关系图(Graph)
      • forceGraph
      • pack
      • sankey
      • tree
      • treemap
    • 地图(Geo)
      • geoPath
      • geoView
    • 3D 图表(3D Chart)
      • 绘制 3D 图表
      • point3D
      • line3D
      • interval3D
      • surface3D
    • 插件扩展(Plugin)
      • renderer
      • rough
      • lottie
      • a11y
    • 按需打包
    • 设置纹理
    • 服务端渲染(SSR)
    • Spec 函数表达式支持 (5.3.0 支持)
  • 版本特性
    • 新版本特性
    • v4 升级 v5 指南
  • 常见问题 FAQ

vector

上一篇
text
下一篇
wordCloud

Resources

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

概述

Vector 图形是将数据映射成为箭头的样式去可视化展示,通过控制箭头的位置、大小、颜色、角度等信息,去可视化一些向量场数据。它具备有以下视觉通道:

  • x:水平方向的位置,对 x 轴刻度对应
  • y:垂直方向的位置,对 y 轴刻度对应,位置锚点定位为箭头的中心
  • color:箭头的颜色
  • size:箭头的长度
  • rotate:箭头的旋转角度,起始角度为直角坐标系中的 右边,旋转方向为 顺时针

Vector 图形标记会将数据通过上述通道映射成向量数据:[start, end]。

vector

import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
});
chart.options({
type: 'vector',
data: [
{ longitude: 3.375, latitude: 45.625, u: -1.3287959, v: -2.6778967 },
{ longitude: 3.625, latitude: 45.625, u: -1.012322, v: -2.8640392 },
{ longitude: 3.875, latitude: 45.625, u: -0.7947747, v: -3.0722558 },
{ longitude: 4.125, latitude: 45.625, u: -0.70024896, v: -3.311115 },
{ longitude: 4.375, latitude: 45.625, u: -0.62092346, v: -3.5720115 },
{ longitude: 4.625, latitude: 45.625, u: -0.54210645, v: -3.798527 },
{ longitude: 4.875, latitude: 45.625, u: -0.531152, v: -3.6907976 },
{ longitude: 5.125, latitude: 45.625, u: -0.58284736, v: -3.2739944 },
{ longitude: 5.375, latitude: 45.625, u: -0.6388908, v: -2.8400586 },
{ longitude: 5.625, latitude: 45.625, u: -0.68683237, v: -2.4499083 },
{ longitude: 5.875, latitude: 45.625, u: -0.6949226, v: -2.2482452 },
{ longitude: 6.125, latitude: 45.625, u: -0.67617714, v: -2.189318 },
{ longitude: 6.375, latitude: 45.625, u: -0.6690367, v: -2.1100578 },
{ longitude: 6.625, latitude: 45.625, u: -0.6749189, v: -2.0985062 },
{ longitude: 6.875, latitude: 45.625, u: -0.61023676, v: -2.067676 },
{ longitude: 7.125, latitude: 45.625, u: -0.46769565, v: -1.9350243 },
{ longitude: 7.375, latitude: 45.625, u: -0.31841764, v: -1.7978805 },
{ longitude: 7.625, latitude: 45.625, u: -0.296789, v: -1.6545589 },
{ longitude: 7.875, latitude: 45.625, u: -0.49164182, v: -1.6660733 },
{ longitude: 8.125, latitude: 45.625, u: -0.7730643, v: -1.8458021 },
{ longitude: 8.375, latitude: 45.625, u: -1.0214152, v: -2.0177982 },
{ longitude: 8.625, latitude: 45.625, u: -1.131555, v: -2.0604942 },
{ longitude: 8.875, latitude: 45.625, u: -1.143751, v: -1.9134171 },
{ longitude: 9.125, latitude: 45.625, u: -1.1628431, v: -1.6859006 },
{ longitude: 9.375, latitude: 45.625, u: -1.1996219, v: -1.4945693 },
{ longitude: 9.625, latitude: 45.625, u: -1.2651129, v: -1.385864 },
{ longitude: 9.875, latitude: 45.625, u: -1.340052, v: -1.3189282 },
],
encode: {
x: 'longitude',
y: 'latitude',
rotate: ({ u, v }) => (Math.atan2(v, u) * 180) / Math.PI,
size: 30,
color: ({ u, v }) => Math.hypot(v, u),
},
scales: {
size: { range: [6, 20] },
color: { type: 'sequential', palette: 'viridis' },
},
axis: {
x: { grid: false },
y: { grid: false },
},
style: {
arrowSize: 10,
},
legend: false,
});
chart.render();

配置项

属性描述类型默认值必选
encode配置 vector 标记的视觉通道,包括x、y、rotate、size等,用于指定视觉元素属性和数据之间的关系encode-✓
style配置 vector 标记的图形样式style-

encode

属性描述类型默认值必选
x绑定 vector 标记的 x 属性通道,绑定水平方向的位置,与 x 轴刻度对应encode-✓
y绑定 vector 标记的 y 属性通道,绑定垂直方向的位置,与 y 轴刻度对应,位置锚点定位为箭头的中心encode-✓
size绑定 vector 标记的 size 属性通道,改变图形标记的大小,size 视觉通道映射在箭头的长度上encode-✓
rotate绑定 vector 标记的 rotate 属性通道, 用于将数据字段映射为箭头的旋转角度encode-✓
color绑定 vector 标记的 color 属性通道,如果将数据字段映射到颜色通道,会对数据进行分组,不同的颜色对应不同的分组, color视觉通道映射在箭头的颜色上。encode-

style

属性描述类型默认值必选
arrowSize箭头图标的大小,可以指定像素值、也可以指定箭头长度的相对值。string | number'40%'
fill图形的填充色string | Function<string>-
fillOpacity图形的填充透明度number | Function<number>-
stroke图形的描边string | Function<string>-
strokeOpacity描边透明度number | Function<number>-
lineWidth图形描边的宽度number | Function<number>-
lineDash描边的虚线配置,第一个值为虚线每个分段的长度,第二个值为分段间隔的距离。lineDash 设为[0, 0]的效果为没有描边。[number,number] | Function<[number, number]>-
opacity图形的整体透明度number | Function<number>-
shadowColor图形阴影颜色string | Function<string>-
shadowBlur图形阴影的高斯模糊系数number | Function<number>-
shadowOffsetX设置阴影距图形的水平距离number | Function<number>-
shadowOffsetY设置阴影距图形的垂直距离number | Function<number>-
cursor鼠标样式。同 css 的鼠标样式,默认 'default'。string | Function<string>'default'

示例

  • 怎么指定箭头图标的长度?

有两种指定箭头图标长度的方式,一种是通过填写像素值,比如 4,来指定为固定长度;另外一种是通过指定一个百分比,比如 30%,来指定参考箭头长度的相对长度。默认值为 40%。如下示例:

import { Chart } from '@antv/g2';
const chart = new Chart({
container: 'container',
});
chart.options({
type: 'vector',
data: {
type: 'fetch',
value: 'https://gw.alipayobjects.com/os/antfincdn/F5VcgnqRku/wind.json',
},
encode: {
x: 'longitude',
y: 'latitude',
rotate: ({ u, v }) => (Math.atan2(v, u) * 180) / Math.PI,
size: ({ u, v }) => Math.hypot(v, u),
color: ({ u, v }) => Math.hypot(v, u),
},
scales: {
size: { range: [6, 20] },
color: { type: 'sequential', palette: 'viridis' },
},
axis: {
x: { grid: false },
y: { grid: false },
},
style: {
arrowSize: 4,
// arrowSize: '30%',
},
legend: false,
});
chart.render();

更多的案例,可以查看图表示例页面。