feat(bar): 条形图支持圆角柱子 & 添加图表指引

antvis · Jan 13, 2021 · 06d893a · 06d893a
1 parent 5e649ca
commit 06d893a
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 3 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/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/meta.json b/examples/column/grouped/demo/meta.json
@@ -18,7 +18,7 @@
         "zh": "圆角柱状图",
         "en": "Column plot with corner-radius"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*cE7xSYYgqCcAAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/zos/antfincdn/vA%26pfMx397/0d8d9a6e-51ba-48f2-bc6d-091d77d94e2e.png"
     },
     {
       "filename": "stacked2.ts",