feat(pie): add tooltip and label percent

Author: BlackGanglion

demos/pie-labelPercent.ts

@@ -0,0 +1,65 @@
+// 基础饼图 - 显示百分比
+
+const data = [
+  {
+    type: '分类一',
+    value: 27,
+  },
+  {
+    type: '分类二',
+    value: 25,
+  },
+  {
+    type: '分类三',
+    value: 18,
+  },
+  {
+    type: '分类四',
+    value: 15,
+  },
+  {
+    type: '分类五',
+    value: 10,
+  },
+  {
+    type: 'Other',
+    value: 5,
+  },
+];
+
+const piePlot = new g2plot.Pie(document.getElementById('canvas'), {
+  padding: 'auto',
+  data,
+  angleField: 'value',
+  colorField: 'type',
+  label: {
+    visible: true,
+    formatter: (text, item, index) => {
+      return `${(item.percent * 100).toFixed(2)}%`;
+    },
+  },
+  tooltip: {
+    visible: true,
+    shared: false,
+    htmlContent: (title, items) => {
+      const item = items[0];
+      return `<div class="g2-tooltip">
+<div class="g2-tooltip-title" style="margin-bottom: 4px;">显示百分比</div>
+  <ul class="g2-tooltip-list" style="margin: 0px; list-style-type: none; padding: 0px;">
+    <li data-index="0" style="margin: 0px 0px 4px; list-style-type: none; padding: 0px;">
+      <span style="background-color: ${
+        item.color
+      }; width: 5px; height: 5px; border-radius: 50%; display: inline-block; margin-right: 8px;" class="g2-tooltip-marker"></span>
+        ${item.name}<span class="g2-tooltip-value" style="display: inline-block; float: right; margin-left: 30px;">${(
+        item.percent * 100
+      ).toFixed(2)}%</span>
+    </li>
+  </ul>
+</div>`;
+    },
+  },
+});
+piePlot.render();
+
+// 作为模块 避免变量冲突
+export {};

src/plots/pie/layer.ts

@@ -5,7 +5,7 @@ import { LayerConfig } from '../../base/layer';
 import ViewLayer, { ViewConfig } from '../../base/view-layer';
 import { getComponent } from '../../components/factory';
 import { getGeom } from '../../geoms/factory';
-import { Label, DataItem } from '../../interface/config';
+import { Label, DataItem, Tooltip } from '../../interface/config';
 import { LooseMap } from '../../interface/types';
 import SpiderLabel from './component/label/spider-label';
 import './component/label/outer-label';
@@ -171,6 +171,9 @@ export default class PieLayer<T extends PieLayerConfig = PieLayerConfig> extends
     if (props.label) {
       this.label();
     }
+    if (props.tooltip && props.tooltip.visible) {
+      this.tooltip();
+    }
     this.setConfig('element', pie);
   }
 
@@ -189,6 +192,42 @@ export default class PieLayer<T extends PieLayerConfig = PieLayerConfig> extends
     super.parseEvents(EventParser);
   }
 
+  protected tooltip() {
+    const props = this.options;
+    if (props.tooltip.htmlContent) {
+      const customHtmlContent = props.tooltip.htmlContent;
+      this.setConfig('tooltip', {
+        ...this.options.tooltip,
+        htmlContent: (title, items: any[]) => {
+          if (items && items.length) {
+            const { angleField } = this.options;
+            const filteredSum = this.getFilteredSum();
+            return customHtmlContent(
+              title,
+              items.map((item) => {
+                const value = _.get(item, `point._origin.${angleField}`);
+                const percent = value / filteredSum;
+                return {
+                  ...item,
+                  percent,
+                };
+              })
+            );
+          }
+          return '<div></div>';
+        },
+      } as any);
+    }
+  }
+
+  private getFilteredSum() {
+    const { angleField } = this.options;
+    const filteredData = this.view.get('filteredData') || [];
+    return filteredData.reduce((pre, filteredDataItem) => {
+      return pre + filteredDataItem[angleField];
+    }, 0);
+  }
+
   private label() {
     const props = this.options;
     const labelConfig = { ...props.label } as Label;
@@ -203,6 +242,22 @@ export default class PieLayer<T extends PieLayerConfig = PieLayerConfig> extends
       // @ts-ignore
       labelConfig.labelLine = true;
     }
+    if (labelConfig.formatter) {
+      const customFormatter = labelConfig.formatter;
+      labelConfig.formatter = (text, item, index) => {
+        const { angleField } = this.options;
+        const filteredSum = this.getFilteredSum();
+        const percent = item._origin[angleField] / filteredSum;
+        return customFormatter(
+          text,
+          {
+            ...item,
+            percent,
+          },
+          index
+        );
+      };
+    }
 
     // 此处做个 hack 操作, 防止g2 controller层找不到未注册的inner,outter,和spider Label
     let labelType = labelConfig.type;