Improve tooltip

jsconfig.json

@@ -4,6 +4,7 @@
     },
     "exclude": [
         "node_modules",
-        "dist"
+        "dist",
+        "test"
     ]
 }

src/chart/common/formatTooltip.js

@@ -1,42 +1,57 @@
 var echarts = require('echarts/lib/echarts');
 
-module.exports = function (seriesModel, dataIndex) {
+function otherDimToDataDim (data, otherDim) {
+    var dataDim = [];
+    echarts.util.each(data.dimensions, function (dimName) {
+        var dimItem = data.getDimensionInfo(dimName);
+        var otherDims = dimItem.otherDims;
+        var dimIndex = otherDims[otherDim];
+        if (dimIndex != null && dimIndex !== false) {
+            dataDim[dimIndex] = dimItem.name;
+        }
+    });
+    return dataDim;
+}
+
+module.exports = function (seriesModel, dataIndex, multipleSeries) {
     function formatArrayValue(value) {
-        var data = seriesModel.getData();
+        var vertially = true;
+
         var result = [];
-        var coordSys = seriesModel.coordinateSystem;
-        var customDimensions = seriesModel.get('dimensions') || [];
-        var coordSysDimensions = (coordSys && coordSys.dimensions) || [];
-        var dataDimensions = data.dimensions;
-
-        echarts.util.each(value, function (val, idx) {
-            var dimInfo = data.getDimensionInfo(idx);
-            var dimType = dimInfo && dimInfo.type;
-            var dimName = customDimensions[idx] || coordSysDimensions[idx] || dataDimensions[idx];
-            var valStr;
-
-            if (dimType === 'ordinal') {
-                valStr = val + '';
-            }
-            else if (dimType === 'time') {
-                valStr = echarts.format.formatTime('yyyy/MM/dd hh:mm:ss', val);
-            }
-            else {
-                valStr = echarts.format.addCommas(val);
-            }
+        var tooltipDims = otherDimToDataDim(data, 'tooltip');
+
+        tooltipDims.length
+            ? echarts.util.each(tooltipDims, function (dimIdx) {
+                setEachItem(data.get(dimIdx, dataIndex), dimIdx);
+            })
+            // By default, all dims is used on tooltip.
+            : echarts.util.each(value, setEachItem);
 
-            valStr && result.push(echarts.format.encodeHTML(dimName + ': ' + valStr));
-        });
+        function setEachItem(val, dimIdx) {
+            var dimInfo = data.getDimensionInfo(dimIdx);
+            // If `dimInfo.tooltip` is not set, show tooltip.
+            if (!dimInfo || dimInfo.otherDims.tooltip === false) {
+                return;
+            }
+            var dimType = dimInfo.type;
+            var valStr = (vertially ? '- ' + (dimInfo.tooltipName || dimInfo.name) + ': ' : '')
+                + (dimType === 'ordinal'
+                    ? val + ''
+                    : dimType === 'time'
+                    ? (multipleSeries ? '' : echarts.format.formatTime('yyyy/MM/dd hh:mm:ss', val))
+                    : echarts.format.addCommas(val)
+                );
+            valStr && result.push(echarts.format.encodeHTML(valStr));
+        }
 
-        return result.join('<br />');
+        return (vertially ? '<br/>' : '') + result.join(vertially ? '<br/>' : ', ');
     }
 
     var data = seriesModel.getData();
 
     var value = seriesModel.getRawValue(dataIndex);
     var formattedValue = echarts.util.isArray(value)
-        ? formatArrayValue(value)
-        : echarts.format.encodeHTML(echarts.format.addCommas(value));
+        ? formatArrayValue(value) : echarts.format.encodeHTML(echarts.format.addCommas(value));
     var name = data.getName(dataIndex);
 
     var color = data.getItemVisual(dataIndex, 'color');
@@ -45,16 +60,22 @@ module.exports = function (seriesModel, dataIndex) {
     }
     color = color || 'transparent';
 
-    var colorEl = '<span style="display:inline-block;margin-right:5px;'
-        + 'border-radius:10px;width:9px;height:9px;background-color:' + echarts.format.encodeHTML(color) + '"></span>';
+    var colorEl = echarts.format.getTooltipMarker(color);
 
     var seriesName = seriesModel.name;
     // FIXME
     if (seriesName === '\0-') {
         // Not show '-'
         seriesName = '';
     }
-    return (seriesName && (colorEl + echarts.format.encodeHTML(seriesName) + '<br />'))
-            + (name && (name + '<br />'))
-            + formattedValue;
+    seriesName = seriesName
+        ? echarts.format.encodeHTML(seriesName) + (!multipleSeries ? '<br/>' : ': ')
+        : '';
+    return !multipleSeries
+        ? seriesName + colorEl
+            + (name
+                ? echarts.format.encodeHTML(name) + ': ' + formattedValue
+                : formattedValue
+            )
+        : colorEl + seriesName + formattedValue;
 };