fix: [tooltip] keep support tooltip on graphic component.

src/component/graphic/install.ts

@@ -30,7 +30,8 @@ import {
     Dictionary,
     ZRStyleProps,
     OptionId,
-    OptionPreprocessor
+    OptionPreprocessor,
+    CommonTooltipOption
 } from '../../util/types';
 import ComponentModel from '../../model/Component';
 import Element, { ElementTextConfig } from 'zrender/src/Element';
@@ -44,6 +45,7 @@ import { getECData } from '../../util/innerStore';
 import { TextStyleProps } from 'zrender/src/graphic/Text';
 import { isEC4CompatibleStyle, convertFromEC4CompatibleStyle } from '../../util/styleCompat';
 import { EChartsExtensionInstallRegisters } from '../../extension';
+import { graphic } from '../../export/api';
 
 const TRANSFORM_PROPS = {
     x: 1,
@@ -129,6 +131,8 @@ interface GraphicComponentBaseElementOption extends
     textConfig?: ElementTextConfig;
 
     $action?: 'merge' | 'replace' | 'remove';
+
+    tooltip?: CommonTooltipOption<unknown>;
 };
 interface GraphicComponentDisplayableOption extends
         GraphicComponentBaseElementOption,
@@ -461,7 +465,8 @@ class GraphicComponentView extends ComponentView {
             if (elOptionStyle
                 && isEC4CompatibleStyle(elOptionStyle, elType, !!textConfig, !!textContentOption)
             ) {
-                const convertResult = convertFromEC4CompatibleStyle(elOptionStyle, elType, true) as GraphicComponentZRPathOption;
+                const convertResult =
+                    convertFromEC4CompatibleStyle(elOptionStyle, elType, true) as GraphicComponentZRPathOption;
                 if (!textConfig && convertResult.textConfig) {
                     textConfig = (elOption as GraphicComponentZRPathOption).textConfig = convertResult.textConfig;
                 }
@@ -514,6 +519,25 @@ class GraphicComponentView extends ComponentView {
                 elInner.__ecGraphicWidthOption = (elOption as GraphicComponentGroupOption).width;
                 elInner.__ecGraphicHeightOption = (elOption as GraphicComponentGroupOption).height;
                 setEventData(el, graphicModel, elOption);
+
+                const tooltipOption = elOption.tooltip;
+                const componentIndex = graphicModel.componentIndex;
+                getECData(el).tooltipConfig = tooltipOption
+                    ? {
+                        componentMainType: graphicModel.mainType,
+                        componentIndex: componentIndex,
+                        name: el.name,
+                        option: zrUtil.defaults({
+                            content: el.name,
+                            formatterParams: {
+                                componentType: 'graphic',
+                                graphicIndex: componentIndex,
+                                name: el.name,
+                                $vars: ['name']
+                            }
+                        }, tooltipOption)
+                    }
+                    : null;
             }
         });
     }

src/component/tooltip/TooltipView.ts

@@ -723,9 +723,11 @@ class TooltipView extends ComponentView {
         // that requires setting `trigger` nothing on component yet.
 
         this._showOrMove(subTooltipModel, function (this: TooltipView) {
+            // Use formatterParams from element defined in component
+            // Avoid users modify it.
+            const formatterParams = zrUtil.clone(subTooltipModel.get('formatterParams') as any || {});
             this._showTooltipContent(
-                // Use formatterParams from element defined in component
-                subTooltipModel, defaultHtml, subTooltipModel.get('formatterParams') as any || {},
+                subTooltipModel, defaultHtml, formatterParams,
                 asyncTicket, e.offsetX, e.offsetY, e.position, el, markupStyleCreator
             );
         });

test/runTest/actions/__meta__.json

@@ -151,7 +151,7 @@
   "tooltip-axisPointer": 20,
   "tooltip-axisPointer2": 1,
   "tooltip-cascade": 4,
-  "tooltip-component": 3,
+  "tooltip-component": 4,
   "tooltip-event": 1,
   "tooltip-link": 2,
   "tooltip-rich": 1,

test/tooltip-component.html

@@ -39,6 +39,7 @@ under the License.
         <div id="main0"></div>
         <div id="main1"></div>
         <div id="axis-and-toolbox"></div>
+        <div id="graphic-component-tooltip"></div>
 
 
 
@@ -251,6 +252,120 @@ under the License.
 
 
 
+        <script>
+        require(['echarts'/*, 'map/js/china' */], function (echarts) {
+            var option;
+
+            option = {
+                tooltip: {
+                    textStyle: {
+                        fontSize: 5,
+                        color: 'red'
+                    }
+                },
+                graphic: [{
+                    tooltip: {
+                        formatter: 'asdf',
+                        textStyle: {
+                            fontSize: 20
+                        }
+                    },
+                    type: 'rect',
+                    name: '1st',
+                    shape: {
+                        y: 20,
+                        x: 250,
+                        width: 40,
+                        height: 40
+                    },
+                    textContent: {
+                        style: { text: 'show tooltip asdf\nin fontSize: 20 red' }
+                    },
+                    textConfig: {
+                        position: 'bottom'
+                    },
+                    style: {
+                        fill: 'blue'
+                    }
+                }, {
+                    type: 'rect',
+                    shape: {
+                        y: 20,
+                        x: 350,
+                        width: 40,
+                        height: 40
+                    },
+                    textContent: {
+                        style: {
+                            text: 'show no tooltip'
+                        }
+                    },
+                    textConfig: {
+                        position: 'bottom'
+                    },
+                    style: {
+                        fill: 'blue'
+                    }
+                }, {
+                    type: 'rect',
+                    tooltip: {
+                        formatter: function (param) {
+                            return '<pre>' + JSON.stringify(param, null, 2) + '</pre>';
+                        },
+                        textStyle: {
+                            fontSize: 20
+                        }
+                    },
+                    name: '3rd',
+                    shape: {
+                        y: 20,
+                        x: 450,
+                        width: 40,
+                        height: 40
+                    },
+                    textContent: {
+                        style: { text: 'show tooltip JSON params\nin fontSize: 20 red' }
+                    },
+                    textConfig: {
+                        position: 'bottom'
+                    },
+                    style: {
+                        fill: 'blue'
+                    }
+                }]
+            };
+
+            var chart = testHelper.create(echarts, 'graphic-component-tooltip', {
+                title: [
+                    'Hover the graphic should show tooltip',
+                    'check each tooltip',
+                ],
+                option: option,
+                height: 200,
+                buttons: [{
+                    text: 'trigger 1st graphic tooltip',
+                    onclick: function () {
+                        chart.dispatchAction({
+                            type: 'showTip',
+                            graphicIndex: 0,
+                            name: '1st'
+                        });
+                    }
+                }, {
+                    text: 'trigger 3rd graphic tooltip',
+                    onclick: function () {
+                        chart.dispatchAction({
+                            type: 'showTip',
+                            graphicIndex: 0,
+                            name: '3rd'
+                        });
+                    }
+                }]
+            });
+        });
+        </script>
+
+