Merge pull request #229 from antvis/fix-pie

饼图&环图 demo和默认配置项修改
antvis · Nov 15, 2019 · aca3fd5 · aca3fd5
2 parents f33ba0a + fd44d87
commit aca3fd5
Show file tree

Hide file tree

Showing 12 changed files with 49 additions and 192 deletions.
diff --git a/examples/pie/basic/demo/inner-label.js → examples/pie/basic/demo/basic.js b/examples/pie/basic/demo/inner-label.js → examples/pie/basic/demo/basic.js
@@ -22,7 +22,7 @@ const data = [
     value: 10,
   },
   {
-    type: 'Other',
+    type: '其它',
     value: 5,
   },
 ];
@@ -31,11 +31,12 @@ const piePlot = new Pie(document.getElementById('container'), {
   forceFit: true,
   title: {
     visible: true,
-    text: '饼图-内部图形标签(inner label)',
+    text: '多色饼图',
   },
   description: {
     visible: true,
-    text: '当把饼图label的类型设置为inner时，标签会显示在切片内部。设置offset控制标签的偏移值。',
+    text:
+      '指定颜色映射字段(colorField)，饼图切片将根据该字段数据显示为不同的颜色。指定颜色需要将color配置为一个数组。\n当把饼图label的类型设置为inner时，标签会显示在切片内部。设置offset控制标签的偏移值。',
   },
   radius: 0.8,
   data,
@@ -44,7 +45,7 @@ const piePlot = new Pie(document.getElementById('container'), {
   label: {
     visible: true,
     type: 'inner',
-    offset: -20,
+    offset: -60,
   },
 });
 

diff --git a/examples/pie/basic/demo/basic1.js b/examples/pie/basic/demo/basic1.js
diff --git a/examples/pie/basic/demo/basic2.js b/examples/pie/basic/demo/basic2.js
diff --git a/examples/pie/basic/demo/meta.json b/examples/pie/basic/demo/meta.json
@@ -5,20 +5,10 @@
   },
   "demos": [
     {
-      "filename": "basic1.js",
-      "title": "饼图-单色",
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*tuZ0Q4dz5GcAAAAAAAAAAABkARQnAQ"
-    },
-    {
-      "filename": "basic2.js",
+      "filename": "basic.js",
       "title": "饼图-多色",
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*xtnBSY2eHf8AAAAAAAAAAABkARQnAQ"
     },
-    {
-      "filename": "inner-label.js",
-      "title": "饼图-内部图形标签",
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*fAI1Qotbh7EAAAAAAAAAAABkARQnAQ"
-    },
     {
       "filename": "outer-label.js",
       "title": "饼图-外部图形标签",

diff --git a/examples/pie/basic/demo/outer-label.js b/examples/pie/basic/demo/outer-label.js
@@ -22,7 +22,7 @@ const data = [
     value: 10,
   },
   {
-    type: 'Other',
+    type: '其它',
     value: 5,
   },
 ];

diff --git a/examples/pie/basic/demo/spider-label.js b/examples/pie/basic/demo/spider-label.js
@@ -22,7 +22,7 @@ const data = [
     value: 10,
   },
   {
-    type: 'Other',
+    type: '其它',
     value: 5,
   },
 ];

diff --git a/examples/pie/ring/demo/meta.json b/examples/pie/ring/demo/meta.json
@@ -9,11 +9,6 @@
       "title": "环图",
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*Zhg7Sq3I77sAAAAAAAAAAABkARQnAQ"
     },
-    {
-      "filename": "ring-radius.js",
-      "title": "环图-内半径外半径",
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*hCwUSYSaZqwAAAAAAAAAAABkARQnAQ"
-    },
     {
       "filename": "ring-central-text.js",
       "title": "环图-中心文本",

diff --git a/examples/pie/ring/demo/ring-basic.js b/examples/pie/ring/demo/ring-basic.js
@@ -22,7 +22,7 @@ const data = [
     value: 10,
   },
   {
-    type: 'Other',
+    type: '其它',
     value: 5,
   },
 ];
@@ -31,13 +31,20 @@ const ringPlot = new Ring(document.getElementById('container'), {
   forceFit: true,
   title: {
     visible: true,
-    text: '环形图',
+    text: '环图',
+  },
+  description: {
+    visible: true,
+    text: '环图的外半径决定环图的大小，而内半径决定环图的厚度。',
   },
   radius: 0.8,
   padding: 'auto',
   data,
   angleField: 'value',
   colorField: 'type',
+  label: {
+    offset: -22,
+  },
 });
 
 ringPlot.render();
diff --git a/examples/pie/ring/demo/ring-central-text.js b/examples/pie/ring/demo/ring-central-text.js
@@ -22,7 +22,7 @@ const data = [
     value: 10,
   },
   {
-    type: 'Other',
+    type: '其它',
     value: 5,
   },
 ];
@@ -31,7 +31,7 @@ const ringPlot = new Ring(document.getElementById('container'), {
   forceFit: true,
   title: {
     visible: true,
-    text: '环形图-中心文本',
+    text: '环图-中心文本',
   },
   description: {
     visible: true,
@@ -43,6 +43,9 @@ const ringPlot = new Ring(document.getElementById('container'), {
   angleField: 'value',
   colorField: 'type',
   annotation: [{ type: 'centralText', onActive: true }],
+  label: {
+    offset: -22,
+  },
 });
 
 ringPlot.render();
diff --git a/examples/pie/ring/demo/ring-radius.js b/examples/pie/ring/demo/ring-radius.js
diff --git a/src/plots/pie/component/label/spider-label.ts b/src/plots/pie/component/label/spider-label.ts
@@ -2,7 +2,7 @@ import { Canvas, Group } from '@antv/g';
 import { Scale, View } from '@antv/g2';
 import * as _ from '@antv/util';
 
-const ANCHOR_OFFSET = 5; // 锚点偏移量
+const ANCHOR_OFFSET = 0; // 锚点偏移量
 const INFLECTION_OFFSET = 15; // 拐点偏移量
 const DEFAULT_COLOR = '#CCC';
 const LABEL1_OFFSETY = 1;
@@ -23,13 +23,14 @@ function getEndPoint(center, angle, r) {
 function getDefaultCfg() {
   return {
     text: {
-      fill: '#808080',
+      fill: 'rgba(0, 0, 0, 0.65)',
       fontSize: 12,
     },
-    lineWidth: 1,
+    lineWidth: 0.5,
+    lineStroke: 'rgba(0, 0, 0, 0.45)',
     sidePadding: 20,
     lineHeight: 32,
-    anchorSize: 2,
+    // anchorSize: 2,
   };
 }
 
@@ -369,27 +370,19 @@ export default class SpiderLabel {
       attrs: {
         path,
         lineWidth: this.config.lineWidth,
-        stroke: fill,
+        stroke: this.config.lineStroke,
       },
     });
 
-    /*this.container.addShape('polyline', {
-      attrs: {
-        points,
-        lineWidth: this.config.lineWidth,
-        stroke: fill,
-      },
-    });*/
-
     // 绘制锚点
-    this.container.addShape('circle', {
-      attrs: {
-        x: _anchor[0],
-        y: _anchor[1],
-        r: this.config.anchorSize,
-        fill,
-      },
-    });
+    // this.container.addShape('circle', {
+    //   attrs: {
+    //     x: _anchor[0],
+    //     y: _anchor[1],
+    //     r: this.config.anchorSize,
+    //     fill,
+    //   },
+    // });
   }
 
   private _adjustConfig(config) {

diff --git a/src/plots/ring/layer.ts b/src/plots/ring/layer.ts
@@ -27,15 +27,26 @@ const PLOT_GEOM_MAP = {
   interval: 'ring',
 };
 
-export default class RingLayer extends PieLayer<RingLayerConfig> {
+export default class RingLayer<T extends RingLayerConfig = RingLayerConfig> extends PieLayer<T> {
   public static centralId = 0;
 
   public static getDefaultOptions(): any {
     return _.deepMix({}, super.getDefaultOptions(), {
-      innerRadius: 0.5,
+      radius: 0.8,
+      innerRadius: 0.8 * 0.8,
     });
   }
 
+  public getOptions(props: T) {
+    const options = super.getOptions(props);
+    if (!props.innerRadius && props.radius) {
+      return _.deepMix({}, options, {
+        innerRadius: props.radius * 0.8,
+      });
+    }
+    return options;
+  }
+
   public type: string = 'ring';
   private centralText: any; // 保存中心文本实例用于响应交互
   private centralClass: string; // 中心文本的class,用于重点文本容器的唯一标识，一个页面多个环图时，共用 class 交互会有问题。