From 1d6264ccabe39e153a82832c20eb46e78e04bb18 Mon Sep 17 00:00:00 2001
From: paleface001 <mipha.ly@antfin.com>
Date: Wed, 18 Mar 2020 23:01:01 +0800
Subject: [PATCH] feat: tooltip formatter Closes #792

---
 src/interface/config.ts            |  1 +
 src/plots/area/layer.ts            | 26 +++++++++++++++++--
 src/plots/bar/layer.ts             | 24 +++++++++++++++++-
 src/plots/bubble/layer.ts          | 16 ++++++++++++
 src/plots/calendar/layer.ts        | 20 ++++++++++++++-
 src/plots/column/layer.ts          | 20 +++++++++++++++
 src/plots/density-heatmap/layer.ts | 21 ++++++++++++++++
 src/plots/grouped-bar/layer.ts     | 14 +++++++++++
 src/plots/grouped-column/layer.ts  | 14 +++++++++++
 src/plots/grouped-rose/layer.ts    | 14 +++++++++++
 src/plots/heatmap/layer.ts         | 28 ++++++++++++++++++---
 src/plots/line/layer.ts            | 24 +++++++++++++++++-
 src/plots/pie/layer.ts             | 17 +++++++++++++
 src/plots/radar/layer.ts           | 21 ++++++++++++++++
 src/plots/rose/layer.ts            | 40 ++++++++++++------------------
 src/plots/scatter/layer.ts         | 20 ++++++++++++---
 src/plots/stacked-area/layer.ts    | 14 +++++++++++
 src/plots/stacked-bar/layer.ts     | 14 +++++++++++
 src/plots/stacked-column/layer.ts  | 14 +++++++++++
 src/plots/stacked-rose/layer.ts    | 14 +++++++++++
 src/plots/treemap/layer.ts         |  3 +++
 src/plots/waterfall/layer.ts       | 17 +++++++++++++
 22 files changed, 360 insertions(+), 36 deletions(-)

diff --git a/src/interface/config.ts b/src/interface/config.ts
index aeaa2f81cb..159777bc4f 100644
--- a/src/interface/config.ts
+++ b/src/interface/config.ts
@@ -158,6 +158,7 @@ export interface Legend {
 
 export interface Tooltip {
   visible?: boolean;
+  fields?: string[];
   shared?: boolean;
   /** html */
   showTitle?: boolean;
diff --git a/src/plots/area/layer.ts b/src/plots/area/layer.ts
index 98a188801b..80fa142715 100644
--- a/src/plots/area/layer.ts
+++ b/src/plots/area/layer.ts
@@ -138,7 +138,7 @@ export default class AreaLayer<T extends AreaLayerConfig = AreaLayerConfig> exte
   protected coord() {}
 
   protected addGeometry() {
-    const props = this.options;
+    const props: any = this.options;
     const area = getGeom('area', 'main', {
       plot: this,
     });
@@ -147,6 +147,11 @@ export default class AreaLayer<T extends AreaLayerConfig = AreaLayerConfig> exte
     if (props.label) {
       this.label();
     }
+
+    if (props.tooltip && (props.tooltip.fields || props.tooltip.formatter)) {
+      this.geometryTooltip();
+    }
+
     this.adjustArea(area);
     this.setConfig('geometry', area);
 
@@ -168,7 +173,7 @@ export default class AreaLayer<T extends AreaLayerConfig = AreaLayerConfig> exte
   }
 
   protected addLine() {
-    const props = this.options;
+    const props: any = this.options;
     const lineConfig = deepMix({}, props.line);
     if (lineConfig.visible) {
       const line = getGeom('line', 'guide', {
@@ -223,6 +228,23 @@ export default class AreaLayer<T extends AreaLayerConfig = AreaLayerConfig> exte
     });
   }
 
+  protected geometryTooltip() {
+    this.area.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      this.area.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      this.area.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        this.area.tooltip.fields = [this.options.xField, this.options.yField];
+        if (this.options.seriesField) {
+          this.area.tooltip.fields.push(this.options.seriesField);
+        }
+      }
+    }
+  }
+
   protected parseEvents(eventParser) {
     super.parseEvents(EventParser);
   }
diff --git a/src/plots/bar/layer.ts b/src/plots/bar/layer.ts
index c7cea8f5f8..c15ca49c1d 100644
--- a/src/plots/bar/layer.ts
+++ b/src/plots/bar/layer.ts
@@ -207,7 +207,7 @@ export default class BaseBarLayer<T extends BarLayerConfig = BarLayerConfig> ext
   protected adjustBar(bar: ElementOption) {}
 
   protected addGeometry() {
-    const props = this.options;
+    const props: any = this.options;
     const bar = getGeom('interval', 'main', {
       positionFields: [props.yField, props.xField],
       plot: this,
@@ -222,6 +222,11 @@ export default class BaseBarLayer<T extends BarLayerConfig = BarLayerConfig> ext
     }
     this.adjustBar(bar);
     this.bar = bar;
+
+    if (props.tooltip && (props.tooltip.fields || props.tooltip.formatter)) {
+      this.geometryTooltip();
+    }
+
     this.setConfig('geometry', bar);
   }
 
@@ -253,6 +258,23 @@ export default class BaseBarLayer<T extends BarLayerConfig = BarLayerConfig> ext
     }
   }
 
+  protected geometryTooltip() {
+    this.bar.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      this.bar.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      this.bar.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        this.bar.tooltip.fields = [this.options.xField, this.options.yField];
+        if (this.options.colorField) {
+          this.bar.tooltip.fields.push(this.options.colorField);
+        }
+      }
+    }
+  }
+
   private applyResponsive(stage) {
     const methods = responsiveMethods[stage];
     each(methods, (r) => {
diff --git a/src/plots/bubble/layer.ts b/src/plots/bubble/layer.ts
index df5ef387b9..f44697c7c1 100644
--- a/src/plots/bubble/layer.ts
+++ b/src/plots/bubble/layer.ts
@@ -48,6 +48,22 @@ export default class BubbleLayer<T extends BubbleLayerConfig = BubbleLayerConfig
   protected parseEvents() {
     super.parseEvents(EventParser);
   }
+
+  protected extractTooltip() {
+    this.points.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      this.points.tooltip.fields = tooltipOptions.fields;
+    } else {
+      this.points.tooltip.fields = [this.options.xField, this.options.yField, this.options.sizeField];
+    }
+    if (tooltipOptions.formatter) {
+      this.points.tooltip.callback = tooltipOptions.formatter;
+      if (this.options.colorField) {
+        this.points.tooltip.fields.push(this.options.colorField);
+      }
+    }
+  }
 }
 
 registerPlotType('bubble', BubbleLayer);
diff --git a/src/plots/calendar/layer.ts b/src/plots/calendar/layer.ts
index 32de0c6532..ab9218a03b 100644
--- a/src/plots/calendar/layer.ts
+++ b/src/plots/calendar/layer.ts
@@ -109,7 +109,7 @@ export default class CalendarLayer extends ViewLayer<CalendarLayerConfig> {
   }
 
   protected addGeometry(): void {
-    const { valueField, colors } = this.options;
+    const { valueField, colors, tooltip } = this.options;
     const polygonConfig: any = {
       type: 'polygon',
       position: {
@@ -125,9 +125,27 @@ export default class CalendarLayer extends ViewLayer<CalendarLayerConfig> {
       label: this.extractLabel(),
     };
 
+    if (tooltip && (tooltip.fields || tooltip.formatter)) {
+      this.geometryTooltip(polygonConfig);
+    }
+
     this.setConfig('geometry', polygonConfig);
   }
 
+  protected geometryTooltip(geomConfig) {
+    geomConfig.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      geomConfig.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      geomConfig.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        geomConfig.tooltip.fields = [WEEK_FIELD, DAY_FIELD];
+      }
+    }
+  }
+
   private extractLabel() {
     const props = this.options;
     const label = props.label;
diff --git a/src/plots/column/layer.ts b/src/plots/column/layer.ts
index c24543c379..b45c20c4d5 100644
--- a/src/plots/column/layer.ts
+++ b/src/plots/column/layer.ts
@@ -175,9 +175,29 @@ export default class BaseColumnLayer<T extends ColumnLayerConfig = ColumnLayerCo
     }
     this.adjustColumn(column);
     this.column = column;
+    if (options.tooltip && (options.tooltip.fields || options.tooltip.formatter)) {
+      this.geometryTooltip();
+    }
     this.setConfig('geometry', column);
   }
 
+  protected geometryTooltip() {
+    this.column.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      this.column.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      this.column.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        this.column.tooltip.fields = [this.options.xField, this.options.yField];
+        if (this.options.colorField) {
+          this.column.tooltip.fields.push(this.options.colorField);
+        }
+      }
+    }
+  }
+
   protected animation() {
     super.animation();
     if (this.options.animation === false) {
diff --git a/src/plots/density-heatmap/layer.ts b/src/plots/density-heatmap/layer.ts
index 0cbda26754..145a55ee52 100644
--- a/src/plots/density-heatmap/layer.ts
+++ b/src/plots/density-heatmap/layer.ts
@@ -178,6 +178,10 @@ export default class DensityHeatmapLayer<
       config.intensity = this.options.intensity;
     }
 
+    if (this.options.tooltip && (this.options.tooltip.fields || this.options.tooltip.formatter)) {
+      this.geometryTooltip(config);
+    }
+
     this.setConfig('geometry', config);
 
     this.addPoint();
@@ -220,6 +224,23 @@ export default class DensityHeatmapLayer<
     this.setConfig('legends', false);
   }
 
+  protected geometryTooltip(config) {
+    config.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      config.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      config.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        config.tooltip.fields = [this.options.xField, this.options.yField];
+        if (this.options.colorField) {
+          config.tooltip.fields.push(this.options.colorField);
+        }
+      }
+    }
+  }
+
   protected parseEvents(eventParser) {
     super.parseEvents(EventParser);
   }
diff --git a/src/plots/grouped-bar/layer.ts b/src/plots/grouped-bar/layer.ts
index c875bebb8e..abf1cc3067 100644
--- a/src/plots/grouped-bar/layer.ts
+++ b/src/plots/grouped-bar/layer.ts
@@ -80,6 +80,20 @@ export default class GroupedBarLayer extends BaseBarLayer<GroupedBarLayerConfig>
       },
     ];
   }
+
+  protected geometryTooltip() {
+    this.bar.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      this.bar.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      this.bar.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        this.bar.tooltip.fields = [this.options.xField, this.options.yField, this.options.groupField];
+      }
+    }
+  }
 }
 
 registerPlotType('groupedBar', GroupedBarLayer);
diff --git a/src/plots/grouped-column/layer.ts b/src/plots/grouped-column/layer.ts
index 55e15e8c11..7a83cfa43f 100644
--- a/src/plots/grouped-column/layer.ts
+++ b/src/plots/grouped-column/layer.ts
@@ -37,6 +37,20 @@ export default class GroupedColumnLayer extends BaseColumnLayer<GroupedColumnLay
       },
     ];
   }
+
+  protected geometryTooltip() {
+    this.column.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      this.column.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      this.column.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        this.column.tooltip.fields = [this.options.xField, this.options.yField, this.options.groupField];
+      }
+    }
+  }
 }
 
 registerPlotType('groupedColumn', GroupedColumnLayer);
diff --git a/src/plots/grouped-rose/layer.ts b/src/plots/grouped-rose/layer.ts
index f5f09f0c63..7c77eb57b6 100644
--- a/src/plots/grouped-rose/layer.ts
+++ b/src/plots/grouped-rose/layer.ts
@@ -48,6 +48,20 @@ export default class GroupedRoseLayer<T extends GroupedRoseLayerConfig = Grouped
       },
     ];
   }
+
+  protected geometryTooltip() {
+    this.rose.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      this.rose.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      this.rose.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        this.rose.tooltip.fields = [this.options.radiusField, this.options.categoryField, this.options.groupField];
+      }
+    }
+  }
 }
 
 registerPlotType('groupedRose', GroupedRoseLayer);
diff --git a/src/plots/heatmap/layer.ts b/src/plots/heatmap/layer.ts
index 1449341d2b..6b676eb14d 100644
--- a/src/plots/heatmap/layer.ts
+++ b/src/plots/heatmap/layer.ts
@@ -153,13 +153,18 @@ export default class HeatmapLayer<T extends HeatmapLayerConfig = HeatmapLayerCon
 
   protected addGeometry() {
     this.gridSize = this.getGridSize();
+    let geomConfig;
     if (this.options.shapeType === 'rect') {
-      const rect = this.addRect();
-      this.setConfig('geometry', rect);
+      geomConfig = this.addRect();
     } else {
       const circle = this.addCircle();
-      this.setConfig('geometry', circle);
+      geomConfig = circle;
     }
+    if (this.options.tooltip && (this.options.tooltip.fields || this.options.tooltip.formatter)) {
+      this.geometryTooltip(geomConfig);
+    }
+
+    this.setConfig('geometry', geomConfig);
   }
 
   protected addRect() {
@@ -231,6 +236,23 @@ export default class HeatmapLayer<T extends HeatmapLayerConfig = HeatmapLayerCon
     return circle;
   }
 
+  protected geometryTooltip(config) {
+    config.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      config.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      config.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        config.tooltip.fields = [this.options.xField, this.options.yField];
+        if (this.options.colorField) {
+          config.tooltip.fields.push(this.options.colorField);
+        }
+      }
+    }
+  }
+
   private getGridSize() {
     if (this.options.padding === 'auto') {
       return [0, 0];
diff --git a/src/plots/line/layer.ts b/src/plots/line/layer.ts
index 1d99daef6a..2627b40423 100644
--- a/src/plots/line/layer.ts
+++ b/src/plots/line/layer.ts
@@ -147,7 +147,7 @@ export default class LineLayer<T extends LineLayerConfig = LineLayerConfig> exte
   }
 
   private addLine() {
-    const props = this.options;
+    const props: any = this.options;
     this.line = getGeom('line', 'main', {
       plot: this,
     });
@@ -155,6 +155,11 @@ export default class LineLayer<T extends LineLayerConfig = LineLayerConfig> exte
     if (props.label) {
       this.label();
     }
+
+    if (props.tooltip && (props.tooltip.fields || props.tooltip.formatter)) {
+      this.geometryTooltip();
+    }
+
     this.setConfig('geometry', this.line);
   }
 
@@ -193,6 +198,23 @@ export default class LineLayer<T extends LineLayerConfig = LineLayerConfig> exte
     }
   }
 
+  protected geometryTooltip() {
+    this.line.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      this.line.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      this.line.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        this.line.tooltip.fields = [this.options.xField, this.options.yField];
+        if (this.options.seriesField) {
+          this.line.tooltip.fields.push(this.options.seriesField);
+        }
+      }
+    }
+  }
+
   protected animation() {
     super.animation();
     const props = this.options;
diff --git a/src/plots/pie/layer.ts b/src/plots/pie/layer.ts
index 8d90aef1d4..66dd73ccc0 100644
--- a/src/plots/pie/layer.ts
+++ b/src/plots/pie/layer.ts
@@ -154,9 +154,26 @@ export default class PieLayer<T extends PieLayerConfig = PieLayerConfig> extends
     if (props.label) {
       this.label();
     }
+    if (props.tooltip && (props.tooltip.fields || props.tooltip.formatter)) {
+      this.geometryTooltip();
+    }
     this.setConfig('geometry', pie);
   }
 
+  protected geometryTooltip() {
+    this.pie.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      this.pie.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      this.pie.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        this.pie.tooltip.fields = [this.options.angleField, this.options.colorField];
+      }
+    }
+  }
+
   protected animation() {
     super.animation();
     const props = this.options;
diff --git a/src/plots/radar/layer.ts b/src/plots/radar/layer.ts
index 6898fe83b6..4c43ce3d08 100644
--- a/src/plots/radar/layer.ts
+++ b/src/plots/radar/layer.ts
@@ -266,6 +266,27 @@ export default class RadarLayer extends ViewLayer<RadarLayerConfig> {
     if (props.label) {
       this.label();
     }
+    if (props.tooltip && (props.tooltip.fields || props.tooltip.formatter)) {
+      this.geometryTooltip();
+    }
+  }
+
+  protected geometryTooltip() {
+    const geomConfig = this.line ? this.line : this.area;
+    geomConfig.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      geomConfig.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      geomConfig.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        geomConfig.tooltip.fields = [this.options.angleField, this.options.radiusField];
+      }
+      if (this.options.seriesField) {
+        geomConfig.tooltip.fields.push(this.options.seriesField);
+      }
+    }
   }
 
   protected label() {
diff --git a/src/plots/rose/layer.ts b/src/plots/rose/layer.ts
index 48f58679a2..395a13afd1 100644
--- a/src/plots/rose/layer.ts
+++ b/src/plots/rose/layer.ts
@@ -21,8 +21,6 @@ export interface RoseViewConfig extends ViewConfig {
   radiusField: string;
   categoryField: string;
   colorField?: string;
-  stackField?: string;
-  groupField?: string;
   radius?: number;
   innerRadius?: number;
   /** 每个扇形切片的样式 */
@@ -161,7 +159,6 @@ export default class RoseLayer<T extends RoseLayerConfig = RoseLayerConfig> exte
 
   protected addGeometry() {
     const options = this.options;
-    this.adjustColorFieldMapping();
     this.adjustLegendOptions();
     const rose = getGeom('interval', 'main', {
       plot: this,
@@ -173,33 +170,28 @@ export default class RoseLayer<T extends RoseLayerConfig = RoseLayerConfig> exte
     rose.label = this.extractLabel();
     rose.adjust = this.adjustRoseAdjust();
     this.rose = rose;
+    if (options.tooltip && (options.tooltip.fields || options.tooltip.formatter)) {
+      this.geometryTooltip();
+    }
     this.setConfig('geometry', rose);
   }
 
-  protected adjustColorFieldMapping() {
-    const options = this.options;
-    if (options.stackField || options.groupField) {
-      this.options.colorField = null;
-    }
+  protected adjustRoseAdjust() {
+    return;
   }
 
-  protected adjustRoseAdjust() {
-    /*if (this.options.stackField) {
-      return [
-        {
-          type: 'stack',
-        },
-      ];
-    } else if (this.options.groupField) {
-      return [
-        {
-          type: 'dodge',
-          marginRatio: 1,
-        },
-      ];
+  protected geometryTooltip() {
+    this.rose.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      this.rose.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      this.rose.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        this.rose.tooltip.fields = [this.options.radiusField, this.options.categoryField, this.options.colorField];
+      }
     }
-    return null;*/
-    return;
   }
 
   protected animation() {
diff --git a/src/plots/scatter/layer.ts b/src/plots/scatter/layer.ts
index d036071781..3d8d4c2231 100644
--- a/src/plots/scatter/layer.ts
+++ b/src/plots/scatter/layer.ts
@@ -217,6 +217,9 @@ export default class ScatterLayer<T extends ScatterLayerConfig = ScatterLayerCon
     if (this.options.label) {
       this.label();
     }
+    if (this.options.tooltip && (this.options.tooltip.fields || this.options.tooltip.formatter)) {
+      this.geometryTooltip();
+    }
     this.setConfig('geometry', points);
   }
 
@@ -256,10 +259,19 @@ export default class ScatterLayer<T extends ScatterLayerConfig = ScatterLayerCon
   }
 
   protected extractTooltip() {
-    const props = this.options;
-    return {
-      fields: [props.xField, props.yField],
-    };
+    this.points.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      this.points.tooltip.fields = tooltipOptions.fields;
+    } else {
+      this.points.tooltip.fields = [this.options.xField, this.options.yField];
+    }
+    if (tooltipOptions.formatter) {
+      this.points.tooltip.callback = tooltipOptions.formatter;
+      if (this.options.colorField) {
+        this.points.tooltip.fields.push(this.options.colorField);
+      }
+    }
   }
 }
 
diff --git a/src/plots/stacked-area/layer.ts b/src/plots/stacked-area/layer.ts
index 290f7d049a..41d63dbb96 100644
--- a/src/plots/stacked-area/layer.ts
+++ b/src/plots/stacked-area/layer.ts
@@ -77,6 +77,20 @@ export default class StackedAreaLayer<T extends StackedAreaLayerConfig = Stacked
     super.afterRender();
   }
 
+  protected geometryTooltip() {
+    this.area.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      this.area.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      this.area.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        this.area.tooltip.fields = [this.options.xField, this.options.yField, this.options.stackField];
+      }
+    }
+  }
+
   protected renderPlotComponents() {
     const componentsType = ['areaLabel', 'lineLabel'];
     each(componentsType, (t) => {
diff --git a/src/plots/stacked-bar/layer.ts b/src/plots/stacked-bar/layer.ts
index b4e38d16d2..7dceb1a614 100644
--- a/src/plots/stacked-bar/layer.ts
+++ b/src/plots/stacked-bar/layer.ts
@@ -90,6 +90,20 @@ export default class StackedBarLayer<T extends StackedBarLayerConfig = StackedBa
       label.render();
     }
   }
+
+  protected geometryTooltip() {
+    this.bar.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      this.bar.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      this.bar.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        this.bar.tooltip.fields = [this.options.xField, this.options.yField, this.options.stackField];
+      }
+    }
+  }
 }
 
 registerPlotType('stackedBar', StackedBarLayer);
diff --git a/src/plots/stacked-column/layer.ts b/src/plots/stacked-column/layer.ts
index d71cf19c99..b08ee94c19 100644
--- a/src/plots/stacked-column/layer.ts
+++ b/src/plots/stacked-column/layer.ts
@@ -81,6 +81,20 @@ export default class StackedColumnLayer<
       label.render();
     }
   }
+
+  protected geometryTooltip() {
+    this.column.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      this.column.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      this.column.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        this.column.tooltip.fields = [this.options.xField, this.options.yField, this.options.stackField];
+      }
+    }
+  }
 }
 
 registerPlotType('stackedColumn', StackedColumnLayer);
diff --git a/src/plots/stacked-rose/layer.ts b/src/plots/stacked-rose/layer.ts
index 1ee66c0c37..ef6726065f 100644
--- a/src/plots/stacked-rose/layer.ts
+++ b/src/plots/stacked-rose/layer.ts
@@ -47,6 +47,20 @@ export default class StackedRoseLayer<T extends StackedRoseLayerConfig = Stacked
       },
     ];
   }
+
+  protected geometryTooltip() {
+    this.rose.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      this.rose.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      this.rose.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        this.rose.tooltip.fields = [this.options.radiusField, this.options.categoryField, this.options.stackField];
+      }
+    }
+  }
 }
 
 registerPlotType('stackedRose', StackedRoseLayer);
diff --git a/src/plots/treemap/layer.ts b/src/plots/treemap/layer.ts
index 7492c5e222..51a02530f4 100644
--- a/src/plots/treemap/layer.ts
+++ b/src/plots/treemap/layer.ts
@@ -145,6 +145,9 @@ export default class TreemapLayer<T extends TreemapLayerConfig = TreemapLayerCon
         fields: ['name', 'value'],
       },
     };
+    if (this.options.tooltip && this.options.tooltip.formatter) {
+      this.rect.tooltip.callback = this.options.tooltip.formatter;
+    }
     this.setConfig('geometry', this.rect);
   }
 
diff --git a/src/plots/waterfall/layer.ts b/src/plots/waterfall/layer.ts
index 45282afdd5..458da8f465 100644
--- a/src/plots/waterfall/layer.ts
+++ b/src/plots/waterfall/layer.ts
@@ -178,6 +178,9 @@ export default class WaterfallLayer extends ViewLayer<WaterfallLayerConfig> {
     waterfall.style = this._parseStyle();
     waterfall.color = this._parseColor();
     this.waterfall = waterfall;
+    if (this.options.tooltip && (this.options.tooltip.fields || this.options.tooltip.formatter)) {
+      this.geometryTooltip();
+    }
     this.setConfig('geometry', waterfall);
   }
 
@@ -254,6 +257,20 @@ export default class WaterfallLayer extends ViewLayer<WaterfallLayerConfig> {
     super.parseEvents(EventParser);
   }
 
+  protected geometryTooltip() {
+    this.waterfall.tooltip = {};
+    const tooltipOptions: any = this.options.tooltip;
+    if (tooltipOptions.fields) {
+      this.waterfall.tooltip.fields = tooltipOptions.fields;
+    }
+    if (tooltipOptions.formatter) {
+      this.waterfall.tooltip.callback = tooltipOptions.formatter;
+      if (!tooltipOptions.fields) {
+        this.waterfall.tooltip.fields = [this.options.xField, VALUE_FIELD];
+      }
+    }
+  }
+
   /** 牵引线的样式注入到style中 */
   private _parseStyle(): IStyleConfig {
     const style = this.options.waterfallStyle;