feat: add bar demos (#1486)

* feat: new chart type - box * fix(v2/bar): set catogery as xField * feat(v2/column): support grouped and stacked bar * style: delete box * feat: add bar chart demos Co-authored-by: 羽熙 <yuxi.lx@antfin.com>
antvis · Aug 25, 2020 · f696e66 · f696e66
1 parent 841d731
commit f696e66
Show file tree

Hide file tree

Showing 31 changed files with 1,304 additions and 2 deletions.
diff --git a/__tests__/data/box.ts b/__tests__/data/box.ts
@@ -0,0 +1,10 @@
+export const boxData = [
+  { x: 'Oceania', low: 1, q1: 9, median: 16, q3: 22, high: 24 },
+  { x: 'East Europe', low: 1, q1: 5, median: 8, q3: 12, high: 16 },
+  { x: 'Australia', low: 1, q1: 8, median: 12, q3: 19, high: 26 },
+  { x: 'South America', low: 2, q1: 8, median: 12, q3: 21, high: 28 },
+  { x: 'North Africa', low: 1, q1: 8, median: 14, q3: 18, high: 24 },
+  { x: 'North America', low: 3, q1: 10, median: 17, q3: 28, high: 30 },
+  { x: 'West Europe', low: 1, q1: 7, median: 10, q3: 17, high: 22 },
+  { x: 'West Africa', low: 1, q1: 6, median: 8, q3: 13, high: 16 },
+];
diff --git a/examples/bar/basic/demo/basic.ts b/examples/bar/basic/demo/basic.ts
@@ -0,0 +1,52 @@
+import { Bar } from '@antv/g2plot';
+
+const data = [
+  {
+    type: '家具家电',
+    sales: 38,
+  },
+  {
+    type: '粮油副食',
+    sales: 52,
+  },
+  {
+    type: '生鲜水果',
+    sales: 61,
+  },
+  {
+    type: '美容洗护',
+    sales: 145,
+  },
+  {
+    type: '母婴用品',
+    sales: 48,
+  },
+  {
+    type: '进口食品',
+    sales: 38,
+  },
+  {
+    type: '食品饮料',
+    sales: 38,
+  },
+  {
+    type: '家庭清洁',
+    sales: 38,
+  },
+];
+
+const barPlot = new Bar('container', {
+  data,
+  xField: 'sales',
+  yField: 'type',
+  meta: {
+    type: {
+      alias: '类别',
+    },
+    sales: {
+      alias: '销售额',
+    },
+  },
+});
+
+barPlot.render();
diff --git a/examples/bar/basic/demo/color.ts b/examples/bar/basic/demo/color.ts
@@ -0,0 +1,57 @@
+import { Bar } from '@antv/g2plot';
+
+const data = [
+  {
+    type: '家具家电',
+    sales: 38,
+  },
+  {
+    type: '粮油副食',
+    sales: 52,
+  },
+  {
+    type: '生鲜水果',
+    sales: 61,
+  },
+  {
+    type: '美容洗护',
+    sales: 145,
+  },
+  {
+    type: '母婴用品',
+    sales: 48,
+  },
+  {
+    type: '进口食品',
+    sales: 38,
+  },
+  {
+    type: '食品饮料',
+    sales: 38,
+  },
+  {
+    type: '家庭清洁',
+    sales: 38,
+  },
+];
+
+const barPlot = new Bar('container', {
+  data,
+  xField: 'sales',
+  yField: 'type',
+  colorField: 'type',
+  color: (val) => {
+    return val === '美容洗护' ? 'red' : 'green';
+  },
+  legend: false,
+  meta: {
+    type: {
+      alias: '类别',
+    },
+    sales: {
+      alias: '销售额',
+    },
+  },
+});
+
+barPlot.render();
diff --git a/examples/bar/basic/demo/label-position.ts b/examples/bar/basic/demo/label-position.ts
@@ -0,0 +1,55 @@
+import { Bar } from '@antv/g2plot';
+
+const data = [
+  {
+    type: '家具家电',
+    sales: 38,
+  },
+  {
+    type: '粮油副食',
+    sales: 52,
+  },
+  {
+    type: '生鲜水果',
+    sales: 61,
+  },
+  {
+    type: '美容洗护',
+    sales: 145,
+  },
+  {
+    type: '母婴用品',
+    sales: 48,
+  },
+  {
+    type: '进口食品',
+    sales: 38,
+  },
+  {
+    type: '食品饮料',
+    sales: 38,
+  },
+  {
+    type: '家庭清洁',
+    sales: 38,
+  },
+];
+
+const barPlot = new Bar('container', {
+  data,
+  xField: 'sales',
+  yField: 'type',
+  label: {
+    position: 'middle',
+  },
+  meta: {
+    type: {
+      alias: '类别',
+    },
+    sales: {
+      alias: '销售额',
+    },
+  },
+});
+
+barPlot.render();
diff --git a/examples/bar/basic/demo/label.ts b/examples/bar/basic/demo/label.ts
@@ -0,0 +1,53 @@
+import { Bar } from '@antv/g2plot';
+
+const data = [
+  {
+    type: '家具家电',
+    sales: 38,
+  },
+  {
+    type: '粮油副食',
+    sales: 52,
+  },
+  {
+    type: '生鲜水果',
+    sales: 61,
+  },
+  {
+    type: '美容洗护',
+    sales: 145,
+  },
+  {
+    type: '母婴用品',
+    sales: 48,
+  },
+  {
+    type: '进口食品',
+    sales: 38,
+  },
+  {
+    type: '食品饮料',
+    sales: 38,
+  },
+  {
+    type: '家庭清洁',
+    sales: 38,
+  },
+];
+
+const barPlot = new Bar('container', {
+  data,
+  xField: 'sales',
+  yField: 'type',
+  label: {},
+  meta: {
+    type: {
+      alias: '类别',
+    },
+    sales: {
+      alias: '销售额',
+    },
+  },
+});
+
+barPlot.render();
diff --git a/examples/bar/basic/demo/meta.json b/examples/bar/basic/demo/meta.json
@@ -0,0 +1,48 @@
+{
+  "title": {
+    "zh": "中文分类",
+    "en": "Category"
+  },
+  "demos": [
+    {
+      "filename": "basic.ts",
+      "title": {
+        "zh": "基础条形图",
+        "en": "Basic Bar chart"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*uSKqQo2lCPoAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "label.ts",
+      "title": {
+        "zh": "基础条形图-图形标签",
+        "en": "Bar chart label"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*uSKqQo2lCPoAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "label-position.ts",
+      "title": {
+        "zh": "基础条形图-图形标签位置",
+        "en": "Bar chart label position"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*uSKqQo2lCPoAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "color.ts",
+      "title": {
+        "zh": "基础条形图 - 自定义颜色",
+        "en": "Bar chart color"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*uSKqQo2lCPoAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "width.ts",
+      "title": {
+        "zh": "基础条形图 - 柱子宽度",
+        "en": "Bar chart Bar width"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*uSKqQo2lCPoAAAAAAAAAAABkARQnAQ"
+    }
+  ]
+}
diff --git a/examples/bar/basic/demo/width.ts b/examples/bar/basic/demo/width.ts
@@ -0,0 +1,53 @@
+import { Bar } from '@antv/g2plot';
+
+const data = [
+  {
+    type: '家具家电',
+    sales: 38,
+  },
+  {
+    type: '粮油副食',
+    sales: 52,
+  },
+  {
+    type: '生鲜水果',
+    sales: 61,
+  },
+  {
+    type: '美容洗护',
+    sales: 145,
+  },
+  {
+    type: '母婴用品',
+    sales: 48,
+  },
+  {
+    type: '进口食品',
+    sales: 38,
+  },
+  {
+    type: '食品饮料',
+    sales: 38,
+  },
+  {
+    type: '家庭清洁',
+    sales: 38,
+  },
+];
+
+const barPlot = new Bar('container', {
+  data,
+  xField: 'sales',
+  yField: 'type',
+  barWidthRatio: 0.618,
+  meta: {
+    type: {
+      alias: '类别',
+    },
+    sales: {
+      alias: '销售额',
+    },
+  },
+});
+
+barPlot.render();
diff --git a/examples/bar/basic/design.en.md b/examples/bar/basic/design.en.md
@@ -0,0 +1,5 @@
+---
+title: 设计规范
+---
+
+设计规范
diff --git a/examples/bar/basic/design.zh.md b/examples/bar/basic/design.zh.md
@@ -0,0 +1,29 @@
+---
+title: 设计规范
+---
+
+## 何时使用
+
+条形图通过水平柱子长短对比数值大小，它与柱状图类似，只是交换了 X 轴与 Y 轴位置。均适用于对比一组或者多组分类数据。
+
+## 数据类型
+
+| 适合的数据       | 「一组或多组分类数据」+「一组或者多组对应的数值」                                                  |
+| ---------------- | -------------------------------------------------------------------------------------------------- |
+| 功能             | 对比分类数据的数值大小                                                                             |
+| 数据与图形的映射 | 分类数据字段映射到纵轴的位置，连续数据字段映射到矩形的宽度，分类数据也可以设置颜色增强分类的区分度 |
+| 适合的数据条数   | 数据量不作限制。条形图适合纵向滑动，在移动端显示有天然优势                                         |
+
+## 用法建议
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*0ijxQ78m7M0AAAAAAAAAAABkARQnAQ' width='1000'>
+
+## 元素
+
+<img src='https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*hPSDQ5O0A9gAAAAAAAAAAABkARQnAQ' width='800'>
+
+- X 轴：通常对应连续数据，值为数字，调用连续数据 X 轴。
+- Y 轴：通常对应分类数据，值为文本，调用连续数据 Y 轴。
+- 图例：通常出现在分组柱关图、分组条形图中，用来区分不同柱子代表的数据含义。
+- 标签：用来解释数据点的值。
+- 辅助元素：用来解释某个特殊的数据点的值，或标记出某个特殊含义的区域。
diff --git a/examples/bar/basic/index.en.md b/examples/bar/basic/index.en.md
@@ -0,0 +1,6 @@
+---
+title: Bar Chart
+order: 0
+---
+
+Description about this component.
diff --git a/examples/bar/basic/index.zh.md b/examples/bar/basic/index.zh.md
@@ -0,0 +1,6 @@
+---
+title: 基础条形图
+order: 0
+---
+
+条形图即是横向柱状图，相比基础柱状图，条形图的分类文本可以横向排布，因此适合用于分类较多的场景。