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

Author: visiky

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>

docs/common/legend-cfg.zh.md

@@ -55,6 +55,12 @@
 
 适用于 <tag color="green" text="分类图例">分类图例</tag>，当图例项过多时是否进行分页。(⚠️ 暂不支持多行展示分页)
 
+### maxRow
+
+<description> _number_ **optional** </description>
+
+适用于 <tag color="green" text="分类图例">分类图例</tag>，当图例项过多分页时，可以设置最大行数（仅适用于 `layout: 'horizontal'`），默认为：1。
+
 ##### pageNavigator
 
 <description>**optional** _object_ </description>

examples/component/legend/demo/legend-flippage.ts

@@ -0,0 +1,19 @@
+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,
+      },
+    });
+
+    plot.render();
+  });

examples/component/legend/demo/meta.json

@@ -36,6 +36,14 @@
         "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": "Configuration of legend when flip-page"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/KL9rDFTlDt/64abafb6-8e4e-48ff-9a79-cb84883a3bef.png"
     }
   ]
 }