feat(column): 柱状图支持圆角 & 添加图表指引 (#2215)

* feat(column): 柱状图支持圆角 & 添加图表指引 close: #2157 * feat(bar): 条形图支持圆角柱子 & 添加图表指引
antvis · Jan 13, 2021 · 1e18681 · 1e18681
1 parent f3d6d7e
commit 1e18681
Show file tree

Hide file tree

Showing 8 changed files with 148 additions and 2 deletions.
diff --git a/docs/manual/plots/bar.en.md b/docs/manual/plots/bar.en.md
@@ -117,4 +117,15 @@ bar.render();
 
 🎨 For an overview of the bar plot options see the [API reference](/en/docs/api/plots/bar).
 
-</div>
+</div>
+
+## Bar plot features
+
+### Set corner-radius of column
+
+通过设置 `barStyle.radius` 可以指定柱子的圆角，数据类型可以是 `number` 也可以是 `number[]`。
+
+当柱子数值为正值时，`const [r1, r2, r3, r4] = radius` 依次代表柱子左上角、右上角、右下角、左下角的 `radius`。
+当柱子数值为负值时，`const [r1, r2, r3, r4] = radius` 依次代表柱子左下角、右下角、右上角、左上角的 `radius`。
+
+<playground path="bar/grouped/demo/corner-radius.ts" rid="corner-radius"></playground>
diff --git a/docs/manual/plots/bar.zh.md b/docs/manual/plots/bar.zh.md
@@ -117,4 +117,15 @@ bar.render();
 
 🎨 条形图详细的配置参考 [API 文档](/zh/docs/api/plots/bar)。
 
-</div>
+</div>
+
+## 条形图特性
+
+### 设置柱子的圆角
+
+通过设置 `barStyle.radius` 可以指定柱子的圆角，数据类型可以是 `number` 也可以是 `number[]`。
+
+当柱子数值为正值时，`const [r1, r2, r3, r4] = radius` 依次代表柱子左上角、右上角、右下角、左下角的 `radius`。
+当柱子数值为负值时，`const [r1, r2, r3, r4] = radius` 依次代表柱子左下角、右下角、右上角、左上角的 `radius`。
+
+<playground path="bar/grouped/demo/corner-radius.ts" rid="corner-radius"></playground>
diff --git a/docs/manual/plots/column.en.md b/docs/manual/plots/column.en.md
@@ -139,3 +139,12 @@ fetch('https://gw.alipayobjects.com/os/antfincdn/K0kfOzo4j%24/column.json')
 通过组合指定柱子最大宽度、最小宽度可以达到指定柱子宽度的效果。
 
 <playground path="column/basic/demo/width.ts" rid="specify-column-width"></playground>
+
+### Set corner-radius of column
+
+通过设置 `columnStyle.radius` 可以指定柱子的圆角，数据类型可以是 `number` 也可以是 `number[]`。
+
+当柱子数值为正值时，`const [r1, r2, r3, r4] = radius` 依次代表柱子左上角、右上角、右下角、左下角的 `radius`。
+当柱子数值为负值时，`const [r1, r2, r3, r4] = radius` 依次代表柱子左下角、右下角、右上角、左上角的 `radius`。
+
+<playground path="column/grouped/demo/corner-radius.ts" rid="corner-radius"></playground>
diff --git a/docs/manual/plots/column.zh.md b/docs/manual/plots/column.zh.md
@@ -139,3 +139,13 @@ fetch('https://gw.alipayobjects.com/os/antfincdn/K0kfOzo4j%24/column.json')
 通过组合指定柱子最大宽度、最小宽度可以达到指定柱子宽度的效果。
 
 <playground path="column/basic/demo/width.ts" rid="specify-column-width"></playground>
+
+### 设置柱子的圆角
+
+通过设置 `columnStyle.radius` 可以指定柱子的圆角，数据类型可以是 `number` 也可以是 `number[]`。
+
+当柱子数值为正值时，`const [r1, r2, r3, r4] = radius` 依次代表柱子左上角、右上角、右下角、左下角的 `radius`。
+当柱子数值为负值时，`const [r1, r2, r3, r4] = radius` 依次代表柱子左下角、右下角、右上角、左上角的 `radius`。
+
+<playground path="column/grouped/demo/corner-radius.ts" rid="corner-radius"></playground>
+
diff --git a/examples/bar/grouped/demo/corner-radius.ts b/examples/bar/grouped/demo/corner-radius.ts
@@ -0,0 +1,71 @@
+import { Bar } from '@antv/g2plot';
+
+const data = [
+  {
+    label: 'Mon.',
+    type: 'series1',
+    value: 2800,
+  },
+  {
+    label: 'Mon.',
+    type: 'series2',
+    value: 2260,
+  },
+  {
+    label: 'Tues.',
+    type: 'series1',
+    value: 1800,
+  },
+  {
+    label: 'Tues.',
+    type: 'series2',
+    value: 1300,
+  },
+  {
+    label: 'Wed.',
+    type: 'series1',
+    value: 950,
+  },
+  {
+    label: 'Wed.',
+    type: 'series2',
+    value: 900,
+  },
+  {
+    label: 'Thur.',
+    type: 'series1',
+    value: 500,
+  },
+  {
+    label: 'Thur.',
+    type: 'series2',
+    value: 390,
+  },
+  {
+    label: 'Fri.',
+    type: 'series1',
+    value: 170,
+  },
+  {
+    label: 'Fri.',
+    type: 'series2',
+    value: 100,
+  },
+];
+
+const stackedBarPlot = new Bar('container', {
+  data,
+  isGroup: true,
+  xField: 'value',
+  yField: 'label',
+  seriesField: 'type',
+  marginRatio: 0,
+  label: {
+    // 可手动配置 label 数据标签位置
+    position: 'right', // 'left', 'middle', 'right'
+    offset: 4,
+  },
+  barStyle: { radius: [2, 2, 0, 0] },
+});
+
+stackedBarPlot.render();
diff --git a/examples/bar/grouped/demo/meta.json b/examples/bar/grouped/demo/meta.json
@@ -11,6 +11,14 @@
         "en": "Grouped bar plot"
       },
       "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/dfnmnp5KDb/4c47dfc9-534c-42b5-b25b-12219c854e0f.png"
+    },
+    {
+      "filename": "corner-radius.ts",
+      "title": {
+        "zh": "圆角条形图",
+        "en": "Bar plot with corner-radius"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/vFQNz1dCaD/21d77486-a9a3-4287-bc49-24fc40ad4800.png"
     }
   ]
 }
diff --git a/examples/column/grouped/demo/corner-radius.ts b/examples/column/grouped/demo/corner-radius.ts
@@ -0,0 +1,18 @@
+import { Column } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/antfincdn/PC3daFYjNw/column-data.json')
+  .then((data) => data.json())
+  .then((data) => {
+    const column = new Column('container', {
+      data,
+      xField: 'city',
+      yField: 'value',
+      seriesField: 'type',
+      isGroup: 'true',
+      columnStyle: {
+        radius: [20, 20, 0, 0],
+      },
+    });
+
+    column.render();
+  });
diff --git a/examples/column/grouped/demo/meta.json b/examples/column/grouped/demo/meta.json
@@ -12,6 +12,14 @@
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*cE7xSYYgqCcAAAAAAAAAAAAAARQnAQ"
     },
+    {
+      "filename": "corner-radius.ts",
+      "title": {
+        "zh": "圆角柱状图",
+        "en": "Column plot with corner-radius"
+      },
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/vA%26pfMx397/0d8d9a6e-51ba-48f2-bc6d-091d77d94e2e.png"
+    },
     {
       "filename": "stacked2.ts",
       "title": {