feat(legend): 图例支持多行分页 (#2742)

* feat(legend): 图例支持多行分页 * docs(legend): 图例文档 & demo 完善 * chore: update changelog
antvis · Jul 30, 2021 · 9441b25 · 9441b25
1 parent d33f2ee
commit 9441b25
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 3 deletions.
diff --git 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
@@ -53,6 +53,12 @@ Background box configuration item. _LegendBackgroundCFG_ is configured as follow
 
 Apply to <tag color="green" text="Classification legend">Classification legend</tag>,whether to page when there are too many legend items. (⚠️ 暂不支持多行展示分页)
 
+##### maxRow
+
+<description> _number_ **optional** </description>
+
+Apply to <tag color="green" text="Classification legend">Classification legend</tag>. You can set the maximum number of rows when legend items is flip-paged, (only applicable to 'layout:' horizontal '),default: 1.
+
 ##### pageNavigator
 
 <description>**optional** _object_ </description>
@@ -105,6 +111,8 @@ pageNavigator: {
 },
 ```
 
+<playground path="component/legend/demo/legend-flippage.ts" rid="page-navigator"></playground>
+
 ##### itemHeight
 
 <description>**optional** _number_ _default:_ `null`</description>

diff --git a/docs/common/legend-cfg.zh.md b/docs/common/legend-cfg.zh.md
@@ -55,12 +55,16 @@
 
 适用于 <tag color="green" text="分类图例">分类图例</tag>，当图例项过多时是否进行分页。(⚠️ 暂不支持多行展示分页)
 
+##### maxRow
+
+<description> _number_ **optional** </description>
+
+适用于 <tag color="green" text="分类图例">分类图例</tag>，当图例项过多分页时，可以设置最大行数（仅适用于 `layout: 'horizontal'`），默认为：1。
+
 ##### pageNavigator
 
 <description>**optional** _object_ </description>
 
-<!-- todo 补充分页器的图文介绍 -->
-
 适用于 <tag color="green" text="分类图例">分类图例</tag>，图例分页导航器的主题样式设置。_LegendPageNavigatorCfg_ 配置如下：
 
 | 参数名       | 类型                       | 默认值 | 描述                    |
@@ -109,6 +113,8 @@ pageNavigator: {
 },
 ```
 
+<playground path="component/legend/demo/legend-flippage.ts" rid="page-navigator"></playground>
+
 ##### itemHeight
 
 <description>**optional** _number_ _default:_ `null`</description>

diff --git a/examples/component/legend/demo/legend-flippage.ts 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
@@ -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"
     }
   ]
 }