fix and tweak.

src/component/axisPointer/AxisPointerModel.js

@@ -86,7 +86,10 @@ define(function(require) {
                 shadowBlur: 3,
                 shadowColor: '#aaa',
                 shadowOffsetX: 0,
-                shadowOffsetY: 2
+                shadowOffsetY: 2,
+
+                // For mobile performance
+                throttle: 40
             }
         }
 

src/component/axisPointer/AxisPointerView.js

@@ -44,7 +44,7 @@ define(function (require) {
          * @override
          */
         dispose: function (ecModel, api) {
-            globalListener.disopse(api.getZr(), 'axisPointer');
+            globalListener.unregister('axisPointer', api);
             AxisPonterView.superApply(this._model, 'dispose', arguments);
         }
 

src/component/axisPointer/BaseAxisPointer.js

@@ -6,6 +6,8 @@ define(function(require) {
     var graphic = require('../../util/graphic');
     var get = require('../../util/model').makeGetter();
     var axisPointerModelHelper = require('./modelHelper');
+    var eventTool = require('zrender/core/event');
+    var throttle = require('../../util/throttle');
 
     var extend = zrUtil.extend;
     var clone = zrUtil.clone;
@@ -49,6 +51,11 @@ define(function(require) {
          */
         _lastStatus: null,
 
+        /**
+         * @private
+         */
+        _handleTrans: null,
+
         /**
          * In px, arbitrary value. Do not set too small,
          * no animation is ok for most cases.
@@ -277,8 +284,12 @@ define(function(require) {
                     rectHover: true,
                     cursor: 'move',
                     draggable: true,
+                    onmousemove: function (e) {
+                        // Fot mobile devicem, prevent screen slider on the button.
+                        eventTool.stop(e.event);
+                    },
                     onmousedown: zrUtil.bind(
-                        this._onHandleDragMove, this, axisModel, axisPointerModel, api, 0, 0
+                        this._onHandleMouseDown, this, axisModel, axisPointerModel, api, 0, 0
                     ),
                     drift: zrUtil.bind(
                         this._onHandleDragMove, this, axisModel, axisPointerModel, api
@@ -306,8 +317,12 @@ define(function(require) {
             }
             handle.attr('scale', [handleSize[0] / 2, handleSize[1] / 2]);
 
-            // handle margin is from symbol center to axis,
-            // which is stable when circular move.
+            throttle.createOrUpdate(
+                this,
+                '_doMoveHandleOnDrag',
+                handleModel.get('throttle') || 0,
+                'fixRate'
+            );
 
             this._moveHandleToValue(handle, value, moveAnimation, axisModel, axisPointerModel, isInit);
         },
@@ -317,12 +332,19 @@ define(function(require) {
          */
         _moveHandleToValue: function (handle, value, moveAnimation, axisModel, axisPointerModel, isInit) {
             var trans = this.getHandleTransform(value, axisModel, axisPointerModel);
-            var valueProps = {
-                position: trans.position.slice(),
-                rotation: trans.rotation || 0
-            };
+            updateProps(axisPointerModel, !isInit && moveAnimation, handle, getHandleTransProps(trans));
+        },
 
-            updateProps(axisPointerModel, !isInit && moveAnimation, handle, valueProps);
+        /**
+         * @private
+         */
+        _onHandleMouseDown: function (axisModel, axisPointerModel, api) {
+            var handle = this._handle;
+            if (handle) {
+                this._handleTrans = getHandleTransProps(handle);
+                // Show tooltip.
+                this._onHandleDragMove(axisModel, axisPointerModel, api, 0, 0);
+            }
         },
 
         /**
@@ -336,19 +358,30 @@ define(function(require) {
 
             this._dragging = true;
 
-            handle.stopAnimation();
-
-            var trans = this.updateHandleTransform(
-                {position: handle.position.slice(), rotation: handle.rotation},
+            // Persistent for throttle.
+            this._handleTrans = this.updateHandleTransform(
+                getHandleTransProps(this._handleTrans),
                 [dx, dy],
                 axisModel,
                 axisPointerModel
             );
 
-            handle.attr({
-                position: trans.position,
-                rotation: trans.rotation || 0
-            });
+            this._doMoveHandleOnDrag(axisModel, api);
+        },
+
+        /**
+         * Throttled method.
+         * @private
+         */
+        _doMoveHandleOnDrag: function (axisModel, api) {
+            var handle = this._handle;
+            if (!handle) {
+                return;
+            }
+
+            var trans = this._handleTrans;
+            handle.stopAnimation();
+            handle.attr(getHandleTransProps(trans));
             get(handle).lastProp = null;
 
             var payload = {
@@ -421,6 +454,7 @@ define(function(require) {
                 handle && zr.remove(handle);
                 this._group = null;
                 this._handle = null;
+                this._handleTrans = null;
             }
         },
 
@@ -478,6 +512,13 @@ define(function(require) {
         labelEl[axisPointerModel.get('label.show') ? 'show' : 'hide']();
     }
 
+    function getHandleTransProps(trans) {
+        return {
+            position: trans.position.slice(),
+            rotation: trans.rotation || 0
+        };
+    }
+
     clazzUtil.enableClassExtend(BaseAxisPointer);
 
     return BaseAxisPointer;

src/component/axisPointer/axisTrigger.js

@@ -203,6 +203,13 @@ define(function(require) {
         var valueLabel = viewHelper.getValueLabel(
             value, axisInfo.axis.model, axisInfo.axisPointerModel
         );
+
+        // If no data, do not create anything in dataByCoordSys,
+        // whose length will be used to judge whether dispatch action.
+        if (!axisInfo.triggerTooltip || !payloadBatch.length) {
+            return;
+        }
+
         var coordSysModel = axisInfo.coordSys.model;
         var coordSysKey = modelHelper.makeKey(coordSysModel);
         var coordSysItem = dataByCoordSys.map[coordSysKey];
@@ -217,7 +224,7 @@ define(function(require) {
             dataByCoordSys.list.push(coordSysItem);
         }
 
-        axisInfo.triggerTooltip && payloadBatch.length && coordSysItem.dataByAxis.push({
+        coordSysItem.dataByAxis.push({
             axisDim: axis.dim,
             axisIndex: axisModel.componentIndex,
             axisType: axisModel.type,
@@ -239,7 +246,7 @@ define(function(require) {
             var valItem = showValueMap[key];
 
             if (valItem) {
-                option.status = 'show';
+                !axisInfo.useHandle && (option.status = 'show');
                 option.value = valItem.value;
                 // For label formatter param.
                 option.seriesDataIndices = (valItem.payloadBatch || []).slice();
@@ -249,11 +256,7 @@ define(function(require) {
             else {
                 // If hide, value still need to be set, consider
                 // click legend to toggle axis blank.
-                option.status = 'hide';
-            }
-
-            if (axisInfo.useHandle) {
-                option.status = axisInfo.axis.scale.isBlank() ? 'hide' : 'show';
+                !axisInfo.useHandle && (option.status = 'hide');
             }
         });
     }

src/component/axisPointer/globalListener.js

@@ -43,31 +43,13 @@ define(function(require) {
 
         function useHandler(eventType, cb) {
             zr.on(eventType, function (e) {
-                var pendings = {
-                    showTip: [],
-                    hideTip: []
-                };
-                // FIXME
-                // better approach?
-                // 'showTip' and 'hideTip' can be triggered by axisPointer and tooltip,
-                // which may be conflict, (axisPointer call showTip but tooltip call hideTip);
-                // So we have to add "final stage" to merge those dispatched actions.
-                function dispatchAction(payload) {
-                    var pendingList = pendings[payload.type];
-                    if (pendingList) {
-                        pendingList.push(payload);
-                    }
-                    else {
-                        payload.dispatchAction = dispatchAction;
-                        api.dispatchAction(payload);
-                    }
-                }
+                var dis = makeDispatchAction(api);
 
                 each(get(zr).records, function (record) {
-                    record && cb(record, e, dispatchAction);
+                    record && cb(record, e, dis.dispatchAction);
                 });
 
-                dispatchTooltipFinally(pendings, api);
+                dispatchTooltipFinally(dis.pendings, api);
             });
         }
     }
@@ -97,18 +79,44 @@ define(function(require) {
         record.handler(currTrigger, e, dispatchAction);
     }
 
+    function makeDispatchAction(api) {
+        var pendings = {
+            showTip: [],
+            hideTip: []
+        };
+        // FIXME
+        // better approach?
+        // 'showTip' and 'hideTip' can be triggered by axisPointer and tooltip,
+        // which may be conflict, (axisPointer call showTip but tooltip call hideTip);
+        // So we have to add "final stage" to merge those dispatched actions.
+        var dispatchAction = function (payload) {
+            var pendingList = pendings[payload.type];
+            if (pendingList) {
+                pendingList.push(payload);
+            }
+            else {
+                payload.dispatchAction = dispatchAction;
+                api.dispatchAction(payload);
+            }
+        };
+
+        return {
+            dispatchAction: dispatchAction,
+            pendings: pendings
+        };
+    }
+
     /**
      * @param {string} key
-     * @param {module:zrender} zr
+     * @param {module:echarts/ExtensionAPI} api
      */
-    globalListener.unregister = function (key, zr) {
+    globalListener.unregister = function (key, api) {
         if (env.node) {
             return;
         }
-
+        var zr = api.getZr();
         var record = (get(zr).records || {})[key];
         if (record) {
-            record.handler('leave');
             get(zr).records[key] = null;
         }
     };

src/component/axisPointer/modelHelper.js

@@ -271,10 +271,11 @@ define(function(require) {
             value = scale.parse(value);
         }
 
+        var useHandle = isHandleTrigger(axisPointerModel);
         // If `handle` used, `axisPointer` will always be displayed, so value
         // and status should be initialized.
         if (status == null) {
-            option.status = isHandleTrigger(axisPointerModel) ? 'show' : 'hide';
+            option.status = useHandle ? 'show' : 'hide';
         }
 
         var extent = scale.getExtent().slice();
@@ -294,6 +295,10 @@ define(function(require) {
         }
 
         option.value = value;
+
+        if (useHandle) {
+            option.status = axisInfo.axis.scale.isBlank() ? 'hide' : 'show';
+        }
     };
 
     helper.getAxisInfo = function (axisModel) {

src/component/tooltip/TooltipView.js

@@ -562,7 +562,7 @@ define(function (require) {
                 return;
             }
             this._tooltipContent.hide();
-            globalListener.disopse(api.getZr(), 'itemTooltip');
+            globalListener.unregister('itemTooltip', api);
         }
     });
 

src/util/model.js

@@ -582,7 +582,7 @@ define(function(require) {
                 || !queryType
                 || value == null
                 || (queryType === 'index' && value === 'none')
-                || (opt.includeMainTypes && zrUtil.indexOf(opt.includeMainTypes, mainType) < 0)
+                || (opt && opt.includeMainTypes && zrUtil.indexOf(opt.includeMainTypes, mainType) < 0)
             ) {
                 return;
             }

test/area.html

@@ -19,7 +19,7 @@
                 'echarts',
                 'echarts/chart/line',
                 'echarts/component/legend',
-                'echarts/component/grid',
+                'echarts/component/gridSimple',
                 'echarts/component/tooltip',
                 'zrender/vml/vml'
             ], function (echarts) {

test/tooltip-touch.html

@@ -3,6 +3,7 @@
         <meta charset="utf-8">
         <script src="esl.js"></script>
         <script src="config.js"></script>
+        <script src="lib/facePrint.js"></script>
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <link rel="stylesheet" href="reset.css" />
         <script src="tooltipTestHelper.js"></script>