fix:

src/chart/graph/GraphSeries.ts

@@ -21,7 +21,6 @@ import List from '../../data/List';
 import * as zrUtil from 'zrender/src/core/util';
 import {defaultEmphasis} from '../../util/model';
 import Model from '../../model/Model';
-import {encodeHTML} from '../../util/format';
 import createGraphFromNodeEdge from '../helper/createGraphFromNodeEdge';
 import LegendVisualProvider from '../../visual/LegendVisualProvider';
 import {
@@ -43,15 +42,16 @@ import {
     LineLabelOption,
     StatesOptionMixin,
     GraphEdgeItemObject,
-    OptionDataValueNumeric,
-    TooltipRenderMode
+    OptionDataValueNumeric
 } from '../../util/types';
 import SeriesModel from '../../model/Series';
 import Graph from '../../data/Graph';
 import GlobalModel from '../../model/Global';
 import { VectorArray } from 'zrender/src/core/vector';
 import { ForceLayoutInstance } from './forceLayout';
 import { LineDataVisual } from '../../visual/commonVisualTypes';
+import { createTooltipMarkup } from '../../component/tooltip/tooltipMarkup';
+import { defaultSeriesFormatTooltip } from '../../component/tooltip/seriesFormatTooltip';
 
 type GraphDataValue = OptionDataValue | OptionDataValue[];
 
@@ -333,14 +333,10 @@ class GraphSeriesModel extends SeriesModel<GraphSeriesOption> {
         return this._categoriesData;
     }
 
-    /**
-     * @override
-     */
     formatTooltip(
         dataIndex: number,
         multipleSeries: boolean,
-        dataType: string,
-        renderMode: TooltipRenderMode
+        dataType: string
     ) {
         if (dataType === 'edge') {
             const nodeData = this.getData();
@@ -349,19 +345,23 @@ class GraphSeriesModel extends SeriesModel<GraphSeriesOption> {
             const sourceName = nodeData.getName(edge.node1.dataIndex);
             const targetName = nodeData.getName(edge.node2.dataIndex);
 
-            const html = [];
-            sourceName != null && html.push(sourceName);
-            targetName != null && html.push(targetName);
-            let htmlStr = encodeHTML(html.join(' > '));
+            const nameArr = [];
+            sourceName != null && nameArr.push(sourceName);
+            targetName != null && nameArr.push(targetName);
 
-            if (params.value) {
-                htmlStr += ' : ' + encodeHTML(params.value);
-            }
-            return htmlStr;
-        }
-        else { // dataType === 'node' or empty
-            return super.formatTooltip.apply(this, arguments as any);
+            return createTooltipMarkup('nameValue', {
+                name: nameArr.join(' > '),
+                value: params.value,
+                noValue: params.value == null
+            });
         }
+        // dataType === 'node' or empty
+        const nodeMarkup = defaultSeriesFormatTooltip({
+            series: this,
+            dataIndex: dataIndex,
+            multipleSeries: multipleSeries
+        });
+        return nodeMarkup;
     }
 
     _updateCategoriesData() {

src/chart/lines/LinesSeries.ts

@@ -22,7 +22,6 @@
 import SeriesModel from '../../model/Series';
 import List from '../../data/List';
 import { concatArray, mergeAll, map } from 'zrender/src/core/util';
-import {encodeHTML} from '../../util/format';
 import CoordinateSystem from '../../CoordinateSystem';
 import {
     SeriesOption,
@@ -34,11 +33,11 @@ import {
     LineStyleOption,
     OptionDataValue,
     LineLabelOption,
-    StatesOptionMixin,
-    TooltipRenderMode
+    StatesOptionMixin
 } from '../../util/types';
 import GlobalModel from '../../model/Global';
 import type { LineDrawModelOption } from '../helper/LineDraw';
+import { createTooltipMarkup } from '../../component/tooltip/tooltipMarkup';
 
 const Uint32Arr = typeof Uint32Array === 'undefined' ? Array : Uint32Array;
 const Float64Arr = typeof Float64Array === 'undefined' ? Array : Float64Array;
@@ -324,8 +323,7 @@ class LinesSeriesModel extends SeriesModel<LinesSeriesOption> {
     formatTooltip(
         dataIndex: number,
         multipleSeries: boolean,
-        dataType: string,
-        renderMode: TooltipRenderMode
+        dataType: string
     ) {
         const data = this.getData();
         const itemModel = data.getItemModel<LinesDataItemOption>(dataIndex);
@@ -335,11 +333,13 @@ class LinesSeriesModel extends SeriesModel<LinesSeriesOption> {
         }
         const fromName = itemModel.get('fromName');
         const toName = itemModel.get('toName');
-        const html = [];
-        fromName != null && html.push(fromName);
-        toName != null && html.push(toName);
+        const nameArr = [];
+        fromName != null && nameArr.push(fromName);
+        toName != null && nameArr.push(toName);
 
-        return encodeHTML(html.join(' > '));
+        return createTooltipMarkup('nameValue', {
+            name: nameArr.join(' > ')
+        });
     }
 
     preventIncremental() {

src/chart/map/MapSeries.ts

@@ -21,7 +21,6 @@
 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 geoSourceManager from '../../coord/geo/geoSourceManager';
 import {makeSeriesEncodeForNameBased} from '../../data/helper/sourceHelper';
 import {
@@ -34,14 +33,14 @@ import {
     OptionDataValueNumeric,
     ParsedValue,
     SeriesOnGeoOptionMixin,
-    StatesOptionMixin,
-    TooltipRenderMode
+    StatesOptionMixin
 } from '../../util/types';
 import { Dictionary } from 'zrender/src/core/types';
 import GeoModel, { GeoCommonOptionMixin, GeoItemStyleOption } from '../../coord/geo/GeoModel';
 import List from '../../data/List';
 import Model from '../../model/Model';
 import Geo from '../../coord/geo/Geo';
+import { createTooltipMarkup } from '../../component/tooltip/tooltipMarkup';
 
 export interface MapStateOption {
     itemStyle?: GeoItemStyleOption
@@ -185,12 +184,11 @@ class MapSeries extends SeriesModel<MapSeriesOption> {
     formatTooltip(
         dataIndex: number,
         multipleSeries: boolean,
-        dataType: string,
-        renderMode: TooltipRenderMode
-    ): string {
+        dataType: string
+    ) {
         // FIXME orignalData and data is a bit confusing
         const data = this.getData();
-        const formattedValue = addCommas(this.getRawValue(dataIndex));
+        const value = this.getRawValue(dataIndex);
         const name = data.getName(dataIndex);
 
         const seriesGroup = this.seriesGroup;
@@ -199,19 +197,17 @@ class MapSeries extends SeriesModel<MapSeriesOption> {
             const otherIndex = seriesGroup[i].originalData.indexOfName(name);
             const valueDim = data.mapDimension('value');
             if (!isNaN(seriesGroup[i].originalData.get(valueDim, otherIndex) as number)) {
-                seriesNames.push(
-                    encodeHTML(seriesGroup[i].name)
-                );
+                seriesNames.push(seriesGroup[i].name);
             }
         }
 
-        if (renderMode === 'richText') {
-            return seriesNames.join(', ') + (seriesNames.length ? '\n' : '')
-                + encodeHTML(name) + ': ' + formattedValue;
-        }
-
-        return `<div style="font-size:12px;color:#6e7079;">${seriesNames.join(', ')}</div>`
-            + concatTooltipHtml(name, formattedValue);
+        return createTooltipMarkup('section', {
+            header: seriesNames.join(', '),
+            noHeader: !seriesNames.length,
+            blocks: [createTooltipMarkup('nameValue', {
+                name: name, value: value
+            })]
+        });
     }
 
     getTooltipPosition = function (this: MapSeries, dataIndex: number): number[] {

src/chart/radar/RadarSeries.ts

@@ -20,7 +20,6 @@
 import SeriesModel from '../../model/Series';
 import createListSimply from '../helper/createListSimply';
 import * as zrUtil from 'zrender/src/core/util';
-import {encodeHTML, concatTooltipHtml} from '../../util/format';
 import LegendVisualProvider from '../../visual/LegendVisualProvider';
 import {
     SeriesOption,
@@ -31,13 +30,14 @@ import {
     AreaStyleOption,
     OptionDataValue,
     StatesOptionMixin,
-    OptionDataItemObject,
-    TooltipRenderMode,
-    TooltipOrderMode
+    OptionDataItemObject
 } from '../../util/types';
 import GlobalModel from '../../model/Global';
 import List from '../../data/List';
 import Radar from '../../coord/radar/Radar';
+import {
+    createTooltipMarkup, retrieveVisualColorForTooltipMarker
+} from '../../component/tooltip/tooltipMarkup';
 
 type RadarSeriesDataValue = OptionDataValue[];
 
@@ -98,60 +98,31 @@ class RadarSeriesModel extends SeriesModel<RadarSeriesOption> {
     formatTooltip(
         dataIndex: number,
         multipleSeries?: boolean,
-        dataType?: string,
-        renderMode?: TooltipRenderMode,
-        order?: TooltipOrderMode
+        dataType?: string
     ) {
         const data = this.getData();
         const coordSys = this.coordinateSystem;
         const indicatorAxes = coordSys.getIndicatorAxes();
         const name = this.getData().getName(dataIndex);
-        zrUtil.each(indicatorAxes, function (axis, idx) {
-            axis.value = data.get(data.mapDimension(axis.dim), dataIndex);
-        });
-        switch (order) {
-            case 'valueAsc':
-                indicatorAxes.sort(function (a, b) {
-                    return +(a.value) - +(b.value);
-                });
-                break;
-
-            case 'valueDesc':
-                indicatorAxes.sort(function (a, b) {
-                    return +(b.value) - +(a.value);
-                });
-                break;
-
-            case 'seriesDesc':
-                indicatorAxes.reverse();
-                break;
+        const nameToDisplay = name === '' ? this.name : name;
+        const markerColor = retrieveVisualColorForTooltipMarker(this, dataIndex);
 
-            case 'seriesAsc':
-            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 '<div style="font-size:12px;color:#6e7079;line-height:1;margin-top:-4px;">'
-            + encodeHTML(name === '' ? this.name : name)
-            + '</div>'
-            + zrUtil.map(indicatorAxes, function (axis) {
+        return createTooltipMarkup('section', {
+            header: nameToDisplay,
+            sortBlocks: true,
+            blocks: zrUtil.map(indicatorAxes, axis => {
                 const val = data.get(data.mapDimension(axis.dim), dataIndex);
-                return '<div style="margin: 11px 0 0;line-height:1">'
-                    + concatTooltipHtml(axis.name, val)
-                    + '</div>';
-            }).join('');
+                return createTooltipMarkup('nameValue', {
+                    markerType: 'subItem',
+                    markerColor: markerColor,
+                    name: axis.name,
+                    value: val,
+                    sortParam: val
+                });
+            })
+        });
     }
 
-    /**
-     * @implement
-     */
     getTooltipPosition(dataIndex: number) {
         if (dataIndex != null) {
             const data = this.getData();

src/chart/sankey/SankeySeries.ts

@@ -19,7 +19,6 @@
 
 import SeriesModel from '../../model/Series';
 import createGraphFromNodeEdge from '../helper/createGraphFromNodeEdge';
-import {concatTooltipHtml, encodeHTML} from '../../util/format';
 import Model from '../../model/Model';
 import {
     SeriesOption,
@@ -33,12 +32,13 @@ import {
     StatesOptionMixin,
     OptionDataItemObject,
     GraphEdgeItemObject,
-    OptionDataValueNumeric,
-    TooltipRenderMode
+    OptionDataValueNumeric
 } from '../../util/types';
 import GlobalModel from '../../model/Global';
 import List from '../../data/List';
 import { LayoutRect } from '../../util/layout';
+import { createTooltipMarkup } from '../../component/tooltip/tooltipMarkup';
+import { defaultSeriesFormatTooltip } from '../../component/tooltip/seriesFormatTooltip';
 
 type FocusNodeAdjacency = boolean | 'inEdges' | 'outEdges' | 'allEdges';
 
@@ -225,38 +225,37 @@ class SankeySeriesModel extends SeriesModel<SankeySeriesOption> {
         return this.getGraph().edgeData;
     }
 
-    /**
-     * @override
-     */
     formatTooltip(
         dataIndex: number,
         multipleSeries: boolean,
-        dataType: 'node' | 'edge',
-        renderMode: TooltipRenderMode
+        dataType: 'node' | 'edge'
     ) {
+        function noValue(val: unknown): boolean {
+            return isNaN(val as number) || val == null;
+        }
         // 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 '<div style="line-height:1">'
-                + concatTooltipHtml(rawDataOpt.source + ' -- ' + rawDataOpt.target, params.value || '')
-                + '</div>';
+            const edgeValue = params.value;
+            const edgeName = rawDataOpt.source + ' -- ' + rawDataOpt.target;
+            return createTooltipMarkup('nameValue', {
+                name: edgeName,
+                value: edgeValue,
+                noValue: noValue(edgeValue)
+            });
         }
-        else if (dataType === 'node') {
+        // dataType === 'node'
+        else {
             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 : '') + ': ' + (value || '');
-            }
-            return '<div style="line-height:1">'
-                + concatTooltipHtml(value ? name : '', value || '')
-                + '</div>';
+            return createTooltipMarkup('nameValue', {
+                name: name,
+                value: value,
+                noValue: noValue(value)
+            });
         }
-        return super.formatTooltip(dataIndex, multipleSeries, dataType, renderMode);
     }
 
     optionUpdated() {