docs(label): 增加一个数据标签的 demo (#2875)

examples/case/statistical-scenario/demo/meta.json

@@ -10,7 +10,6 @@
         "zh": "对比漏斗图",
         "en": "Compare Funnel Diagram"
       },
-      "new": true,
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*gS12TpN1MN8AAAAAAAAAAAAAARQnAQ"
     },
     {
@@ -27,7 +26,6 @@
         "zh": "场景漏斗图",
         "en": "Funnel Scenario"
       },
-      "new": true,
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/kqkXF8ap7d/24934434-0067-4c1f-9c22-e51b27beb3f6.png"
     },
     {

examples/component/label/API.en.md

@@ -0,0 +1,25 @@
+---
+title: API
+---
+
+#### Usage
+
+There are two ways to configure labels
+
+Method 1, pass in 'Boolean' to set whether to display a label.
+
+```ts
+label: false; // close label
+```
+
+Method 2, pass in _LegendCfg_ to configure the label as a whole.
+
+```ts
+label: {
+  content: '标签'
+}
+```
+
+#### Properties
+
+`markdown:docs/common/label.en.md`

examples/component/label/API.zh.md

@@ -0,0 +1,26 @@
+---
+title: API
+---
+
+#### 使用方式
+
+配置数据标签有两种方式：
+
+第一种，传入 `boolean` 设置是否显示数据标签。
+
+```ts
+label: false; // 关闭数据标签
+```
+
+第二种，传入 _LabelCfg_ 对数据标签进行整体配置。
+
+```ts
+label: {
+  layout: 'horizontal',
+  position: 'right'
+}
+```
+
+#### 配置属性
+
+`markdown:docs/common/label.zh.md`

examples/component/label/demo/custom-label.ts

@@ -0,0 +1,51 @@
+import { Pie, G2 } from '@antv/g2plot';
+
+const G = G2.getEngine('canvas');
+
+const data = [
+  { sex: '男', sold: 0.45 },
+  { sex: '女', sold: 0.55 },
+];
+
+const piePlot = new Pie('container', {
+  appendPadding: 10,
+  data,
+  angleField: 'sold',
+  colorField: 'sex',
+  radius: 0.66,
+  color: ['#1890ff', '#f04864'],
+  label: {
+    content: (obj) => {
+      const group = new G.Group({});
+      group.addShape({
+        type: 'image',
+        attrs: {
+          x: 0,
+          y: 0,
+          width: 40,
+          height: 50,
+          img:
+            obj.sex === '男'
+              ? 'https://gw.alipayobjects.com/zos/rmsportal/oeCxrAewtedMBYOETCln.png'
+              : 'https://gw.alipayobjects.com/zos/rmsportal/mweUsJpBWucJRixSfWVP.png',
+        },
+      });
+
+      group.addShape({
+        type: 'text',
+        attrs: {
+          x: 20,
+          y: 54,
+          text: obj.sex,
+          textAlign: 'center',
+          textBaseline: 'top',
+          fill: obj.sex === '男' ? '#1890ff' : '#f04864',
+        },
+      });
+      return group;
+    },
+  },
+  interactions: [{ type: 'element-active' }],
+});
+
+piePlot.render();

examples/component/label/demo/meta.json

@@ -0,0 +1,17 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "custom-label.ts",
+      "title": {
+        "zh": "自定义数据标签",
+        "en": "Custom Label"
+      },
+      "new": true,
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/P7ARYNBdol/3988b5ab-b286-4b2c-befa-eac77afd5bac.png"
+    }
+  ]
+}

examples/plugin/custom-pattern/demo/meta.json

@@ -10,7 +10,6 @@
         "zh": "自定义 pattern 1",
         "en": "Custom pattern 1"
       },
-      "new": true,
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/K3xBN5N4Qz/f7dd5830-13b4-4f06-a6aa-e4b1a2eab8c1.png"
     },
     {
@@ -19,7 +18,6 @@
         "zh": "自定义 pattern 2",
         "en": "Custom pattern 2"
       },
-      "new": true,
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/m%24tVnt%26fw1/0df6c0bd-d4e4-401d-9f8f-3e06e66dd0f6.png"
     },
     {
@@ -28,7 +26,6 @@
         "zh": "自定义 pattern 3",
         "en": "Custom pattern 3"
       },
-      "new": true,
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/6P5yjvGTfV/2c60bc1b-88b6-4937-b852-fc97af953007.png"
     }
   ]