enhance axisPointer

src/component/axis/AxisView.js

@@ -20,6 +20,13 @@ define(function (require) {
          * @override
          */
         render: function (axisModel, ecModel, api, payload) {
+            // FIXME
+            // This process should proformed after coordinate systems updated
+            // (axis scale updated), and should be performed each time update.
+            // So put it here temporarily, although it is not appropriate to
+            // put a model-writing procedure in `view`.
+            axisPointerModelHelper.fixValue(axisModel);
+
             AxisView.superApply(this, 'render', arguments);
             updateAxisPointer(this, axisModel, ecModel, api, payload, true);
         },
@@ -59,7 +66,7 @@ define(function (require) {
         if (!axisView.axisPointerClass) {
             return;
         }
-        var axisPointerModel = axisPointerModelHelper.getAxisPointerModel(axisModel, ecModel);
+        var axisPointerModel = axisPointerModelHelper.getAxisPointerModel(axisModel);
         axisPointerModel
             ? (axisView._axisPointer || (axisView._axisPointer = new axisView.axisPointerClass()))
                 .render(axisModel, axisPointerModel, api, forceRender)

src/component/axisPointer.js

@@ -15,14 +15,13 @@ define(function (require) {
             && (option.axisPointer = {});
     });
 
-    // This process should proformed after coordinate systems created.
-    // So put it on processor stage
-    echarts.registerProcessor(function (ecModel, api) {
+    // This process should proformed after coordinate systems created
+    // and series data processed. So put it on statistic processing stage.
+    echarts.registerProcessor(echarts.PRIORITY.PROCESSOR.STATISTIC, function (ecModel, api) {
         // Build axisPointerModel, mergin tooltip.axisPointer model for each axis.
         // allAxesInfo should be updated when setOption performed.
-        var coordSysAxesInfo = axisPointerModelHelper.collect(ecModel, api);
-        axisPointerModelHelper.initializeValue(coordSysAxesInfo);
-        ecModel.getComponent('axisPointer').coordSysAxesInfo = coordSysAxesInfo;
+        ecModel.getComponent('axisPointer').coordSysAxesInfo
+            = axisPointerModelHelper.collect(ecModel, api);
     });
 
     // Broadcast to all views.
@@ -37,7 +36,8 @@ define(function (require) {
             payload,
             payload.dispatchAction || zrUtil.bind(api.dispatchAction, api),
             api,
-            payload.tooltipOption
+            payload.tooltipOption,
+            payload.highDownKey
         );
     });
 

src/component/axisPointer/AxisPointerModel.js

@@ -19,14 +19,14 @@ define(function(require) {
 
             type: 'line',
             snap: false,
-            animation: 'auto',
             triggerTooltip: true,
 
             value: null,
             status: null, // Init value depends on whether handle is used.
 
             links: [],
 
+            animation: 'auto', // Animate if snap and not to tight.
             animationDurationUpdate: 200,
 
             lineStyle: {

src/component/axisPointer/BaseAxisPointer.js

@@ -5,6 +5,7 @@ define(function(require) {
     var clazzUtil = require('../../util/clazz');
     var graphic = require('../../util/graphic');
     var get = require('../../util/model').makeGetter();
+    var axisPointerModelHelper = require('./modelHelper');
 
     var extend = zrUtil.extend;
     var clone = zrUtil.clone;
@@ -48,6 +49,12 @@ define(function(require) {
          */
         _lastStatus: null,
 
+        /**
+         * 10px, arbitrary value.
+         * @protected
+         */
+        animationThreshold: 10,
+
         /**
          * @implement
          */
@@ -67,10 +74,17 @@ define(function(require) {
             this._lastValue = value;
             this._lastStatus = status;
 
+            var group = this._group;
+            var handle = this._handle;
+
             if (!status || status === 'hide') {
-                this.clear(api);
+                // Do not clear here, for animation better.
+                group && group.hide();
+                handle && handle.hide();
                 return;
             }
+            group && group.show();
+            handle && handle.show();
 
             // Otherwise status is 'show'
             var elOption = {};
@@ -83,19 +97,14 @@ define(function(require) {
             }
             this._lastGraphicKey = graphicKey;
 
-            if (!this._group) {
-                var group = this._group = new graphic.Group();
+            if (!group) {
+                group = this._group = new graphic.Group();
                 this.createEl(group, elOption, axisModel, axisPointerModel);
                 api.getZr().add(group);
             }
             else {
-                var animation = axisPointerModel.get('animation');
-                var moveAnimation = animation === true || animation === 1
-                    || (
-                        (animation === 'auto' || animation == null)
-                        && this.useAnimation(axisModel, axisPointerModel)
-                    );
-                this.updateEl(this._group, moveAnimation, elOption, axisModel, axisPointerModel);
+                var moveAnimation = this.determineAnimation(axisModel, axisPointerModel);
+                this.updateEl(group, moveAnimation, elOption, axisModel, axisPointerModel);
             }
 
             this._renderHandle(value, axisModel, axisPointerModel, api);
@@ -118,11 +127,35 @@ define(function(require) {
         /**
          * @protected
          */
-        useAnimation: function (enableAnimation, axisPointerModel, axisModel) {
-            return enableAnimation;
+        determineAnimation: function (axisModel, axisPointerModel) {
+            var animation = axisPointerModel.get('animation');
+
+            if (animation === 'auto' || animation == null) {
+                var axis = axisModel.axis;
+
+                var animationThreshold = this.animationThreshold;
+                if (axis.type === 'category' && axis.getBandWidth() > animationThreshold) {
+                    return true;
+                }
+
+                // It is important to auto animation when snap used. Consider if there is
+                // a dataZoom, animation will be disabled when too many points exist, while
+                // it will be enabled for better visual effect when little points exist.
+                if (axisPointerModel.get('snap')) {
+                    var seriesDataCount = axisPointerModelHelper.getAxisInfo(axisModel).seriesDataCount;
+                    var axisExtent = axis.getExtent();
+                    // Approximate band width
+                    return Math.abs(axisExtent[0] - axisExtent[1]) / seriesDataCount > animationThreshold;
+                }
+
+                return false;
+            }
+
+            return animation === true || animation === 1;
         },
 
         /**
+         * add {pointer, label, graphicKey} to elOption
          * @protected
          */
         makeElOption: function (elOption, value, axisModel, axisPointerModel) {
@@ -310,7 +343,8 @@ define(function(require) {
                 y: trans.cursorPoint[1],
                 tooltipOption: {
                     verticalAlign: 'middle'
-                }
+                },
+                highDownKey: 'axisPointerHandle'
             };
             var axis = axisModel.axis;
             payload[axis.dim + 'AxisId'] = axisModel.id;
@@ -358,7 +392,7 @@ define(function(require) {
         },
 
         /**
-         * @protected
+         * @private
          */
         clear: function (api) {
             this._lastValue = null;
@@ -376,6 +410,13 @@ define(function(require) {
             }
         },
 
+        /**
+         * @protected
+         */
+        doClear: function () {
+            // Implemented by sub-class if necessary.
+        },
+
         /**
          * @protected
          * @param {Array.<number>} xy
@@ -396,13 +437,13 @@ define(function(require) {
     BaseAxisPointer.prototype.constructor = BaseAxisPointer;
 
 
-    function updateProps(axisPointerModel, moveAnimation, el, props) {
+    function updateProps(animationModel, moveAnimation, el, props) {
         // Animation optimize.
         if (!propsEqual(get(el).lastProp, props)) {
             get(el).lastProp = props;
             moveAnimation
-                ? graphic.updateProps(el, props, axisPointerModel)
-                : el.attr(props);
+                ? graphic.updateProps(el, props, animationModel)
+                : (el.stopAnimation(), el.attr(props));
         }
     }
 

src/component/axisPointer/CartesianAxisPointer.js

@@ -11,15 +11,6 @@ define(function(require) {
 
     var CartesianAxisPointer = BaseAxisPointer.extend({
 
-        /**
-         * @override
-         */
-        useAnimation: function (axisModel, axisPointerModel) {
-            var axis = axisModel.axis;
-            return (axis.type === 'category' && axis.getBandWidth() > 20)
-                || axisPointerModel.get('snap');
-        },
-
         /**
          * @override
          */

src/component/axisPointer/PolarAxisPointer.js

@@ -10,19 +10,16 @@ define(function(require) {
 
     var PolarAxisPointer = BaseAxisPointer.extend({
 
-        /**
-         * @override
-         */
-        useAnimation: function (axisModel, axisPointerModel) {
-            return axisModel.axis.type === 'category'
-                || axisPointerModel.get('snap');
-        },
-
         /**
          * @override
          */
         makeElOption: function (elOption, value, axisModel, axisPointerModel) {
             var axis = axisModel.axis;
+
+            if (axis.dim === 'angle') {
+                this.animationThreshold = Math.PI / 18;
+            }
+
             var polar = axis.polar;
             var otherAxis = polar.getOtherAxis(axis);
             var otherExtent = otherAxis.getExtent();
@@ -50,26 +47,24 @@ define(function(require) {
         var axis = axisModel.axis;
         var coord = axis.dataToCoord(value);
         var axisAngle = polar.getAngleAxis().getExtent()[0];
+        axisAngle = axisAngle / 180 * Math.PI;
         var radiusExtent = polar.getRadiusAxis().getExtent();
         var position;
         var align;
         var verticalAlign;
 
         if (axis.dim === 'radius') {
             var transform = matrix.create();
-            matrix.rotate(transform, transform, axisAngle / 180 * Math.PI);
+            matrix.rotate(transform, transform, axisAngle);
             matrix.translate(transform, transform, [polar.cx, polar.cy]);
-            position = graphic.applyTransform([coord, labelMargin], transform);
-
-            // ???
-            // label verticalalign
+            position = graphic.applyTransform([coord, -labelMargin], transform);
 
             var labelRotation = axisModel.getModel('axisLabel').get('rotate');
             var labelLayout = AxisBuilder.innerTextLayout(
-                labelRotation * Math.PI / 180, axisAngle, -1
+                axisAngle, labelRotation * Math.PI / 180, -1
             );
-            align = labelLayout.align;
-            verticalAlign = labelLayout.verticalAlign;
+            align = labelLayout.textAlign;
+            verticalAlign = labelLayout.textVerticalAlign;
         }
         else { // angle axis
             var r = radiusExtent[1];
@@ -102,7 +97,7 @@ define(function(require) {
                     )
                 }
                 : {
-                    type: 'Sector',
+                    type: 'Circle',
                     shape: {
                         cx: polar.cx,
                         cy: polar.cy,

src/component/axisPointer/SingleAxisPointer.js

@@ -14,15 +14,6 @@ define(function(require) {
 
     var SingleAxisPointer = BaseAxisPointer.extend({
 
-        /**
-         * @override
-         */
-        useAnimation: function (axisModel, axisPointerModel) {
-            var axis = axisModel.axis;
-            return (axis.type === 'category' && axis.getBandWidth() > 20)
-                || axisPointerModel.get('snap');
-        },
-
         /**
          * @override
          */
@@ -32,10 +23,12 @@ define(function(require) {
             var rect = coordSys.getRect();
             var otherDimIndex = 1 - getPointDimIndex(axis);
             var otherExtent = [rect[XY[otherDimIndex]], rect[XY[otherDimIndex]] + rect[WH[otherDimIndex]]];
-            var pixelValue = coordSys.dataToPoint(value);
+            var pixelValue = coordSys.dataToPoint(value)[0];
 
             var elStyle = viewHelper.buildElStyle(axisPointerModel);
-            var pointerOption = pointerShapeBuilder[axisPointerModel.get('type')](axis, pixelValue, otherExtent, elStyle);
+            var pointerOption = pointerShapeBuilder[axisPointerModel.get('type')](
+                axis, pixelValue, otherExtent, elStyle
+            );
             pointerOption.style = elStyle;
 
             elOption.graphicKey = pointerOption.type;