fix: [tooltip] (1) keep support string tooltip on each component item. (2) some tiny refactor.

src/component/axis/AxisBuilder.ts

@@ -50,14 +50,6 @@ type AxisEventData = {
     [key in AxisIndexKey]?: number
 };
 
-type LabelFormatterParams = {
-    componentType: string
-    name: string
-    $vars: ['name']
-} & {
-    [key in AxisIndexKey]?: number
-};
-
 type AxisLabelText = graphic.Text & {
     __fullText: string
     __truncatedText: string
@@ -422,14 +414,6 @@ const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName', AxisElementsBu
             opt.nameTruncateMaxWidth, truncateOpt.maxWidth, axisNameAvailableWidth
         );
 
-        const mainType = axisModel.mainType;
-        const formatterParams: LabelFormatterParams = {
-            componentType: mainType,
-            name: name,
-            $vars: ['name']
-        };
-        formatterParams[mainType + 'Index' as AxisIndexKey] = axisModel.componentIndex;
-
         const textEl = new graphic.Text({
             x: pos[0],
             y: pos[1],
@@ -450,16 +434,13 @@ const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName', AxisElementsBu
             }),
             z2: 1
         }) as AxisLabelText;
-        getECData(textEl).tooltipConfig = {
-            componentMainType: axisModel.mainType,
-            componentIndex: axisModel.componentIndex,
-            name: name,
-            option: {
-                content: name,
-                formatter: () => name,
-                formatterParams: formatterParams
-            }
-        };
+
+        graphic.setTooltipConfig({
+            el: textEl,
+            componentModel: axisModel,
+            itemName: name
+        });
+
         textEl.__fullText = name;
         // Id for animation
         textEl.anid = 'name';

src/component/graphic/install.ts

@@ -520,24 +520,12 @@ class GraphicComponentView extends ComponentView {
                 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;
+                graphicUtil.setTooltipConfig({
+                    el: el,
+                    componentModel: graphicModel,
+                    itemName: el.name,
+                    itemTooltipOption: elOption.tooltip
+                });
             }
         });
     }

src/component/legend/LegendView.ts

@@ -41,7 +41,6 @@ import Displayable, { DisplayableState } from 'zrender/src/graphic/Displayable';
 import { PathStyleProps } from 'zrender/src/graphic/Path';
 import { parse, stringify } from 'zrender/src/tool/color';
 import {PatternObject} from 'zrender/src/graphic/Pattern';
-import { getECData } from '../../util/innerStore';
 
 const curry = zrUtil.curry;
 const each = zrUtil.each;
@@ -433,22 +432,12 @@ class LegendView extends ComponentView {
 
         const tooltipModel = itemModel.getModel('tooltip') as Model<CommonTooltipOption<LegendTooltipFormatterParams>>;
         if (tooltipModel.get('show')) {
-            const componentIndex = legendModel.componentIndex;
-            const formatterParams: LegendTooltipFormatterParams = {
-                componentType: 'legend',
-                legendIndex: componentIndex,
-                name: name,
-                $vars: ['name']
-            };
-            getECData(hitRect).tooltipConfig = {
-                componentMainType: legendModel.mainType,
-                componentIndex: componentIndex,
-                name: name,
-                option: zrUtil.defaults({
-                    content: name,
-                    formatterParams: formatterParams
-                }, tooltipModel.option)
-            };
+            graphic.setTooltipConfig({
+                el: hitRect,
+                componentModel: legendModel,
+                itemName: name,
+                itemTooltipOption: tooltipModel.option
+            });
         }
         itemGroup.add(hitRect);
 

src/component/toolbox/ToolboxView.ts

@@ -225,20 +225,14 @@ class ToolboxView extends ComponentView {
                 });
                 path.setTextContent(textContent);
 
-                getECData(path).tooltipConfig = {
-                    componentMainType: toolboxModel.mainType,
-                    componentIndex: toolboxModel.componentIndex,
-                    name: iconName,
-                    option: {
-                        content: titlesMap[iconName],
-                        formatterParams: {
-                            componentType: 'toolbox',
-                            name: iconName,
-                            title: titlesMap[iconName],
-                            $vars: ['name', 'title']
-                        }
+                graphic.setTooltipConfig({
+                    el: path,
+                    componentModel: toolboxModel,
+                    itemName: iconName,
+                    formatterParamsExtra: {
+                        title: titlesMap[iconName]
                     }
-                };
+                });
 
                 // graphic.enableHoverEmphasis(path);
 

src/util/graphic.ts

@@ -53,7 +53,9 @@ import {
     ZRRectLike,
     ZRStyleProps,
     PayloadAnimationPart,
-    AnimationOption
+    AnimationOption,
+    CommonTooltipOption,
+    ComponentItemTooltipLabelFormatterParams
 } from './types';
 import {
     extend,
@@ -61,10 +63,15 @@ import {
     map,
     defaults,
     isObject,
-    retrieve2
+    retrieve2,
+    isString,
+    keys,
+    each,
+    hasOwn
 } from 'zrender/src/core/util';
 import { AnimationEasing } from 'zrender/src/animation/easing';
 import { getECData } from './innerStore';
+import ComponentModel from '../model/Component';
 
 
 const mathMax = Math.max;
@@ -805,6 +812,51 @@ function nearZero(val: number) {
 }
 
 
+export function setTooltipConfig(opt: {
+    el: Element,
+    componentModel: ComponentModel,
+    itemName: string,
+    itemTooltipOption?: string | CommonTooltipOption<unknown>
+    formatterParamsExtra?: Dictionary<unknown>
+}): void {
+    const itemTooltipOption = opt.itemTooltipOption;
+    const componentModel = opt.componentModel;
+    const itemName = opt.itemName;
+
+    const itemTooltipOptionObj = isString(itemTooltipOption)
+        ? { formatter: itemTooltipOption }
+        : itemTooltipOption;
+    const mainType = componentModel.mainType;
+    const componentIndex = componentModel.componentIndex;
+
+    const formatterParams = {
+        componentType: mainType,
+        name: itemName,
+        $vars: ['name']
+    } as ComponentItemTooltipLabelFormatterParams;
+    (formatterParams as any)[mainType + 'Index'] = componentIndex;
+
+    const formatterParamsExtra = opt.formatterParamsExtra;
+    if (formatterParamsExtra) {
+        each(keys(formatterParamsExtra), key => {
+            if (!hasOwn(formatterParams, key)) {
+                formatterParams[key] = formatterParamsExtra[key];
+                formatterParams.$vars.push(key);
+            }
+        });
+    }
+
+    getECData(opt.el).tooltipConfig = {
+        componentMainType: mainType,
+        componentIndex: componentIndex,
+        name: itemName,
+        option: defaults({
+            content: itemName,
+            formatterParams: formatterParams
+        }, itemTooltipOptionObj)
+    };
+}
+
 // Register built-in shapes. These shapes might be overwirtten
 // by users, although we do not recommend that.
 registerShape('circle', Circle);

src/util/innerStore.ts

@@ -35,6 +35,7 @@ export interface ECData {
     focus?: InnerFocus;
     blurScope?: BlurScope;
     tooltipConfig?: {
+        // To make a tooltipConfig, seach `setTooltipConfig`.
         // Used to find component tooltip option, which is used as
         // the parent of tooltipConfig.option for cascading.
         // If not provided, do not use component as its parent.

src/util/types.ts

@@ -1348,8 +1348,20 @@ export interface CommonTooltipOption<FormatterParams> {
 export type ComponentItemTooltipOption<T> = CommonTooltipOption<T> & {
     // Default content HTML.
     content?: string;
-    formatterParams?: unknown;
+    formatterParams?: ComponentItemTooltipLabelFormatterParams;
 };
+export type ComponentItemTooltipLabelFormatterParams = {
+    componentType: string
+    name: string
+    // properies key array like ['name']
+    $vars: string[]
+} & {
+    [key in `${ComponentMainType}Index`]: number
+} & {
+    // Other properties
+    [key in string]: unknown
+};
+
 
 /**
  * Tooltip option configured on each series

test/runTest/actions/__meta__.json

@@ -151,7 +151,7 @@
   "tooltip-axisPointer": 20,
   "tooltip-axisPointer2": 1,
   "tooltip-cascade": 4,
-  "tooltip-component": 4,
+  "tooltip-component": 5,
   "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="axis-and-toolbox-formatter"></div>
         <div id="graphic-component-tooltip"></div>
 
 
@@ -82,6 +83,10 @@ under the License.
                             }
                         }
                         // This item inherit legend.tootip.
+                    }, {
+                        name: 'only show "stringstring"',
+                        tooltip: 'stringstring'
+                        // This item inherit legend.tootip.
                     }]
                 },
                 series: {
@@ -96,6 +101,9 @@ under the License.
                     }, {
                         name: 'tooltip fontSize: 20 red formatter JSON',
                         value: 200
+                    }, {
+                        name: 'only show "stringstring"',
+                        value: 200
                     }]
                 }
             };
@@ -203,7 +211,8 @@ under the License.
             option = {
                 tooltip: {
                     textStyle: {
-                        fontSize: 5
+                        fontSize: 5,
+                        color: 'red'
                     }
                 },
                 toolbox: {
@@ -239,7 +248,8 @@ under the License.
 
             var chart = testHelper.create(echarts, 'axis-and-toolbox', {
                 title: [
-                    'Hover toolbox and axis name should show tooltip, fontSize: 20',
+                    'Hover toolbox and axis name:',
+                    'should show tooltip, fontSize: 20 red',
                     'check each **fontSize** and **color**',
                 ],
                 option: option,
@@ -263,6 +273,70 @@ under the License.
                         color: 'red'
                     }
                 },
+                toolbox: {
+                    tooltip: {
+                        confine: true,
+                        show: true,
+                        formatter: params => {
+                            return '<pre>' + JSON.stringify(params, null, 4) + '</pre>';
+                        },
+                        textStyle: {
+                            fontSize: 20
+                        }
+                    },
+                    feature: {
+                        dataZoom: {},
+                        magicType: {
+                            type: ['line', 'bar', 'stack', 'tiled']
+                        }
+                    }
+                },
+                xAxis: {
+                    name: 'show tooltip',
+                    tooltip: {
+                        formatter: params => {
+                            return '<pre>' + JSON.stringify(params, null, 4) + '</pre>';
+                        },
+                        show: true,
+                        textStyle: {
+                            fontSize: 20
+                        }
+                    }
+                },
+                yAxis: {},
+                series: {
+                    type: 'scatter',
+                    data: [12, 22, 33]
+                }
+            };
+
+            var chart = testHelper.create(echarts, 'axis-and-toolbox-formatter', {
+                title: [
+                    'Hover toolbox and axis name:',
+                    'should show tooltip, fontSize: 20 red, **params JSON**',
+                    'check each **fontSize** and **color**',
+                ],
+                option: option,
+                height: 200
+            });
+        });
+        </script>
+
+
+
+
+
+        <script>
+        require(['echarts'/*, 'map/js/china' */], function (echarts) {
+            var option;
+
+            option = {
+                tooltip: {
+                    textStyle: {
+                        fontSize: 10,
+                        color: 'red'
+                    }
+                },
                 graphic: [{
                     tooltip: {
                         formatter: 'asdf',
@@ -332,6 +406,25 @@ under the License.
                     style: {
                         fill: 'blue'
                     }
+                }, {
+                    tooltip: 'stringstring',
+                    type: 'rect',
+                    name: '4nd',
+                    shape: {
+                        y: 20,
+                        x: 550,
+                        width: 40,
+                        height: 40
+                    },
+                    textContent: {
+                        style: { text: 'show tooltip "stringstring"\nin fontSize: 10 red' }
+                    },
+                    textConfig: {
+                        position: 'bottom'
+                    },
+                    style: {
+                        fill: 'blue'
+                    }
                 }]
             };