fix(tooltip): render list data within a series

This is a bug included when richText is added

src/component/tooltip/TooltipRichContent.js

@@ -85,12 +85,24 @@ TooltipRichContent.prototype = {
         while (startId >= 0) {
             var endId = text.indexOf(suffix);
             var name = text.substr(startId + prefix.length, endId - startId - prefix.length);
-            markers['marker' + name] = {
-                textWidth: 12,
-                textHeight: 12,
-                textBorderRadius: 6,
-                textBackgroundColor: markerRich[name]
-            };
+            if (name.indexOf('sub') > -1) {
+                markers['marker' + name] = {
+                    textWidth: 4,
+                    textHeight: 4,
+                    textBorderRadius: 2,
+                    textBackgroundColor: markerRich[name],
+                    // TODO: textOffset is not implemented for rich text
+                    textOffset: [3, 0]
+                };
+            }
+            else {
+                markers['marker' + name] = {
+                    textWidth: 10,
+                    textHeight: 10,
+                    textBorderRadius: 5,
+                    textBackgroundColor: markerRich[name]
+                };
+            }
 
             text = text.substr(endId + 1);
             startId = text.indexOf('{marker');

src/component/tooltip/TooltipView.js

@@ -31,6 +31,7 @@ import Model from '../../model/Model';
 import * as globalListener from '../axisPointer/globalListener';
 import * as axisHelper from '../../coord/axisHelper';
 import * as axisPointerViewHelper from '../axisPointer/viewHelper';
+import { getRenderMode } from '../../util/model';
 
 var bind = zrUtil.bind;
 var each = zrUtil.each;
@@ -51,14 +52,7 @@ export default echarts.extendComponentView({
 
         var tooltipModel = ecModel.getComponent('tooltip');
         var renderMode = tooltipModel.get('renderMode');
-        this._renderMode = 'html';
-        if (renderMode === 'auto') {
-            // using html when `document` exists, use richText otherwise
-            this._renderMode = env.domSupported ? 'html' : 'richText';
-        }
-        else {
-            this._renderMode = renderMode || this._renderMode;
-        }
+        this._renderMode = getRenderMode(renderMode);
 
         var tooltipContent;
         if (this._renderMode === 'html') {

src/model/Series.js

@@ -343,7 +343,7 @@ var SeriesModel = ComponentModel.extend({
                     return;
                 }
                 var dimType = dimInfo.type;
-                var markName = series.seriesIndex + 'at' + markerId;
+                var markName = 'sub' + series.seriesIndex + 'at' + markerId;
                 var dimHead = getTooltipMarker({
                     color: color,
                     type: 'subItem',
@@ -371,15 +371,22 @@ var SeriesModel = ComponentModel.extend({
                 }
             }
 
+            const newLine = vertially ? (isRichText ? '\n' : '<br/>') : '';
+            const content = newLine + result.join(newLine || ', ');
             return {
                 renderMode: renderMode,
-                content: (vertially ? isRichText : '') + result.join(vertially ? isRichText : ', '),
+                content: content,
                 style: markers
             };
         }
 
         function formatSingleValue(val) {
-            return encodeHTML(addCommas(val));
+            // return encodeHTML(addCommas(val));
+            return {
+                renderMode: renderMode,
+                content: encodeHTML(addCommas(val)),
+                style: markers
+            };
         }
 
         var data = this.getData();
@@ -400,6 +407,7 @@ var SeriesModel = ComponentModel.extend({
             : tooltipDimLen
             ? formatSingleValue(retrieveRawValue(data, dataIndex, tooltipDims[0]))
             : formatSingleValue(isValueArr ? value[0] : value);
+        var content = formattedValue.content;
 
         var markName = series.seriesIndex + 'at' + markerId;
         var colorEl = getTooltipMarker({
@@ -425,10 +433,10 @@ var SeriesModel = ComponentModel.extend({
         var html = !multipleSeries
             ? seriesName + colorStr
                 + (name
-                    ? encodeHTML(name) + ': ' + formattedValue
-                    : formattedValue
+                    ? encodeHTML(name) + ': ' + content
+                    : content
                 )
-            : colorStr + seriesName + formattedValue;
+            : colorStr + seriesName + content;
 
         return {
             html: html,

src/model/mixin/dataFormat.js

@@ -19,6 +19,7 @@
 
 import {retrieveRawValue} from '../../data/helper/dataProvider';
 import {getTooltipMarker, formatTpl} from '../../util/format';
+import { getRenderMode } from '../../util/model';
 
 var DIMENSION_LABEL_REG = /\{@(.+?)\}/g;
 
@@ -38,7 +39,8 @@ export default {
         var itemOpt = data.getRawDataItem(dataIndex);
         var color = data.getItemVisual(dataIndex, 'color');
         var tooltipModel = this.ecModel.getComponent('tooltip');
-        var renderMode = tooltipModel && tooltipModel.get('renderMode') || 'html';
+        var renderModeOption = tooltipModel && tooltipModel.get('renderMode');
+        var renderMode = getRenderMode(renderModeOption);
 
         return {
             componentType: this.mainType,

src/util/model.js

@@ -18,6 +18,7 @@
 */
 
 import * as zrUtil from 'zrender/src/core/util';
+import env from 'zrender/src/core/env';
 
 var each = zrUtil.each;
 var isObject = zrUtil.isObject;
@@ -523,3 +524,13 @@ export function getAttribute(dom, key) {
         ? dom.getAttribute(key)
         : dom[key];
 }
+
+export function getRenderMode(renderModeOption) {
+    if (renderModeOption === 'auto') {
+        // Using html when `document` exists, use richText otherwise
+        return env.domSupported ? 'html' : 'richText';
+    }
+    else {
+        return renderModeOption || 'html';
+    }
+}