feat(v2/pie-demo): 饼图 demo 的优化 (#1424)

* feat(v2/pie-demo): 饼图 demo 的优化 * fix(typings): 修改 legend 的类型定义 * refactor(v2/pie): 设置中心指标卡默认样式，删除不必要的常量文件
antvis · Aug 25, 2020 · e2d56ad · e2d56ad
1 parent 510f6a5
commit e2d56ad
Show file tree

Hide file tree

Showing 12 changed files with 35 additions and 88 deletions.
diff --git a/examples/pie/basic/demo/basic.ts b/examples/pie/basic/demo/basic.ts
@@ -10,8 +10,6 @@ const data = [
 ];
 
 const piePlot = new Pie('container', {
-  width: 400,
-  height: 300,
   appendPadding: 10,
   data,
   angleField: 'value',

diff --git a/examples/pie/basic/demo/custom-label.ts b/examples/pie/basic/demo/custom-label.ts
diff --git a/examples/pie/basic/demo/meta.json b/examples/pie/basic/demo/meta.json
@@ -28,14 +28,6 @@
       },
       "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*ahB1Qp7T-C8AAAAAAAAAAABkARQnAQ"
     },
-    {
-      "filename": "custom-label.ts",
-      "title": {
-        "en": "customize pie chart",
-        "zh": "个性化标签饼图"
-      },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_f5c722/afts/img/A*sqwJRIEzdQ0AAAAAAAAAAABkARQnAQ"
-    },
     {
       "filename": "pie-texture.ts",
       "title": {

diff --git a/examples/pie/basic/demo/outer-label.ts b/examples/pie/basic/demo/outer-label.ts
@@ -10,8 +10,6 @@ const data = [
 ];
 
 const piePlot = new Pie('container', {
-  width: 400,
-  height: 300,
   appendPadding: 10,
   data,
   angleField: 'value',

diff --git a/examples/pie/basic/demo/pie-texture.ts b/examples/pie/basic/demo/pie-texture.ts
@@ -6,8 +6,6 @@ const data = [
 ];
 
 const piePlot = new Pie('container', {
-  width: 400,
-  height: 300,
   appendPadding: 10,
   data,
   angleField: 'sold',

diff --git a/examples/pie/donut/demo/basic.ts b/examples/pie/donut/demo/basic.ts
@@ -10,8 +10,6 @@ const data = [
 ];
 
 const piePlot = new Pie('container', {
-  width: 400,
-  height: 300,
   appendPadding: 10,
   data,
   angleField: 'value',

diff --git a/examples/pie/donut/demo/meta.json b/examples/pie/donut/demo/meta.json
@@ -5,20 +5,20 @@
   },
   "demos": [
     {
-      "filename": "basic.js",
+      "filename": "basic.ts",
       "title": {
         "zh": "环图",
         "en": "basic Donut chart"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*wmldRZZj9lIAAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*jbeVTpgzCVAAAAAAAAAAAABkARQnAQ"
     },
     {
-      "filename": "statistics.js",
+      "filename": "statistics.ts",
       "title": {
         "zh": "环图 - 带统计指标卡",
         "en": "Donut chart with statistics"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*ZztJQa4RLwoAAAAAAAAAAABkARQnAQ"
+      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*U9D_Sr55LEMAAAAAAAAAAABkARQnAQ"
     }
   ]
 }
diff --git a/examples/pie/donut/demo/statistics.ts b/examples/pie/donut/demo/statistics.ts
@@ -10,21 +10,26 @@ const data = [
 ];
 
 const piePlot = new Pie('container', {
-  width: 400,
-  height: 300,
   appendPadding: 10,
   data,
   angleField: 'value',
   colorField: 'type',
   radius: 0.8,
   innerRadius: 0.64,
   label: {
-    type: 'outer',
-    content: '{name} {percentage}',
+    type: 'inner',
+    offset: -35,
+    autoRotate: false,
+    content: '{value}',
+    style: {
+      fill: '#333',
+      stroke: '#fff',
+      strokeWidth: 1,
+    },
   },
   statistic: {
     title: {
-      formatter: () => 'Total',
+      formatter: () => '总计',
     },
   },
   // 添加 中心统计文本 交互

diff --git a/src/plots/pie/adaptor.ts b/src/plots/pie/adaptor.ts
@@ -2,7 +2,6 @@ import { deepMix, each, every, filter, get, isFunction, isString, isNil } from '
 import { Params } from '../../core/adaptor';
 import { legend, tooltip, interaction, animation, theme } from '../../adaptor/common';
 import { flow, LEVEL, log, template } from '../../utils';
-import { StatisticContentStyle, StatisticTitleStyle } from './constants';
 import { PieOptions } from './types';
 import { getStatisticData } from './utils';
 
@@ -208,8 +207,6 @@ function annotation(params: Params<PieOptions>): Params<PieOptions> {
         ...deepMix(
           {},
           {
-            // default config
-            style: StatisticTitleStyle,
             offsetY: content === false ? 0 : -titleLineHeight,
             // append-info
             key: 'statistic',
@@ -231,8 +228,6 @@ function annotation(params: Params<PieOptions>): Params<PieOptions> {
         ...deepMix(
           {},
           {
-            // default config
-            style: StatisticContentStyle,
             // 居中
             offsetY: title === false ? 0 : valueLineHeight,
             // append-info
@@ -244,8 +239,6 @@ function annotation(params: Params<PieOptions>): Params<PieOptions> {
     }
 
     annotationOptions.push(statisticTitle, statisticContent);
-
-    chart.render();
   }
 
   /** 自定义 annotation */

diff --git a/src/plots/pie/constants.ts b/src/plots/pie/constants.ts
diff --git a/src/plots/pie/index.ts b/src/plots/pie/index.ts
@@ -16,10 +16,28 @@ export class Pie extends Plot<PieOptions> {
    */
   protected getDefaultOptions(): Partial<PieOptions> {
     return {
+      legend: {
+        position: 'right',
+      },
       tooltip: {
+        shared: false,
         showTitle: false,
         showMarkers: false,
       },
+      /** 饼图样式 */
+      pieStyle: {
+        stroke: 'white',
+        lineWidth: 1,
+      },
+      /** 饼图中心文本默认样式 */
+      statistic: {
+        title: {
+          style: { fontSize: 14, fontWeight: 300, fill: '#4D4D4D', textAlign: 'center' },
+        },
+        content: {
+          style: { fontSize: 21, fontWeight: 'bold', fill: '#4D4D4D', textAlign: 'center' },
+        },
+      },
     };
   }
 

diff --git a/src/types/legend.ts b/src/types/legend.ts
@@ -1 +1,3 @@
-export type Legend = {};
+import { LegendCfg } from '@antv/g2/lib/interface';
+
+export type Legend = boolean | LegendCfg;