Merge branch 'master' into fix-stroll

antvis · Nov 18, 2019 · b54c077 · b54c077
2 parents 169e3f6 + 66a037b
commit b54c077
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 17 deletions.
diff --git 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,

diff --git 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
@@ -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) => {