diff --git a/src/chart/map/MapSeries.ts b/src/chart/map/MapSeries.ts
index 8861612343961fd1bff26360fec79d2c907f0ab2..89891fca10d271050f4635a6315c2b8f2f46ef6c 100644
--- a/src/chart/map/MapSeries.ts
+++ b/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} from '../../util/format';
+import {encodeHTML, addCommas, concatTooltipHtml} from '../../util/format';
 import {DataSelectableMixin, DataSelectableOptionMixin, SelectableTarget} from '../../component/helper/selectableMixin';
 import {retrieveRawAttr} from '../../data/helper/dataProvider';
 import geoSourceManager from '../../coord/geo/geoSourceManager';
@@ -223,7 +223,7 @@ class MapSeries extends SeriesModel<MapSeriesOption> {
         }
 
         return seriesNames.join(', ') + '<br />'
-            + encodeHTML(name + ' : ' + formattedValue);
+            + concatTooltipHtml(encodeHTML(name), formattedValue);
     }
 
     getTooltipPosition = function (this: MapSeries, dataIndex: number): number[] {
diff --git a/src/chart/radar/RadarSeries.ts b/src/chart/radar/RadarSeries.ts
index 6023c6f9f6bbf1815320891a77329decdfd2b136..79380aa6462b60388e4b3dd9ed7a788738cd8a19 100644
--- a/src/chart/radar/RadarSeries.ts
+++ b/src/chart/radar/RadarSeries.ts
@@ -20,7 +20,7 @@
 import SeriesModel from '../../model/Series';
 import createListSimply from '../helper/createListSimply';
 import * as zrUtil from 'zrender/src/core/util';
-import {encodeHTML} from '../../util/format';
+import {encodeHTML, concatTooltipHtml} from '../../util/format';
 import LegendVisualProvider from '../../visual/LegendVisualProvider';
 import {
     SeriesOption,
@@ -113,8 +113,8 @@ class RadarSeriesModel extends SeriesModel<RadarSeriesOption> {
         return encodeHTML(name === '' ? this.name : name) + '<br/>'
             + zrUtil.map(indicatorAxes, function (axis, idx) {
                 const val = data.get(data.mapDimension(axis.dim), dataIndex);
-                return '<p style="margin: 8px 0 0;">' + encodeHTML(axis.name)
-                    + `<strong style="float:right;margin-left:20px;color:#000;">${val}</strong>`
+                return '<p style="margin: 8px 0 0;">'
+                    + concatTooltipHtml(encodeHTML(axis.name), val)
                     + '</p>';
             }).join('');
     }
diff --git a/src/chart/sankey/SankeySeries.ts b/src/chart/sankey/SankeySeries.ts
index 7579be663b544ae60ad5a09a756d29cefd7115f2..21c9d5aec36c23cc26ef13f367b8e2d95d6417e7 100644
--- a/src/chart/sankey/SankeySeries.ts
+++ b/src/chart/sankey/SankeySeries.ts
@@ -19,7 +19,7 @@
 
 import SeriesModel from '../../model/Series';
 import createGraphFromNodeEdge from '../helper/createGraphFromNodeEdge';
-import {encodeHTML} from '../../util/format';
+import {encodeHTML, concatTooltipHtml} from '../../util/format';
 import Model from '../../model/Model';
 import { __DEV__ } from '../../config';
 import {
@@ -238,18 +238,15 @@ class SankeySeriesModel extends SeriesModel<SankeySeriesOption> {
         if (dataType === 'edge') {
             const params = this.getDataParams(dataIndex, dataType);
             const rawDataOpt = params.data;
-            let html = rawDataOpt.source + ' -- ' + rawDataOpt.target;
-            if (params.value) {
-                html += ' : ' + params.value;
-            }
-            return encodeHTML(html);
+            const html = encodeHTML(rawDataOpt.source + ' -- ' + rawDataOpt.target);
+            return concatTooltipHtml(html, 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;
-            const html = value ? name + ' : ' + value : '';
-            return encodeHTML(html);
+            const html = encodeHTML(value ? name : '');
+            return concatTooltipHtml(html, value || '');
         }
         return super.formatTooltip(dataIndex, multipleSeries);
     }
diff --git a/src/chart/themeRiver/ThemeRiverSeries.ts b/src/chart/themeRiver/ThemeRiverSeries.ts
index 5e28bf2a5c355b189318771953397ad43d60f91a..dc8127508fd321ff2c175b35acf432a6edcb5d2c 100644
--- a/src/chart/themeRiver/ThemeRiverSeries.ts
+++ b/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} from '../../util/model';
-import {encodeHTML} from '../../util/format';
+import {encodeHTML, concatTooltipHtml} from '../../util/format';
 import LegendVisualProvider from '../../visual/LegendVisualProvider';
 import {
     SeriesOption,
@@ -308,7 +308,11 @@ class ThemeRiverSeriesModel extends SeriesModel<ThemeRiverSeriesOption> {
         if (isNaN(htmlValue as number) || htmlValue == null) {
             htmlValue = '-';
         }
-        return encodeHTML(htmlName + ' : ' + htmlValue);
+        return `
+            <p style="margin: 8px 0 0;">
+                ${concatTooltipHtml(encodeHTML(htmlName), htmlValue)}
+            </p>
+        `;
     }
 
     static defaultOption: ThemeRiverSeriesOption = {
diff --git a/src/chart/tree/TreeSeries.ts b/src/chart/tree/TreeSeries.ts
index 892e67e3252c091f4d492c2415614d8c943d81d3..a8915fd564b36e0715c404c2f31b8127995ceb9f 100644
--- a/src/chart/tree/TreeSeries.ts
+++ b/src/chart/tree/TreeSeries.ts
@@ -19,7 +19,7 @@
 
 import SeriesModel from '../../model/Series';
 import Tree from '../../data/Tree';
-import {encodeHTML} from '../../util/format';
+import {encodeHTML, concatTooltipHtml} from '../../util/format';
 import {
     SeriesOption,
     SymbolOptionMixin,
@@ -230,9 +230,8 @@ class TreeSeriesModel extends SeriesModel<TreeSeriesOption> {
             name = node.parentNode.name + '.' + name;
             node = node.parentNode;
         }
-        return encodeHTML(name + (
-            (isNaN(value as number) || value == null) ? '' : ' : ' + value
-        ));
+
+        return concatTooltipHtml(encodeHTML(name), (isNaN(value as number) || value == null) ? '' : value);
     }
 
     static defaultOption: TreeSeriesOption = {
diff --git a/src/chart/treemap/TreemapSeries.ts b/src/chart/treemap/TreemapSeries.ts
index c61d8d21dfc403e1c316e8576de53ad36ff563ac..a366a41de6666bf3cf6f1b46082bcd27e0810ec8 100644
--- a/src/chart/treemap/TreemapSeries.ts
+++ b/src/chart/treemap/TreemapSeries.ts
@@ -21,7 +21,7 @@ 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 {encodeHTML, addCommas} from '../../util/format';
+import {encodeHTML, addCommas, concatTooltipHtml} from '../../util/format';
 import {wrapTreePathInfo} from '../helper/treeHelper';
 import {
     SeriesOption,
@@ -387,7 +387,7 @@ class TreemapSeriesModel extends SeriesModel<TreemapSeriesOption> {
             ? addCommas(value[0] as number) : addCommas(value as number);
         const name = data.getName(dataIndex);
 
-        return encodeHTML(name + ': ' + formattedValue);
+        return concatTooltipHtml(encodeHTML(name), formattedValue);
     }
 
     /**
diff --git a/src/component/marker/MarkerModel.ts b/src/component/marker/MarkerModel.ts
index 4dc1625d652816cdb5e40aea26c2e85c01bf6e9c..65baaf63e7015f728526f4b8668aac769f15fb03 100644
--- a/src/component/marker/MarkerModel.ts
+++ b/src/component/marker/MarkerModel.ts
@@ -20,7 +20,7 @@
 import {__DEV__} from '../../config';
 import * as zrUtil from 'zrender/src/core/util';
 import env from 'zrender/src/core/env';
-import * as formatUtil from '../../util/format';
+import {addCommas, encodeHTML, concatTooltipHtml} from '../../util/format';
 import DataFormatMixin from '../../model/mixin/dataFormat';
 import ComponentModel from '../../model/Component';
 import SeriesModel from '../../model/Series';
@@ -37,9 +37,6 @@ import GlobalModel from '../../model/Global';
 import List from '../../data/List';
 import { makeInner, defaultEmphasis } from '../../util/model';
 
-const addCommas = formatUtil.addCommas;
-const encodeHTML = formatUtil.encodeHTML;
-
 function fillLabel(opt: DisplayStateHostOption) {
     defaultEmphasis(opt, 'label', ['show']);
 }
@@ -218,7 +215,7 @@ abstract class MarkerModel<Opts extends MarkerOption = MarkerOption> extends Com
             }
         }
         if (value != null) {
-            html += encodeHTML(formattedValue);
+            html = concatTooltipHtml(html, encodeHTML(formattedValue));
         }
         return html;
     }
diff --git a/src/model/Series.ts b/src/model/Series.ts
index 4d5e1e6e5c293841090f3dc5c4a200546ab8de14..93c8a042a737ab25630ff9233e7f74bf7f2b57e5 100644
--- a/src/model/Series.ts
+++ b/src/model/Series.ts
@@ -525,7 +525,7 @@ class SeriesModel<Opt extends SeriesOption = SeriesOption> extends ComponentMode
 
         colorStr = typeof colorEl === 'string' ? colorEl : colorEl.content;
         const html = !multipleSeries
-            ? seriesName + '<br/>' + '<p style="margin: 8px 0 0;">' + colorStr
+            ? seriesName + (seriesName ? '<br/>' : '') + '<p style="margin: 8px 0 0;">' + colorStr
                 + (name
                     ? `${encodeHTML(name)}${content}`
                     : content
diff --git a/src/util/format.ts b/src/util/format.ts
index 8a5b15226ba7cedab6ddb0b44ca9ffb00303577c..8512ec5bc52f754ccd4576ad8afe3f3d1e3960db 100644
--- a/src/util/format.ts
+++ b/src/util/format.ts
@@ -66,6 +66,10 @@ export function encodeHTML(source: string): string {
         });
 }
 
+export function concatTooltipHtml(html: string, value: unknown): string {
+    return `${html}<strong style="float:right;margin-left:20px;color:#000;">${value || ''}</strong>`;
+}
+
 const TPL_VAR_ALIAS = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
 
 const wrapVar = function (varName: string, seriesIdx?: number): string {