docs: 去除重复图表 (#1794)

* docs: 去除重复图表 * fix: conversation Co-authored-by: liufu.lf <liufu.lf@antfin.com>
antvis · Oct 27, 2020 · d17e6be · d17e6be
1 parent d0417c0
commit d17e6be
Show file tree

Hide file tree

Showing 13 changed files with 131 additions and 201 deletions.
diff --git a/examples/bar/range/demo/basic.ts b/examples/bar/range/demo/basic.ts
@@ -16,6 +16,10 @@ const barPlot = new Bar('container', {
   xField: 'values',
   yField: 'type',
   isRange: true,
+  label: {
+    position: 'middle',
+    layout: [{ type: 'adjust-color' }],
+  },
 });
 
 barPlot.render();
diff --git a/examples/bar/range/demo/label.ts b/examples/bar/range/demo/label.ts
diff --git a/examples/bar/range/demo/meta.json b/examples/bar/range/demo/meta.json
@@ -11,14 +11,6 @@
         "en": "Range Bar chart"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*tCDCQaO1ZZsAAAAAAAAAAAAAARQnAQ"
-    },
-    {
-      "filename": "label.ts",
-      "title": {
-        "zh": "区间条形图-label样式",
-        "en": "Range Bar chart"
-      },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*5GzVQKRzXcQAAAAAAAAAAAAAARQnAQ"
     }
   ]
 }
diff --git a/examples/column/range/demo/basic.ts b/examples/column/range/demo/basic.ts
@@ -16,6 +16,10 @@ const barPlot = new Column('container', {
   xField: 'type',
   yField: 'values',
   isRange: true,
+  label: {
+    position: 'middle',
+    layout: [{ type: 'adjust-color' }],
+  },
 });
 
 barPlot.render();
diff --git a/examples/column/range/demo/label.ts b/examples/column/range/demo/label.ts
diff --git a/examples/column/range/demo/meta.json b/examples/column/range/demo/meta.json
@@ -11,14 +11,6 @@
         "en": "Range Column chart"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*Il5JQZkHxiIAAAAAAAAAAAAAARQnAQ"
-    },
-    {
-      "filename": "label.ts",
-      "title": {
-        "zh": "区间柱状图-label样式",
-        "en": "Range Column chart"
-      },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*MDn_SpazLvwAAAAAAAAAAAAAARQnAQ"
     }
   ]
 }
diff --git a/examples/scatter/basic/demo/axis-right.ts b/examples/scatter/basic/demo/axis-right.ts
@@ -0,0 +1,113 @@
+import { Scatter } from '@antv/g2plot';
+
+fetch('https://gw.alipayobjects.com/os/bmw-prod/f950b2f1-038b-47c2-afcc-63001bc8d07c.json')
+  .then((res) => res.json())
+  .then((data) => {
+    const processData = data.map((item) => {
+      item['Average annual wage'] = item['Average annual wage'] * 1;
+      item['probability'] = item['probability'] * 1;
+      item['numbEmployed'] = item['numbEmployed'] * 1;
+      return item;
+    });
+    const labels = ['Airline Pilots, Copilots and Flight Engineers', 'Benefits Managers'];
+    const scatterPlot = new Scatter('container', {
+      appendPadding: 30,
+      data: processData,
+      xField: 'probability',
+      yField: 'Average annual wage',
+      colorField: 'education',
+      size: [2, 16],
+      sizeField: 'numbEmployed',
+      shape: 'circle',
+      yAxis: {
+        nice: false,
+        min: -20000,
+        tickCount: 5,
+        position: 'right',
+        label: {
+          formatter: (value) => {
+            return Math.floor(value / 1000) + 'K';
+          },
+        },
+        grid: {
+          line: {
+            style: {
+              stroke: '#eee',
+            },
+          },
+        },
+        line: {
+          style: {
+            stroke: '#aaa',
+          },
+        },
+      },
+      tooltip: {
+        fields: ['probability', 'Average annual wage', 'numbEmployed'],
+      },
+      legend: {
+        position: 'top',
+      },
+      xAxis: {
+        min: -0.04,
+        max: 1.04,
+        nice: false,
+        grid: {
+          line: {
+            style: {
+              stroke: '#eee',
+            },
+          },
+        },
+        line: false,
+        label: false,
+      },
+      label: {
+        formatter: (item) => {
+          return labels.includes(item['short occupation']) ? item['short occupation'] : '';
+        },
+        offsetY: -10,
+      },
+      annotations: [
+        {
+          type: 'line',
+          start: [-0.04, 100000],
+          end: [1.04, 30000],
+          style: {
+            stroke: '#aaa',
+          },
+        },
+        {
+          type: 'text',
+          position: ['1.03', 'max'],
+          content: 'Average annual wage',
+          style: {
+            textAlign: 'right',
+            fontWeight: '500',
+            fill: 'rgb(92, 92, 92)',
+          },
+        },
+        {
+          type: 'text',
+          position: ['1.03', 'min'],
+          content: 'Most likely to \nbe automated ',
+          style: {
+            textAlign: 'right',
+            fontWeight: '500',
+            fill: 'rgb(92, 92, 92)',
+          },
+        },
+        {
+          type: 'text',
+          position: ['-0.03', 'min'],
+          content: 'Least likely to \nbe automated ',
+          style: {
+            textAlign: 'left',
+            fontWeight: '500',
+            fill: 'rgb(92, 92, 92)',
+          },
+        },
+      ],
+    });
+    scatterPlot.render();
+  });
diff --git a/examples/scatter/basic/demo/basic.ts b/examples/scatter/basic/demo/basic.ts
diff --git a/examples/scatter/basic/demo/color-mapping.ts b/examples/scatter/basic/demo/color-mapping.ts
@@ -10,7 +10,6 @@ fetch('https://gw.alipayobjects.com/os/antfincdn/aao6XnO5pW/IMDB.json')
       yField: 'Rating',
       shape: 'circle',
       colorField: 'Genre',
-      color: ['#d62728', '#2ca02c', '#000000', '#9467bd', '#ffd500', '#1f77b4', '#00518a', '#ffbc69', '#9bd646'],
       size: 4,
       yAxis: {
         nice: true,
@@ -35,9 +34,6 @@ fetch('https://gw.alipayobjects.com/os/antfincdn/aao6XnO5pW/IMDB.json')
           },
         },
       },
-      pointStyle: {
-        stroke: '#fff',
-      },
     });
     scatterPlot.render();
   });
diff --git a/examples/scatter/basic/demo/meta.json b/examples/scatter/basic/demo/meta.json
@@ -4,14 +4,6 @@
     "en": "Category"
   },
   "demos": [
-    {
-      "filename": "basic.ts",
-      "title": {
-        "zh": "基础散点图",
-        "en": "basic Scatter chart"
-      },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*Cu0wSYK_U6YAAAAAAAAAAABkARQnAQ"
-    },
     {
       "filename": "color-mapping.ts",
       "title": {
@@ -28,21 +20,21 @@
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*XlOeS4YAHbYAAAAAAAAAAABkARQnAQ"
     },
-    {
-      "filename": "size.ts",
-      "title": {
-        "zh": "散点图-气泡",
-        "en": "Bubble chart"
-      },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*_lGkQrhj53gAAAAAAAAAAABkARQnAQ"
-    },
     {
       "filename": "quadrant.ts",
       "title": {
         "zh": "散点图-气泡四象限",
         "en": "Bubble chart quadrant"
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*tdedT4uaPaYAAAAAAAAAAABkARQnAQ"
+    },
+    {
+      "filename": "axis-right.ts",
+      "title": {
+        "zh": "散点图-右侧坐标轴",
+        "en": "Bubble chart yAxis on the right"
+      },
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*0luHTJODdMUAAAAAAAAAAAAAARQnAQ"
     }
   ]
 }
diff --git a/examples/scatter/basic/demo/size.ts b/examples/scatter/basic/demo/size.ts
diff --git a/src/plots/scatter/index.ts b/src/plots/scatter/index.ts
@@ -19,13 +19,14 @@ export class Scatter extends Plot<ScatterOptions> {
   }
 
   protected getDefaultOptions(options: ScatterOptions) {
-    const { shapeField, colorField, legend } = options;
+    const { shapeField, colorField, legend, xField, yField, sizeField } = options;
     return deepMix({}, super.getDefaultOptions(), {
       size: 4,
       /** pointStyle 跟随主题默认样式 */
       tooltip: {
         shared: null,
         showTitle: false,
+        fields: [xField, yField, colorField, sizeField, shapeField],
       },
       /**
        * legend 没有指定时根据 shapeField 和 colorField 来设置默认值