From 05efaf73a8ee9d2c6b9733b3542af1cff02dc9e6 Mon Sep 17 00:00:00 2001
From: xinming <xinming.lxj@antfin.com>
Date: Mon, 18 Nov 2019 09:53:35 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat(ring-center-text):=20=E7=8E=AF?=
 =?UTF-8?q?=E5=9B=BE=E4=B8=AD=E5=BF=83=E6=96=87=E6=9C=AC=E9=BB=98=E8=AE=A4?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E6=80=BB=E8=AE=A1=20&=20=E6=95=B0=E5=80=BC?=
 =?UTF-8?q?=E5=A4=A7=E5=B0=8F=E4=B8=BA32px?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../annotation/central-text-template.ts       |  2 +-
 src/plots/ring/layer.ts                       | 59 ++++++++++++++-----
 2 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/src/plots/ring/component/annotation/central-text-template.ts b/src/plots/ring/component/annotation/central-text-template.ts
index 3046699505..1dfdaa2ac9 100644
--- a/src/plots/ring/component/annotation/central-text-template.ts
+++ b/src/plots/ring/component/annotation/central-text-template.ts
@@ -6,7 +6,7 @@ const container_style =
 
 const name_style = 'font-weight:300;';
 
-const value_style = 'font-size:20px;font-weight:bold;color:#4D4D4D';
+const value_style = 'font-size:32px;font-weight:bold;color:#4D4D4D';
 
 function getSingleDataTemplate(value, classId) {
   return `<div class="ring-guide-html ${classId}" style=${container_style}><span class="ring-guide-value" style=${value_style}>${value}</span></div>`;
diff --git a/src/plots/ring/layer.ts b/src/plots/ring/layer.ts
index 9d02be06b4..82fc37e19b 100644
--- a/src/plots/ring/layer.ts
+++ b/src/plots/ring/layer.ts
@@ -66,18 +66,23 @@ export default class RingLayer<T extends RingLayerConfig = RingLayerConfig> exte
     super.afterInit();
     /** 处理环图中心文本响应交互的问题 */
     if (this.centralText && this.centralText.onActive) {
-      const onActiveConfig = this.centralText.onActive;
-      this.view.on('interval:mousemove', (e) => {
-        const displayData = this.parseCentralTextData(e.data._origin);
-        let htmlString: string;
-        if (_.isBoolean(onActiveConfig)) {
-          htmlString = this.getCentralTextTemplate(displayData);
-        } else if (_.isFunction(onActiveConfig)) {
-          htmlString = onActiveConfig(displayData);
-          htmlString = `<div class="ring-guide-html ${this.centralClass}">${htmlString}</div>`;
-        }
-        document.getElementsByClassName(this.centralClass)[0].innerHTML = htmlString;
-      });
+      this.view.on(
+        'interval:mouseenter',
+        _.debounce((e) => {
+          const displayData = this.parseCentralTextData(e.data._origin);
+          const htmlString = this.getCenterHtmlString(displayData);
+          document.getElementsByClassName(this.centralClass)[0].innerHTML = htmlString;
+        }, 150)
+      );
+      this.view.on(
+        'interval:mouseleave',
+        _.debounce((e) => {
+          const totalValue = this.getTotalValue();
+          const displayData = this.parseCentralTextData(totalValue);
+          const htmlString = this.getCenterHtmlString(displayData);
+          document.getElementsByClassName(this.centralClass)[0].innerHTML = htmlString;
+        }, 150)
+      );
     }
   }
 
@@ -120,7 +125,6 @@ export default class RingLayer<T extends RingLayerConfig = RingLayerConfig> exte
   }
 
   private drawCentralText(config) {
-    const props = this.options;
     const centralText: IAttrs = {
       type: 'html',
       top: true,
@@ -132,8 +136,8 @@ export default class RingLayer<T extends RingLayerConfig = RingLayerConfig> exte
     if (config.content) {
       displayData = config.content;
     } else {
-      /** 用户没有指定文本内容时，默认显示第一条数据 */
-      const data = props.data[0];
+      /** 用户没有指定文本内容时，默认显示总计 */
+      const data = this.getTotalValue();
       displayData = this.parseCentralTextData(data);
     }
     /** 中心文本显示 */
@@ -152,6 +156,18 @@ export default class RingLayer<T extends RingLayerConfig = RingLayerConfig> exte
     return centralText;
   }
 
+  /** 获取总计数据 */
+  private getTotalValue(): object {
+    const props = this.options;
+    let total = 0;
+    props.data.forEach((item) => (total += item[props.angleField]));
+    const data = {
+      [props.angleField]: total,
+      [props.colorField]: '总计',
+    };
+    return data;
+  }
+
   private parseCentralTextData(data) {
     const props = this.options;
     const angleField = props.angleField;
@@ -172,6 +188,19 @@ export default class RingLayer<T extends RingLayerConfig = RingLayerConfig> exte
     return htmlString;
   }
 
+  /** 获取中心文本的htmlString */
+  private getCenterHtmlString(_displayData): string {
+    const onActiveConfig = this.centralText.onActive;
+    let htmlString: string;
+    if (_.isBoolean(onActiveConfig)) {
+      htmlString = this.getCentralTextTemplate(_displayData);
+    } else if (_.isFunction(onActiveConfig)) {
+      htmlString = onActiveConfig(_displayData);
+      htmlString = `<div class="ring-guide-html ${this.centralClass}">${htmlString}</div>`;
+    }
+    return htmlString;
+  }
+
   private applyResponsive(stage) {
     const methods = responsiveMethods[stage];
     _.each(methods, (r) => {

From 46e0233161eb122eb94dbbc494769bce3e3cc135 Mon Sep 17 00:00:00 2001
From: xinming <xinming.lxj@antfin.com>
Date: Mon, 18 Nov 2019 12:11:09 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat(radar-style):=20=E8=B0=83=E6=95=B4rada?=
 =?UTF-8?q?r=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 图例默认左上
2. 轴标签文字颜色 #000 65%
3. 轴标签距离轴线为8px
---
 src/plots/radar/layer.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/plots/radar/layer.ts b/src/plots/radar/layer.ts
index bc91326cc2..e087a93458 100644
--- a/src/plots/radar/layer.ts
+++ b/src/plots/radar/layer.ts
@@ -123,6 +123,11 @@ export default class RadarLayer extends ViewLayer<RadarLayerConfig> {
         },
         label: {
           visible: true,
+          offset: 8,
+          textStyle: {
+            fill: '#000',
+            opacity: 0.65,
+          },
         },
         title: {
           visible: false,
@@ -160,7 +165,7 @@ export default class RadarLayer extends ViewLayer<RadarLayerConfig> {
       },
       legend: {
         visible: true,
-        position: 'right-center',
+        position: 'left-top',
       },
       tooltip: {
         visible: true,