fix(pie-statistic): 修复中心文本类型定义 & 样式问题

antvis · Aug 19, 2020 · 8f8b308 · 8f8b308
1 parent 180d849
commit 8f8b308
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 24 deletions.
diff --git a/src/plots/pie/adaptor.ts b/src/plots/pie/adaptor.ts
@@ -189,7 +189,10 @@ function annotation(params: Params<PieOptions>): Params<PieOptions> {
       content: '',
     };
 
-    const contentFormatter = get(content, 'formatter');
+    const getStatisticData = (data: Data) => ({
+      title: '总计',
+      value: getTotalValue(data, angleField),
+    });
 
     if (title !== false) {
       let titleLineHeight = get(title, 'style.lineHeight');
@@ -202,10 +205,7 @@ function annotation(params: Params<PieOptions>): Params<PieOptions> {
         type: 'text',
         position: ['50%', '50%'],
         content: (filterData: Data) => {
-          const statisticData = {
-            title: '总计',
-            value: getTotalValue(filterData, angleField),
-          };
+          const statisticData = getStatisticData(filterData);
           return titleFormatter ? titleFormatter(statisticData, filterData) : statisticData.title;
         },
         ...deepMix(
@@ -214,6 +214,9 @@ function annotation(params: Params<PieOptions>): Params<PieOptions> {
             offsetY: content === false ? 0 : -titleLineHeight,
             // append-info
             key: 'statistic',
+            style: {
+              textAlign: 'center',
+            },
           },
           title
         ),
@@ -225,14 +228,13 @@ function annotation(params: Params<PieOptions>): Params<PieOptions> {
       if (!valueLineHeight) {
         valueLineHeight = get(content, 'style.fontSize', 20);
       }
+      const contentFormatter = get(content, 'formatter');
+
       statisticContent = {
         type: 'text',
         position: ['50%', '50%'],
         content: (filterData: Data) => {
-          const statisticData = {
-            title: '总计',
-            value: getTotalValue(filterData, angleField),
-          };
+          const statisticData = getStatisticData(filterData);
           return contentFormatter ? contentFormatter(statisticData, filterData) : statisticData.value;
         },
         ...deepMix(
@@ -242,6 +244,9 @@ function annotation(params: Params<PieOptions>): Params<PieOptions> {
             offsetY: title === false ? 0 : valueLineHeight,
             // append-info
             key: 'statistic',
+            style: {
+              textAlign: 'center',
+            },
           },
           content
         ),

diff --git a/src/plots/pie/types.ts b/src/plots/pie/types.ts
@@ -12,22 +12,25 @@ export type StatisticData = {
  */
 type Statistic = Readonly<{
   /** 自定义 title 标签 */
-  title?: {
-    formatter?: (item: StatisticData, data: LooseObject | LooseObject[]) => string;
-    rotate?: number;
-    offsetX?: number;
-    offsetY?: number;
-    style?: ShapeStyle;
-  };
+  title?:
+    | boolean
+    | {
+        formatter?: (item: StatisticData, data: LooseObject | LooseObject[]) => string;
+        rotate?: number;
+        offsetX?: number;
+        offsetY?: number;
+        style?: ShapeStyle;
+      };
   /** 自定义 content 内容 */
-  content?: {
-    formatter?: (item: StatisticData, data: LooseObject | LooseObject[]) => string;
-    rotate?: number;
-    offsetX?: number;
-    offsetY?: number;
-    style?: ShapeStyle;
-  };
-  // todo 提供 htmlContent 的方式，自由定制中心文本
+  content?:
+    | boolean
+    | {
+        formatter?: (item: StatisticData, data: LooseObject | LooseObject[]) => string;
+        rotate?: number;
+        offsetX?: number;
+        offsetY?: number;
+        style?: ShapeStyle;
+      };
 }>;
 
 export interface PieOptions extends Options {