feat: Upgrade pattern

examples/pie/basic/demo/basic.ts

@@ -24,15 +24,6 @@ const piePlot = new Pie('container', {
       textAlign: 'center',
     },
   },
-  pattern: {
-    type: 'dot',
-    cfg: {
-      radius: 2,
-      padding: 10,
-      isStagger: true,
-      mode: 'repeat',
-    },
-  },
   interactions: [{ type: 'element-active' }],
 });
 

examples/plugin/pattern/demo/bar-pattern.ts

@@ -0,0 +1,30 @@
+import { Bar } from '@antv/g2plot';
+
+const data = [
+  { type: '分类一', value: 27 },
+  { type: '分类二', value: 25 },
+  { type: '分类三', value: 18 },
+  { type: '分类四', value: 15 },
+  { type: '分类五', value: 10 },
+  { type: '其他', value: 5 },
+];
+
+const plot = new Bar('container', {
+  data,
+  xField: 'value',
+  yField: 'type',
+  // 可不设置
+  // seriesField: 'type',
+  pattern: {
+    type: 'dot',
+    cfg: {
+      radius: 2,
+      padding: 10,
+      // dot 不进行交错
+      isStagger: false,
+      mode: 'repeat',
+    },
+  },
+});
+
+plot.render();

examples/plugin/pattern/demo/column-pattern.ts

@@ -0,0 +1,26 @@
+import { Column } from '@antv/g2plot';
+
+const data = [
+  { type: '分类一', value: 27 },
+  { type: '分类二', value: 25 },
+  { type: '分类三', value: 18 },
+  { type: '分类四', value: 15 },
+  { type: '分类五', value: 10 },
+  { type: '其他', value: 5 },
+];
+
+const plot = new Column('container', {
+  data,
+  yField: 'value',
+  xField: 'type',
+  pattern: {
+    type: 'dot',
+    cfg: {
+      radius: 2,
+      padding: 10,
+      mode: 'repeat',
+    },
+  },
+});
+
+plot.render();

examples/plugin/pattern/demo/group-column-pattern.ts

@@ -0,0 +1,38 @@
+import { Column } from '@antv/g2plot';
+
+const 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 },
+];
+
+const plot = new Column('container', {
+  data,
+  yField: '月均降雨量',
+  xField: '月份',
+  seriesField: 'name',
+  isGroup: true,
+  pattern: {
+    type: 'dot',
+    cfg: {
+      radius: 2,
+      padding: 10,
+      mode: 'repeat',
+    },
+  },
+});
+
+plot.render();

examples/plugin/pattern/demo/meta.json

@@ -0,0 +1,71 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "pie-pattern.ts",
+      "title": {
+        "zh": "带贴图图案的饼图",
+        "en": "Pie plot with pattern"
+      },
+      "new": true,
+      "screenshot": ""
+    },
+    {
+      "filename": "pie-pattern-callback.ts",
+      "title": {
+        "zh": "带贴图图案的饼图(回调方式)",
+        "en": "Pie plot with pattern callback"
+      },
+      "new": true,
+      "screenshot": ""
+    },
+    {
+      "filename": "column-pattern.ts",
+      "title": {
+        "zh": "带贴图图案的柱状图",
+        "en": "Column plot with pattern"
+      },
+      "new": true,
+      "screenshot": ""
+    },
+    {
+      "filename": "group-column-pattern.ts",
+      "title": {
+        "zh": "带贴图图案的分组柱状图",
+        "en": "Grouped column plot with pattern"
+      },
+      "new": true,
+      "screenshot": ""
+    },
+    {
+      "filename": "bar-pattern.ts",
+      "title": {
+        "zh": "带贴图图案的条形图",
+        "en": "Bar plot with pattern"
+      },
+      "new": true,
+      "screenshot": ""
+    },
+    {
+      "filename": "pie-pattern-callback.ts",
+      "title": {
+        "zh": "带贴图图案的饼图(回调方式)",
+        "en": "Pie plot with pattern callback"
+      },
+      "new": true,
+      "screenshot": ""
+    },
+    {
+      "filename": "radial-bar-pattern.ts",
+      "title": {
+        "zh": "带贴图图案的玉珏图",
+        "en": "Radial-bar plot with pattern"
+      },
+      "new": true,
+      "screenshot": ""
+    }
+  ]
+}

examples/plugin/pattern/demo/pie-pattern-callback.ts

@@ -0,0 +1,49 @@
+import { Pie, createPattern } from '@antv/g2plot';
+
+const data = [
+  { type: '分类一', value: 27 },
+  { type: '分类二', value: 25 },
+  { type: '分类三', value: 18 },
+  { type: '分类四', value: 15 },
+  { type: '分类五', value: 10 },
+  { type: '其他', value: 5 },
+];
+
+const pattern = (datum, color) =>
+  createPattern({
+    type: 'dot',
+    cfg: {
+      radius: datum.type === '其他' ? 1 : 2,
+      padding: 4,
+      mode: 'repeat',
+      stroke: 'transparent',
+      bgColor: datum.type === '其他' ? '#014c63' : color,
+    },
+  });
+
+const plot = new Pie('container', {
+  appendPadding: 10,
+  data,
+  angleField: 'value',
+  colorField: 'type',
+  radius: 0.9,
+  label: false,
+  pieStyle: {
+    lineWidth: 1,
+  },
+  legend: {
+    // 缺少文档
+    marker: (text, index, item) => {
+      const color = item.style.fill;
+      return {
+        style: {
+          fill: text === '其他' ? pattern({ type: text }, color) : color,
+        },
+      };
+    },
+  },
+  pattern,
+  interactions: [{ type: 'element-active' }],
+});
+
+plot.render();

examples/plugin/pattern/demo/pie-pattern.ts

@@ -0,0 +1,38 @@
+import { Pie } from '@antv/g2plot';
+
+const data = [
+  { type: '分类一', value: 27 },
+  { type: '分类二', value: 25 },
+  { type: '分类三', value: 18 },
+  { type: '分类四', value: 15 },
+  { type: '分类五', value: 10 },
+  { type: '其他', value: 5 },
+];
+
+const plot = new Pie('container', {
+  appendPadding: 10,
+  data,
+  angleField: 'value',
+  colorField: 'type',
+  radius: 0.9,
+  label: {
+    type: 'inner',
+    offset: '-30%',
+    content: ({ percent }) => `${(percent * 100).toFixed(0)}%`,
+    style: {
+      fontSize: 14,
+      textAlign: 'center',
+    },
+  },
+  pattern: {
+    type: 'dot',
+    cfg: {
+      radius: 2,
+      padding: 10,
+      mode: 'repeat',
+    },
+  },
+  interactions: [{ type: 'element-active' }],
+});
+
+plot.render();

examples/plugin/pattern/demo/radial-bar-pattern.ts

@@ -0,0 +1,39 @@
+import { RadialBar } from '@antv/g2plot';
+
+const data = [
+  { name: 'X6', star: 297 },
+  { name: 'G', star: 506 },
+  { name: 'AVA', star: 805 },
+  { name: 'G2Plot', star: 1478 },
+  { name: 'L7', star: 2029 },
+  { name: 'G6', star: 7100 },
+  { name: 'F2', star: 7346 },
+  { name: 'G2', star: 10178 },
+];
+
+const plot = new RadialBar('container', {
+  data,
+  xField: 'name',
+  yField: 'star',
+  // color 字段，可不设置
+  // colorField: 'name',
+  radius: 0.8,
+  innerRadius: 0.2,
+  tooltip: {
+    formatter: (datum) => {
+      return { name: 'star数', value: datum.star };
+    },
+  },
+  pattern: {
+    type: 'dot',
+    cfg: {
+      radius: 2,
+      padding: 2,
+      // dot 不进行交错
+      isStagger: false,
+      mode: 'repeat',
+    },
+  },
+});
+
+plot.render();

examples/plugin/pattern/index.en.md

@@ -0,0 +1,4 @@
+---
+title: Pattern
+order: 4
+---

examples/plugin/pattern/index.zh.md

@@ -0,0 +1,4 @@
+---
+title: 图案 - Pattern
+order: 4
+---