logo

G2

  • 文档
  • API
  • 图表示例
  • 主题
  • 周边生态
  • 所有产品antv logo arrow
  • 5.3.2
  • 快速上手
  • 简介
    • 什么是 G2
    • 在前端框架中使用
    • Spec 和 API
  • 核心概念
    • 图表(Chart)
      • G2 图表组成
      • 如何使用图表
    • 标记(Mark)
      • 概览
      • area
      • box
      • boxplot
      • cell
      • chord
      • density
      • gauge
      • heatmap
      • image
      • interval
      • line
      • lineX
      • lineY
      • link
      • liquid
      • 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
      • pow
      • quantile
      • quantize
      • sqrt
      • threshold
      • time
    • 转换(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
      • radial
      • theta
      • transpose
      • 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)
  • 图表组件
    • 标题(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
    • 按需打包
    • 设置纹理
    • 绘制 3D 图表
    • 服务端渲染(SSR)
    • Spec 函数表达式支持 (5.3.0 支持)
  • 版本特性
    • 新版本特性
    • v4 升级 v5 指南
  • 常见问题 FAQ

interval

上一篇
image
下一篇
line

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...

概述

区间图( interval )图形标记是一种表示数据上下区间的图表的集合。通常用来绘制柱形图、条形图、饼图等,通过坐标系、比例尺、数据 Transform 等的变化,可以产生多种多样的可视化表现样式,例如,将多个并列的类别聚类、形成一组,再在组与组之间进行比较,这种图表叫做 分组柱状图 或 簇状柱形图 。将类别拆分称多个子类别,形成 堆叠柱状图。再如将柱形图与折线图结合起来,共同绘制在一张图上,俗称 双轴图,等等。interval 是图形语法中,最常用的 Mark。

(() => {
const chart = new G2.Chart();
chart.options({
type: 'interval',
data: [
{ letter: 'A', frequency: 0.08167 },
{ letter: 'B', frequency: 0.01492 },
{ letter: 'C', frequency: 0.02782 },
{ letter: 'D', frequency: 0.04253 },
{ letter: 'E', frequency: 0.12702 },
{ letter: 'F', frequency: 0.02288 },
{ letter: 'G', frequency: 0.02015 },
{ letter: 'H', frequency: 0.06094 },
{ letter: 'I', frequency: 0.06966 },
{ letter: 'J', frequency: 0.00153 },
{ letter: 'K', frequency: 0.00772 },
{ letter: 'L', frequency: 0.04025 },
{ letter: 'M', frequency: 0.02406 },
{ letter: 'N', frequency: 0.06749 },
{ letter: 'O', frequency: 0.07507 },
{ letter: 'P', frequency: 0.01929 },
{ letter: 'Q', frequency: 0.00095 },
{ letter: 'R', frequency: 0.05987 },
{ letter: 'S', frequency: 0.06327 },
{ letter: 'T', frequency: 0.09056 },
{ letter: 'U', frequency: 0.02758 },
{ letter: 'V', frequency: 0.00978 },
{ letter: 'W', frequency: 0.0236 },
{ letter: 'X', frequency: 0.0015 },
{ letter: 'Y', frequency: 0.01974 },
{ letter: 'Z', frequency: 0.00074 },
],
// 配置视觉通道
encode: {
x: 'letter', // 配置x通道
y: 'frequency', // 配置y通道
shape: 'rect', // 配置shape通道,默认为'rect'的时候可以不写。可选'rect', 'hollow', 'funnel', 'pyramid'
},
style: {
columnWidthRatio: 0.5, // 配置柱状图宽度占比为0.5
},
});
chart.render();
return chart.getContainer();
})();

更多的案例,可以查看图表示例 - 条形图、图表示例 - 饼图等页面。

配置项

属性描述类型默认值必选
encode配置 interval 标记的视觉通道,包括x、y、color、shape等,用于指定视觉元素属性和数据之间的关系encode-✓
coordinate配置 interval 标记的坐标系,坐标系会执行一系列点转换,从而改变标记的空间展示形式coordinate{type: 'cartesian' }
style配置 interval 标记的图形样式style-

encode

配置 interval 标记的视觉通道。

属性描述类型默认值必选
x绑定 interval 标记的 x 属性通道,一般是 data 中的有序或者无序字段,在绘制饼图的时候可以为空encode-✓
y绑定 interval 标记的 y 属性通道,一般是 data 中的数值或数组字段encode-✓
color绑定 interval 标记的 color 属性通道,如果将数据字段映射到颜色通道,会对数据进行分组,将数据拆分成多个不同颜色的图形,一般用来配置堆叠柱状图等encode-
series绑定 interval 标记的 series 属性通道,根据 series 通道实现分组效果encode-
shape绑定 interval 标记的 shape 属性通道,改变图形标记的绘制形状rect | hollow | funnel | pyramidrect

x & y

interval 标记的位置视觉通道需要 x, y 两个字段的值,支持的数据格式有以下三种:

  • x, y 都是数值,一般的柱状图、玫瑰图。
{
type: "interval",
data: [{ name: "分类一", value: 100 }],
encode: { x: "name", y: "value" },
}
  • x 是数值,y 是数组,区间柱状图、区间玫瑰图、堆叠柱状图、堆叠玫瑰图以及对称的柱状图(漏斗图)。
{
type: "interval",
data: [{ name: '分类一', value: [10, 100] },
{ name: '分类二', value: [20, 80] }],
encode: { x: "name", y: "value" },
}
  • x 为空,y 是数值。一般用于绘制饼图时的数据配置,此时的坐标系是 theta,在 G2 的内部补齐了 x, y。
{
type: "interval",
data: [
{ item: "分类一", count: 40, },
{ item: "分类二", count: 21, },
{ item: "分类三", count: 17 },
{ item: "分类四", count: 13 },
{ item: "分类五", count: 9 },
],
encode: { y: "count", color: "item" },
transform: [{ type: "stackY" }], // 配置stackY数据转换,使得饼图的扇区角度和值的大小对应
coordinate: { type: "theta", }, // 配置theta坐标系,是一种特殊的极坐标系,常用来绘制饼图
}
x 通道绑定的值y 通道绑定的值解释
数值数值常规的柱状图、玫瑰图
数值数组区间柱状图、区间玫瑰图、堆叠柱状图、堆叠玫瑰图、漏斗图
空数值饼图

color

color 视觉通道影响 interval 图形标记的填充颜色。在区间图上应用时一般映射分类字段,对数据进行分组。

(() => {
const chart = new G2.Chart();
chart.options({
type: 'interval',
data: [
{ name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
{ name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
{ name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
{ name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
{ name: 'London', 月份: 'May', 月均降雨量: 47 },
{ name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
{ name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
{ name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
{ name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
{ name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
{ name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
{ name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
{ name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 },
{ name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
{ name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
{ name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 },
],
encode: {
x: '月份',
y: '月均降雨量',
color: 'name', // 配置color通道,对数据进行分组
},
});
chart.render();
return chart.getContainer();
})();

但是有些特殊情况下也会映射的连续字段上,对不同区间的数值对应的图形使用不同的颜色:

(() => {
const chart = new G2.Chart();
chart.options({
type: 'interval',
data: [
{ name: 'a1', value: 50 },
{ name: 'a2', value: 60 },
{ name: 'a3', value: 40 },
],
encode: {
x: 'name',
y: 'value',
// color通道也可以传入一个回调函数,根据条件返回不同的值
color: (d) => (d.value > 50 ? 'high' : 'low'),
},
});
chart.render();
return chart.getContainer();
})();

配置图形转换transform中的 stackY ,可以对分组的区域进行堆叠,则形成堆叠面积图,避免因为重叠导致的信息模糊:

(() => {
const chart = new G2.Chart();
chart.options({
type: 'interval',
data: [
{ name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
{ name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
{ name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
{ name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
{ name: 'London', 月份: 'May', 月均降雨量: 47 },
{ name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
{ name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
{ name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
{ name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
{ name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
{ name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
{ name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
{ name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 },
{ name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
{ name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
{ name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 },
],
// 配置视觉通道
encode: { x: '月份', y: '月均降雨量', color: 'name' },
transform: [{ type: 'stackY' }], // 按照指定通道分组,对每组的 y 和 y1 通道进行堆叠,实现堆叠效果
});
chart.render();
return chart.getContainer();
})();

series

series 视觉通道将 interval 图形标记的数据分成多个系列,一般和 color 通道一起配置,也可以通过配置图形转换transform中的 dodgeX ,生成 series 通道值为 color 通道的值,根据 series 通道实现分组效果:

(() => {
const chart = new G2.Chart();
chart.options({
type: 'interval',
data: [
{ name: 'London', 月份: 'Jan.', 月均降雨量: 18.9 },
{ name: 'London', 月份: 'Feb.', 月均降雨量: 28.8 },
{ name: 'London', 月份: 'Mar.', 月均降雨量: 39.3 },
{ name: 'London', 月份: 'Apr.', 月均降雨量: 81.4 },
{ name: 'London', 月份: 'May', 月均降雨量: 47 },
{ name: 'London', 月份: 'Jun.', 月均降雨量: 20.3 },
{ name: 'London', 月份: 'Jul.', 月均降雨量: 24 },
{ name: 'London', 月份: 'Aug.', 月均降雨量: 35.6 },
{ name: 'Berlin', 月份: 'Jan.', 月均降雨量: 12.4 },
{ name: 'Berlin', 月份: 'Feb.', 月均降雨量: 23.2 },
{ name: 'Berlin', 月份: 'Mar.', 月均降雨量: 34.5 },
{ name: 'Berlin', 月份: 'Apr.', 月均降雨量: 99.7 },
{ name: 'Berlin', 月份: 'May', 月均降雨量: 52.6 },
{ name: 'Berlin', 月份: 'Jun.', 月均降雨量: 35.5 },
{ name: 'Berlin', 月份: 'Jul.', 月均降雨量: 37.4 },
{ name: 'Berlin', 月份: 'Aug.', 月均降雨量: 42.4 },
],
// 配置视觉通道
encode: {
x: '月份',
y: '月均降雨量',
color: 'name', // 配置color通道,对数据进行分组
series: 'name', // 配置series通道,将数据分成不同系列
},
// transform: [{ type: 'dodgeX' }], // 生成 series 通道值为 color 通道的值,根据 series 通道实现分组效果
});
chart.render();
return chart.getContainer();
})();

shape

interval 标记的支持的形状如下:

形状描述示例
rect绘制填充的矩形
hollow绘制空心的矩形
funnel绘制漏斗图
pyramid绘制金字塔形状

coordinate

interval 图形标记在不同坐标系下的展示有所差别。根据坐标系或坐标系转换的不同,可以绘制柱状图、条形图、玫瑰图、饼图等多种图表。

坐标系或坐标系转换坐标系配置图表
直角坐标系{ type: 'cartesian' }柱状图、直方图等
transpose 坐标系转置变换{ transform: [{ type: 'transpose' }] }条形图等
极坐标系{ type: 'polar' }玫瑰图等
theta 坐标系{ type: 'theta' }饼图、环图等
radial 坐标系{ type: 'radial' }玉珏图等

在transpose 坐标系转置变换后区间图的表现形式为条形图。

(() => {
const chart = new G2.Chart();
chart.options({
type: 'interval',
data: [
{ item: '分类一', count: 40 },
{ item: '分类二', count: 21 },
{ item: '分类三', count: 17 },
{ item: '分类四', count: 13 },
{ item: '分类五', count: 9 },
],
encode: { x: 'item', y: 'count' },
coordinate: {
transform: [{ type: 'transpose' }], // 配置transpose坐标系转置变换
},
});
chart.render();
return chart.getContainer();
})();

在极坐标系下区间图的表现形式为玫瑰图,使用半径大小对比数据大小。

(() => {
const chart = new G2.Chart();
chart.options({
type: 'interval',
data: {
type: 'fetch',
value:
'https://gw.alipayobjects.com/os/bmw-prod/87b2ff47-2a33-4509-869c-dae4cdd81163.csv',
},
encode: { x: 'year', color: 'year', y: 'people' },
transform: [{ type: 'groupX', y: 'sum' }], // 对离散的 x 通道进行分组,并求和
coordinate: {
type: 'polar', // // 配置坐标系为极坐标系,用于绘制玫瑰图
},
axis: false, // 不显示坐标轴
});
chart.render();
return chart.getContainer();
})();

在theta 坐标系下区间图的表现形式为饼图,使用弧度大小对比数据大小。

(() => {
const chart = new G2.Chart();
chart.options({
type: 'interval',
data: [
{ item: '分类一', count: 40 },
{ item: '分类二', count: 21 },
{ item: '分类三', count: 17 },
{ item: '分类四', count: 13 },
{ item: '分类五', count: 9 },
],
encode: { y: 'count', color: 'item' },
transform: [{ type: 'stackY' }], // 配置stackY数据转换,使得饼图的扇区角度和值的大小对应
coordinate: {
type: 'theta', // 配置theta坐标系,是一种特殊的极坐标系,常用来绘制饼图
outerRadius: 0.8, // 极坐标半径,范围 0-1
},
});
chart.render();
return chart.getContainer();
})();

在radial 坐标系下区间图的表现形式为玉珏图,同样使用圆弧对比数据大小。

(() => {
const chart = new G2.Chart();
chart.options({
type: 'interval',
data: [
{ question: '问题 1', percent: 0.21 },
{ question: '问题 2', percent: 0.4 },
{ question: '问题 3', percent: 0.49 },
{ question: '问题 4', percent: 0.52 },
{ question: '问题 5', percent: 0.53 },
{ question: '问题 6', percent: 0.84 },
{ question: '问题 7', percent: 1 },
{ question: '问题 8', percent: 1.2 },
],
encode: { x: 'question', y: 'percent', color: 'percent' },
scale: { color: { range: ['#BAE7FF', '#1890FF'] } }, // 配置color通道的比例尺,使玉珏图的颜色在两个颜色之间平滑地过渡
coordinate: {
type: 'radial', // 配置radial坐标系,是一种特殊的极坐标系,常用来绘制玉珏图
innerRadius: 0.1, // 极坐标内半径,范围 0-1
endAngle: 3.141592653589793, // 极坐标系结束弧度
},
animate: { enter: { type: 'waveIn', duration: 800 } }, // 配置入场动画
axis: { y: { tickFilter: (d, i) => i !== 0 } }, // 刻度值过滤,y坐标轴0刻度不显示
});
chart.render();
return chart.getContainer();
})();

style

配置 interval 标记的样式。

在表格最后增加一列【必选】,并将值设为为空,结果如下:

属性描述类型默认值必选
columnWidthRatio配置柱状图宽度占比,范围为 0 - 1number | (d, index, data, column) => number0.9
minWidthinterval 图形柱子的最小宽度,单位为像素number | (d, index, data, column) => number- Infinity
maxWidthinterval 图形柱子的最大宽度,单位为像素number | (d, index, data, column) => numberInfinity
minHeightinterval 图形柱子的最小高度,单位为像素number | (d, index, data, column) => number- Infinity
radiusinterval 图形外层矩形的四个圆角大小number | (d, index, data, column) => number0
radiusTopLeftinterval 图形外层矩形左上角的圆角number | (d, index, data, column) => number0
radiusTopRightinterval 图形外层矩形右上角的圆角number | (d, index, data, column) => number0
radiusBottomRightinterval 图形外层矩形右下角的圆角number | (d, index, data, column) => number0
radiusBottomLeftinterval 图形外层矩形左下角的圆角number | (d, index, data, column) => number0
innerRadiusinterval 图形内层矩形的四个圆角大小number | (d, index, data, column) => number0
innerRadiusTopLeftinterval 图形内层矩形左上角的圆角number | (d, index, data, column) => number0
innerRadiusTopRightinterval 图形内层矩形右上角的圆角number | (d, index, data, column) => number0
innerRadiusBottomRightinterval 图形内层矩形右下角的圆角number | (d, index, data, column) => number0
innerRadiusBottomLeftinterval 图形内层矩形左下角的圆角number | (d, index, data, column) => number0
insetinterval 图形矩形四个方向的内边距number | (d, index, data, column) => number0
insetLeftinterval 图形左边的内间距number | (d, index, data, column) => number0
insetRightinterval 图形右边的内间距number | (d, index, data, column) => number0
insetBottominterval 图形下面的内间距number | (d, index, data, column) => number0
insetTopinterval 图形上面的内间距number | (d, index, data, column) => number0
fillinterval 图形的填充色string | (d, index, data, column) => stringhollow 为空字符串' '
fillOpacityinterval 图形的填充透明度number | (d, index, data, column) => numberrect 为0.95
strokeinterval 图形的描边string | (d, index, data, column) => string-
strokeOpacityinterval 图形描边透明度number | (d, index, data, column) => numberhollow 为1
lineWidthinterval 图形描边的宽度number | (d, index, data, column) => numberhollow 为2
lineDashinterval 图形描边的虚线配置,第一个值为虚线每个分段的长度,第二个值为分段间隔的距离。lineDash 设为[0, 0]的效果为没有描边。[number,number] | (d, index, data, column) => [number , number]-
opacityinterval 图形的整体透明度number | (d, index, data, column) => number-
shadowColorinterval 图形阴影颜色string | (d, index, data, column) => string-
shadowBlurinterval 图形阴影的高斯模糊系数number | (d, index, data, column) => number-
shadowOffsetX设置阴影距interval 图形的水平距离number | (d, index, data, column) => number-
shadowOffsetY设置阴影距interval 图形的垂直距离number | (d, index, data, column) => number-
cursor鼠标样式。同 css 的鼠标样式。string | (d, index, data, column) => stringdefault

尝试一下:

示例

  • 怎么绘制一个对称条形图?

配置 y 通道的时候,返回一个回调函数,根据一个分类字段,将 y 通道的值区分为正值和负值。

(() => {
const chart = new G2.Chart();
chart.options({
type: 'interval',
autoFit: true,
data: [
{ age: 0, sex: 1, people: 9735380 },
{ age: 0, sex: 2, people: 9310714 },
{ age: 5, sex: 1, people: 10552146 },
{ age: 5, sex: 2, people: 10069564 },
{ age: 10, sex: 1, people: 10563233 },
{ age: 10, sex: 2, people: 10022524 },
{ age: 15, sex: 1, people: 10237419 },
{ age: 15, sex: 2, people: 9692669 },
{ age: 20, sex: 1, people: 9731315 },
{ age: 20, sex: 2, people: 9324244 },
{ age: 25, sex: 1, people: 9659493 },
{ age: 25, sex: 2, people: 9518507 },
{ age: 30, sex: 1, people: 10205879 },
{ age: 30, sex: 2, people: 10119296 },
{ age: 35, sex: 1, people: 11475182 },
{ age: 35, sex: 2, people: 11635647 },
{ age: 40, sex: 1, people: 11320252 },
{ age: 40, sex: 2, people: 11488578 },
{ age: 45, sex: 1, people: 9925006 },
{ age: 45, sex: 2, people: 10261253 },
{ age: 50, sex: 1, people: 8507934 },
{ age: 50, sex: 2, people: 8911133 },
{ age: 55, sex: 1, people: 6459082 },
{ age: 55, sex: 2, people: 6921268 },
{ age: 60, sex: 1, people: 5123399 },
{ age: 60, sex: 2, people: 5668961 },
{ age: 65, sex: 1, people: 4453623 },
{ age: 65, sex: 2, people: 4804784 },
{ age: 70, sex: 1, people: 3792145 },
{ age: 70, sex: 2, people: 5184855 },
{ age: 75, sex: 1, people: 2912655 },
{ age: 75, sex: 2, people: 4355644 },
{ age: 80, sex: 1, people: 1902638 },
{ age: 80, sex: 2, people: 3221898 },
{ age: 85, sex: 1, people: 970357 },
{ age: 85, sex: 2, people: 1981156 },
{ age: 90, sex: 1, people: 336303 },
{ age: 90, sex: 2, people: 1064581 },
],
encode: {
x: 'age',
y: (d) => (d.sex === 1 ? -d.people : d.people),
color: 'sex',
},
scale: {
color: { type: 'ordinal' }, // 将color通道定义域映射到有序离散的值域,通常用于分类的数据
x: { range: [1, 0] }, // 将x通道比例尺值域反转
},
coordinate: { transform: [{ type: 'transpose' }] }, // 配置坐标系转置,绘制条形图
axis: { y: { labelFormatter: '~s' } }, // 配置y轴刻度值标签格式化
legend: { color: { labelFormatter: (d) => (d === 1 ? 'Male' : 'Female') } }, // 配置color通道图例标签格式化
tooltip: {
items: [
(d) => ({
value: d.people,
name: d.sex === 1 ? 'Male' : 'Female',
}),
],
}, // 配置tooltip元素
});
chart.render();
return chart.getContainer();
})();