tooltip optimize

src/component/axis/AngleAxisView.js

@@ -55,7 +55,8 @@ define(function (require) {
                     r: radiusExtent[1]
                 },
                 style: lineStyleModel.getLineStyle(),
-                z2: 1
+                z2: 1,
+                silent: true
             });
             circle.style.fill = null;
 

src/component/dataZoom/DataZoomView.js

@@ -550,10 +550,7 @@ define(function (require) {
 
             var labelPrecision = dataZoomModel.get('labelPrecision');
             if (labelPrecision == null) {
-                var dataExtent = axis.scale.getExtent();
-                labelPrecision = Math.abs(
-                    Math.floor(Math.log(dataExtent[1] - dataExtent[0]) / Math.LN10)
-                );
+                labelPrecision = axis.getFormatPrecision();
             }
 
             return (value == null && isNaN(value))

src/component/tooltip.js

@@ -4,6 +4,9 @@ define(function (require) {
     var TooltipContent = require('./tooltip/TooltipContent');
     var graphic = require('../util/graphic');
     var zrUtil = require('zrender/core/util');
+    var formatUtil = require('../util/format');
+
+    require('./tooltip/TooltipModel');
 
     function getAxisPointerKey(coordName, axisType) {
         return coordName + axisType;
@@ -39,8 +42,6 @@ define(function (require) {
         };
     }
 
-    require('./tooltip/TooltipModel');
-
     require('../echarts').extendComponentView({
 
         type: 'tooltip',
@@ -83,6 +84,7 @@ define(function (require) {
 
                 // Only cartesian2d and polar support axis trigger
                 if (coordSysType === 'cartesian2d') {
+                    // FIXME `axisPointer.axis` is not baseAxis
                     baseAxis = coordSys.getBaseAxis();
                     var baseDim = baseAxis.dim;
                     var axisIndex = seriesModel.get(baseDim + 'AxisIndex');
@@ -108,6 +110,11 @@ define(function (require) {
             }, this);
 
             this._seriesGroupByAxis = seriesGroupByAxis;
+
+            var crossText = this._crossText;
+            if (crossText) {
+                this.group.add(crossText);
+            }
         },
 
         /**
@@ -132,15 +139,19 @@ define(function (require) {
 
                     return;
                 }
-
-                var seriesModel = ecModel.getSeriesByIndex(el.seriesIndex);
-
-                this._showItemTooltip(seriesModel, el.dataIndex, e);
             }
             else {
 
                 this._showAxisTooltip(e);
             }
+
+            // Always show item tooltip if mouse is on the element with dataIndex
+            if (el && el.dataIndex) {
+
+                var seriesModel = ecModel.getSeriesByIndex(el.seriesIndex);
+
+                this._showItemTooltip(seriesModel, el.dataIndex, e);
+            }
         },
 
         /**
@@ -179,7 +190,9 @@ define(function (require) {
                     this._showPolarPointer(axisPointerModel, allCoordSys, point);
                 }
 
-                this._showSeriesTooltip(coordSys, item.series, point, value);
+                if (axisPointerModel.get('type') !== 'cross') {
+                    this._showSeriesTooltip(coordSys, item.series, point, value);
+                }
             }, this);
 
         },
@@ -201,6 +214,8 @@ define(function (require) {
             if (axisPointerType === 'cross') {
                 moveGridLine('x', point, cartesian.getAxis('y').getExtent());
                 moveGridLine('y', point, cartesian.getAxis('x').getExtent());
+
+                this._updateCrossText(cartesian, point, axisPointerModel);
             }
             else {
                 // Use the first cartesian
@@ -277,8 +292,10 @@ define(function (require) {
             var radiusAxis = polar.getRadiusAxis();
 
             if (axisPointerType === 'cross') {
-                movePolarLine('angle', point, angleAxis.getExtent());
-                movePolarLine('radius', point, radiusAxis.getExtent());
+                movePolarLine('angle', point, radiusAxis.getExtent());
+                movePolarLine('radius', point, angleAxis.getExtent());
+
+                this._updateCrossText(polar, point, axisPointerModel);
             }
             else {
                 var axisType = axisPointerModel.get('axis');
@@ -358,6 +375,50 @@ define(function (require) {
             }
         },
 
+        _updateCrossText: function (coordSys, point, axisPointerModel) {
+            var crossStyleModel = axisPointerModel.getModel('crossStyle');
+            var textStyleModel = crossStyleModel.getModel('textStyle');
+
+            var tooltipModel = this._tooltipModel;
+
+            var text = this._crossText;
+            if (!text) {
+                text = this._crossText = new graphic.Text({
+                    style: {
+                        textAlign: 'left',
+                        textBaseline: 'bottom'
+                    }
+                });
+                this.group.add(text);
+            }
+
+            var value = coordSys.pointToData(point);
+
+            var dims = coordSys.dimensions;
+            value = zrUtil.map(value, function (val, idx) {
+                var axis = coordSys.getAxis(dims[idx]);
+                if (axis.type === 'category') {
+                    val = axis.scale.getLabel(val);
+                }
+                else {
+                    val = formatUtil.addCommas(
+                        val.toFixed(axis.getFormatPrecision())
+                    );
+                }
+                return val;
+            });
+
+            text.setStyle({
+                fill: textStyleModel.get('color') || crossStyleModel.get('color'),
+                textFont: textStyleModel.getFont(),
+                text: value.join(', '),
+                x: point[0] + 5,
+                y: point[1] - 5
+            });
+            text.z = tooltipModel.get('z');
+            text.zlevel = tooltipModel.get('zlevel');
+        },
+
         /**
          * Hide axis tooltip
          */
@@ -366,7 +427,9 @@ define(function (require) {
         },
 
         _getPointerElement: function (coordSys, pointerModel, axisType) {
-            var z = this._tooltipModel.get('z');
+            var tooltipModel = this._tooltipModel;
+            var z = tooltipModel.get('z');
+            var zlevel = tooltipModel.get('zlevel');
             var axisPointers = this._axisPointers;
             var key = getAxisPointerKey(coordSys.name, axisType);
             if (axisPointers[key]) {
@@ -380,7 +443,7 @@ define(function (require) {
             var style = styleModel[isShadow ? 'getAreaStyle' : 'getLineStyle']();
 
             var elementType = coordSys.type === 'polar'
-                ? (isShadow ? 'Sector' : 'Circle')
+                ? (isShadow ? 'Sector' : (axisType === 'radius' ? 'Circle' : 'Line'))
                 : (isShadow ? 'Rect' : 'Line');
 
            isShadow ? (style.stroke = null) : (style.fill = null);
@@ -388,6 +451,7 @@ define(function (require) {
             var el = axisPointers[key] = new graphic[elementType]({
                 style: style,
                 z: z,
+                zlevel: zlevel,
                 silent: true
             });
 

src/component/tooltip/TooltipModel.js

@@ -80,7 +80,11 @@ define(function (require) {
                 crossStyle: {
                     color: '#1e90ff',
                     width: 1,
-                    type: 'dashed'
+                    type: 'dashed',
+
+                    // TODO formatter
+
+                    textStyle: {}
                 },
 
                 // 阴影指示器样式设置

src/coord/Axis.js

 define(function (require) {
 
-    var linearMap = require('../util/number').linearMap;
+    var numberUtil = require('../util/number')
+    var linearMap = numberUtil.linearMap;
     var zrUtil = require('zrender/core/util');
 
     function fixExtentWithBands(extent, nTick) {
@@ -82,6 +83,23 @@ define(function (require) {
             return ret;
         },
 
+        /**
+         * Get precision used for formatting
+         * @return {number}
+         */
+        getFormatPrecision: function () {
+            var log = Math.log;
+            var LN10 = Math.LN10;
+            var dataExtent = this.scale.getExtent();
+            var extent = this._extent;
+            var dataQuantity = Math.floor(log(dataExtent[1] - dataExtent[0]) / LN10);
+            var sizeQuantity = Math.ceil(log(Math.abs(extent[1] - extent[0])) / LN10);
+            return Math.max(
+                -dataQuantity + sizeQuantity,
+                0
+            );
+        },
+
         /**
          * Set coord extent
          * @param {number} min

src/model/Series.js

@@ -118,11 +118,15 @@ define(function(require) {
             var data = this._data;
             var value = data.getRawValue(dataIndex);
             var formattedValue = zrUtil.isArray(value)
-                ? zrUtil.map(value, addCommas) : addCommas(value);
-            var name = data.getName(dataIndex);
-
-            return !mutipleSeries ? (encodeHTML(this.name) + '<br />'
-                + encodeHTML(name) + ' : ' + formattedValue)
+                ? zrUtil.map(value, addCommas).join(', ') : addCommas(value);
+            var name = data.getName(dataIndex, true);
+
+            return !mutipleSeries
+                ? (encodeHTML(this.name) + '<br />'
+                    + (name
+                        ? encodeHTML(name) + ' : ' + formattedValue
+                        : formattedValue)
+                  )
                 : (encodeHTML(this.name) + ' : ' + formattedValue);
         },
 

src/scale/Interval.js

@@ -93,10 +93,10 @@ define(function (require) {
          */
         setExtent: function (start, end) {
             var thisExtent = this._extent;
-            if (! isNaN(start)) {
+            if (!isNaN(start)) {
                 thisExtent[0] = start;
             }
-            if (! isNaN(end)) {
+            if (!isNaN(end)) {
                 thisExtent[1] = end;
             }
         },
@@ -158,6 +158,15 @@ define(function (require) {
             return labels;
         },
 
+        /**
+         * @param {number} n
+         * @return {number}
+         */
+        // FIXME addCommas
+        getLabel: function (data) {
+            return data;
+        },
+
         /**
          * Update interval and extent of intervals for nice ticks
          * Algorithm from d3.js

src/scale/Ordinal.js

@@ -142,6 +142,8 @@ define(function (require) {
 
         /**
          * Get item on rank n
+         * @param {number} n
+         * @return {string}
          */
         getLabel: function (n) {
             return this._data[n];

test/polarLine2.html

@@ -18,7 +18,8 @@
                 'echarts',
                 'echarts/chart/line',
                 'echarts/component/legend',
-                'echarts/component/polar'
+                'echarts/component/polar',
+                'echarts/component/tooltip'
             ], function (echarts) {
 
                 var chart = echarts.init(document.getElementById('main'), null, {
@@ -38,6 +39,12 @@
                         data: ['line']
                     },
                     polar: {},
+                    tooltip: {
+                        trigger: 'axis',
+                        axisPointer: {
+                            type: 'cross'
+                        }
+                    },
                     angleAxis: {
                         type: 'value'
                     },

test/scatter.html

@@ -30,10 +30,14 @@
                 var data2 = [];
                 var data3 = [];
 
-                for (var i = 0; i < 100; i++) {
-                    data1.push([Math.random() * 5, Math.random() * 4, Math.random().toFixed(2)]);
-                    data2.push([Math.random() * 10, Math.random() * 5, (Math.random() + 0.3).toFixed(2)]);
-                    data3.push([Math.random() * 15, Math.random() * 10, Math.random().toFixed(2)]);
+                var random = function (max) {
+                    return (Math.random() * max).toFixed(3);
+                }
+
+                for (var i = 0; i < 200; i++) {
+                    data1.push([random(5), random(5), random(1)]);
+                    data2.push([random(10), random(10), random(1)]);
+                    data3.push([random(15), random(10), random(1)]);
                 }
 
                 chart.setOption({