diff --git a/CHANGELOG.md b/CHANGELOG.md
index 23c92fd5d6..24e0d74fec 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,4 +1,4 @@
-#### 2.3.28 (2021-07-29)
+#### 2.3.28 (2021-07-30)
##### Documentation Changes
@@ -8,6 +8,7 @@
##### New Features
* **interaction:** 内置封装 brush 交互 ([#2719](https://github.com/antvis/g2plot/pull/2719)) ([abc45844](https://github.com/antvis/g2plot/commit/abc45844a77fede2f4480e0a026eefddaa9592df))
+* **legend:** 图例支持多行分页 ([36149724](https://github.com/antvis/g2plot/commit/36149724676d8b66ba4f1ef16ae481b64c4981c6))
##### Bug Fixes
diff --git a/docs/common/legend-cfg.en.md b/docs/common/legend-cfg.en.md
index e9fd4e49c0..6f3ebbd65d 100644
--- a/docs/common/legend-cfg.en.md
+++ b/docs/common/legend-cfg.en.md
@@ -53,6 +53,12 @@ Background box configuration item. _LegendBackgroundCFG_ is configured as follow
Apply to Classification legend,whether to page when there are too many legend items. (⚠️ 暂不支持多行展示分页)
+##### maxRow
+
+ _number_ **optional**
+
+Apply to Classification legend. You can set the maximum number of rows when legend items is flip-paged, (only applicable to 'layout:' horizontal '),default: 1.
+
##### pageNavigator
**optional** _object_
@@ -105,6 +111,8 @@ pageNavigator: {
},
```
+
+
##### itemHeight
**optional** _number_ _default:_ `null`
diff --git a/docs/common/legend-cfg.zh.md b/docs/common/legend-cfg.zh.md
index 90d8f6b5c7..dc374b2ad0 100644
--- a/docs/common/legend-cfg.zh.md
+++ b/docs/common/legend-cfg.zh.md
@@ -55,12 +55,16 @@
适用于 分类图例,当图例项过多时是否进行分页。(⚠️ 暂不支持多行展示分页)
+##### maxRow
+
+ _number_ **optional**
+
+适用于 分类图例,当图例项过多分页时,可以设置最大行数(仅适用于 `layout: 'horizontal'`),默认为:1。
+
##### pageNavigator
**optional** _object_
-
-
适用于 分类图例,图例分页导航器的主题样式设置。_LegendPageNavigatorCfg_ 配置如下:
| 参数名 | 类型 | 默认值 | 描述 |
@@ -109,6 +113,8 @@ pageNavigator: {
},
```
+
+
##### itemHeight
**optional** _number_ _default:_ `null`
diff --git a/examples/component/legend/demo/legend-flippage.ts b/examples/component/legend/demo/legend-flippage.ts
new file mode 100644
index 0000000000..eef89fe713
--- /dev/null
+++ b/examples/component/legend/demo/legend-flippage.ts
@@ -0,0 +1,27 @@
+import { Column } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/antfincdn/P14mCvkybz/large-datra.json')
+ .then((data) => data.json())
+ .then((data) => {
+ const plot = new Column('container', {
+ data,
+ xField: 'product_box',
+ yField: 'value',
+ seriesField: 'province',
+ isGroup: 'true',
+ legend: {
+ flipPage: true,
+ // 两行分页
+ maxRow: 2,
+ pageNavigator: {
+ marker: {
+ style: {
+ fill: 'rgba(0,0,0,0.65)',
+ },
+ },
+ },
+ },
+ });
+
+ plot.render();
+ });
diff --git a/examples/component/legend/demo/meta.json b/examples/component/legend/demo/meta.json
index ba8ebb0e6b..aa2e478e77 100644
--- a/examples/component/legend/demo/meta.json
+++ b/examples/component/legend/demo/meta.json
@@ -36,6 +36,15 @@
"en": "Default unselected legend tem"
},
"screenshot": "https://gw.alipayobjects.com/zos/antfincdn/KL9rDFTlDt/64abafb6-8e4e-48ff-9a79-cb84883a3bef.png"
+ },
+ {
+ "filename": "legend-flippage.ts",
+ "title": {
+ "zh": "图例项分页设置",
+ "en": "Legend flip-page configuration"
+ },
+ "new": "true",
+ "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/ClED4WyJF%26/2e5cd632-9cc7-4809-b944-469d62bd74b1.png"
}
]
}