echarts-rails 0.1.5 → 0.1.6

data/vendor/assets/javascripts/echarts.simple.js

@@ -59,10 +59,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	 */
 	module.exports = __webpack_require__(1);
 
-	__webpack_require__(99);
-	__webpack_require__(134);
-	__webpack_require__(139);
-	__webpack_require__(112);
+	__webpack_require__(100);
+	__webpack_require__(135);
+	__webpack_require__(140);
+	__webpack_require__(113);
 
 /***/ },
 /* 1 */
@@ -111,12 +111,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var ChartView = __webpack_require__(42);
 	    var graphic = __webpack_require__(43);
 	    var modelUtil = __webpack_require__(5);
+	    var throttle = __webpack_require__(81);
 
-	    var zrender = __webpack_require__(81);
+	    var zrender = __webpack_require__(82);
 	    var zrUtil = __webpack_require__(4);
 	    var colorTool = __webpack_require__(39);
 	    var Eventful = __webpack_require__(33);
-	    var timsort = __webpack_require__(85);
+	    var timsort = __webpack_require__(86);
 
 	    var each = zrUtil.each;
 
@@ -135,11 +136,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	    // dispatchAction with updateMethod "none" in main process.
 	    // This flag is used to carry out this rule.
 	    // All events will be triggered out side main process (i.e. when !this[IN_MAIN_PROCESS]).
-	    var IN_MAIN_PROCESS = '__flag_in_main_process';
-	    var HAS_GRADIENT_OR_PATTERN_BG = '_hasGradientOrPatternBg';
-
-
-	    var OPTION_UPDATED = '_optionUpdated';
+	    var IN_MAIN_PROCESS = '__flagInMainProcess';
+	    var HAS_GRADIENT_OR_PATTERN_BG = '__hasGradientOrPatternBg';
+	    var OPTION_UPDATED = '__optionUpdated';
 
 	    function createRegisterEventWithLowercaseName(method) {
 	        return function (eventName, handler, context) {
@@ -189,13 +188,20 @@ return /******/ (function(modules) { // webpackBootstrap
 	         * @type {module:zrender/ZRender}
 	         * @private
 	         */
-	        this._zr = zrender.init(dom, {
+	        var zr = this._zr = zrender.init(dom, {
 	            renderer: opts.renderer || 'canvas',
 	            devicePixelRatio: opts.devicePixelRatio,
 	            width: opts.width,
 	            height: opts.height
 	        });
 
+	        /**
+	         * Expect 60 pfs.
+	         * @type {Function}
+	         * @private
+	         */
+	        this._throttledZrFlush = throttle.throttle(zrUtil.bind(zr.flush, zr), 17);
+
 	        /**
 	         * @type {Object}
 	         * @private
@@ -261,7 +267,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        timsort(visualFuncs, prioritySortFunc);
 	        timsort(dataProcessorFuncs, prioritySortFunc);
 
-	        this._zr.animation.on('frame', this._onframe, this);
+	        zr.animation.on('frame', this._onframe, this);
 	    }
 
 	    var echartsProto = ECharts.prototype;
@@ -312,6 +318,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	            ecModel.init(null, null, theme, optionManager);
 	        }
 
+	        // FIXME
+	        // ugly
+	        this.__lastOnlyGraphic = !!(option && option.graphic);
+	        zrUtil.each(option, function (o, mainType) {
+	            mainType !== 'graphic' && (this.__lastOnlyGraphic = false);
+	        }, this);
+
 	        this._model.setOption(option, optionPreprocessorFuncs);
 
 	        if (lazyUpdate) {
@@ -319,13 +332,15 @@ return /******/ (function(modules) { // webpackBootstrap
 	        }
 	        else {
 	            updateMethods.prepareAndUpdate.call(this);
-	            this._zr.refreshImmediately();
+	            // Ensure zr refresh sychronously, and then pixel in canvas can be
+	            // fetched after `setOption`.
+	            this._zr.flush();
 	            this[OPTION_UPDATED] = false;
 	        }
 
 	        this[IN_MAIN_PROCESS] = false;
 
-	        this._flushPendingActions();
+	        flushPendingActions.call(this, false);
 	    };
 
 	    /**
@@ -390,6 +405,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	     * @param {string} [opts.type='png']
 	     * @param {string} [opts.pixelRatio=1]
 	     * @param {string} [opts.backgroundColor]
+	     * @param {string} [opts.excludeComponents]
 	     */
 	    echartsProto.getDataURL = function (opts) {
 	        opts = opts || {};
@@ -821,7 +837,21 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	            prepareView.call(this, 'chart', ecModel);
 
-	            updateMethods.update.call(this, payload);
+	            // FIXME
+	            // ugly
+	            if (this.__lastOnlyGraphic) {
+	                each(this._componentsViews, function (componentView) {
+	                    var componentModel = componentView.__model;
+	                    if (componentModel && componentModel.mainType === 'graphic') {
+	                        componentView.render(componentModel, ecModel, this._api, payload);
+	                        updateZ(componentModel, componentView);
+	                    }
+	                }, this);
+	                this.__lastOnlyGraphic = false;
+	            }
+	            else {
+	                updateMethods.update.call(this, payload);
+	            }
 	        }
 	    };
 
@@ -874,7 +904,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	        this[IN_MAIN_PROCESS] = false;
 
-	        this._flushPendingActions();
+	        flushPendingActions.call(this);
 	    };
 
 	    /**
@@ -925,16 +955,22 @@ return /******/ (function(modules) { // webpackBootstrap
 	     * @pubilc
 	     * @param {Object} payload
 	     * @param {string} [payload.type] Action type
-	     * @param {boolean} [silent=false] Whether trigger event.
+	     * @param {Object|boolean} [opt] If pass boolean, means opt.silent
+	     * @param {boolean} [opt.silent=false] Whether trigger events.
+	     * @param {boolean} [opt.flush=undefined]
+	     *                  true: Flush immediately, and then pixel in canvas can be fetched
+	     *                      immediately. Caution: it might affect performance.
+	     *                  false: Not not flush.
+	     *                  undefined: Auto decide whether perform flush.
 	     */
-	    echartsProto.dispatchAction = function (payload, silent) {
-	        var actionWrap = actions[payload.type];
-	        if (!actionWrap) {
-	            return;
+	    echartsProto.dispatchAction = function (payload, opt) {
+	        if (!zrUtil.isObject(opt)) {
+	            opt = {silent: !!opt};
 	        }
 
-	        var actionInfo = actionWrap.actionInfo;
-	        var updateMethod = actionInfo.update || 'update';
+	        if (!actions[payload.type]) {
+	            return;
+	        }
 
 	        // if (__DEV__) {
 	        //     zrUtil.assert(
@@ -950,6 +986,28 @@ return /******/ (function(modules) { // webpackBootstrap
 	            return;
 	        }
 
+	        doDispatchAction.call(this, payload, opt.silent);
+
+	        if (opt.flush) {
+	            this._zr.flush(true);
+	        }
+	        else if (opt.flush !== false && env.browser.weChat) {
+	            // In WeChat embeded browser, `requestAnimationFrame` and `setInterval`
+	            // hang when sliding page (on touch event), which cause that zr does not
+	            // refresh util user interaction finished, which is not expected.
+	            // But `dispatchAction` may be called too frequently when pan on touch
+	            // screen, which impacts performance if do not throttle them.
+	            this._throttledZrFlush();
+	        }
+
+	        flushPendingActions.call(this, opt.silent);
+	    };
+
+	    function doDispatchAction(payload, silent) {
+	        var actionWrap = actions[payload.type];
+	        var actionInfo = actionWrap.actionInfo;
+	        var updateMethod = actionInfo.update || 'update';
+
 	        this[IN_MAIN_PROCESS] = true;
 
 	        var payloads = [payload];
@@ -1007,18 +1065,15 @@ return /******/ (function(modules) { // webpackBootstrap
 	        this[IN_MAIN_PROCESS] = false;
 
 	        !silent && this._messageCenter.trigger(eventObj.type, eventObj);
+	    }
 
-	        this._flushPendingActions();
-
-	    };
-
-	    echartsProto._flushPendingActions = function () {
+	    function flushPendingActions(silent) {
 	        var pendingActions = this._pendingActions;
 	        while (pendingActions.length) {
 	            var payload = pendingActions.shift();
-	            this.dispatchAction(payload);
+	            doDispatchAction.call(this, payload, silent);
 	        }
-	    };
+	    }
 
 	    /**
 	     * Register event
@@ -1442,9 +1497,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	        /**
 	         * @type {number}
 	         */
-	        version: '3.3.0',
+	        version: '3.3.2',
 	        dependencies: {
-	            zrender: '3.2.0'
+	            zrender: '3.2.2'
 	        }
 	    };
 
@@ -1757,7 +1812,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        if (superClass) {
 	            superClass = 'series.' + superClass.replace('series.', '');
 	            var classType = parseClassType(superClass);
-	            Clazz = SeriesModel.getClass(classType.main, classType.sub, true);
+	            Clazz = ComponentModel.getClass(classType.main, classType.sub, true);
 	        }
 	        return Clazz.extend(opts);
 	    };
@@ -1796,9 +1851,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	        zrUtil.createCanvas = creator;
 	    };
 
-	    echarts.registerVisual(PRIORITY_VISUAL_GLOBAL, __webpack_require__(93));
-	    echarts.registerPreprocessor(__webpack_require__(94));
-	    echarts.registerLoading('default', __webpack_require__(96));
+	    echarts.registerVisual(PRIORITY_VISUAL_GLOBAL, __webpack_require__(94));
+	    echarts.registerPreprocessor(__webpack_require__(95));
+	    echarts.registerLoading('default', __webpack_require__(97));
 
 	    // Default action
 	    echarts.registerAction({
@@ -1817,7 +1872,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    // Exports
 	    // --------
 	    //
-	    echarts.List = __webpack_require__(97);
+	    echarts.List = __webpack_require__(98);
 	    echarts.Model = __webpack_require__(12);
 
 	    echarts.graphic = __webpack_require__(43);
@@ -1829,9 +1884,9 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    echarts.util = {};
 	    each([
-	            'map', 'each', 'filter', 'indexOf', 'inherits',
-	            'reduce', 'filter', 'bind', 'curry', 'isArray',
-	            'isString', 'isObject', 'isFunction', 'extend', 'defaults'
+	            'map', 'each', 'filter', 'indexOf', 'inherits', 'reduce', 'filter',
+	            'bind', 'curry', 'isArray', 'isString', 'isObject', 'isFunction',
+	            'extend', 'defaults', 'clone'
 	        ],
 	        function (name) {
 	            echarts.util[name] = zrUtil[name];
@@ -1914,6 +1969,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	            || ua.match(/Trident\/.+?rv:(([\d.]+))/);
 	        var edge = ua.match(/Edge\/([\d.]+)/); // IE 12 and 12+
 
+	        var weChat = (/micromessenger/i).test(ua);
+
 	        // Todo: clean this up with a better OS/browser seperation:
 	        // - discern (more) between multiple browsers on android
 	        // - decide if kindle fire in silk mode is android or not
@@ -1936,20 +1993,29 @@ return /******/ (function(modules) { // webpackBootstrap
 	        // if (silk) browser.silk = true, browser.version = silk[1];
 	        // if (!silk && os.android && ua.match(/Kindle Fire/)) browser.silk = true;
 	        // if (chrome) browser.chrome = true, browser.version = chrome[1];
-	        if (firefox) browser.firefox = true, browser.version = firefox[1];
+	        if (firefox) {
+	            browser.firefox = true;
+	            browser.version = firefox[1];
+	        }
 	        // if (safari && (ua.match(/Safari/) || !!os.ios)) browser.safari = true;
 	        // if (webview) browser.webview = true;
-	        
+
 	        if (ie) {
 	            browser.ie = true;
 	            browser.version = ie[1];
 	        }
-	        
+
 	        if (edge) {
 	            browser.edge = true;
 	            browser.version = edge[1];
 	        }
 
+	        // It is difficult to detect WeChat in Win Phone precisely, because ua can
+	        // not be set on win phone. So we do not consider Win Phone.
+	        if (weChat) {
+	            browser.weChat = true;
+	        }
+
 	        // os.tablet = !!(ipad || playbook || (android && !ua.match(/Mobile/)) ||
 	        //     (firefox && ua.match(/Tablet/)) || (ie && !ua.match(/Phone/) && ua.match(/Touch/)));
 	        // os.phone  = !!(!os.tablet && !os.ipod && (android || iphone || webos ||
@@ -2140,7 +2206,16 @@ return /******/ (function(modules) { // webpackBootstrap
 	                    componentsMap[mainType], newCptOptionList
 	                );
 
-	                makeKeyInfo(mainType, mapResult);
+	                modelUtil.makeIdAndName(mapResult);
+
+	                // Set mainType and complete subType.
+	                each(mapResult, function (item, index) {
+	                    var opt = item.option;
+	                    if (isObject(opt)) {
+	                        item.keyInfo.mainType = mainType;
+	                        item.keyInfo.subType = determineSubType(mainType, opt, item.exist);
+	                    }
+	                });
 
 	                var dependentModels = getComponentsByTypes(
 	                    componentsMap, dependencies
@@ -2624,89 +2699,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	        return ret;
 	    }
 
-	    /**
-	     * @inner
-	     */
-	    function makeKeyInfo(mainType, mapResult) {
-	        // We use this id to hash component models and view instances
-	        // in echarts. id can be specified by user, or auto generated.
-
-	        // The id generation rule ensures new view instance are able
-	        // to mapped to old instance when setOption are called in
-	        // no-merge mode. So we generate model id by name and plus
-	        // type in view id.
-
-	        // name can be duplicated among components, which is convenient
-	        // to specify multi components (like series) by one name.
-
-	        // Ensure that each id is distinct.
-	        var idMap = {};
-
-	        each(mapResult, function (item, index) {
-	            var existCpt = item.exist;
-	            existCpt && (idMap[existCpt.id] = item);
-	        });
-
-	        each(mapResult, function (item, index) {
-	            var opt = item.option;
-
-	            zrUtil.assert(
-	                !opt || opt.id == null || !idMap[opt.id] || idMap[opt.id] === item,
-	                'id duplicates: ' + (opt && opt.id)
-	            );
-
-	            opt && opt.id != null && (idMap[opt.id] = item);
-
-	            // Complete subType
-	            if (isObject(opt)) {
-	                var subType = determineSubType(mainType, opt, item.exist);
-	                item.keyInfo = {mainType: mainType, subType: subType};
-	            }
-	        });
-
-	        // Make name and id.
-	        each(mapResult, function (item, index) {
-	            var existCpt = item.exist;
-	            var opt = item.option;
-	            var keyInfo = item.keyInfo;
-
-	            if (!isObject(opt)) {
-	                return;
-	            }
-
-	            // name can be overwitten. Consider case: axis.name = '20km'.
-	            // But id generated by name will not be changed, which affect
-	            // only in that case: setOption with 'not merge mode' and view
-	            // instance will be recreated, which can be accepted.
-	            keyInfo.name = opt.name != null
-	                ? opt.name + ''
-	                : existCpt
-	                ? existCpt.name
-	                : '\0-';
-
-	            if (existCpt) {
-	                keyInfo.id = existCpt.id;
-	            }
-	            else if (opt.id != null) {
-	                keyInfo.id = opt.id + '';
-	            }
-	            else {
-	                // Consider this situatoin:
-	                //  optionA: [{name: 'a'}, {name: 'a'}, {..}]
-	                //  optionB [{..}, {name: 'a'}, {name: 'a'}]
-	                // Series with the same name between optionA and optionB
-	                // should be mapped.
-	                var idNum = 0;
-	                do {
-	                    keyInfo.id = '\0' + keyInfo.name + '\0' + idNum++;
-	                }
-	                while (idMap[keyInfo.id]);
-	            }
-
-	            idMap[keyInfo.id] = item;
-	        });
-	    }
-
 	    /**
 	     * @inner
 	     */
@@ -2779,8 +2771,21 @@ return /******/ (function(modules) { // webpackBootstrap
 	        '[object Error]': 1,
 	        '[object CanvasGradient]': 1,
 	        '[object CanvasPattern]': 1,
-	        // In node-canvas Image can be Canvas.Image
-	        '[object Image]': 1
+	        // For node-canvas
+	        '[object Image]': 1,
+	        '[object Canvas]': 1
+	    };
+
+	    var TYPED_ARRAY = {
+	        '[object Int8Array]': 1,
+	        '[object Uint8Array]': 1,
+	        '[object Uint8ClampedArray]': 1,
+	        '[object Int16Array]': 1,
+	        '[object Uint16Array]': 1,
+	        '[object Int32Array]': 1,
+	        '[object Uint32Array]': 1,
+	        '[object Float32Array]': 1,
+	        '[object Float64Array]': 1
 	    };
 
 	    var objToString = Object.prototype.toString;
@@ -2793,35 +2798,48 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var nativeReduce = arrayProto.reduce;
 
 	    /**
+	     * Those data types can be cloned:
+	     *     Plain object, Array, TypedArray, number, string, null, undefined.
+	     * Those data types will be assgined using the orginal data:
+	     *     BUILTIN_OBJECT
+	     * Instance of user defined class will be cloned to a plain object, without
+	     * properties in prototype.
+	     * Other data types is not supported (not sure what will happen).
+	     *
+	     * Caution: do not support clone Date, for performance consideration.
+	     * (There might be a large number of date in `series.data`).
+	     * So date should not be modified in and out of echarts.
+	     *
 	     * @param {*} source
-	     * @return {*} 拷贝后的新对象
+	     * @return {*} new
 	     */
 	    function clone(source) {
-	        if (typeof source == 'object' && source !== null) {
-	            var result = source;
-	            if (source instanceof Array) {
-	                result = [];
-	                for (var i = 0, len = source.length; i < len; i++) {
-	                    result[i] = clone(source[i]);
-	                }
-	            }
-	            else if (
-	                !isBuildInObject(source)
-	                // 是否为 dom 对象
-	                && !isDom(source)
-	            ) {
-	                result = {};
-	                for (var key in source) {
-	                    if (source.hasOwnProperty(key)) {
-	                        result[key] = clone(source[key]);
-	                    }
+	        if (source == null || typeof source != 'object') {
+	            return source;
+	        }
+
+	        var result = source;
+	        var typeStr = objToString.call(source);
+
+	        if (typeStr === '[object Array]') {
+	            result = [];
+	            for (var i = 0, len = source.length; i < len; i++) {
+	                result[i] = clone(source[i]);
+	            }
+	        }
+	        else if (TYPED_ARRAY[typeStr]) {
+	            result = source.constructor.from(source);
+	        }
+	        else if (!BUILTIN_OBJECT[typeStr] && !isDom(source)) {
+	            result = {};
+	            for (var key in source) {
+	                if (source.hasOwnProperty(key)) {
+	                    result[key] = clone(source[key]);
 	                }
 	            }
-
-	            return result;
 	        }
 
-	        return source;
+	        return result;
 	    }
 
 	    /**
@@ -3186,8 +3204,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	     * @return {boolean}
 	     */
 	    function isDom(value) {
-	        return value && value.nodeType === 1
-	               && typeof(value.nodeName) == 'string';
+	        return typeof value === 'object'
+	            && typeof value.nodeType === 'number'
+	            && typeof value.ownerDocument === 'object';
 	    }
 
 	    /**
@@ -3269,6 +3288,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var nubmerUtil = __webpack_require__(7);
 	    var Model = __webpack_require__(12);
 	    var zrUtil = __webpack_require__(4);
+	    var each = zrUtil.each;
+	    var isObject = zrUtil.isObject;
 
 	    var modelUtil = {};
 
@@ -3309,7 +3330,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	            var normalOpt = opt.normal = opt.normal || {};
 
 	            // Default emphasis option from normal
-	            zrUtil.each(subOpts, function (subOptName) {
+	            each(subOpts, function (subOptName) {
 	                var val = zrUtil.retrieve(emphasisOpt[subOptName], normalOpt[subOptName]);
 	                if (val != null) {
 	                    emphasisOpt[subOptName] = val;
@@ -3337,10 +3358,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	     * @param {string|number|Date|Array|Object} dataItem
 	     */
 	    modelUtil.isDataItemOption = function (dataItem) {
-	        return zrUtil.isObject(dataItem)
+	        return isObject(dataItem)
 	            && !(dataItem instanceof Array);
 	            // // markLine data can be array
-	            // && !(dataItem[0] && zrUtil.isObject(dataItem[0]) && !(dataItem[0] instanceof Array));
+	            // && !(dataItem[0] && isObject(dataItem[0]) && !(dataItem[0] instanceof Array));
 	    };
 
 	    /**
@@ -3465,7 +3486,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	            var data = this.getData(dataType);
 	            var dataItem = data.getRawDataItem(idx);
 	            if (dataItem != null) {
-	                return (zrUtil.isObject(dataItem) && !(dataItem instanceof Array))
+	                return (isObject(dataItem) && !(dataItem instanceof Array))
 	                    ? dataItem.value : dataItem;
 	            }
 	        },
@@ -3487,7 +3508,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	     * @param {Array.<Object>|Array.<module:echarts/model/Component>} exists
 	     * @param {Object|Array.<Object>} newCptOptions
 	     * @return {Array.<Object>} Result, like [{exist: ..., option: ...}, {}],
-	     *                          which order is the same as exists.
+	     *                          index of which is the same as exists.
 	     */
 	    modelUtil.mappingToExists = function (exists, newCptOptions) {
 	        // Mapping by the order by original option (but not order of
@@ -3503,8 +3524,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	        });
 
 	        // Mapping by id or name if specified.
-	        zrUtil.each(newCptOptions, function (cptOption, index) {
-	            if (!zrUtil.isObject(cptOption)) {
+	        each(newCptOptions, function (cptOption, index) {
+	            if (!isObject(cptOption)) {
 	                return;
 	            }
 
@@ -3538,8 +3559,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	        });
 
 	        // Otherwise mapping by index.
-	        zrUtil.each(newCptOptions, function (cptOption, index) {
-	            if (!zrUtil.isObject(cptOption)) {
+	        each(newCptOptions, function (cptOption, index) {
+	            if (!isObject(cptOption)) {
 	                return;
 	            }
 
@@ -3547,6 +3568,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	            for (; i < result.length; i++) {
 	                var exist = result[i].exist;
 	                if (!result[i].option
+	                    // Existing model that already has id should be able to
+	                    // mapped to (because after mapping performed model may
+	                    // be assigned with a id, whish should not affect next
+	                    // mapping), except those has inner id.
 	                    && !modelUtil.isIdInner(exist)
 	                    // Caution:
 	                    // Do not overwrite id. But name can be overwritten,
@@ -3568,13 +3593,97 @@ return /******/ (function(modules) { // webpackBootstrap
 	        return result;
 	    };
 
+	    /**
+	     * Make id and name for mapping result (result of mappingToExists)
+	     * into `keyInfo` field.
+	     *
+	     * @public
+	     * @param {Array.<Object>} Result, like [{exist: ..., option: ...}, {}],
+	     *                          which order is the same as exists.
+	     * @return {Array.<Object>} The input.
+	     */
+	    modelUtil.makeIdAndName = function (mapResult) {
+	        // We use this id to hash component models and view instances
+	        // in echarts. id can be specified by user, or auto generated.
+
+	        // The id generation rule ensures new view instance are able
+	        // to mapped to old instance when setOption are called in
+	        // no-merge mode. So we generate model id by name and plus
+	        // type in view id.
+
+	        // name can be duplicated among components, which is convenient
+	        // to specify multi components (like series) by one name.
+
+	        // Ensure that each id is distinct.
+	        var idMap = {};
+
+	        each(mapResult, function (item, index) {
+	            var existCpt = item.exist;
+	            existCpt && (idMap[existCpt.id] = item);
+	        });
+
+	        each(mapResult, function (item, index) {
+	            var opt = item.option;
+
+	            zrUtil.assert(
+	                !opt || opt.id == null || !idMap[opt.id] || idMap[opt.id] === item,
+	                'id duplicates: ' + (opt && opt.id)
+	            );
+
+	            opt && opt.id != null && (idMap[opt.id] = item);
+	            !item.keyInfo && (item.keyInfo = {});
+	        });
+
+	        // Make name and id.
+	        each(mapResult, function (item, index) {
+	            var existCpt = item.exist;
+	            var opt = item.option;
+	            var keyInfo = item.keyInfo;
+
+	            if (!isObject(opt)) {
+	                return;
+	            }
+
+	            // name can be overwitten. Consider case: axis.name = '20km'.
+	            // But id generated by name will not be changed, which affect
+	            // only in that case: setOption with 'not merge mode' and view
+	            // instance will be recreated, which can be accepted.
+	            keyInfo.name = opt.name != null
+	                ? opt.name + ''
+	                : existCpt
+	                ? existCpt.name
+	                : '\0-';
+
+	            if (existCpt) {
+	                keyInfo.id = existCpt.id;
+	            }
+	            else if (opt.id != null) {
+	                keyInfo.id = opt.id + '';
+	            }
+	            else {
+	                // Consider this situatoin:
+	                //  optionA: [{name: 'a'}, {name: 'a'}, {..}]
+	                //  optionB [{..}, {name: 'a'}, {name: 'a'}]
+	                // Series with the same name between optionA and optionB
+	                // should be mapped.
+	                var idNum = 0;
+	                do {
+	                    keyInfo.id = '\0' + keyInfo.name + '\0' + idNum++;
+	                }
+	                while (idMap[keyInfo.id]);
+	            }
+
+	            idMap[keyInfo.id] = item;
+	        });
+	    };
+
 	    /**
 	     * @public
 	     * @param {Object} cptOption
 	     * @return {boolean}
 	     */
 	    modelUtil.isIdInner = function (cptOption) {
-	        return zrUtil.isObject(cptOption)
+	        return isObject(cptOption)
 	            && cptOption.id
 	            && (cptOption.id + '').indexOf('\0_ec_\0') === 0;
 	    };
@@ -3708,7 +3817,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	        var result = {};
 
-	        zrUtil.each(finder, function (value, key) {
+	        each(finder, function (value, key) {
 	            var value = finder[key];
 
 	            // Exclude 'dataIndex' and other illgal keys.
@@ -3768,12 +3877,19 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    /**
 	     * @param {string} str
+	     * @param {boolean} [upperCaseFirst=false]
 	     * @return {string} str
 	     */
-	    formatUtil.toCamelCase = function (str) {
-	        return str.toLowerCase().replace(/-(.)/g, function(match, group1) {
+	    formatUtil.toCamelCase = function (str, upperCaseFirst) {
+	        str = (str || '').toLowerCase().replace(/-(.)/g, function(match, group1) {
 	            return group1.toUpperCase();
 	        });
+
+	        if (upperCaseFirst && str) {
+	            str = str.charAt(0).toUpperCase() + str.slice(1);
+	        }
+
+	        return str;
 	    };
 
 	    /**
@@ -4166,6 +4282,70 @@ return /******/ (function(modules) { // webpackBootstrap
 	        return nf * exp10;
 	    };
 
+	    /**
+	     * Order intervals asc, and split them when overlap.
+	     * expect(numberUtil.reformIntervals([
+	     *     {interval: [18, 62], close: [1, 1]},
+	     *     {interval: [-Infinity, -70], close: [0, 0]},
+	     *     {interval: [-70, -26], close: [1, 1]},
+	     *     {interval: [-26, 18], close: [1, 1]},
+	     *     {interval: [62, 150], close: [1, 1]},
+	     *     {interval: [106, 150], close: [1, 1]},
+	     *     {interval: [150, Infinity], close: [0, 0]}
+	     * ])).toEqual([
+	     *     {interval: [-Infinity, -70], close: [0, 0]},
+	     *     {interval: [-70, -26], close: [1, 1]},
+	     *     {interval: [-26, 18], close: [0, 1]},
+	     *     {interval: [18, 62], close: [0, 1]},
+	     *     {interval: [62, 150], close: [0, 1]},
+	     *     {interval: [150, Infinity], close: [0, 0]}
+	     * ]);
+	     * @param {Array.<Object>} list, where `close` mean open or close
+	     *        of the interval, and Infinity can be used.
+	     * @return {Array.<Object>} The origin list, which has been reformed.
+	     */
+	    number.reformIntervals = function (list) {
+	        list.sort(function (a, b) {
+	            return littleThan(a, b, 0) ? -1 : 1;
+	        });
+
+	        var curr = -Infinity;
+	        var currClose = 1;
+	        for (var i = 0; i < list.length;) {
+	            var interval = list[i].interval;
+	            var close = list[i].close;
+
+	            for (var lg = 0; lg < 2; lg++) {
+	                if (interval[lg] <= curr) {
+	                    interval[lg] = curr;
+	                    close[lg] = !lg ? 1 - currClose : 1;
+	                }
+	                curr = interval[lg];
+	                currClose = close[lg];
+	            }
+
+	            if (interval[0] === interval[1] && close[0] * close[1] !== 1) {
+	                list.splice(i, 1);
+	            }
+	            else {
+	                i++;
+	            }
+	        }
+
+	        return list;
+
+	        function littleThan(a, b, lg) {
+	            return a.interval[lg] < b.interval[lg]
+	                || (
+	                    a.interval[lg] === b.interval[lg]
+	                    && (
+	                        (a.close[lg] - b.close[lg] === (!lg ? 1 : -1))
+	                        || (!lg && littleThan(a, b, 1))
+	                    )
+	                );
+	        }
+	    };
+
 	    module.exports = number;
 
 
@@ -4465,7 +4645,6 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var v2ApplyTransform = vec2.applyTransform;
 	    var mathMin = Math.min;
-	    var mathAbs = Math.abs;
 	    var mathMax = Math.max;
 	    /**
 	     * @alias module:echarts/core/BoundingRect
@@ -4527,8 +4706,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	         * @methods
 	         */
 	        applyTransform: (function () {
-	            var min = [];
-	            var max = [];
+	            var lt = [];
+	            var rb = [];
+	            var lb = [];
+	            var rt = [];
 	            return function (m) {
 	                // In case usage like this
 	                // el.getBoundingRect().applyTransform(el.transform)
@@ -4536,18 +4717,22 @@ return /******/ (function(modules) { // webpackBootstrap
 	                if (!m) {
 	                    return;
 	                }
-	                min[0] = this.x;
-	                min[1] = this.y;
-	                max[0] = this.x + this.width;
-	                max[1] = this.y + this.height;
-
-	                v2ApplyTransform(min, min, m);
-	                v2ApplyTransform(max, max, m);
-
-	                this.x = mathMin(min[0], max[0]);
-	                this.y = mathMin(min[1], max[1]);
-	                this.width = mathAbs(max[0] - min[0]);
-	                this.height = mathAbs(max[1] - min[1]);
+	                lt[0] = lb[0] = this.x;
+	                lt[1] = rt[1] = this.y;
+	                rb[0] = rt[0] = this.x + this.width;
+	                rb[1] = lb[1] = this.y + this.height;
+
+	                v2ApplyTransform(lt, lt, m);
+	                v2ApplyTransform(rb, rb, m);
+	                v2ApplyTransform(lb, lb, m);
+	                v2ApplyTransform(rt, rt, m);
+
+	                this.x = mathMin(lt[0], rb[0], lb[0], rt[0]);
+	                this.y = mathMin(lt[1], rb[1], lb[1], rt[1]);
+	                var maxX = mathMax(lt[0], rb[0], lb[0], rt[0]);
+	                var maxY = mathMax(lt[1], rb[1], lb[1], rt[1]);
+	                this.width = maxX - this.x;
+	                this.height = maxY - this.y;
 	            };
 	        })(),
 
@@ -4576,6 +4761,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	         * @return {boolean}
 	         */
 	        intersect: function (b) {
+	            if (!b) {
+	                return false;
+	            }
+
 	            if (!(b instanceof BoundingRect)) {
 	                // Normalize negative width/height.
 	                b = BoundingRect.create(b);
@@ -5615,12 +5804,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	        },
 
 	        getTextRect: function (text) {
-	            var textStyle = this.get('textStyle') || {};
 	            return textContain.getBoundingRect(
 	                text,
 	                this.getFont(),
-	                textStyle.align,
-	                textStyle.baseline
+	                this.getShallow('align'),
+	                this.getShallow('baseline')
 	            );
 	        },
 
@@ -6064,7 +6252,9 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var layout = {};
 
-	    var LOCATION_PARAMS = ['left', 'right', 'top', 'bottom', 'width', 'height'];
+	    var LOCATION_PARAMS = layout.LOCATION_PARAMS = [
+	        'left', 'right', 'top', 'bottom', 'width', 'height'
+	    ];
 
 	    function boxLayout(orient, group, gap, maxWidth, maxHeight) {
 	        var x = 0;
@@ -6299,13 +6489,23 @@ return /******/ (function(modules) { // webpackBootstrap
 	        return rect;
 	    };
 
+
 	    /**
-	     * Position group of component in viewport
+	     * Position a zr element in viewport
 	     *  Group position is specified by either
 	     *  {left, top}, {right, bottom}
 	     *  If all properties exists, right and bottom will be igonred.
 	     *
-	     * @param {module:zrender/container/Group} group
+	     * Logic:
+	     *     1. Scale (against origin point in parent coord)
+	     *     2. Rotate (against origin point in parent coord)
+	     *     3. Traslate (with el.position by this method)
+	     * So this method only fixes the last step 'Traslate', which does not affect
+	     * scaling and rotating.
+	     *
+	     * If be called repeatly with the same input el, the same result will be gotten.
+	     *
+	     * @param {module:zrender/Element} el Should have `getBoundingRect` method.
 	     * @param {Object} positionInfo
 	     * @param {number|string} [positionInfo.left]
 	     * @param {number|string} [positionInfo.top]
@@ -6313,25 +6513,62 @@ return /******/ (function(modules) { // webpackBootstrap
 	     * @param {number|string} [positionInfo.bottom]
 	     * @param {Object} containerRect
 	     * @param {string|number} margin
-	     */
-	    layout.positionGroup = function (
-	        group, positionInfo, containerRect, margin
-	    ) {
-	        var groupRect = group.getBoundingRect();
+	     * @param {Object} [opt]
+	     * @param {Array.<number>} [opt.hv=[1,1]] Only horizontal or only vertical.
+	     * @param {Array.<number>} [opt.boundingMode='all']
+	     *        Specify how to calculate boundingRect when locating.
+	     *        'all': Position the boundingRect that is transformed and uioned
+	     *               both itself and its descendants.
+	     *               This mode simplies confine the elements in the bounding
+	     *               of their container (e.g., using 'right: 0').
+	     *        'raw': Position the boundingRect that is not transformed and only itself.
+	     *               This mode is useful when you want a element can overflow its
+	     *               container. (Consider a rotated circle needs to be located in a corner.)
+	     *               In this mode positionInfo.width/height can only be number.
+	     */
+	    layout.positionElement = function (el, positionInfo, containerRect, margin, opt) {
+	        var h = !opt || !opt.hv || opt.hv[0];
+	        var v = !opt || !opt.hv || opt.hv[1];
+	        var boundingMode = opt && opt.boundingMode || 'all';
+
+	        if (!h && !v) {
+	            return;
+	        }
 
-	        positionInfo = zrUtil.extend(zrUtil.clone(positionInfo), {
-	            width: groupRect.width,
-	            height: groupRect.height
-	        });
+	        var rect;
+	        if (boundingMode === 'raw') {
+	            rect = el.type === 'group'
+	                ? new BoundingRect(0, 0, +positionInfo.width || 0, +positionInfo.height || 0)
+	                : el.getBoundingRect();
+	        }
+	        else {
+	            rect = el.getBoundingRect();
+	            if (el.needLocalTransform()) {
+	                var transform = el.getLocalTransform();
+	                // Notice: raw rect may be inner object of el,
+	                // which should not be modified.
+	                rect = rect.clone();
+	                rect.applyTransform(transform);
+	            }
+	        }
 
 	        positionInfo = layout.getLayoutRect(
-	            positionInfo, containerRect, margin
+	            zrUtil.defaults(
+	                {width: rect.width, height: rect.height},
+	                positionInfo
+	            ),
+	            containerRect,
+	            margin
 	        );
 
-	        group.attr('position', [
-	            positionInfo.x - groupRect.x,
-	            positionInfo.y - groupRect.y
-	        ]);
+	        // Because 'tranlate' is the last step in transform
+	        // (see zrender/core/Transformable#getLocalTransfrom),
+	        // we can just only modify el.position to get final result.
+	        var elPos = el.position;
+	        var dx = h ? positionInfo.x - rect.x : 0;
+	        var dy = v ? positionInfo.y - rect.y : 0;
+
+	        el.attr('position', boundingMode === 'raw' ? [dx, dy] : [elPos[0] + dx, elPos[1] + dy]);
 	    };
 
 	    /**
@@ -6525,6 +6762,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	        progressive: 400,
 
 	        // Threshold of if use single hover layer to optimize.
+	        // It is recommended that `hoverLayerThreshold` is equivalent to or less than
+	        // `progressiveThreshold`, otherwise hover will cause restart of progressive,
+	        // which is unexpected.
+	        // see example <echarts/test/heatmap-large.html>.
 	        hoverLayerThreshold: 3000
 	    };
 
@@ -6866,7 +7107,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                // called, and is merged into every new option by inner method `mergeOption`
 	                // each time `setOption` called, can be only used in `isRecreate`, because
 	                // its reliability is under suspicion. In other cases option merge is
-	                // proformed by `model.mergeOption`.
+	                // performed by `model.mergeOption`.
 	                ? optionBackup.baseOption : this._newBaseOption
 	            );
 	        },
@@ -7120,6 +7361,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var ComponentModel = __webpack_require__(19);
 	    var colorPaletteMixin = __webpack_require__(24);
 	    var env = __webpack_require__(2);
+	    var layout = __webpack_require__(21);
 
 	    var encodeHTML = formatUtil.encodeHTML;
 	    var addCommas = formatUtil.addCommas;
@@ -7154,6 +7396,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	         */
 	        visualColorAccessPath: 'itemStyle.normal.color',
 
+	        /**
+	         * Support merge layout params.
+	         * Only support 'box' now (left/right/top/bottom/width/height).
+	         * @type {string|Object} Object can be {ignoreSize: true}
+	         * @readOnly
+	         */
+	        layoutMode: null,
+
 	        init: function (option, parentModel, ecModel, extraOpt) {
 
 	            /**
@@ -7184,6 +7434,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	         * @param  {module:echarts/model/Global} ecModel
 	         */
 	        mergeDefaultAndTheme: function (option, ecModel) {
+	            var layoutMode = this.layoutMode;
+	            var inputPositionParams = layoutMode
+	                ? layout.getLayoutParams(option) : {};
+
 	            zrUtil.merge(
 	                option,
 	                ecModel.getTheme().get(this.subType)
@@ -7195,12 +7449,21 @@ return /******/ (function(modules) { // webpackBootstrap
 	            modelUtil.defaultEmphasis(option.label, modelUtil.LABEL_OPTIONS);
 
 	            this.fillDataTextStyle(option.data);
+
+	            if (layoutMode) {
+	                layout.mergeLayoutParam(option, inputPositionParams, layoutMode);
+	            }
 	        },
 
 	        mergeOption: function (newSeriesOption, ecModel) {
 	            newSeriesOption = zrUtil.merge(this.option, newSeriesOption, true);
 	            this.fillDataTextStyle(newSeriesOption.data);
 
+	            var layoutMode = this.layoutMode;
+	            if (layoutMode) {
+	                layout.mergeLayoutParam(this.option, newSeriesOption, layoutMode);
+	            }
+
 	            var data = this.getInitialData(newSeriesOption, ecModel);
 	            // TODO Merge data?
 	            if (data) {
@@ -7309,7 +7572,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                        valStr = val + '';
 	                    }
 	                    else if (dimType === 'time') {
-	                        valStr = multipleSeries ? '' : formatUtil.formatTime('yyyy/mm/dd hh:mm:ss', val);
+	                        valStr = multipleSeries ? '' : formatUtil.formatTime('yyyy/MM/dd hh:mm:ss', val);
 	                    }
 	                    else {
 	                        valStr = addCommas(val);
@@ -7327,7 +7590,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	            var formattedValue = zrUtil.isArray(value)
 	                ? formatArrayValue(value) : addCommas(value);
 	            var name = data.getName(dataIndex);
+
 	            var color = data.getItemVisual(dataIndex, 'color');
+	            if (zrUtil.isObject(color) && color.colorStops) {
+	                color = (color.colorStops[0] || {}).color;
+	            }
+	            color = color || 'transparent';
+
 	            var colorEl = '<span style="display:inline-block;margin-right:5px;'
 	                + 'border-radius:10px;width:9px;height:9px;background-color:' + color + '"></span>';
 
@@ -7736,7 +8005,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	         */
 	        getBoundingRect: function (includeChildren) {
 	            // TODO Caching
-	            // TODO Transform
 	            var rect = null;
 	            var tmpRect = new BoundingRect(0, 0, 0, 0);
 	            var children = includeChildren || this._children;
@@ -7750,6 +8018,13 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	                var childRect = child.getBoundingRect();
 	                var transform = child.getLocalTransform(tmpMat);
+	                // TODO
+	                // The boundingRect cacluated by transforming original
+	                // rect may be bigger than the actual bundingRect when rotation
+	                // is used. (Consider a circle rotated aginst its center, where
+	                // the actual boundingRect should be the same as that not be
+	                // rotated.) But we can not find better approach to calculate
+	                // actual boundingRect yet, considering performance.
 	                if (transform) {
 	                    tmpRect.copy(childRect);
 	                    tmpRect.applyTransform(transform);
@@ -8325,6 +8600,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	     * @type {Function}
 	     * @default null
 	     */
+	    /**
+	     * @event module:zrender/mixin/Eventful#ondrag
+	     * @type {Function}
+	     * @default null
+	     */
 	    /**
 	     * @event module:zrender/mixin/Eventful#ondragstart
 	     * @type {Function}
@@ -10705,37 +10985,36 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var colorTool = __webpack_require__(39);
 	    var matrix = __webpack_require__(11);
 	    var vector = __webpack_require__(10);
-	    var Gradient = __webpack_require__(61);
 
 	    var graphic = {};
 
 	    graphic.Group = __webpack_require__(30);
 
-	    graphic.Image = __webpack_require__(62);
+	    graphic.Image = __webpack_require__(61);
 
-	    graphic.Text = __webpack_require__(64);
+	    graphic.Text = __webpack_require__(63);
 
-	    graphic.Circle = __webpack_require__(65);
+	    graphic.Circle = __webpack_require__(64);
 
-	    graphic.Sector = __webpack_require__(66);
+	    graphic.Sector = __webpack_require__(65);
 
-	    graphic.Ring = __webpack_require__(67);
+	    graphic.Ring = __webpack_require__(66);
 
-	    graphic.Polygon = __webpack_require__(68);
+	    graphic.Polygon = __webpack_require__(67);
 
-	    graphic.Polyline = __webpack_require__(72);
+	    graphic.Polyline = __webpack_require__(71);
 
-	    graphic.Rect = __webpack_require__(73);
+	    graphic.Rect = __webpack_require__(72);
 
-	    graphic.Line = __webpack_require__(75);
+	    graphic.Line = __webpack_require__(74);
 
-	    graphic.BezierCurve = __webpack_require__(76);
+	    graphic.BezierCurve = __webpack_require__(75);
 
-	    graphic.Arc = __webpack_require__(77);
+	    graphic.Arc = __webpack_require__(76);
 
-	    graphic.CompoundPath = __webpack_require__(78);
+	    graphic.CompoundPath = __webpack_require__(77);
 
-	    graphic.LinearGradient = __webpack_require__(79);
+	    graphic.LinearGradient = __webpack_require__(78);
 
 	    graphic.RadialGradient = __webpack_require__(80);
 
@@ -11007,7 +11286,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	    /**
 	     * @inner
 	     */
-	    function onElementMouseOver() {
+	    function onElementMouseOver(e) {
+	        if (this.__hoverSilentOnTouch && e.zrByTouch) {
+	            return;
+	        }
+
 	        // Only if element is not in emphasis status
 	        !this.__isEmphasis && doEnterHover(this);
 	    }
@@ -11015,7 +11298,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	    /**
 	     * @inner
 	     */
-	    function onElementMouseOut() {
+	    function onElementMouseOut(e) {
+	        if (this.__hoverSilentOnTouch && e.zrByTouch) {
+	            return;
+	        }
+
 	        // Only if element is not in emphasis status
 	        !this.__isEmphasis && doLeaveHover(this);
 	    }
@@ -11040,8 +11327,21 @@ return /******/ (function(modules) { // webpackBootstrap
 	     * Set hover style of element
 	     * @param {module:zrender/Element} el
 	     * @param {Object} [hoverStyle]
-	     */
-	    graphic.setHoverStyle = function (el, hoverStyle) {
+	     * @param {Object} [opt]
+	     * @param {boolean} [opt.hoverSilentOnTouch=false]
+	     *        In touch device, mouseover event will be trigger on touchstart event
+	     *        (see module:zrender/dom/HandlerProxy). By this mechanism, we can
+	     *        conviniently use hoverStyle when tap on touch screen without additional
+	     *        code for compatibility.
+	     *        But if the chart/component has select feature, which usually also use
+	     *        hoverStyle, there might be conflict between 'select-highlight' and
+	     *        'hover-highlight' especially when roam is enabled (see geo for example).
+	     *        In this case, hoverSilentOnTouch should be used to disable hover-highlight
+	     *        on touch device.
+	     */
+	    graphic.setHoverStyle = function (el, hoverStyle, opt) {
+	        el.__hoverSilentOnTouch = opt && opt.hoverSilentOnTouch;
+
 	        el.type === 'group'
 	            ? el.traverse(function (child) {
 	                if (child.type !== 'group') {
@@ -11049,7 +11349,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	                }
 	            })
 	            : setElementHoverStl(el, hoverStyle);
-	        // Remove previous bound handlers
+
+	        // Duplicated function will be auto-ignored, see Eventful.js.
 	        el.on('mouseover', onElementMouseOver)
 	          .on('mouseout', onElementMouseOut);
 
@@ -11798,7 +12099,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	            this.restoreTransform(ctx);
 
 	            // Draw rect text
-	            if (style.text || style.text === 0) {
+	            if (style.text != null) {
 	                // var rect = this.getBoundingRect();
 	                this.drawRectText(ctx, this.getBoundingRect());
 	            }
@@ -15100,37 +15401,6 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ },
 /* 61 */
-/***/ function(module, exports) {
-
-	
-
-	    /**
-	     * @param {Array.<Object>} colorStops
-	     */
-	    var Gradient = function (colorStops) {
-
-	        this.colorStops = colorStops || [];
-	    };
-
-	    Gradient.prototype = {
-
-	        constructor: Gradient,
-
-	        addColorStop: function (offset, color) {
-	            this.colorStops.push({
-
-	                offset: offset,
-
-	                color: color
-	            });
-	        }
-	    };
-
-	    module.exports = Gradient;
-
-
-/***/ },
-/* 62 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -15144,7 +15414,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var BoundingRect = __webpack_require__(9);
 	    var zrUtil = __webpack_require__(4);
 
-	    var LRU = __webpack_require__(63);
+	    var LRU = __webpack_require__(62);
 	    var globalImageCache = new LRU(50);
 	    /**
 	     * @alias zrender/graphic/Image
@@ -15291,7 +15561,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 63 */
+/* 62 */
 /***/ function(module, exports) {
 
 	// Simple LRU cache use doubly linked list
@@ -15466,7 +15736,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 64 */
+/* 63 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -15597,7 +15867,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 65 */
+/* 64 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -15634,7 +15904,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 66 */
+/* 65 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -15700,7 +15970,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 67 */
+/* 66 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -15734,7 +16004,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 68 */
+/* 67 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -15743,7 +16013,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	 */
 
 
-	    var polyHelper = __webpack_require__(69);
+	    var polyHelper = __webpack_require__(68);
 
 	    module.exports = __webpack_require__(45).extend({
 	        
@@ -15764,13 +16034,13 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 69 */
+/* 68 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
 
-	    var smoothSpline = __webpack_require__(70);
-	    var smoothBezier = __webpack_require__(71);
+	    var smoothSpline = __webpack_require__(69);
+	    var smoothBezier = __webpack_require__(70);
 
 	    module.exports = {
 	        buildPath: function (ctx, shape, closePath) {
@@ -15811,7 +16081,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 70 */
+/* 69 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -15887,7 +16157,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 71 */
+/* 70 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -15994,7 +16264,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 72 */
+/* 71 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -16002,7 +16272,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	 */
 
 
-	    var polyHelper = __webpack_require__(69);
+	    var polyHelper = __webpack_require__(68);
 
 	    module.exports = __webpack_require__(45).extend({
 	        
@@ -16029,7 +16299,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 73 */
+/* 72 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -16038,7 +16308,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	 */
 
 
-	    var roundRectHelper = __webpack_require__(74);
+	    var roundRectHelper = __webpack_require__(73);
 
 	    module.exports = __webpack_require__(45).extend({
 
@@ -16077,7 +16347,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 74 */
+/* 73 */
 /***/ function(module, exports) {
 
 	
@@ -16172,7 +16442,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 75 */
+/* 74 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -16237,7 +16507,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 76 */
+/* 75 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -16378,7 +16648,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 77 */
+/* 76 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -16432,7 +16702,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 78 */
+/* 77 */
 /***/ function(module, exports, __webpack_require__) {
 
 	// CompoundPath to improve performance
@@ -16491,7 +16761,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 79 */
+/* 78 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -16499,7 +16769,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var zrUtil = __webpack_require__(4);
 
-	    var Gradient = __webpack_require__(61);
+	    var Gradient = __webpack_require__(79);
 
 	    /**
 	     * x, y, x2, y2 are all percent from 0 to 1
@@ -16530,61 +16800,240 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    LinearGradient.prototype = {
 
-	        constructor: LinearGradient
-	    };
+	        constructor: LinearGradient
+	    };
+
+	    zrUtil.inherits(LinearGradient, Gradient);
+
+	    module.exports = LinearGradient;
+
+
+/***/ },
+/* 79 */
+/***/ function(module, exports) {
+
+	
+
+	    /**
+	     * @param {Array.<Object>} colorStops
+	     */
+	    var Gradient = function (colorStops) {
+
+	        this.colorStops = colorStops || [];
+	    };
+
+	    Gradient.prototype = {
+
+	        constructor: Gradient,
+
+	        addColorStop: function (offset, color) {
+	            this.colorStops.push({
+
+	                offset: offset,
+
+	                color: color
+	            });
+	        }
+	    };
+
+	    module.exports = Gradient;
+
+
+/***/ },
+/* 80 */
+/***/ function(module, exports, __webpack_require__) {
+
+	'use strict';
+
+
+	    var zrUtil = __webpack_require__(4);
+
+	    var Gradient = __webpack_require__(79);
+
+	    /**
+	     * x, y, r are all percent from 0 to 1
+	     * @param {number} [x=0.5]
+	     * @param {number} [y=0.5]
+	     * @param {number} [r=0.5]
+	     * @param {Array.<Object>} [colorStops]
+	     * @param {boolean} [globalCoord=false]
+	     */
+	    var RadialGradient = function (x, y, r, colorStops, globalCoord) {
+	        this.x = x == null ? 0.5 : x;
+
+	        this.y = y == null ? 0.5 : y;
+
+	        this.r = r == null ? 0.5 : r;
+
+	        // Can be cloned
+	        this.type = 'radial';
+
+	        // If use global coord
+	        this.global = globalCoord || false;
+
+	        Gradient.call(this, colorStops);
+	    };
+
+	    RadialGradient.prototype = {
+
+	        constructor: RadialGradient
+	    };
+
+	    zrUtil.inherits(RadialGradient, Gradient);
+
+	    module.exports = RadialGradient;
+
+
+/***/ },
+/* 81 */
+/***/ function(module, exports) {
+
+	
+
+	    var lib = {};
+
+	    var ORIGIN_METHOD = '\0__throttleOriginMethod';
+	    var RATE = '\0__throttleRate';
+	    var THROTTLE_TYPE = '\0__throttleType';
+
+	    /**
+	     * @public
+	     * @param {(Function)} fn
+	     * @param {number} [delay=0] Unit: ms.
+	     * @param {boolean} [debounce=false]
+	     *        true: If call interval less than `delay`, only the last call works.
+	     *        false: If call interval less than `delay, call works on fixed rate.
+	     * @return {(Function)} throttled fn.
+	     */
+	    lib.throttle = function (fn, delay, debounce) {
+
+	        var currCall;
+	        var lastCall = 0;
+	        var lastExec = 0;
+	        var timer = null;
+	        var diff;
+	        var scope;
+	        var args;
 
-	    zrUtil.inherits(LinearGradient, Gradient);
+	        delay = delay || 0;
 
-	    module.exports = LinearGradient;
+	        function exec() {
+	            lastExec = (new Date()).getTime();
+	            timer = null;
+	            fn.apply(scope, args || []);
+	        }
 
+	        var cb = function () {
+	            currCall = (new Date()).getTime();
+	            scope = this;
+	            args = arguments;
+	            diff = currCall - (debounce ? lastCall : lastExec) - delay;
 
-/***/ },
-/* 80 */
-/***/ function(module, exports, __webpack_require__) {
+	            clearTimeout(timer);
 
-	'use strict';
+	            if (debounce) {
+	                timer = setTimeout(exec, delay);
+	            }
+	            else {
+	                if (diff >= 0) {
+	                    exec();
+	                }
+	                else {
+	                    timer = setTimeout(exec, -diff);
+	                }
+	            }
 
+	            lastCall = currCall;
+	        };
 
-	    var zrUtil = __webpack_require__(4);
+	        /**
+	         * Clear throttle.
+	         * @public
+	         */
+	        cb.clear = function () {
+	            if (timer) {
+	                clearTimeout(timer);
+	                timer = null;
+	            }
+	        };
 
-	    var Gradient = __webpack_require__(61);
+	        return cb;
+	    };
 
 	    /**
-	     * x, y, r are all percent from 0 to 1
-	     * @param {number} [x=0.5]
-	     * @param {number} [y=0.5]
-	     * @param {number} [r=0.5]
-	     * @param {Array.<Object>} [colorStops]
-	     * @param {boolean} [globalCoord=false]
+	     * Create throttle method or update throttle rate.
+	     *
+	     * @example
+	     * ComponentView.prototype.render = function () {
+	     *     ...
+	     *     throttle.createOrUpdate(
+	     *         this,
+	     *         '_dispatchAction',
+	     *         this.model.get('throttle'),
+	     *         'fixRate'
+	     *     );
+	     * };
+	     * ComponentView.prototype.remove = function () {
+	     *     throttle.clear(this, '_dispatchAction');
+	     * };
+	     * ComponentView.prototype.dispose = function () {
+	     *     throttle.clear(this, '_dispatchAction');
+	     * };
+	     *
+	     * @public
+	     * @param {Object} obj
+	     * @param {string} fnAttr
+	     * @param {number} [rate]
+	     * @param {string} [throttleType='fixRate'] 'fixRate' or 'debounce'
+	     * @return {Function} throttled function.
 	     */
-	    var RadialGradient = function (x, y, r, colorStops, globalCoord) {
-	        this.x = x == null ? 0.5 : x;
+	    lib.createOrUpdate = function (obj, fnAttr, rate, throttleType) {
+	        var fn = obj[fnAttr];
 
-	        this.y = y == null ? 0.5 : y;
+	        if (!fn) {
+	            return;
+	        }
 
-	        this.r = r == null ? 0.5 : r;
+	        var originFn = fn[ORIGIN_METHOD] || fn;
+	        var lastThrottleType = fn[THROTTLE_TYPE];
+	        var lastRate = fn[RATE];
 
-	        // Can be cloned
-	        this.type = 'radial';
+	        if (lastRate !== rate || lastThrottleType !== throttleType) {
+	            if (rate == null || !throttleType) {
+	                return (obj[fnAttr] = originFn);
+	            }
 
-	        // If use global coord
-	        this.global = globalCoord || false;
+	            fn = obj[fnAttr] = lib.throttle(
+	                originFn, rate, throttleType === 'debounce'
+	            );
+	            fn[ORIGIN_METHOD] = originFn;
+	            fn[THROTTLE_TYPE] = throttleType;
+	            fn[RATE] = rate;
+	        }
 
-	        Gradient.call(this, colorStops);
+	        return fn;
 	    };
 
-	    RadialGradient.prototype = {
-
-	        constructor: RadialGradient
+	    /**
+	     * Clear throttle. Example see throttle.createOrUpdate.
+	     *
+	     * @public
+	     * @param {Object} obj
+	     * @param {string} fnAttr
+	     */
+	    lib.clear = function (obj, fnAttr) {
+	        var fn = obj[fnAttr];
+	        if (fn && fn[ORIGIN_METHOD]) {
+	            obj[fnAttr] = fn[ORIGIN_METHOD];
+	        }
 	    };
 
-	    zrUtil.inherits(RadialGradient, Gradient);
+	    module.exports = lib;
 
-	    module.exports = RadialGradient;
 
 
 /***/ },
-/* 81 */
+/* 82 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/*!
@@ -16600,16 +17049,17 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var guid = __webpack_require__(32);
 	    var env = __webpack_require__(2);
+	    var zrUtil = __webpack_require__(4);
 
-	    var Handler = __webpack_require__(82);
-	    var Storage = __webpack_require__(84);
-	    var Animation = __webpack_require__(86);
-	    var HandlerProxy = __webpack_require__(89);
+	    var Handler = __webpack_require__(83);
+	    var Storage = __webpack_require__(85);
+	    var Animation = __webpack_require__(87);
+	    var HandlerProxy = __webpack_require__(90);
 
 	    var useVML = !env.canvasSupported;
 
 	    var painterCtors = {
-	        canvas: __webpack_require__(91)
+	        canvas: __webpack_require__(92)
 	    };
 
 	    var instances = {};    // ZRender实例map索引
@@ -16619,7 +17069,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    /**
 	     * @type {string}
 	     */
-	    zrender.version = '3.2.0';
+	    zrender.version = '3.2.2';
 
 	    /**
 	     * Initializing a zrender instance
@@ -16728,14 +17178,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	         */
 	        this.animation = new Animation({
 	            stage: {
-	                update: function () {
-	                    if (self._needsRefresh) {
-	                        self.refreshImmediately();
-	                    }
-	                    if (self._needsRefreshHover) {
-	                        self.refreshHoverImmediately();
-	                    }
-	                }
+	                update: zrUtil.bind(this.flush, this)
 	            }
 	        });
 	        this.animation.start();
@@ -16829,6 +17272,18 @@ return /******/ (function(modules) { // webpackBootstrap
 	            this._needsRefresh = true;
 	        },
 
+	        /**
+	         * Perform all refresh
+	         */
+	        flush: function () {
+	            if (this._needsRefresh) {
+	                this.refreshImmediately();
+	            }
+	            if (this._needsRefreshHover) {
+	                this.refreshHoverImmediately();
+	            }
+	        },
+
 	        /**
 	         * Add element to hover layer
 	         * @param  {module:zrender/Element} el
@@ -17008,7 +17463,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 82 */
+/* 83 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -17022,7 +17477,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 	    var util = __webpack_require__(4);
-	    var Draggable = __webpack_require__(83);
+	    var Draggable = __webpack_require__(84);
 
 	    var Eventful = __webpack_require__(33);
 
@@ -17038,7 +17493,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	            pinchX: event.pinchX,
 	            pinchY: event.pinchY,
 	            pinchScale: event.pinchScale,
-	            wheelDelta: event.zrDelta
+	            wheelDelta: event.zrDelta,
+	            zrByTouch: event.zrByTouch
 	        };
 	    }
 
@@ -17308,7 +17764,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 83 */
+/* 84 */
 /***/ function(module, exports) {
 
 	// TODO Draggable for group
@@ -17396,7 +17852,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 84 */
+/* 85 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -17416,7 +17872,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    // Use timsort because in most case elements are partially sorted
 	    // https://jsfiddle.net/pissang/jr4x7mdm/8/
-	    var timsort = __webpack_require__(85);
+	    var timsort = __webpack_require__(86);
 
 	    function shapeCompareFunc(a, b) {
 	        if (a.zlevel === b.zlevel) {
@@ -17670,7 +18126,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 85 */
+/* 86 */
 /***/ function(module, exports) {
 
 	// https://github.com/mziccard/node-timsort
@@ -18351,7 +18807,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 86 */
+/* 87 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -18367,9 +18823,9 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 	    var util = __webpack_require__(4);
-	    var Dispatcher = __webpack_require__(87).Dispatcher;
+	    var Dispatcher = __webpack_require__(88).Dispatcher;
 
-	    var requestAnimationFrame = __webpack_require__(88);
+	    var requestAnimationFrame = __webpack_require__(89);
 
 	    var Animator = __webpack_require__(36);
 	    /**
@@ -18608,7 +19064,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 87 */
+/* 88 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -18629,7 +19085,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	        return el.getBoundingClientRect ? el.getBoundingClientRect() : {left: 0, top: 0};
 	    }
 
-	    function clientToLocal(el, e, out) {
+	    // `calculate` is optional, default false
+	    function clientToLocal(el, e, out, calculate) {
+	        out = out || {};
+
 	        // According to the W3C Working Draft, offsetX and offsetY should be relative
 	        // to the padding edge of the target element. The only browser using this convention
 	        // is IE. Webkit uses the border edge, Opera uses the content edge, and FireFox does
@@ -18641,8 +19100,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        // When mousemove event triggered on ec tooltip, target is not zr painter.dom, and
 	        // offsetX/Y is relative to e.target, where the calculation of zrX/Y via offsetX/Y
 	        // is too complex. So css-transfrom dont support in this case temporarily.
-
-	        if (!e.currentTarget || el !== e.currentTarget) {
+	        if (calculate || !env.canvasSupported) {
 	            defaultGetZrXY(el, e, out);
 	        }
 	        // Caution: In FireFox, layerX/layerY Mouse position relative to the closest positioned
@@ -18672,15 +19130,15 @@ return /******/ (function(modules) { // webpackBootstrap
 	    function defaultGetZrXY(el, e, out) {
 	        // This well-known method below does not support css transform.
 	        var box = getBoundingClientRect(el);
-	        out = out || {};
 	        out.zrX = e.clientX - box.left;
 	        out.zrY = e.clientY - box.top;
 	    }
 
 	    /**
-	     * 如果存在第三方嵌入的一些dom触发的事件，或touch事件，需要转换一下事件坐标
+	     * 如果存在第三方嵌入的一些dom触发的事件，或touch事件，需要转换一下事件坐标.
+	     * `calculate` is optional, default false.
 	     */
-	    function normalizeEvent(el, e) {
+	    function normalizeEvent(el, e, calculate) {
 
 	        e = e || window.event;
 
@@ -18692,14 +19150,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	        var isTouch = eventType && eventType.indexOf('touch') >= 0;
 
 	        if (!isTouch) {
-	            clientToLocal(el, e, e);
+	            clientToLocal(el, e, e, calculate);
 	            e.zrDelta = (e.wheelDelta) ? e.wheelDelta / 120 : -(e.detail || 0) / 3;
 	        }
 	        else {
 	            var touch = eventType != 'touchend'
 	                ? e.targetTouches[0]
 	                : e.changedTouches[0];
-	            touch && clientToLocal(el, touch, e);
+	            touch && clientToLocal(el, touch, e, calculate);
 	        }
 
 	        return e;
@@ -18754,7 +19212,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 88 */
+/* 89 */
 /***/ function(module, exports) {
 
 	
@@ -18771,16 +19229,16 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 89 */
+/* 90 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
 
-	    var eventTool = __webpack_require__(87);
+	    var eventTool = __webpack_require__(88);
 	    var zrUtil = __webpack_require__(4);
 	    var Eventful = __webpack_require__(33);
 	    var env = __webpack_require__(2);
-	    var GestureMgr = __webpack_require__(90);
+	    var GestureMgr = __webpack_require__(91);
 
 	    var addEventListener = eventTool.addEventListener;
 	    var removeEventListener = eventTool.removeEventListener;
@@ -18888,13 +19346,16 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	            event = normalizeEvent(this.dom, event);
 
+	            // Mark touch, which is useful in distinguish touch and
+	            // mouse event in upper applicatoin.
+	            event.zrByTouch = true;
+
 	            this._lastTouchMoment = new Date();
 
 	            processGesture(this, event, 'start');
 
-	            // 平板补充一次findHover
-	            // this._mobileFindFixed(event);
-	            // Trigger mousemove and mousedown
+	            // In touch device, trigger `mousemove`(`mouseover`) should
+	            // be triggered.
 	            domHandlers.mousemove.call(this, event);
 
 	            domHandlers.mousedown.call(this, event);
@@ -18911,6 +19372,10 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	            event = normalizeEvent(this.dom, event);
 
+	            // Mark touch, which is useful in distinguish touch and
+	            // mouse event in upper applicatoin.
+	            event.zrByTouch = true;
+
 	            processGesture(this, event, 'change');
 
 	            // Mouse move should always be triggered no matter whether
@@ -18930,10 +19395,22 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	            event = normalizeEvent(this.dom, event);
 
+	            // Mark touch, which is useful in distinguish touch and
+	            // mouse event in upper applicatoin.
+	            event.zrByTouch = true;
+
 	            processGesture(this, event, 'end');
 
 	            domHandlers.mouseup.call(this, event);
 
+	            // Do not trigger `mouseout` here, in spite of `mousemove`(`mouseover`) is
+	            // triggered in `touchstart`. This seems to be illogical, but by this mechanism,
+	            // we can conveniently implement "hover style" in both PC and touch device just
+	            // by listening to `mouseover` to add "hover style" and listening to `mouseout`
+	            // to remove "hover style" on an element, without any additional code for
+	            // compatibility. (`mouseout` will not be triggered in `touchend`, so "hover
+	            // style" will remain for user view)
+
 	            // click event should always be triggered no matter whether
 	            // there is gestrue event. System click can not be prevented.
 	            if (+new Date() - this._lastTouchMoment < TOUCH_CLICK_DELAY) {
@@ -19046,7 +19523,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 90 */
+/* 91 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -19055,7 +19532,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	 */
 
 
-	    var eventUtil = __webpack_require__(87);
+	    var eventUtil = __webpack_require__(88);
 
 	    var GestureMgr = function () {
 
@@ -19096,7 +19573,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	            for (var i = 0, len = touches.length; i < len; i++) {
 	                var touch = touches[i];
-	                var pos = eventUtil.clientToLocal(root, touch);
+	                var pos = eventUtil.clientToLocal(root, touch, {});
 	                trackItem.points.push([pos.zrX, pos.zrY]);
 	                trackItem.touches.push(touch);
 	            }
@@ -19172,7 +19649,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 91 */
+/* 92 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -19189,11 +19666,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var util = __webpack_require__(4);
 	    var log = __webpack_require__(40);
 	    var BoundingRect = __webpack_require__(9);
-	    var timsort = __webpack_require__(85);
+	    var timsort = __webpack_require__(86);
 
-	    var Layer = __webpack_require__(92);
+	    var Layer = __webpack_require__(93);
 
-	    var requestAnimationFrame = __webpack_require__(88);
+	    var requestAnimationFrame = __webpack_require__(89);
 
 	    // PENDIGN
 	    // Layer exceeds MAX_PROGRESSIVE_LAYER_NUMBER may have some problem when flush directly second time.
@@ -20201,7 +20678,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                path.brush(ctx);
 	            }
 
-	            var ImageShape = __webpack_require__(62);
+	            var ImageShape = __webpack_require__(61);
 	            var imgShape = new ImageShape({
 	                id: id,
 	                style: {
@@ -20242,7 +20719,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 92 */
+/* 93 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -20477,11 +20954,11 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 93 */
+/* 94 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
-	    var Gradient = __webpack_require__(61);
+	    var Gradient = __webpack_require__(79);
 	    module.exports = function (ecModel) {
 	        function encodeColor(seriesModel) {
 	            var colorAccessPath = (seriesModel.visualColorAccessPath || 'itemStyle.normal.color').split('.');
@@ -20517,14 +20994,14 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 94 */
+/* 95 */
 /***/ function(module, exports, __webpack_require__) {
 
 	// Compatitable with 2.0
 
 
 	    var zrUtil = __webpack_require__(4);
-	    var compatStyle = __webpack_require__(95);
+	    var compatStyle = __webpack_require__(96);
 
 	    function get(opt, path) {
 	        path = path.split(',');
@@ -20627,7 +21104,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 95 */
+/* 96 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
@@ -20708,7 +21185,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 96 */
+/* 97 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
@@ -20811,7 +21288,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 97 */
+/* 98 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/* WEBPACK VAR INJECTION */(function(global) {/**
@@ -20837,7 +21314,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    };
 
 	    var Model = __webpack_require__(12);
-	    var DataDiffer = __webpack_require__(98);
+	    var DataDiffer = __webpack_require__(99);
 
 	    var zrUtil = __webpack_require__(4);
 	    var modelUtil = __webpack_require__(5);
@@ -21703,11 +22180,19 @@ return /******/ (function(modules) { // webpackBootstrap
 	    listProto.diff = function (otherList) {
 	        var idList = this._idList;
 	        var otherIdList = otherList && otherList._idList;
+	        var val;
+	        // Use prefix to avoid index to be the same as otherIdList[idx],
+	        // which will cause weird udpate animation.
+	        var prefix = 'e\0\0';
+
 	        return new DataDiffer(
-	            otherList ? otherList.indices : [], this.indices, function (idx) {
-	                return otherIdList[idx] || (idx + '');
-	            }, function (idx) {
-	                return idList[idx] || (idx + '');
+	            otherList ? otherList.indices : [],
+	            this.indices,
+	            function (idx) {
+	                return (val = otherIdList[idx]) != null ? val : prefix + idx;
+	            },
+	            function (idx) {
+	                return (val = idList[idx]) != null ? val : prefix + idx;
 	            }
 	        );
 	    };
@@ -21949,7 +22434,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	/* WEBPACK VAR INJECTION */}.call(exports, (function() { return this; }())))
 
 /***/ },
-/* 98 */
+/* 99 */
 /***/ function(module, exports) {
 
 	'use strict';
@@ -22078,7 +22563,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 99 */
+/* 100 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
@@ -22087,33 +22572,33 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var echarts = __webpack_require__(1);
 	    var PRIORITY = echarts.PRIORITY;
 
-	    __webpack_require__(100);
-	    __webpack_require__(103);
+	    __webpack_require__(101);
+	    __webpack_require__(104);
 
 	    echarts.registerVisual(zrUtil.curry(
-	        __webpack_require__(109), 'line', 'circle', 'line'
+	        __webpack_require__(110), 'line', 'circle', 'line'
 	    ));
 	    echarts.registerLayout(zrUtil.curry(
-	        __webpack_require__(110), 'line'
+	        __webpack_require__(111), 'line'
 	    ));
 
 	    // Down sample after filter
 	    echarts.registerProcessor(PRIORITY.PROCESSOR.STATISTIC, zrUtil.curry(
-	        __webpack_require__(111), 'line'
+	        __webpack_require__(112), 'line'
 	    ));
 
 	    // In case developer forget to include grid component
-	    __webpack_require__(112);
+	    __webpack_require__(113);
 
 
 /***/ },
-/* 100 */
+/* 101 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
 
 
-	    var createListFromArray = __webpack_require__(101);
+	    var createListFromArray = __webpack_require__(102);
 	    var SeriesModel = __webpack_require__(28);
 
 	    module.exports = SeriesModel.extend({
@@ -22198,14 +22683,14 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 101 */
+/* 102 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
 
 
-	    var List = __webpack_require__(97);
-	    var completeDimensions = __webpack_require__(102);
+	    var List = __webpack_require__(98);
+	    var completeDimensions = __webpack_require__(103);
 	    var zrUtil = __webpack_require__(4);
 	    var modelUtil = __webpack_require__(5);
 	    var CoordinateSystem = __webpack_require__(26);
@@ -22484,7 +22969,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 102 */
+/* 103 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -22554,7 +23039,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 103 */
+/* 104 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -22562,14 +23047,12 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 	    var zrUtil = __webpack_require__(4);
-	    var SymbolDraw = __webpack_require__(104);
-	    var Symbol = __webpack_require__(105);
-	    var lineAnimationDiff = __webpack_require__(107);
+	    var SymbolDraw = __webpack_require__(105);
+	    var Symbol = __webpack_require__(106);
+	    var lineAnimationDiff = __webpack_require__(108);
 	    var graphic = __webpack_require__(43);
 	    var modelUtil = __webpack_require__(5);
-
-	    var polyHelper = __webpack_require__(108);
-
+	    var polyHelper = __webpack_require__(109);
 	    var ChartView = __webpack_require__(42);
 
 	    function isPointsSame(points1, points2) {
@@ -22762,10 +23245,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	        return stepPoints;
 	    }
 
-	    function clamp(number, extent) {
-	        return Math.max(Math.min(number, extent[1]), extent[0]);
-	    }
-
 	    function getVisualGradient(data, coordSys) {
 	        var visualMetaList = data.getVisual('visualMeta');
 	        if (!visualMetaList || !visualMetaList.length || !data.count()) {
@@ -22788,72 +23267,61 @@ return /******/ (function(modules) { // webpackBootstrap
 	            return;
 	        }
 
+	        // If the area to be rendered is bigger than area defined by LinearGradient,
+	        // the canvas spec prescribes that the color of the first stop and the last
+	        // stop should be used. But if two stops are added at offset 0, in effect
+	        // browsers use the color of the second stop to render area outside
+	        // LinearGradient. So we can only infinitesimally extend area defined in
+	        // LinearGradient to render `outerColors`.
+
 	        var dimension = visualMeta.dimension;
 	        var dimName = data.dimensions[dimension];
-	        var dataExtent = data.getDataExtent(dimName);
+	        var axis = coordSys.getAxis(dimName);
 
-	        var stops = visualMeta.stops;
+	        // dataToCoor mapping may not be linear, but must be monotonic.
+	        var colorStops = zrUtil.map(visualMeta.stops, function (stop) {
+	            return {
+	                coord: axis.toGlobalCoord(axis.dataToCoord(stop.value)),
+	                color: stop.color
+	            };
+	        });
+	        var stopLen = colorStops.length;
+	        var outerColors = visualMeta.outerColors.slice();
 
-	        var colorStops = [];
-	        if (stops[0].interval) {
-	            stops.sort(function (a, b) {
-	                return a.interval[0] - b.interval[0];
-	            });
+	        if (stopLen && colorStops[0].coord > colorStops[stopLen - 1].coord) {
+	            colorStops.reverse();
+	            outerColors.reverse();
 	        }
 
-	        var firstStop = stops[0];
-	        var lastStop = stops[stops.length - 1];
-	        // Interval can be infinity in piecewise case
-	        var min = firstStop.interval ? clamp(firstStop.interval[0], dataExtent) : firstStop.value;
-	        var max = lastStop.interval ? clamp(lastStop.interval[1], dataExtent) : lastStop.value;
-	        var stopsSpan = max - min;
+	        var tinyExtent = 10; // Arbitrary value: 10px
+	        var minCoord = colorStops[0].coord - tinyExtent;
+	        var maxCoord = colorStops[stopLen - 1].coord + tinyExtent;
+	        var coordSpan = maxCoord - minCoord;
 
-	        // In the piecewise case data out of visual range
-	        // ----dataMin----dataMax-----visualMin----visualMax
-	        if (stopsSpan === 0) {
-	            return data.getItemVisual(0, 'color');
-	        }
-	        for (var i = 0; i < stops.length; i++) {
-	            // Piecewise
-	            if (stops[i].interval) {
-	                if (stops[i].interval[1] === stops[i].interval[0]) {
-	                    continue;
-	                }
-	                colorStops.push({
-	                    // Make sure offset is between 0 and 1
-	                    offset: (clamp(stops[i].interval[0], dataExtent) - min) / stopsSpan,
-	                    color: stops[i].color
-	                }, {
-	                    offset: (clamp(stops[i].interval[1], dataExtent) - min) / stopsSpan,
-	                    color: stops[i].color
-	                });
-	            }
-	            // Continous
-	            else {
-	                // if (i > 0 && stops[i].value === stops[i - 1].value) {
-	                //     continue;
-	                // }
-	                colorStops.push({
-	                    offset: (stops[i].value - min) / stopsSpan,
-	                    color: stops[i].color
-	                });
-	            }
+	        if (coordSpan < 1e-3) {
+	            return 'transparent';
 	        }
 
-	        var gradient = new graphic.LinearGradient(
-	            0, 0, 0, 0, colorStops, true
-	        );
-	        var axis = coordSys.getAxis(dimName);
+	        zrUtil.each(colorStops, function (stop) {
+	            stop.offset = (stop.coord - minCoord) / coordSpan;
+	        });
+	        colorStops.push({
+	            offset: stopLen ? colorStops[stopLen - 1].offset : 0.5,
+	            color: outerColors[1] || 'transparent'
+	        });
+	        colorStops.unshift({ // notice colorStops.length have been changed.
+	            offset: stopLen ? colorStops[0].offset : 0.5,
+	            color: outerColors[0] || 'transparent'
+	        });
 
-	        var start = axis.toGlobalCoord(axis.dataToCoord(min));
-	        var end = axis.toGlobalCoord(axis.dataToCoord(max));
 	        // zrUtil.each(colorStops, function (colorStop) {
 	        //     // Make sure each offset has rounded px to avoid not sharp edge
 	        //     colorStop.offset = (Math.round(colorStop.offset * (end - start) + start) - start) / (end - start);
 	        // });
 
-	        gradient[dimName] = start;
-	        gradient[dimName + '2'] = end;
+	        var gradient = new graphic.LinearGradient(0, 0, 0, 0, colorStops, true);
+	        gradient[dimName] = minCoord;
+	        gradient[dimName + '2'] = maxCoord;
 
 	        return gradient;
 	    }
@@ -23060,6 +23528,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	                if (!symbol) {
 	                    // Create a temporary symbol if it is not exists
 	                    var pt = data.getItemLayout(dataIndex);
+	                    if (!pt) {
+	                        // Null data
+	                        return;
+	                    }
 	                    symbol = new Symbol(data, dataIndex);
 	                    symbol.position = pt;
 	                    symbol.setZ(
@@ -23273,7 +23745,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 104 */
+/* 105 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -23282,7 +23754,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 	    var graphic = __webpack_require__(43);
-	    var Symbol = __webpack_require__(105);
+	    var Symbol = __webpack_require__(106);
 
 	    /**
 	     * @constructor
@@ -23405,7 +23877,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 105 */
+/* 106 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -23414,7 +23886,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 	    var zrUtil = __webpack_require__(4);
-	    var symbolUtil = __webpack_require__(106);
+	    var symbolUtil = __webpack_require__(107);
 	    var graphic = __webpack_require__(43);
 	    var numberUtil = __webpack_require__(7);
 
@@ -23708,7 +24180,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 106 */
+/* 107 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -24068,7 +24540,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 107 */
+/* 108 */
 /***/ function(module, exports) {
 
 	
@@ -24282,7 +24754,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 108 */
+/* 109 */
 /***/ function(module, exports, __webpack_require__) {
 
 	// Poly path support NaN point
@@ -24537,7 +25009,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 109 */
+/* 110 */
 /***/ function(module, exports) {
 
 	
@@ -24586,7 +25058,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 110 */
+/* 111 */
 /***/ function(module, exports) {
 
 	
@@ -24619,7 +25091,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 111 */
+/* 112 */
 /***/ function(module, exports) {
 
 	
@@ -24702,7 +25174,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 112 */
+/* 113 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -24712,9 +25184,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var zrUtil = __webpack_require__(4);
 	    var echarts = __webpack_require__(1);
 
-	    __webpack_require__(113);
+	    __webpack_require__(114);
 
-	    __webpack_require__(131);
+	    __webpack_require__(132);
 
 	    // Grid view
 	    echarts.extendComponentView({
@@ -24746,7 +25218,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 113 */
+/* 114 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -24757,11 +25229,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	var factory = exports;
 
 	    var layout = __webpack_require__(21);
-	    var axisHelper = __webpack_require__(114);
+	    var axisHelper = __webpack_require__(115);
 
 	    var zrUtil = __webpack_require__(4);
-	    var Cartesian2D = __webpack_require__(120);
-	    var Axis2D = __webpack_require__(122);
+	    var Cartesian2D = __webpack_require__(121);
+	    var Axis2D = __webpack_require__(123);
 
 	    var each = zrUtil.each;
 
@@ -24769,7 +25241,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var niceScaleExtent = axisHelper.niceScaleExtent;
 
 	    // 依赖 GridModel, AxisModel 做预处理
-	    __webpack_require__(125);
+	    __webpack_require__(126);
 
 	    /**
 	     * Check if the axis is used in the specified grid
@@ -24782,6 +25254,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    function getLabelUnionRect(axis) {
 	        var axisModel = axis.model;
 	        var labels = axisModel.getFormattedLabels();
+	        var textStyleModel = axisModel.getModel('axisLabel.textStyle');
 	        var rect;
 	        var step = 1;
 	        var labelCount = labels.length;
@@ -24791,7 +25264,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        }
 	        for (var i = 0; i < labelCount; i += step) {
 	            if (!axis.isLabelIgnored(i)) {
-	                var singleRect = axisModel.getTextRect(labels[i]);
+	                var singleRect = textStyleModel.getTextRect(labels[i]);
 	                // FIXME consider label rotate
 	                rect ? rect.union(singleRect) : (rect = singleRect);
 	            }
@@ -25314,16 +25787,16 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 114 */
+/* 115 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
 
-	    var OrdinalScale = __webpack_require__(115);
-	    var IntervalScale = __webpack_require__(117);
-	    __webpack_require__(118);
+	    var OrdinalScale = __webpack_require__(116);
+	    var IntervalScale = __webpack_require__(118);
 	    __webpack_require__(119);
-	    var Scale = __webpack_require__(116);
+	    __webpack_require__(120);
+	    var Scale = __webpack_require__(117);
 
 	    var numberUtil = __webpack_require__(7);
 	    var zrUtil = __webpack_require__(4);
@@ -25530,9 +26003,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	        if (typeof labelFormatter === 'string') {
 	            labelFormatter = (function (tpl) {
 	                return function (val) {
-	                    return tpl.replace('{value}', val);
+	                    return tpl.replace('{value}', val != null ? val : '');
 	                };
 	            })(labelFormatter);
+	            // Consider empty array
 	            return zrUtil.map(labels, labelFormatter);
 	        }
 	        else if (typeof labelFormatter === 'function') {
@@ -25552,7 +26026,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 115 */
+/* 116 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -25566,7 +26040,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 	    var zrUtil = __webpack_require__(4);
-	    var Scale = __webpack_require__(116);
+	    var Scale = __webpack_require__(117);
 
 	    var scaleProto = Scale.prototype;
 
@@ -25652,7 +26126,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 116 */
+/* 117 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -25780,7 +26254,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 117 */
+/* 118 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -25792,7 +26266,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var numberUtil = __webpack_require__(7);
 	    var formatUtil = __webpack_require__(6);
-	    var Scale = __webpack_require__(116);
+	    var Scale = __webpack_require__(117);
 
 	    var mathFloor = Math.floor;
 	    var mathCeil = Math.ceil;
@@ -26014,7 +26488,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 118 */
+/* 119 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -26028,7 +26502,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var numberUtil = __webpack_require__(7);
 	    var formatUtil = __webpack_require__(6);
 
-	    var IntervalScale = __webpack_require__(117);
+	    var IntervalScale = __webpack_require__(118);
 
 	    var intervalScaleProto = IntervalScale.prototype;
 
@@ -26180,7 +26654,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 119 */
+/* 120 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -26190,11 +26664,11 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 	    var zrUtil = __webpack_require__(4);
-	    var Scale = __webpack_require__(116);
+	    var Scale = __webpack_require__(117);
 	    var numberUtil = __webpack_require__(7);
 
 	    // Use some method of IntervalScale
-	    var IntervalScale = __webpack_require__(117);
+	    var IntervalScale = __webpack_require__(118);
 
 	    var scaleProto = Scale.prototype;
 	    var intervalScaleProto = IntervalScale.prototype;
@@ -26367,14 +26841,14 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 120 */
+/* 121 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
 
 
 	    var zrUtil = __webpack_require__(4);
-	    var Cartesian = __webpack_require__(121);
+	    var Cartesian = __webpack_require__(122);
 
 	    function Cartesian2D(name) {
 
@@ -26483,7 +26957,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 121 */
+/* 122 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -26601,14 +27075,14 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 122 */
+/* 123 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
 
 	    var zrUtil = __webpack_require__(4);
-	    var Axis = __webpack_require__(123);
-	    var axisLabelInterval = __webpack_require__(124);
+	    var Axis = __webpack_require__(124);
+	    var axisLabelInterval = __webpack_require__(125);
 
 	    /**
 	     * Extend axis 2d
@@ -26723,7 +27197,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 123 */
+/* 124 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
@@ -26948,7 +27422,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 124 */
+/* 125 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -26959,7 +27433,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 	    var zrUtil = __webpack_require__(4);
-	    var axisHelper = __webpack_require__(114);
+	    var axisHelper = __webpack_require__(115);
 
 	    module.exports = function (axis) {
 	        var axisModel = axis.model;
@@ -26979,7 +27453,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 125 */
+/* 126 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -26987,7 +27461,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	// 所以这里也要被 Cartesian2D 依赖
 
 
-	    __webpack_require__(126);
+	    __webpack_require__(127);
 	    var ComponentModel = __webpack_require__(19);
 
 	    module.exports = ComponentModel.extend({
@@ -27023,7 +27497,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 126 */
+/* 127 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -27031,7 +27505,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var ComponentModel = __webpack_require__(19);
 	    var zrUtil = __webpack_require__(4);
-	    var axisModelCreator = __webpack_require__(127);
+	    var axisModelCreator = __webpack_require__(128);
 
 	    var AxisModel = ComponentModel.extend({
 
@@ -27084,8 +27558,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	        return option.type || (option.data ? 'category' : 'value');
 	    }
 
-	    zrUtil.merge(AxisModel.prototype, __webpack_require__(129));
 	    zrUtil.merge(AxisModel.prototype, __webpack_require__(130));
+	    zrUtil.merge(AxisModel.prototype, __webpack_require__(131));
 
 	    var extraOption = {
 	        // gridIndex: 0,
@@ -27102,12 +27576,12 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 127 */
+/* 128 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
 
-	    var axisDefault = __webpack_require__(128);
+	    var axisDefault = __webpack_require__(129);
 	    var zrUtil = __webpack_require__(4);
 	    var ComponentModel = __webpack_require__(19);
 	    var layout = __webpack_require__(21);
@@ -27165,7 +27639,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 128 */
+/* 129 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
@@ -27323,13 +27797,13 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 129 */
+/* 130 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
 
 	    var zrUtil = __webpack_require__(4);
-	    var axisHelper = __webpack_require__(114);
+	    var axisHelper = __webpack_require__(115);
 
 	    function getName(obj) {
 	        if (zrUtil.isObject(obj) && obj.value != null) {
@@ -27367,7 +27841,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 130 */
+/* 131 */
 /***/ function(module, exports) {
 
 	
@@ -27436,27 +27910,27 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 131 */
+/* 132 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
 	// TODO boundaryGap
 
 
-	    __webpack_require__(126);
+	    __webpack_require__(127);
 
-	    __webpack_require__(132);
+	    __webpack_require__(133);
 
 
 /***/ },
-/* 132 */
+/* 133 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
 
 	    var zrUtil = __webpack_require__(4);
 	    var graphic = __webpack_require__(43);
-	    var AxisBuilder = __webpack_require__(133);
+	    var AxisBuilder = __webpack_require__(134);
 	    var ifIgnoreOnTick = AxisBuilder.ifIgnoreOnTick;
 	    var getInterval = AxisBuilder.getInterval;
 
@@ -27734,7 +28208,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 133 */
+/* 134 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
@@ -28004,34 +28478,34 @@ return /******/ (function(modules) { // webpackBootstrap
 	            var silent = isSilent(axisModel);
 	            var triggerEvent = axisModel.get('triggerEvent');
 
-	            for (var i = 0; i < ticks.length; i++) {
-	                if (ifIgnoreOnTick(axis, i, opt.labelInterval)) {
-	                     continue;
+	            zrUtil.each(ticks, function (tickVal, index) {
+	                if (ifIgnoreOnTick(axis, index, opt.labelInterval)) {
+	                     return;
 	                }
 
 	                var itemTextStyleModel = textStyleModel;
-	                if (categoryData && categoryData[i] && categoryData[i].textStyle) {
+	                if (categoryData && categoryData[tickVal] && categoryData[tickVal].textStyle) {
 	                    itemTextStyleModel = new Model(
-	                        categoryData[i].textStyle, textStyleModel, axisModel.ecModel
+	                        categoryData[tickVal].textStyle, textStyleModel, axisModel.ecModel
 	                    );
 	                }
 	                var textColor = itemTextStyleModel.getTextColor()
 	                    || axisModel.get('axisLine.lineStyle.color');
 
-	                var tickCoord = axis.dataToCoord(ticks[i]);
+	                var tickCoord = axis.dataToCoord(tickVal);
 	                var pos = [
 	                    tickCoord,
 	                    opt.labelOffset + opt.labelDirection * labelMargin
 	                ];
-	                var labelBeforeFormat = axis.scale.getLabel(ticks[i]);
+	                var labelBeforeFormat = axis.scale.getLabel(tickVal);
 
 	                var textEl = new graphic.Text({
 
 	                    // Id for animation
-	                    anid: 'label_' + ticks[i],
+	                    anid: 'label_' + tickVal,
 
 	                    style: {
-	                        text: labels[i],
+	                        text: labels[index],
 	                        textAlign: itemTextStyleModel.get('align', true) || labelLayout.textAlign,
 	                        textVerticalAlign: itemTextStyleModel.get('baseline', true) || labelLayout.verticalAlign,
 	                        textFont: itemTextStyleModel.getFont(),
@@ -28050,7 +28524,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	                    textEl.eventData.value = labelBeforeFormat;
 	                }
 
-
 	                // FIXME
 	                this._dumbGroup.add(textEl);
 	                textEl.updateTransform();
@@ -28059,7 +28532,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	                this.group.add(textEl);
 
 	                textEl.decomposeTransform();
-	            }
+
+	            }, this);
 
 	            function isTwoLabelOverlapped(current, next) {
 	                var firstRect = current && current.getBoundingRect().clone();
@@ -28335,19 +28809,19 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 134 */
+/* 135 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
 
 	    var zrUtil = __webpack_require__(4);
 
-	    __webpack_require__(113);
+	    __webpack_require__(114);
 
-	    __webpack_require__(135);
 	    __webpack_require__(136);
+	    __webpack_require__(137);
 
-	    var barLayoutGrid = __webpack_require__(138);
+	    var barLayoutGrid = __webpack_require__(139);
 	    var echarts = __webpack_require__(1);
 
 	    echarts.registerLayout(zrUtil.curry(barLayoutGrid, 'bar'));
@@ -28360,18 +28834,18 @@ return /******/ (function(modules) { // webpackBootstrap
 	    });
 
 	    // In case developer forget to include grid component
-	    __webpack_require__(112);
+	    __webpack_require__(113);
 
 
 /***/ },
-/* 135 */
+/* 136 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
 
 
 	    var SeriesModel = __webpack_require__(28);
-	    var createListFromArray = __webpack_require__(101);
+	    var createListFromArray = __webpack_require__(102);
 
 	    module.exports = SeriesModel.extend({
 
@@ -28443,7 +28917,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 136 */
+/* 137 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -28452,7 +28926,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var zrUtil = __webpack_require__(4);
 	    var graphic = __webpack_require__(43);
 
-	    zrUtil.extend(__webpack_require__(12).prototype, __webpack_require__(137));
+	    zrUtil.extend(__webpack_require__(12).prototype, __webpack_require__(138));
 
 	    function fixLayoutWithLineWidth(layout, lineWidth) {
 	        var signX = layout.width > 0 ? 1 : -1;
@@ -28664,7 +29138,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 137 */
+/* 138 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
@@ -28698,7 +29172,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 138 */
+/* 139 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -28944,7 +29418,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 139 */
+/* 140 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
@@ -28952,10 +29426,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var zrUtil = __webpack_require__(4);
 	    var echarts = __webpack_require__(1);
 
-	    __webpack_require__(140);
-	    __webpack_require__(142);
+	    __webpack_require__(141);
+	    __webpack_require__(143);
 
-	    __webpack_require__(143)('pie', [{
+	    __webpack_require__(144)('pie', [{
 	        type: 'pieToggleSelect',
 	        event: 'pieselectchanged',
 	        method: 'toggleSelected'
@@ -28969,28 +29443,28 @@ return /******/ (function(modules) { // webpackBootstrap
 	        method: 'unSelect'
 	    }]);
 
-	    echarts.registerVisual(zrUtil.curry(__webpack_require__(144), 'pie'));
+	    echarts.registerVisual(zrUtil.curry(__webpack_require__(145), 'pie'));
 
 	    echarts.registerLayout(zrUtil.curry(
-	        __webpack_require__(145), 'pie'
+	        __webpack_require__(146), 'pie'
 	    ));
 
-	    echarts.registerProcessor(zrUtil.curry(__webpack_require__(147), 'pie'));
+	    echarts.registerProcessor(zrUtil.curry(__webpack_require__(148), 'pie'));
 
 
 /***/ },
-/* 140 */
+/* 141 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
 
 
-	    var List = __webpack_require__(97);
+	    var List = __webpack_require__(98);
 	    var zrUtil = __webpack_require__(4);
 	    var modelUtil = __webpack_require__(5);
-	    var completeDimensions = __webpack_require__(102);
+	    var completeDimensions = __webpack_require__(103);
 
-	    var dataSelectableMixin = __webpack_require__(141);
+	    var dataSelectableMixin = __webpack_require__(142);
 
 	    var PieSeries = __webpack_require__(1).extendSeriesModel({
 
@@ -29123,7 +29597,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 141 */
+/* 142 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -29193,7 +29667,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 142 */
+/* 143 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
@@ -29578,7 +30052,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 143 */
+/* 144 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
@@ -29618,7 +30092,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 144 */
+/* 145 */
 /***/ function(module, exports) {
 
 	// Pick color from palette for each data item
@@ -29667,7 +30141,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 145 */
+/* 146 */
 /***/ function(module, exports, __webpack_require__) {
 
 	// TODO minAngle
@@ -29676,7 +30150,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var numberUtil = __webpack_require__(7);
 	    var parsePercent = numberUtil.parsePercent;
-	    var labelLayout = __webpack_require__(146);
+	    var labelLayout = __webpack_require__(147);
 	    var zrUtil = __webpack_require__(4);
 
 	    var PI2 = Math.PI * 2;
@@ -29784,7 +30258,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                            ? minAngle : value * unitRadian;
 	                        layout.startAngle = currentAngle;
 	                        layout.endAngle = currentAngle + dir * angle;
-	                        currentAngle += angle;
+	                        currentAngle += dir * angle;
 	                    });
 	                }
 	            }
@@ -29795,7 +30269,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 146 */
+/* 147 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -30026,7 +30500,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 147 */
+/* 148 */
 /***/ function(module, exports) {