Fix tooltip rich text format

src/chart/graph/GraphSeries.ts

@@ -41,7 +41,8 @@ import {
     LabelFormatterCallback,
     Dictionary,
     LineLabelOption,
-    StatesOptionMixin
+    StatesOptionMixin,
+    TooltipRenderMode
 } from '../../util/types';
 import SeriesModel from '../../model/Series';
 import Graph from '../../data/Graph';
@@ -339,7 +340,12 @@ class GraphSeriesModel extends SeriesModel<GraphSeriesOption> {
     /**
      * @override
      */
-    formatTooltip(dataIndex: number, multipleSeries: boolean, dataType: string) {
+    formatTooltip(
+        dataIndex: number,
+        multipleSeries: boolean,
+        dataType: string,
+        renderMode: TooltipRenderMode
+    ) {
         if (dataType === 'edge') {
             const nodeData = this.getData();
             const params = this.getDataParams(dataIndex, dataType);

src/chart/lines/LinesSeries.ts

@@ -35,7 +35,8 @@ import {
     LineStyleOption,
     OptionDataValue,
     LineLabelOption,
-    StatesOptionMixin
+    StatesOptionMixin,
+    TooltipRenderMode
 } from '../../util/types';
 import GlobalModel from '../../model/Global';
 import type { LineDrawModelOption } from '../helper/LineDraw';
@@ -321,7 +322,12 @@ class LinesSeriesModel extends SeriesModel<LinesSeriesOption> {
         return lineData;
     }
 
-    formatTooltip(dataIndex: number) {
+    formatTooltip(
+        dataIndex: number,
+        multipleSeries: boolean,
+        dataType: string,
+        renderMode: TooltipRenderMode
+    ) {
         const data = this.getData();
         const itemModel = data.getItemModel<LinesDataItemOption>(dataIndex);
         const name = itemModel.get('name');

src/chart/map/MapSeries.ts

@@ -21,7 +21,7 @@
 import * as zrUtil from 'zrender/src/core/util';
 import createListSimply from '../helper/createListSimply';
 import SeriesModel from '../../model/Series';
-import {encodeHTML, addCommas, concatTooltipHtml} from '../../util/format';
+import {encodeHTML, addCommas, concatTooltipHtml, encodeHTML, encodeHTML } from '../../util/format';
 import geoSourceManager from '../../coord/geo/geoSourceManager';
 import {makeSeriesEncodeForNameBased} from '../../data/helper/sourceHelper';
 import {
@@ -34,7 +34,8 @@ import {
     OptionDataValueNumeric,
     ParsedValue,
     SeriesOnGeoOptionMixin,
-    StatesOptionMixin
+    StatesOptionMixin,
+    TooltipRenderMode
 } from '../../util/types';
 import { Dictionary } from 'zrender/src/core/types';
 import GeoModel, { GeoCommonOptionMixin, GeoItemStyleOption } from '../../coord/geo/GeoModel';
@@ -181,7 +182,12 @@ class MapSeries extends SeriesModel<MapSeriesOption> {
     /**
      * Map tooltip formatter
      */
-    formatTooltip(dataIndex: number): string {
+    formatTooltip(
+        dataIndex: number,
+        multipleSeries: boolean,
+        dataType: string,
+        renderMode: TooltipRenderMode
+    ): string {
         // FIXME orignalData and data is a bit confusing
         const data = this.getData();
         const formattedValue = addCommas(this.getRawValue(dataIndex));
@@ -199,6 +205,11 @@ class MapSeries extends SeriesModel<MapSeriesOption> {
             }
         }
 
+        if (renderMode === 'richText') {
+            return seriesNames.join(', ') + (seriesNames.length ? '\n' : '')
+                + encodeHTML(name) + formattedValue;
+        }
+
         return seriesNames.join(', ') + (seriesNames.length ? '<br />' : '')
             + concatTooltipHtml(name, formattedValue);
     }

src/chart/radar/RadarSeries.ts

@@ -130,8 +130,16 @@ class RadarSeriesModel extends SeriesModel<RadarSeriesOption> {
             default:
                 break;
         }
+
+        if (renderMode === 'richText') {
+            return encodeHTML(name === '' ? this.name : name) + '\n'
+                + zrUtil.map(indicatorAxes, function (axis) {
+                    const val = data.get(data.mapDimension(axis.dim), dataIndex);
+                    return encodeHTML(axis.name) + val;
+                }).join('\n');
+        }
         return encodeHTML(name === '' ? this.name : name) + '<br/>'
-            + zrUtil.map(indicatorAxes, function (axis, idx) {
+            + zrUtil.map(indicatorAxes, function (axis) {
                 const val = data.get(data.mapDimension(axis.dim), dataIndex);
                 return '<div style="margin: 8px 0 0;">'
                     + concatTooltipHtml(axis.name, val)

src/chart/sankey/SankeySeries.ts

@@ -19,7 +19,7 @@
 
 import SeriesModel from '../../model/Series';
 import createGraphFromNodeEdge from '../helper/createGraphFromNodeEdge';
-import {concatTooltipHtml} from '../../util/format';
+import {concatTooltipHtml, encodeHTML} from '../../util/format';
 import Model from '../../model/Model';
 import { __DEV__ } from '../../config';
 import {
@@ -32,7 +32,8 @@ import {
     LayoutOrient,
     ColorString,
     StatesOptionMixin,
-    OptionDataItemObject
+    OptionDataItemObject,
+    TooltipRenderMode
 } from '../../util/types';
 import GlobalModel from '../../model/Global';
 import List from '../../data/List';
@@ -233,20 +234,31 @@ class SankeySeriesModel extends SeriesModel<SankeySeriesOption> {
     /**
      * @override
      */
-    formatTooltip(dataIndex: number, multipleSeries: boolean, dataType: 'node' | 'edge') {
+    formatTooltip(
+        dataIndex: number,
+        multipleSeries: boolean,
+        dataType: 'node' | 'edge',
+        renderMode: TooltipRenderMode
+    ) {
         // dataType === 'node' or empty do not show tooltip by default
         if (dataType === 'edge') {
             const params = this.getDataParams(dataIndex, dataType);
             const rawDataOpt = params.data;
+            if (renderMode === 'richText') {
+                return encodeHTML(rawDataOpt.source + ' -- ' + rawDataOpt.target) + params.value;
+            }
             return concatTooltipHtml(rawDataOpt.source + ' -- ' + rawDataOpt.target, params.value || '');
         }
         else if (dataType === 'node') {
             const node = this.getGraph().getNodeByIndex(dataIndex);
             const value = node.getLayout().value;
             const name = this.getDataParams(dataIndex, dataType).data.name;
+            if (renderMode === 'richText') {
+                return encodeHTML(value ? name : '') + '\t' + (value || '');
+            }
             return concatTooltipHtml(value ? name : '', value || '');
         }
-        return super.formatTooltip(dataIndex, multipleSeries);
+        return super.formatTooltip(dataIndex, multipleSeries, dataType, renderMode);
     }
 
     optionUpdated() {

src/chart/themeRiver/ThemeRiverSeries.ts

@@ -23,7 +23,7 @@ import {getDimensionTypeByAxis} from '../../data/helper/dimensionHelper';
 import List from '../../data/List';
 import * as zrUtil from 'zrender/src/core/util';
 import {groupData, SINGLE_REFERRING} from '../../util/model';
-import {concatTooltipHtml} from '../../util/format';
+import {concatTooltipHtml, encodeHTML} from '../../util/format';
 import LegendVisualProvider from '../../visual/LegendVisualProvider';
 import {
     SeriesOption,
@@ -33,7 +33,8 @@ import {
     OptionDataValueNumeric,
     ItemStyleOption,
     BoxLayoutOptionMixin,
-    ZRColor
+    ZRColor,
+    TooltipRenderMode
 } from '../../util/types';
 import SingleAxis from '../../coord/single/SingleAxis';
 import GlobalModel from '../../model/Global';
@@ -288,13 +289,22 @@ class ThemeRiverSeriesModel extends SeriesModel<ThemeRiverSeriesOption> {
      * @override
      * @param {number} dataIndex  index of data
      */
-    formatTooltip(dataIndex: number): string {
+    formatTooltip(
+        dataIndex: number,
+        multipleSeries: boolean,
+        dataType: string,
+        renderMode: TooltipRenderMode
+    ): string {
         const data = this.getData();
         const htmlName = data.getName(dataIndex);
         let htmlValue = data.get(data.mapDimension('value'), dataIndex);
         if (isNaN(htmlValue as number) || htmlValue == null) {
             htmlValue = '-';
         }
+
+        if (renderMode === 'richText') {
+            return encodeHTML(htmlName) + htmlValue;
+        }
         return '<div style="margin: 8px 0 0;">'
             + concatTooltipHtml(htmlName, htmlValue)
             + '</div>';

src/chart/tree/TreeSeries.ts

@@ -19,7 +19,7 @@
 
 import SeriesModel from '../../model/Series';
 import Tree from '../../data/Tree';
-import {concatTooltipHtml} from '../../util/format';
+import { concatTooltipHtml, encodeHTML } from '../../util/format';
 import {
     SeriesOption,
     SymbolOptionMixin,
@@ -30,7 +30,8 @@ import {
     LabelOption,
     OptionDataValue,
     StatesOptionMixin,
-    OptionDataItemObject
+    OptionDataItemObject,
+    TooltipRenderMode
 } from '../../util/types';
 import List from '../../data/List';
 import View from '../../coord/View';
@@ -203,7 +204,12 @@ class TreeSeriesModel extends SeriesModel<TreeSeriesOption> {
     /**
      * @override
      */
-    formatTooltip(dataIndex: number): string {
+    formatTooltip(
+        dataIndex: number,
+        multipleSeries: boolean,
+        dataType: string,
+        renderMode: TooltipRenderMode
+    ): string {
         const tree = this.getData().tree;
         const realRoot = tree.root.children[0];
         let node = tree.getNodeByDataIndex(dataIndex);
@@ -214,6 +220,10 @@ class TreeSeriesModel extends SeriesModel<TreeSeriesOption> {
             node = node.parentNode;
         }
 
+        if (renderMode === 'richText') {
+            return encodeHTML(name) + '\t' + ((isNaN(value as number) || value == null) ? '' : value);
+        }
+
         return concatTooltipHtml(name, (isNaN(value as number) || value == null) ? '' : value);
     }
 

src/chart/treemap/TreemapSeries.ts

@@ -21,7 +21,11 @@ import * as zrUtil from 'zrender/src/core/util';
 import SeriesModel from '../../model/Series';
 import Tree, { TreeNode } from '../../data/Tree';
 import Model from '../../model/Model';
-import {addCommas, concatTooltipHtml} from '../../util/format';
+import {
+    addCommas,
+    concatTooltipHtml,
+    encodeHTML
+} from '../../util/format';
 import {wrapTreePathInfo} from '../helper/treeHelper';
 import {
     SeriesOption,
@@ -29,7 +33,7 @@ import {
     ItemStyleOption,
     LabelOption,
     RoamOptionMixin,
-    // OptionDataValue,
+    TooltipRenderMode,
     CallbackDataParams,
     ColorString,
     StatesOptionMixin
@@ -376,13 +380,21 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
      * @param {number} dataIndex
      * @param {boolean} [mutipleSeries=false]
      */
-    formatTooltip(dataIndex: number) {
+    formatTooltip(
+        dataIndex: number,
+        multipleSeries: boolean,
+        dataType: string,
+        renderMode: TooltipRenderMode
+    ) {
         const data = this.getData();
         const value = this.getRawValue(dataIndex) as TreemapSeriesDataValue;
         const formattedValue = zrUtil.isArray(value)
             ? addCommas(value[0] as number) : addCommas(value as number);
         const name = data.getName(dataIndex);
 
+        if (renderMode === 'richText') {
+            return encodeHTML(name) + '\t' + formattedValue;
+        }
         return concatTooltipHtml(name, formattedValue);
     }
 

src/component/marker/MarkerModel.ts

@@ -30,7 +30,8 @@ import {
     AnimationOptionMixin,
     Dictionary,
     CommonTooltipOption,
-    ScaleDataValue
+    ScaleDataValue,
+    TooltipRenderMode
 } from '../../util/types';
 import Model from '../../model/Model';
 import GlobalModel from '../../model/Global';
@@ -198,7 +199,12 @@ abstract class MarkerModel<Opts extends MarkerOption = MarkerOption> extends Com
         }
     }
 
-    formatTooltip(dataIndex: number) {
+    formatTooltip(
+        dataIndex: number,
+        multipleSeries: boolean,
+        dataType: string,
+        renderMode: TooltipRenderMode
+    ) {
         const data = this.getData();
         const value = this.getRawValue(dataIndex);
         const formattedValue = zrUtil.isArray(value)
@@ -206,13 +212,15 @@ abstract class MarkerModel<Opts extends MarkerOption = MarkerOption> extends Com
         const name = encodeHTML(data.getName(dataIndex));
         let html = encodeHTML(this.name);
         if (value != null || name) {
-            html += '<br />';
+            html += renderMode === 'html' ? '<br />' : '\n';
         }
         if (name) {
             html += name;
         }
         if (value != null) {
-            html = concatTooltipHtml(html, formattedValue, true);
+            html = renderMode === 'html'
+                ? concatTooltipHtml(html, formattedValue, true)
+                : (html + formattedValue);
         }
         return html;
     }

src/model/Series.ts

@@ -526,13 +526,16 @@ class SeriesModel<Opt extends SeriesOption = SeriesOption> extends ComponentMode
             : tooltipDimLen
             ? formatSingleValue(retrieveRawValue(data, dataIndex, tooltipDims[0]))
             : formatSingleValue(isValueArr ? value[0] : value);
-        const content = `<span style="float:right;margin-left:20px;color:#000;font-weight:900">${formattedValue.content}</span>`;
+        const content = isRichText
+            ? formattedValue.content
+            : '<span style="float:right;margin-left:20px;color:#000;font-weight:900">'
+                + formattedValue.content + '</span>';
 
         const markName = series.seriesIndex + 'at' + markerId;
         const colorEl = getTooltipMarker({
             color: colorStr,
             type: 'item',
-            renderMode: renderMode,
+            renderMode,
             markerId: markName
         });
         markers[markName] = colorStr;
@@ -549,14 +552,27 @@ class SeriesModel<Opt extends SeriesOption = SeriesOption> extends ComponentMode
             : '';
 
         colorStr = typeof colorEl === 'string' ? colorEl : colorEl.content;
-        const html = !multipleSeries
-            ? seriesName + (seriesName ? '<br/>' : '') + `<div style="margin: ${seriesName ? 8 : 0}px 0 0;">`
-                + colorStr
-                + (name
-                    ? `${encodeHTML(name)}${content}`
-                    : content
-                ) + '</div>'
-            : `<div style="margin: 8px 0 0;">${colorStr}${seriesName}${content}</div>`;
+        let html = '';
+        if (!isRichText) {
+            html = !multipleSeries
+                ? seriesName + (seriesName ? '<br/>' : '') + `<div style="margin: ${seriesName ? 8 : 0}px 0 0;">`
+                    + colorStr
+                    + (name
+                        ? `${encodeHTML(name)}${content}`
+                        : content
+                    ) + '</div>'
+                : `<div style="margin: 8px 0 0;">${colorStr}${seriesName}${content}</div>`;
+        }
+        else {
+            html = !multipleSeries
+                ? seriesName + (seriesName ? '\n' : '') + ''
+                    + colorStr
+                    + (name
+                        ? `${encodeHTML(name)}${content}`
+                        : content
+                    ) + ''
+                : `${colorStr}${seriesName}${content}`;
+        }
 
         return {html, markers};
     }

src/util/types.ts

@@ -521,9 +521,9 @@ export interface CallbackDataParams {
     seriesName?: string;
     name: string;
     dataIndex: number;
-    data: unknown;
+    data: any;
     dataType?: string;
-    value: unknown;
+    value: any;
     color?: ZRColor;
     borderColor?: string;
     dimensionNames?: DimensionName[];
@@ -974,7 +974,7 @@ interface PositionCallback {
          * Will be HTMLDivElement when renderMode is html
          * Otherwise it's graphic.Text
          */
-        el: HTMLDivElement | ZRText | null,
+        el: HTMLDivElement | ZRText | null | Group,
         /**
          * Rect of hover elements. Will be null if not hovered
          */