echarts-rails 0.1.3 → 0.1.4

data/vendor/assets/javascripts/echarts.js

@@ -91,16 +91,16 @@ return /******/ (function(modules) { // webpackBootstrap
 	__webpack_require__(315);
 
 	__webpack_require__(316);
-	__webpack_require__(329);
+	__webpack_require__(330);
 
-	__webpack_require__(344);
-	__webpack_require__(350);
-	__webpack_require__(353);
+	__webpack_require__(345);
+	__webpack_require__(351);
+	__webpack_require__(354);
 
-	__webpack_require__(356);
-	__webpack_require__(365);
+	__webpack_require__(357);
+	__webpack_require__(366);
 
-	__webpack_require__(378);
+	__webpack_require__(379);
 
 
 /***/ },
@@ -176,6 +176,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var IN_MAIN_PROCESS = '__flag_in_main_process';
 	    var HAS_GRADIENT_OR_PATTERN_BG = '_hasGradientOrPatternBg';
 
+
+	    var OPTION_UPDATED = '_optionUpdated';
+
 	    function createRegisterEventWithLowercaseName(method) {
 	        return function (eventName, handler, context) {
 	            // Event name is all lowercase
@@ -291,10 +294,25 @@ return /******/ (function(modules) { // webpackBootstrap
 	        }
 	        timsort(visualFuncs, prioritySortFunc);
 	        timsort(dataProcessorFuncs, prioritySortFunc);
+
+	        this._zr.animation.on('frame', this._onframe, this);
 	    }
 
 	    var echartsProto = ECharts.prototype;
 
+	    echartsProto._onframe = function () {
+	        // Lazy update
+	        if (this[OPTION_UPDATED]) {
+
+	            this[IN_MAIN_PROCESS] = true;
+
+	            updateMethods.prepareAndUpdate.call(this);
+
+	            this[IN_MAIN_PROCESS] = false;
+
+	            this[OPTION_UPDATED] = false;
+	        }
+	    };
 	    /**
 	     * @return {HTMLDomElement}
 	     */
@@ -312,9 +330,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	    /**
 	     * @param {Object} option
 	     * @param {boolean} notMerge
-	     * @param {boolean} [notRefreshImmediately=false] Useful when setOption frequently.
+	     * @param {boolean} [lazyUpdate=false] Useful when setOption frequently.
 	     */
-	    echartsProto.setOption = function (option, notMerge, notRefreshImmediately) {
+	    echartsProto.setOption = function (option, notMerge, lazyUpdate) {
 	        if (true) {
 	            zrUtil.assert(!this[IN_MAIN_PROCESS], '`setOption` should not be called during main process.');
 	        }
@@ -330,13 +348,18 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	        this._model.setOption(option, optionPreprocessorFuncs);
 
-	        updateMethods.prepareAndUpdate.call(this);
+	        if (lazyUpdate) {
+	            this[OPTION_UPDATED] = true;
+	        }
+	        else {
+	            updateMethods.prepareAndUpdate.call(this);
+	            this._zr.refreshImmediately();
+	            this[OPTION_UPDATED] = false;
+	        }
 
 	        this[IN_MAIN_PROCESS] = false;
 
 	        this._flushPendingActions();
-
-	        !notRefreshImmediately && this._zr.refreshImmediately();
 	    };
 
 	    /**
@@ -357,7 +380,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	     * @return {Object}
 	     */
 	    echartsProto.getOption = function () {
-	        return this._model.getOption();
+	        return this._model && this._model.getOption();
 	    };
 
 	    /**
@@ -727,7 +750,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	        this._flushPendingActions();
 	    };
 
-	    var defaultLoadingEffect = __webpack_require__(93);
 	    /**
 	     * Show loading effect
 	     * @param  {string} [name='default']
@@ -736,10 +758,18 @@ return /******/ (function(modules) { // webpackBootstrap
 	    echartsProto.showLoading = function (name, cfg) {
 	        if (zrUtil.isObject(name)) {
 	            cfg = name;
-	            name = 'default';
+	            name = '';
 	        }
+	        name = name || 'default';
+
 	        this.hideLoading();
-	        var el = defaultLoadingEffect(this._api, cfg);
+	        if (!loadingEffects[name]) {
+	            if (true) {
+	                console.warn('Loading effects ' + name + ' not exists.');
+	            }
+	            return;
+	        }
+	        var el = loadingEffects[name](this._api, cfg);
 	        var zr = this._zr;
 	        this._loadingFX = el;
 
@@ -824,8 +854,17 @@ return /******/ (function(modules) { // webpackBootstrap
 	            isHighlightOrDownplay && updateMethods[updateMethod].call(this, batchItem);
 	        }
 
-	        (updateMethod !== 'none' && !isHighlightOrDownplay)
-	            && updateMethods[updateMethod].call(this, payload);
+	        if (updateMethod !== 'none' && !isHighlightOrDownplay) {
+	            // Still dirty
+	            if (this[OPTION_UPDATED]) {
+	                // FIXME Pass payload ?
+	                updateMethods.prepareAndUpdate.call(this, payload);
+	                this[OPTION_UPDATED] = false;
+	            }
+	            else {
+	                updateMethods[updateMethod].call(this, payload);
+	            }
+	        }
 
 	        // Follow the rule of action batch
 	        if (batched) {
@@ -1063,7 +1102,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    }
 
 	    var MOUSE_EVENT_NAMES = [
-	        'click', 'dblclick', 'mouseover', 'mouseout', 'mousedown', 'mouseup', 'globalout'
+	        'click', 'dblclick', 'mouseover', 'mouseout', 'mousemove', 'mousedown', 'mouseup', 'globalout'
 	    ];
 	    /**
 	     * @private
@@ -1105,7 +1144,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	     * Clear
 	     */
 	    echartsProto.clear = function () {
-	        this.setOption({}, true);
+	        this.setOption({ series: [] }, true);
 	    };
 	    /**
 	     * Dispose instance
@@ -1246,6 +1285,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	     * @type {Object.<key, Object>}
 	     */
 	    var themeStorage = {};
+	    /**
+	     * Loading effects
+	     */
+	    var loadingEffects = {};
 
 
 	    var instances = {};
@@ -1261,9 +1304,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	        /**
 	         * @type {number}
 	         */
-	        version: '3.2.2',
+	        version: '3.2.3',
 	        dependencies: {
-	            zrender: '3.1.2'
+	            zrender: '3.1.3'
 	        }
 	    };
 
@@ -1485,7 +1528,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	     * Most visual encoding like color are common for different chart
 	     * But each chart has it's own layout algorithm
 	     *
-	     * @param {string} [priority=1000]
+	     * @param {number} [priority=1000]
 	     * @param {Function} layoutFunc
 	     */
 	    echarts.registerLayout = function (priority, layoutFunc) {
@@ -1506,7 +1549,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    };
 
 	    /**
-	     * @param {string} [priority=3000]
+	     * @param {number} [priority=3000]
 	     * @param {Function} visualFunc
 	     */
 	    echarts.registerVisual = function (priority, visualFunc) {
@@ -1525,6 +1568,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	        });
 	    };
 
+	    /**
+	     * @param {string} name
+	     */
+	    echarts.registerLoading = function (name, loadingFx) {
+	        loadingEffects[name] = loadingFx;
+	    };
+
+
 	    var parseClassType = ComponentModel.parseClassType;
 	    /**
 	     * @param {Object} opts
@@ -1577,7 +1628,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	            var classType = parseClassType(superClass);
 	            Clazz = ChartView.getClass(classType.main, true);
 	        }
-	        return ChartView.extend(opts);
+	        return Clazz.extend(opts);
 	    };
 
 	    /**
@@ -1600,8 +1651,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	        zrUtil.createCanvas = creator;
 	    };
 
-	    echarts.registerVisual(PRIORITY_VISUAL_GLOBAL, __webpack_require__(94));
-	    echarts.registerPreprocessor(__webpack_require__(95));
+	    echarts.registerVisual(PRIORITY_VISUAL_GLOBAL, __webpack_require__(93));
+	    echarts.registerPreprocessor(__webpack_require__(94));
+	    echarts.registerLoading('default', __webpack_require__(96));
 
 	    // Default action
 	    echarts.registerAction({
@@ -1923,6 +1975,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	                newCptTypes, ComponentModel.getAllClassMainTypes(), visitComponent, this
 	            );
 
+	            this._seriesIndices = this._seriesIndices || [];
+
 	            function visitComponent(mainType, dependencies) {
 	                var newCptOptionList = modelUtil.normalizeToArray(newOption[mainType]);
 
@@ -2092,6 +2146,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	                        || (!isNameArray && cpt.name === name);
 	                });
 	            }
+	            else {
+	                // Return all components with mainType
+	                result = cpts;
+	            }
 
 	            return filterBySubType(result, condition);
 	        },
@@ -3054,60 +3112,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var Model = __webpack_require__(12);
 	    var zrUtil = __webpack_require__(4);
 
-	    var AXIS_DIMS = ['x', 'y', 'z', 'radius', 'angle'];
-
 	    var modelUtil = {};
 
-	    /**
-	     * Create "each" method to iterate names.
-	     *
-	     * @pubilc
-	     * @param  {Array.<string>} names
-	     * @param  {Array.<string>=} attrs
-	     * @return {Function}
-	     */
-	    modelUtil.createNameEach = function (names, attrs) {
-	        names = names.slice();
-	        var capitalNames = zrUtil.map(names, modelUtil.capitalFirst);
-	        attrs = (attrs || []).slice();
-	        var capitalAttrs = zrUtil.map(attrs, modelUtil.capitalFirst);
-
-	        return function (callback, context) {
-	            zrUtil.each(names, function (name, index) {
-	                var nameObj = {name: name, capital: capitalNames[index]};
-
-	                for (var j = 0; j < attrs.length; j++) {
-	                    nameObj[attrs[j]] = name + capitalAttrs[j];
-	                }
-
-	                callback.call(context, nameObj);
-	            });
-	        };
-	    };
-
-	    /**
-	     * @public
-	     */
-	    modelUtil.capitalFirst = function (str) {
-	        return str ? str.charAt(0).toUpperCase() + str.substr(1) : str;
-	    };
-
-	    /**
-	     * Iterate each dimension name.
-	     *
-	     * @public
-	     * @param {Function} callback The parameter is like:
-	     *                            {
-	     *                                name: 'angle',
-	     *                                capital: 'Angle',
-	     *                                axis: 'angleAxis',
-	     *                                axisIndex: 'angleAixs',
-	     *                                index: 'angleIndex'
-	     *                            }
-	     * @param {Object} context
-	     */
-	    modelUtil.eachAxisDim = modelUtil.createNameEach(AXIS_DIMS, ['axisIndex', 'axis', 'index']);
-
 	    /**
 	     * If value is not array, then translate it to array.
 	     * @param  {*} value
@@ -3121,76 +3127,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	            : [value];
 	    };
 
-	    /**
-	     * If tow dataZoomModels has the same axis controlled, we say that they are 'linked'.
-	     * dataZoomModels and 'links' make up one or more graphics.
-	     * This function finds the graphic where the source dataZoomModel is in.
-	     *
-	     * @public
-	     * @param {Function} forEachNode Node iterator.
-	     * @param {Function} forEachEdgeType edgeType iterator
-	     * @param {Function} edgeIdGetter Giving node and edgeType, return an array of edge id.
-	     * @return {Function} Input: sourceNode, Output: Like {nodes: [], dims: {}}
-	     */
-	    modelUtil.createLinkedNodesFinder = function (forEachNode, forEachEdgeType, edgeIdGetter) {
-
-	        return function (sourceNode) {
-	            var result = {
-	                nodes: [],
-	                records: {} // key: edgeType.name, value: Object (key: edge id, value: boolean).
-	            };
-
-	            forEachEdgeType(function (edgeType) {
-	                result.records[edgeType.name] = {};
-	            });
-
-	            if (!sourceNode) {
-	                return result;
-	            }
-
-	            absorb(sourceNode, result);
-
-	            var existsLink;
-	            do {
-	                existsLink = false;
-	                forEachNode(processSingleNode);
-	            }
-	            while (existsLink);
-
-	            function processSingleNode(node) {
-	                if (!isNodeAbsorded(node, result) && isLinked(node, result)) {
-	                    absorb(node, result);
-	                    existsLink = true;
-	                }
-	            }
-
-	            return result;
-	        };
-
-	        function isNodeAbsorded(node, result) {
-	            return zrUtil.indexOf(result.nodes, node) >= 0;
-	        }
-
-	        function isLinked(node, result) {
-	            var hasLink = false;
-	            forEachEdgeType(function (edgeType) {
-	                zrUtil.each(edgeIdGetter(node, edgeType) || [], function (edgeId) {
-	                    result.records[edgeType.name][edgeId] && (hasLink = true);
-	                });
-	            });
-	            return hasLink;
-	        }
-
-	        function absorb(node, result) {
-	            result.nodes.push(node);
-	            forEachEdgeType(function (edgeType) {
-	                zrUtil.each(edgeIdGetter(node, edgeType) || [], function (edgeId) {
-	                    result.records[edgeType.name][edgeId] = true;
-	                });
-	            });
-	        }
-	    };
-
 	    /**
 	     * Sync default option between normal and emphasis like `position` and `show`
 	     * In case some one will write code like
@@ -3414,22 +3350,31 @@ return /******/ (function(modules) { // webpackBootstrap
 	                return;
 	            }
 
+	            // id has highest priority.
+	            for (var i = 0; i < result.length; i++) {
+	                if (!result[i].option // Consider name: two map to one.
+	                    && cptOption.id != null
+	                    && result[i].exist.id === cptOption.id + ''
+	                ) {
+	                    result[i].option = cptOption;
+	                    newCptOptions[index] = null;
+	                    return;
+	                }
+	            }
+
 	            for (var i = 0; i < result.length; i++) {
 	                var exist = result[i].exist;
 	                if (!result[i].option // Consider name: two map to one.
-	                    && (
-	                        // id has highest priority.
-	                        (cptOption.id != null && exist.id === cptOption.id + '')
-	                        || (cptOption.name != null
-	                            && !modelUtil.isIdInner(cptOption)
-	                            && !modelUtil.isIdInner(exist)
-	                            && exist.name === cptOption.name + ''
-	                        )
-	                    )
+	                    // Can not match when both ids exist but different.
+	                    && (exist.id == null || cptOption.id == null)
+	                    && cptOption.name != null
+	                    && !modelUtil.isIdInner(cptOption)
+	                    && !modelUtil.isIdInner(exist)
+	                    && exist.name === cptOption.name + ''
 	                ) {
 	                    result[i].option = cptOption;
 	                    newCptOptions[index] = null;
-	                    break;
+	                    return;
 	                }
 	            }
 	        });
@@ -3542,28 +3487,29 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var numberUtil = __webpack_require__(7);
 	    var textContain = __webpack_require__(8);
 
+	    var formatUtil = {};
 	    /**
 	     * 每三位默认加,格式化
 	     * @type {string|number} x
 	     */
-	    function addCommas(x) {
+	    formatUtil.addCommas = function (x) {
 	        if (isNaN(x)) {
 	            return '-';
 	        }
 	        x = (x + '').split('.');
 	        return x[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g,'$1,')
 	               + (x.length > 1 ? ('.' + x[1]) : '');
-	    }
+	    };
 
 	    /**
 	     * @param {string} str
 	     * @return {string} str
 	     */
-	    function toCamelCase(str) {
+	    formatUtil.toCamelCase = function (str) {
 	        return str.toLowerCase().replace(/-(.)/g, function(match, group1) {
 	            return group1.toUpperCase();
 	        });
-	    }
+	    };
 
 	    /**
 	     * Normalize css liked array configuration
@@ -3573,7 +3519,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	     *  [4, 3, 2] => [4, 3, 2, 3]
 	     * @param {number|Array.<number>} val
 	     */
-	    function normalizeCssArray(val) {
+	    formatUtil.normalizeCssArray = function (val) {
 	        var len = val.length;
 	        if (typeof (val) === 'number') {
 	            return [val, val, val, val];
@@ -3587,29 +3533,30 @@ return /******/ (function(modules) { // webpackBootstrap
 	            return [val[0], val[1], val[2], val[1]];
 	        }
 	        return val;
-	    }
+	    };
 
-	    function encodeHTML(source) {
+	    formatUtil.encodeHTML = function (source) {
 	        return String(source)
 	            .replace(/&/g, '&amp;')
 	            .replace(/</g, '&lt;')
 	            .replace(/>/g, '&gt;')
 	            .replace(/"/g, '&quot;')
 	            .replace(/'/g, '&#39;');
-	    }
+	    };
 
 	    var TPL_VAR_ALIAS = ['a', 'b', 'c', 'd', 'e', 'f', 'g'];
 
-	    function wrapVar(varName, seriesIdx) {
+	    var wrapVar = function (varName, seriesIdx) {
 	        return '{' + varName + (seriesIdx == null ? '' : seriesIdx) + '}';
-	    }
+	    };
+
 	    /**
 	     * Template formatter
 	     * @param  {string} tpl
 	     * @param  {Array.<Object>|Object} paramsList
 	     * @return {string}
 	     */
-	    function formatTpl(tpl, paramsList) {
+	    formatUtil.formatTpl = function (tpl, paramsList) {
 	        if (!zrUtil.isArray(paramsList)) {
 	            paramsList = [paramsList];
 	        }
@@ -3633,7 +3580,17 @@ return /******/ (function(modules) { // webpackBootstrap
 	        }
 
 	        return tpl;
-	    }
+	    };
+
+
+	    /**
+	     * @param {string} str
+	     * @return {string}
+	     * @inner
+	     */
+	    var s2d = function (str) {
+	        return str < 10 ? ('0' + str) : str;
+	    };
 
 	    /**
 	     * ISO Date format
@@ -3641,7 +3598,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	     * @param {number} value
 	     * @inner
 	     */
-	    function formatTime(tpl, value) {
+	    formatUtil.formatTime = function (tpl, value) {
 	        if (tpl === 'week'
 	            || tpl === 'month'
 	            || tpl === 'quarter'
@@ -3673,33 +3630,20 @@ return /******/ (function(modules) { // webpackBootstrap
 	            .replace('s', s);
 
 	        return tpl;
-	    }
+	    };
 
 	    /**
+	     * Capital first
 	     * @param {string} str
 	     * @return {string}
-	     * @inner
 	     */
-	    function s2d(str) {
-	        return str < 10 ? ('0' + str) : str;
-	    }
-
-	    module.exports = {
-
-	        normalizeCssArray: normalizeCssArray,
-
-	        addCommas: addCommas,
-
-	        toCamelCase: toCamelCase,
-
-	        encodeHTML: encodeHTML,
-
-	        formatTpl: formatTpl,
+	    formatUtil.capitalFirst = function (str) {
+	        return str ? str.charAt(0).toUpperCase() + str.substr(1) : str;
+	    };
 
-	        formatTime: formatTime,
+	    formatUtil.truncateText = textContain.truncateText;
 
-	        truncateText: textContain.truncateText
-	    };
+	    module.exports = formatUtil;
 
 
 /***/ },
@@ -3814,9 +3758,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	     * @param {number} x
 	     * @return {number}
 	     */
-	    number.round = function (x) {
+	    number.round = function (x, precision) {
+	        if (precision == null) {
+	            precision = 10;
+	        }
 	        // PENDING
-	        return +(+x).toFixed(10);
+	        return +(+x).toFixed(precision);
 	    };
 
 	    number.asc = function (arr) {
@@ -3848,6 +3795,15 @@ return /******/ (function(modules) { // webpackBootstrap
 	        return count;
 	    };
 
+	    number.getPrecisionSafe = function (val) {
+	        var str = val.toString();
+	        var dotIndex = str.indexOf('.');
+	        if (dotIndex < 0) {
+	            return 0;
+	        }
+	        return str.length - 1 - dotIndex;
+	    };
+
 	    /**
 	     * @param {Array.<number>} dataExtent
 	     * @param {Array.<number>} pixelExtent
@@ -3887,17 +3843,23 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    /**
 	     * @param {string|Date|number} value
-	     * @return {number} timestamp
+	     * @return {Date} date
 	     */
 	    number.parseDate = function (value) {
-	        return value instanceof Date
-	            ? value
-	            : new Date(
-	                typeof value === 'string'
-	                    // FIXME Date.parse('1970-01-01') is UTC, Date.parse('1970/01/01') is local
-	                    ? (new Date(value.replace(/-/g, '/')) - new Date('1970/01/01'))
-	                    : Math.round(value)
-	            );
+	        if (value instanceof Date) {
+	            return value;
+	        }
+	        else if (typeof value === 'string') {
+	            // Treat as ISO format. See issue #3623
+	            var ret = new Date(value);
+	            if (isNaN(+ret)) {
+	                // FIXME new Date('1970-01-01') is UTC, new Date('1970/01/01') is local
+	                ret = new Date(new Date(value.replace(/-/g, '/')) - new Date('1970/01/01'));
+	            }
+	            return ret;
+	        }
+
+	        return new Date(Math.round(value));
 	    };
 
 	    /**
@@ -4937,7 +4899,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	         */
 	        getShallow: function (key, ignoreParent) {
 	            var option = this.option;
-	            var val = option && option[key];
+
+	            var val = option == null ? option : option[key];
 	            var parentModel = this.parentModel;
 	            if (val == null && parentModel && !ignoreParent) {
 	                val = parentModel.getShallow(key);
@@ -5236,7 +5199,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        getLineDash: function () {
 	            var lineType = this.get('type');
 	            return (lineType === 'solid' || lineType == null) ? null
-	                : (lineType === 'dashed' ? [5, 5] : [1, 1]);
+	                : (lineType === 'dashed' ? [5, 5] : [2, 2]);
 	        }
 	    };
 
@@ -6206,7 +6169,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
 
 	        // 默认需要 Grid 配置项
-	        grid: {},
+	        // grid: {},
 	        // 主题，主题
 	        textStyle: {
 	            // color: '#000',
@@ -8160,16 +8123,19 @@ return /******/ (function(modules) { // webpackBootstrap
 	     */
 	    transformableProto.setTransform = function (ctx) {
 	        var m = this.transform;
+	        var dpr = ctx.dpr || 1;
 	        if (m) {
-	            ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
+	            ctx.setTransform(dpr * m[0], dpr * m[1], dpr * m[2], dpr * m[3], dpr * m[4], dpr * m[5]);
+	        }
+	        else {
+	            ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
 	        }
 	    };
 
 	    transformableProto.restoreTransform = function (ctx) {
-	        var m = this.invTransform;
-	        if (m) {
-	            ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
-	        }
+	        var m = this.transform;
+	        var dpr = ctx.dpr || 1;
+	        ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
 	    }
 
 	    var tmpTransform = [];
@@ -8856,7 +8822,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	            // kf1-----kf2---------current--------kf3
 	            // find kf2 and kf3 and do interpolation
 	            var frame;
-	            if (percent < lastFramePercent) {
+	            // In the easing function like elasticOut, percent may less than 0
+	            if (percent < 0) {
+	                frame = 0;
+	            }
+	            else if (percent < lastFramePercent) {
 	                // Start from next key
 	                // PENDING start from lastFrame ?
 	                start = Math.min(lastFrame + 1, trackLen - 1);
@@ -9211,15 +9181,15 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	        constructor: Clip,
 
-	        step: function (time) {
+	        step: function (globalTime) {
 	            // Set startTime on first step, or _startTime may has milleseconds different between clips
 	            // PENDING
 	            if (!this._initialized) {
-	                this._startTime = new Date().getTime() + this._delay;
+	                this._startTime = globalTime + this._delay;
 	                this._initialized = true;
 	            }
 
-	            var percent = (time - this._startTime) / this._life;
+	            var percent = (globalTime - this._startTime) / this._life;
 
 	            // 还没开始
 	            if (percent < 0) {
@@ -9239,7 +9209,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	            // 结束
 	            if (percent == 1) {
 	                if (this.loop) {
-	                    this.restart();
+	                    this.restart (globalTime);
 	                    // 重新开始周期
 	                    // 抛出而不是直接调用事件直到 stage.update 后再统一调用这些事件
 	                    return 'restart';
@@ -9254,10 +9224,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	            return null;
 	        },
 
-	        restart: function() {
-	            var time = new Date().getTime();
-	            var remainder = (time - this._startTime) % this._life;
-	            this._startTime = new Date().getTime() - remainder + this.gap;
+	        restart: function (globalTime) {
+	            var remainder = (globalTime - this._startTime) % this._life;
+	            this._startTime = globalTime - remainder + this.gap;
 
 	            this._needsRemove = false;
 	        },
@@ -11233,6 +11202,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                transform = matrix.create();
 	            }
 	            matrix.mul(transform, m, transform);
+	            this.dirty(true);
 	        };
 
 	        return opts;
@@ -12082,25 +12052,42 @@ return /******/ (function(modules) { // webpackBootstrap
 	        textVerticalAlign: null,
 
 	        /**
+	         * Only useful in Path and Image element
 	         * @type {number}
 	         */
 	        textDistance: 5,
 
 	        /**
+	         * Only useful in Path and Image element
 	         * @type {number}
 	         */
 	        textShadowBlur: 0,
 
 	        /**
+	         * Only useful in Path and Image element
 	         * @type {number}
 	         */
 	        textShadowOffsetX: 0,
 
 	        /**
+	         * Only useful in Path and Image element
 	         * @type {number}
 	         */
 	        textShadowOffsetY: 0,
 
+	        /**
+	         * If transform text
+	         * Only useful in Path and Image element
+	         * @type {boolean}
+	         */
+	        textTransform: false,
+
+	        /**
+	         * Text rotate around position of Path or Image
+	         * Only useful in Path and Image element and textTransform is false.
+	         */
+	        textRotation: 0,
+
 	        /**
 	         * @type {string}
 	         * https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
@@ -12253,10 +12240,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	        return value;
 	    }
 
-	    function setTransform(ctx, m) {
-	        ctx.transform(m[0], m[1], m[2], m[3], m[4], m[5]);
-	    }
-
 	    RectText.prototype = {
 
 	        constructor: RectText,
@@ -12292,10 +12275,15 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	            // Transform rect to view space
 	            var transform = this.transform;
-	            if (transform) {
-	                tmpRect.copy(rect);
-	                tmpRect.applyTransform(transform);
-	                rect = tmpRect;
+	            if (!style.textTransform) {
+	                if (transform) {
+	                    tmpRect.copy(rect);
+	                    tmpRect.applyTransform(transform);
+	                    rect = tmpRect;
+	                }
+	            }
+	            else {
+	                this.setTransform(ctx);
 	            }
 
 	            // Text position represented by coord
@@ -12341,7 +12329,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	            var textStroke = style.textStroke;
 	            textFill && (ctx.fillStyle = textFill);
 	            textStroke && (ctx.strokeStyle = textStroke);
-	            ctx.font = font;
+
+	            // TODO Invalid font
+	            ctx.font = font || '12px sans-serif';
 
 	            // Text shadow
 	            // Always set shadowBlur and shadowOffset to avoid leak from displayable
@@ -12351,6 +12341,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	            ctx.shadowOffsetY = style.textShadowOffsetY;
 
 	            var textLines = text.split('\n');
+
+	            if (style.textRotation) {
+	                transform && ctx.translate(transform[4], transform[5]);
+	                ctx.rotate(style.textRotation);
+	                transform && ctx.translate(-transform[4], -transform[5]);
+	            }
+
 	            for (var i = 0; i < textLines.length; i++) {
 	                textFill && ctx.fillText(textLines[i], x, y);
 	                textStroke && ctx.strokeText(textLines[i], x, y);
@@ -12470,10 +12467,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	         * @return {module:zrender/core/PathProxy}
 	         */
 	        beginPath: function (ctx) {
+
 	            this._ctx = ctx;
 
 	            ctx && ctx.beginPath();
 
+	            ctx && (this.dpr = ctx.dpr);
+
 	            // Reset
 	            this._len = 0;
 
@@ -14770,7 +14770,6 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	            // Must bind each time
 	            style.bind(ctx, this, prevEl);
-
 	            // style.image is a url string
 	            if (typeof src === 'string') {
 	                image = this._image;
@@ -15143,7 +15142,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	                    textBaseline = style.textBaseline;
 	                }
 
-	                ctx.font = font;
+	                // TODO Invalid font
+	                ctx.font = font || '12px sans-serif';
 	                ctx.textAlign = textAlign || 'left';
 	                // Use canvas default left textAlign. Giving invalid value will cause state not change
 	                if (ctx.textAlign !== textAlign) {
@@ -15243,7 +15243,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	 * @module zrender/graphic/shape/Sector
 	 */
 
-	// FIXME clockwise seems wrong
 
 
 	    module.exports = __webpack_require__(45).extend({
@@ -16220,7 +16219,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    /**
 	     * @type {string}
 	     */
-	    zrender.version = '3.1.2';
+	    zrender.version = '3.1.3';
 
 	    /**
 	     * Initializing a zrender instance
@@ -17204,7 +17203,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	            if (el instanceof Group) {
 	                el.__storage = this;
 	            }
-	            el.dirty();
+	            el.dirty(false);
 
 	            this._elements[el.id] = el;
 
@@ -17988,7 +17987,13 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	        this._running = false;
 
-	        this._time = 0;
+	        this._time;
+
+	        this._pausedTime;
+
+	        this._pauseStart;
+
+	        this._paused = false;
 
 	        Dispatcher.call(this);
 	    };
@@ -18039,7 +18044,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	        _update: function() {
 
-	            var time = new Date().getTime();
+	            var time = new Date().getTime() - this._pausedTime;
 	            var delta = time - this._time;
 	            var clips = this._clips;
 	            var len = clips.length;
@@ -18084,10 +18089,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	                this.stage.update();
 	            }
 	        },
-	        /**
-	         * 开始运行动画
-	         */
-	        start: function () {
+
+	        _startLoop: function () {
 	            var self = this;
 
 	            this._running = true;
@@ -18097,19 +18100,50 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	                    requestAnimationFrame(step);
 
-	                    self._update();
+	                    !self._paused && self._update();
 	                }
 	            }
 
-	            this._time = new Date().getTime();
 	            requestAnimationFrame(step);
 	        },
+
+	        /**
+	         * 开始运行动画
+	         */
+	        start: function () {
+
+	            this._time = new Date().getTime();
+	            this._pausedTime = 0;
+
+	            this._startLoop();
+	        },
 	        /**
 	         * 停止运行动画
 	         */
 	        stop: function () {
 	            this._running = false;
 	        },
+
+	        /**
+	         * Pause
+	         */
+	        pause: function () {
+	            if (!this._paused) {
+	                this._pauseStart = new Date().getTime();
+	                this._paused = true;
+	            }
+	        },
+
+	        /**
+	         * Resume
+	         */
+	        resume: function () {
+	            if (this._paused) {
+	                this._pausedTime += (new Date().getTime()) - this._pauseStart;
+	                this._paused = false;
+	            }
+	        },
+
 	        /**
 	         * 清除所有动画片段
 	         */
@@ -18127,6 +18161,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	         *         如果指定setter函数，会通过setter函数设置属性值
 	         * @return {module:zrender/animation/Animation~Animator}
 	         */
+	        // TODO Gap
 	        animate: function (target, options) {
 	            options = options || {};
 	            var animator = new Animator(
@@ -18762,28 +18797,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	    function doClip(clipPaths, ctx) {
 	        for (var i = 0; i < clipPaths.length; i++) {
 	            var clipPath = clipPaths[i];
-	            var m;
-	            if (clipPath.transform) {
-	                m = clipPath.transform;
-	                ctx.transform(
-	                    m[0], m[1],
-	                    m[2], m[3],
-	                    m[4], m[5]
-	                );
-	            }
 	            var path = clipPath.path;
+
+	            clipPath.setTransform(ctx);
 	            path.beginPath(ctx);
 	            clipPath.buildPath(path, clipPath.shape);
 	            ctx.clip();
 	            // Transform back
-	            if (clipPath.transform) {
-	                m = clipPath.invTransform;
-	                ctx.transform(
-	                    m[0], m[1],
-	                    m[2], m[3],
-	                    m[4], m[5]
-	                );
-	            }
+	            clipPath.restoreTransform(ctx);
 	        }
 	    }
 
@@ -19102,15 +19123,15 @@ return /******/ (function(modules) { // webpackBootstrap
 	            var layerProgress;
 	            var frame = this._progress;
 	            function flushProgressiveLayer(layer) {
+	                var dpr = ctx.dpr || 1;
 	                ctx.save();
 	                ctx.globalAlpha = 1;
 	                ctx.shadowBlur = 0;
 	                // Avoid layer don't clear in next progressive frame
 	                currentLayer.__dirty = true;
-	                ctx.drawImage(layer.dom, 0, 0, width, height);
+	                ctx.setTransform(1, 0, 0, 1, 0, 0);
+	                ctx.drawImage(layer.dom, 0, 0, width * dpr, height * dpr);
 	                ctx.restore();
-
-	                currentLayer.ctx.restore();
 	            }
 
 	            for (var i = 0, l = list.length; i < l; i++) {
@@ -19160,6 +19181,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                if (!(currentLayer.__dirty || paintAll)) {
 	                    continue;
 	                }
+
 	                if (elFrame >= 0) {
 	                    // Progressive layer changed
 	                    if (!currentProgressiveLayer) {
@@ -19223,7 +19245,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	        _doPaintEl: function (el, currentLayer, forcePaint, scope) {
 	            var ctx = currentLayer.ctx;
-
+	            var m = el.transform;
 	            if (
 	                (currentLayer.__dirty || forcePaint)
 	                // Ignore invisible element
@@ -19232,7 +19254,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	                && el.style.opacity !== 0
 	                // Ignore scale 0 element, in some environment like node-canvas
 	                // Draw a scale 0 element can cause all following draw wrong
-	                && el.scale[0] && el.scale[1]
+	                // And setTransform with scale 0 will cause set back transform failed.
+	                && !(m && !m[0] && !m[3])
 	                // Ignore culled element
 	                && !(el.culling && isDisplayableCulled(el, this._width, this._height))
 	            ) {
@@ -19859,10 +19882,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        initContext: function () {
 	            this.ctx = this.dom.getContext('2d');
 
-	            var dpr = this.dpr;
-	            if (dpr != 1) {
-	                this.ctx.scale(dpr, dpr);
-	            }
+	            this.ctx.dpr = this.dpr;
 	        },
 
 	        createBackBuffer: function () {
@@ -19893,10 +19913,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	            dom.width = width * dpr;
 	            dom.height = height * dpr;
 
-	            if (dpr != 1) {
-	                this.ctx.scale(dpr, dpr);
-	            }
-
 	            if (domBack) {
 	                domBack.width = width * dpr;
 	                domBack.height = height * dpr;
@@ -19936,7 +19952,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                );
 	            }
 
-	            ctx.clearRect(0, 0, width / dpr, height / dpr);
+	            ctx.clearRect(0, 0, width, height);
 	            if (clearColor) {
 	                var clearColorGradientOrPattern;
 	                // Gradient
@@ -19945,8 +19961,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	                    clearColorGradientOrPattern = clearColor.__canvasGradient || Style.getGradient(ctx, clearColor, {
 	                        x: 0,
 	                        y: 0,
-	                        width: width / dpr,
-	                        height: height / dpr
+	                        width: width,
+	                        height: height
 	                    });
 
 	                    clearColor.__canvasGradient = clearColorGradientOrPattern;
@@ -19957,7 +19973,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                }
 	                ctx.save();
 	                ctx.fillStyle = clearColorGradientOrPattern || clearColor;
-	                ctx.fillRect(0, 0, width / dpr, height / dpr);
+	                ctx.fillRect(0, 0, width, height);
 	                ctx.restore();
 	            }
 
@@ -19965,7 +19981,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                var domBack = this.domBack;
 	                ctx.save();
 	                ctx.globalAlpha = lastFrameAlpha;
-	                ctx.drawImage(domBack, 0, 0, width / dpr, height / dpr);
+	                ctx.drawImage(domBack, 0, 0, width, height);
 	                ctx.restore();
 	            }
 	        }
@@ -19979,109 +19995,6 @@ return /******/ (function(modules) { // webpackBootstrap
 /***/ function(module, exports, __webpack_require__) {
 
 	
-
-	    var graphic = __webpack_require__(43);
-	    var zrUtil = __webpack_require__(4);
-	    var PI = Math.PI;
-	    /**
-	     * @param {module:echarts/ExtensionAPI} api
-	     * @param {Object} [opts]
-	     * @param {string} [opts.text]
-	     * @param {string} [opts.color]
-	     * @param {string} [opts.textColor]
-	     * @return {module:zrender/Element}
-	     */
-	    module.exports = function (api, opts) {
-	        opts = opts || {};
-	        zrUtil.defaults(opts, {
-	            text: 'loading',
-	            color: '#c23531',
-	            textColor: '#000',
-	            maskColor: 'rgba(255, 255, 255, 0.8)',
-	            zlevel: 0
-	        });
-	        var mask = new graphic.Rect({
-	            style: {
-	                fill: opts.maskColor
-	            },
-	            zlevel: opts.zlevel,
-	            z: 10000
-	        });
-	        var arc = new graphic.Arc({
-	            shape: {
-	                startAngle: -PI / 2,
-	                endAngle: -PI / 2 + 0.1,
-	                r: 10
-	            },
-	            style: {
-	                stroke: opts.color,
-	                lineCap: 'round',
-	                lineWidth: 5
-	            },
-	            zlevel: opts.zlevel,
-	            z: 10001
-	        });
-	        var labelRect = new graphic.Rect({
-	            style: {
-	                fill: 'none',
-	                text: opts.text,
-	                textPosition: 'right',
-	                textDistance: 10,
-	                textFill: opts.textColor
-	            },
-	            zlevel: opts.zlevel,
-	            z: 10001
-	        });
-
-	        arc.animateShape(true)
-	            .when(1000, {
-	                endAngle: PI * 3 / 2
-	            })
-	            .start('circularInOut');
-	        arc.animateShape(true)
-	            .when(1000, {
-	                startAngle: PI * 3 / 2
-	            })
-	            .delay(300)
-	            .start('circularInOut');
-
-	        var group = new graphic.Group();
-	        group.add(arc);
-	        group.add(labelRect);
-	        group.add(mask);
-	        // Inject resize
-	        group.resize = function () {
-	            var cx = api.getWidth() / 2;
-	            var cy = api.getHeight() / 2;
-	            arc.setShape({
-	                cx: cx,
-	                cy: cy
-	            });
-	            var r = arc.shape.r;
-	            labelRect.setShape({
-	                x: cx - r,
-	                y: cy - r,
-	                width: r * 2,
-	                height: r * 2
-	            });
-
-	            mask.setShape({
-	                x: 0,
-	                y: 0,
-	                width: api.getWidth(),
-	                height: api.getHeight()
-	            });
-	        };
-	        group.resize();
-	        return group;
-	    };
-
-
-/***/ },
-/* 94 */
-/***/ function(module, exports, __webpack_require__) {
-
-	
 	    var Gradient = __webpack_require__(61);
 	    module.exports = function (ecModel) {
 	        function encodeColor(seriesModel) {
@@ -20118,14 +20031,14 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 95 */
+/* 94 */
 /***/ function(module, exports, __webpack_require__) {
 
 	// Compatitable with 2.0
 
 
 	    var zrUtil = __webpack_require__(4);
-	    var compatStyle = __webpack_require__(96);
+	    var compatStyle = __webpack_require__(95);
 
 	    function get(opt, path) {
 	        path = path.split(',');
@@ -20228,7 +20141,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 96 */
+/* 95 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
@@ -20308,6 +20221,109 @@ return /******/ (function(modules) { // webpackBootstrap
 	    };
 
 
+/***/ },
+/* 96 */
+/***/ function(module, exports, __webpack_require__) {
+
+	
+
+	    var graphic = __webpack_require__(43);
+	    var zrUtil = __webpack_require__(4);
+	    var PI = Math.PI;
+	    /**
+	     * @param {module:echarts/ExtensionAPI} api
+	     * @param {Object} [opts]
+	     * @param {string} [opts.text]
+	     * @param {string} [opts.color]
+	     * @param {string} [opts.textColor]
+	     * @return {module:zrender/Element}
+	     */
+	    module.exports = function (api, opts) {
+	        opts = opts || {};
+	        zrUtil.defaults(opts, {
+	            text: 'loading',
+	            color: '#c23531',
+	            textColor: '#000',
+	            maskColor: 'rgba(255, 255, 255, 0.8)',
+	            zlevel: 0
+	        });
+	        var mask = new graphic.Rect({
+	            style: {
+	                fill: opts.maskColor
+	            },
+	            zlevel: opts.zlevel,
+	            z: 10000
+	        });
+	        var arc = new graphic.Arc({
+	            shape: {
+	                startAngle: -PI / 2,
+	                endAngle: -PI / 2 + 0.1,
+	                r: 10
+	            },
+	            style: {
+	                stroke: opts.color,
+	                lineCap: 'round',
+	                lineWidth: 5
+	            },
+	            zlevel: opts.zlevel,
+	            z: 10001
+	        });
+	        var labelRect = new graphic.Rect({
+	            style: {
+	                fill: 'none',
+	                text: opts.text,
+	                textPosition: 'right',
+	                textDistance: 10,
+	                textFill: opts.textColor
+	            },
+	            zlevel: opts.zlevel,
+	            z: 10001
+	        });
+
+	        arc.animateShape(true)
+	            .when(1000, {
+	                endAngle: PI * 3 / 2
+	            })
+	            .start('circularInOut');
+	        arc.animateShape(true)
+	            .when(1000, {
+	                startAngle: PI * 3 / 2
+	            })
+	            .delay(300)
+	            .start('circularInOut');
+
+	        var group = new graphic.Group();
+	        group.add(arc);
+	        group.add(labelRect);
+	        group.add(mask);
+	        // Inject resize
+	        group.resize = function () {
+	            var cx = api.getWidth() / 2;
+	            var cy = api.getHeight() / 2;
+	            arc.setShape({
+	                cx: cx,
+	                cy: cy
+	            });
+	            var r = arc.shape.r;
+	            labelRect.setShape({
+	                x: cx - r,
+	                y: cy - r,
+	                width: r * 2,
+	                height: r * 2
+	            });
+
+	            mask.setShape({
+	                x: 0,
+	                y: 0,
+	                width: api.getWidth(),
+	                height: api.getHeight()
+	            });
+	        };
+	        group.resize();
+	        return group;
+	    };
+
+
 /***/ },
 /* 97 */
 /***/ function(module, exports, __webpack_require__) {
@@ -21631,10 +21647,10 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	            hoverAnimation: true,
 	            // stack: null
-	            xAxisIndex: 0,
-	            yAxisIndex: 0,
+	            // xAxisIndex: 0,
+	            // yAxisIndex: 0,
 
-	            polarIndex: 0,
+	            // polarIndex: 0,
 
 	            // If clip the overflow value
 	            clipOverflow: true,
@@ -21808,15 +21824,31 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var creators = {
 
 	        cartesian2d: function (data, seriesModel, ecModel) {
-	            var xAxisModel = ecModel.getComponent('xAxis', seriesModel.get('xAxisIndex'));
-	            var yAxisModel = ecModel.getComponent('yAxis', seriesModel.get('yAxisIndex'));
+
+	            var axesModels = zrUtil.map(['xAxis', 'yAxis'], function (name) {
+	                return ecModel.queryComponents({
+	                    mainType: name,
+	                    index: seriesModel.get(name + 'Index'),
+	                    id: seriesModel.get(name + 'Id')
+	                })[0];
+	            });
+	            var xAxisModel = axesModels[0];
+	            var yAxisModel = axesModels[1];
 
 	            if (true) {
 	                if (!xAxisModel) {
-	                    throw new Error('xAxis "' + seriesModel.get('xAxisIndex') + '" not found');
+	                    throw new Error('xAxis "' + zrUtil.retrieve(
+	                        seriesModel.get('xAxisIndex'),
+	                        seriesModel.get('xAxisId'),
+	                        0
+	                    ) + '" not found');
 	                }
 	                if (!yAxisModel) {
-	                    throw new Error('yAxis "' + seriesModel.get('yAxisIndex') + '" not found');
+	                    throw new Error('yAxis "' + zrUtil.retrieve(
+	                        seriesModel.get('xAxisIndex'),
+	                        seriesModel.get('yAxisId'),
+	                        0
+	                    ) + '" not found');
 	                }
 	            }
 
@@ -21857,19 +21889,15 @@ return /******/ (function(modules) { // webpackBootstrap
 	        },
 
 	        polar: function (data, seriesModel, ecModel) {
-	            var polarIndex = seriesModel.get('polarIndex') || 0;
-
-	            var axisFinder = function (axisModel) {
-	                return axisModel.get('polarIndex') === polarIndex;
-	            };
-
-	            var angleAxisModel = ecModel.findComponents({
-	                mainType: 'angleAxis', filter: axisFinder
-	            })[0];
-	            var radiusAxisModel = ecModel.findComponents({
-	                mainType: 'radiusAxis', filter: axisFinder
+	            var polarModel = ecModel.queryComponents({
+	                mainType: 'polar',
+	                index: seriesModel.get('polarIndex'),
+	                id: seriesModel.get('polarId')
 	            })[0];
 
+	            var angleAxisModel = polarModel.findAxisModel('angleAxis');
+	            var radiusAxisModel = polarModel.findAxisModel('radiusAxis');
+
 	            if (true) {
 	                if (!angleAxisModel) {
 	                    throw new Error('angleAxis option not found');
@@ -22461,6 +22489,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	                        );
 	                    }
 	                    else {
+	                        // Not do it in update with animation
+	                        if (step) {
+	                            // TODO If stacked series is not step
+	                            points = turnPointsIntoStep(points, coordSys, step);
+	                            stackedOnPoints = turnPointsIntoStep(stackedOnPoints, coordSys, step);
+	                        }
+
 	                        polyline.setShape({
 	                            points: points
 	                        });
@@ -22771,6 +22806,10 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    function symbolNeedsDraw(data, idx, isIgnore) {
 	        var point = data.getItemLayout(idx);
+	        // Is an object
+	        // if (point && point.hasOwnProperty('point')) {
+	        //     point = point.point;
+	        // }
 	        return point && !isNaN(point[0]) && !isNaN(point[1]) && !(isIgnore && isIgnore(idx))
 	                    && data.getItemVisual(idx, 'symbol') !== 'none';
 	    }
@@ -22950,6 +22989,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	        this.childAt(0).stopAnimation(toLastFrame);
 	    };
 
+	    /**
+	     * Get symbol path element
+	     */
+	    symbolProto.getSymbolPath = function () {
+	        return this.childAt(0);
+	    };
+
 	    /**
 	     * Get scale(aka, current symbol size).
 	     * Including the change caused by animation
@@ -23120,7 +23166,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	            .off('emphasis')
 	            .off('normal');
 
-	        graphic.setHoverStyle(symbolPath, hoverItemStyle);
+	        symbolPath.hoverStyle = hoverItemStyle;
+
+	        graphic.setHoverStyle(symbolPath);
 
 	        if (hoverAnimation && seriesModel.ifEnableAnimation()) {
 	            var onEmphasis = function() {
@@ -24161,13 +24209,14 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var graphic = __webpack_require__(43);
 	    var zrUtil = __webpack_require__(4);
+	    var echarts = __webpack_require__(1);
 
 	    __webpack_require__(113);
 
 	    __webpack_require__(130);
 
 	    // Grid view
-	    __webpack_require__(1).extendComponentView({
+	    echarts.extendComponentView({
 
 	        type: 'grid',
 
@@ -24185,6 +24234,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	        }
 	    });
 
+	    echarts.registerPreprocessor(function (option) {
+	        // Only create grid when need
+	        if (option.xAxis && option.yAxis && !option.grid) {
+	            option.grid = {};
+	        }
+	    });
+
 
 /***/ },
 /* 113 */
@@ -24217,7 +24273,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	     * @inner
 	     */
 	    function isAxisUsedInTheGrid(axisModel, gridModel, ecModel) {
-	        return ecModel.getComponent('grid', axisModel.get('gridIndex')) === gridModel;
+	        return axisModel.findGridModel() === gridModel;
 	    }
 
 	    function getLabelUnionRect(axis) {
@@ -24530,12 +24586,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	            axis.scale.setExtent(Infinity, -Infinity);
 	        });
 	        ecModel.eachSeries(function (seriesModel) {
-	            if (seriesModel.get('coordinateSystem') === 'cartesian2d') {
-	                var xAxisIndex = seriesModel.get('xAxisIndex');
-	                var yAxisIndex = seriesModel.get('yAxisIndex');
-
-	                var xAxisModel = ecModel.getComponent('xAxis', xAxisIndex);
-	                var yAxisModel = ecModel.getComponent('yAxis', yAxisIndex);
+	            if (isCartesian2D(seriesModel)) {
+	                var axesModels = findAxesModels(seriesModel, ecModel);
+	                var xAxisModel = axesModels[0];
+	                var yAxisModel = axesModels[1];
 
 	                if (!isAxisUsedInTheGrid(xAxisModel, gridModel, ecModel)
 	                    || !isAxisUsedInTheGrid(yAxisModel, gridModel, ecModel)
@@ -24543,7 +24597,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	                    return;
 	                }
 
-	                var cartesian = this.getCartesian(xAxisIndex, yAxisIndex);
+	                var cartesian = this.getCartesian(
+	                    xAxisModel.componentIndex, yAxisModel.componentIndex
+	                );
 	                var data = seriesModel.getData();
 	                var xAxis = cartesian.getAxis('x');
 	                var yAxis = cartesian.getAxis('y');
@@ -24588,6 +24644,38 @@ return /******/ (function(modules) { // webpackBootstrap
 	            };
 	    }
 
+	    var axesTypes = ['xAxis', 'yAxis'];
+	    /**
+	     * @inner
+	     */
+	    function findAxesModels(seriesModel, ecModel) {
+	        return zrUtil.map(axesTypes, function (axisType) {
+	            var axisModel = ecModel.queryComponents({
+	                mainType: axisType,
+	                index: seriesModel.get(axisType + 'Index'),
+	                id: seriesModel.get(axisType + 'Id')
+	            })[0];
+
+	            if (true) {
+	                if (!axisModel) {
+	                    throw new Error(axisType + ' "' + zrUtil.retrieve(
+	                        seriesModel.get(axisType + 'Index'),
+	                        seriesModel.get(axisType + 'Id'),
+	                        0
+	                    ) + '" not found');
+	                }
+	            }
+	            return axisModel;
+	        });
+	    }
+
+	    /**
+	     * @inner
+	     */
+	    function isCartesian2D(seriesModel) {
+	        return seriesModel.get('coordinateSystem') === 'cartesian2d';
+	    }
+
 	    Grid.create = function (ecModel, api) {
 	        var grids = [];
 	        ecModel.eachComponent('grid', function (gridModel, idx) {
@@ -24602,21 +24690,36 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	        // Inject the coordinateSystems into seriesModel
 	        ecModel.eachSeries(function (seriesModel) {
-	            if (seriesModel.get('coordinateSystem') !== 'cartesian2d') {
+	            if (!isCartesian2D(seriesModel)) {
 	                return;
 	            }
-	            var xAxisIndex = seriesModel.get('xAxisIndex');
-	            var yAxisIndex = seriesModel.get('yAxisIndex');
-	            var xAxisModel = ecModel.getComponent('xAxis', xAxisIndex);
+
+	            var axesModels = findAxesModels(seriesModel, ecModel);
+	            var xAxisModel = axesModels[0];
+	            var yAxisModel = axesModels[1];
+
+	            var gridModel = xAxisModel.findGridModel();
 
 	            if (true) {
-	                var yAxisModel = ecModel.getComponent('yAxis', yAxisIndex);
-	                if (xAxisModel.get('gridIndex') !== yAxisModel.get('gridIndex')) {
+	                if (!gridModel) {
+	                    throw new Error(
+	                        'Grid "' + zrUtil.retrieve(
+	                            xAxisModel.get('gridIndex'),
+	                            xAxisModel.get('gridId'),
+	                            0
+	                        ) + '" not found'
+	                    );
+	                }
+	                if (xAxisModel.findGridModel() !== yAxisModel.findGridModel()) {
 	                    throw new Error('xAxis and yAxis must use the same grid');
 	                }
 	            }
-	            var grid = grids[xAxisModel.get('gridIndex')];
-	            seriesModel.coordinateSystem = grid.getCartesian(xAxisIndex, yAxisIndex);
+
+	            var grid = gridModel.coordinateSystem;
+
+	            seriesModel.coordinateSystem = grid.getCartesian(
+	                xAxisModel.componentIndex, yAxisModel.componentIndex
+	            );
 	        });
 
 	        return grids;
@@ -24710,6 +24813,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	        var fixMin = (model.getMin ? model.getMin() : model.get('min')) != null;
 	        var fixMax = (model.getMax ? model.getMax() : model.get('max')) != null;
 	        var splitNumber = model.get('splitNumber');
+
+	        if (scale.type === 'log') {
+	            scale.base = model.get('logBase');
+	        }
+
 	        scale.setExtent(extent[0], extent[1]);
 	        scale.niceExtent(splitNumber, fixMin, fixMax);
 
@@ -25104,6 +25212,9 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var mathFloor = Math.floor;
 	    var mathCeil = Math.ceil;
+
+	    var getPrecisionSafe = numberUtil.getPrecisionSafe;
+	    var roundingErrorFix = numberUtil.round;
 	    /**
 	     * @alias module:echarts/coord/scale/Interval
 	     * @constructor
@@ -25169,6 +25280,8 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	            if (interval) {
 	                var niceExtent = this._niceExtent;
+	                var precision = getPrecisionSafe(interval) + 2;
+
 	                if (extent[0] < niceExtent[0]) {
 	                    ticks.push(extent[0]);
 	                }
@@ -25176,7 +25289,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                while (tick <= niceExtent[1]) {
 	                    ticks.push(tick);
 	                    // Avoid rounding error
-	                    tick = numberUtil.round(tick + interval);
+	                    tick = roundingErrorFix(tick + interval, precision);
 	                    if (ticks.length > safeLimit) {
 	                        return [];
 	                    }
@@ -25230,12 +25343,21 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	            // From "Nice Numbers for Graph Labels" of Graphic Gems
 	            // var niceSpan = numberUtil.nice(span, false);
-	            var step = numberUtil.nice(span / splitNumber, true);
+	            var step = roundingErrorFix(
+	                numberUtil.nice(span / splitNumber, true),
+	                Math.max(
+	                    getPrecisionSafe(extent[0]),
+	                    getPrecisionSafe(extent[1])
+	                // extent may be [0, 1], and step should have 1 more digits.
+	                // To make it safe we add 2 more digits
+	                ) + 2
+	            );
 
+	            var precision = getPrecisionSafe(step) + 2;
 	            // Niced extent inside original extent
 	            var niceExtent = [
-	                numberUtil.round(mathCeil(extent[0] / step) * step),
-	                numberUtil.round(mathFloor(extent[1] / step) * step)
+	                roundingErrorFix(mathCeil(extent[0] / step) * step, precision),
+	                roundingErrorFix(mathFloor(extent[1] / step) * step, precision)
 	            ];
 
 	            this._interval = step;
@@ -25285,10 +25407,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	            var interval = this._interval;
 
 	            if (!fixMin) {
-	                extent[0] = numberUtil.round(mathFloor(extent[0] / interval) * interval);
+	                extent[0] = roundingErrorFix(mathFloor(extent[0] / interval) * interval);
 	            }
 	            if (!fixMax) {
-	                extent[1] = numberUtil.round(mathCeil(extent[1] / interval) * interval);
+	                extent[1] = roundingErrorFix(mathCeil(extent[1] / interval) * interval);
 	            }
 	        }
 	    });
@@ -25494,20 +25616,21 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var mathCeil = Math.ceil;
 	    var mathPow = Math.pow;
 
-	    var LOG_BASE = 10;
 	    var mathLog = Math.log;
 
 	    var LogScale = Scale.extend({
 
 	        type: 'log',
 
+	        base: 10,
+
 	        /**
 	         * @return {Array.<number>}
 	         */
 	        getTicks: function () {
 	            return zrUtil.map(intervalScaleProto.getTicks.call(this), function (val) {
-	                return numberUtil.round(mathPow(LOG_BASE, val));
-	            });
+	                return numberUtil.round(mathPow(this.base, val));
+	            }, this);
 	        },
 
 	        /**
@@ -25522,7 +25645,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	         */
 	        scale: function (val) {
 	            val = scaleProto.scale.call(this, val);
-	            return mathPow(LOG_BASE, val);
+	            return mathPow(this.base, val);
 	        },
 
 	        /**
@@ -25530,8 +25653,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	         * @param {number} end
 	         */
 	        setExtent: function (start, end) {
-	            start = mathLog(start) / mathLog(LOG_BASE);
-	            end = mathLog(end) / mathLog(LOG_BASE);
+	            var base = this.base;
+	            start = mathLog(start) / mathLog(base);
+	            end = mathLog(end) / mathLog(base);
 	            intervalScaleProto.setExtent.call(this, start, end);
 	        },
 
@@ -25539,9 +25663,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	         * @return {number} end
 	         */
 	        getExtent: function () {
+	            var base = this.base;
 	            var extent = scaleProto.getExtent.call(this);
-	            extent[0] = mathPow(LOG_BASE, extent[0]);
-	            extent[1] = mathPow(LOG_BASE, extent[1]);
+	            extent[0] = mathPow(base, extent[0]);
+	            extent[1] = mathPow(base, extent[1]);
 	            return extent;
 	        },
 
@@ -25549,8 +25674,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	         * @param  {Array.<number>} extent
 	         */
 	        unionExtent: function (extent) {
-	            extent[0] = mathLog(extent[0]) / mathLog(LOG_BASE);
-	            extent[1] = mathLog(extent[1]) / mathLog(LOG_BASE);
+	            var base = this.base;
+	            extent[0] = mathLog(extent[0]) / mathLog(base);
+	            extent[1] = mathLog(extent[1]) / mathLog(base);
 	            scaleProto.unionExtent.call(this, extent);
 	        },
 
@@ -25566,13 +25692,19 @@ return /******/ (function(modules) { // webpackBootstrap
 	                return;
 	            }
 
-	            var interval = mathPow(10, mathFloor(mathLog(span / approxTickNum) / Math.LN10));
+	            var interval = numberUtil.quantity(span);
 	            var err = approxTickNum / span * interval;
 
 	            // Filter ticks to get closer to the desired count.
 	            if (err <= 0.5) {
 	                interval *= 10;
 	            }
+
+	            // Interval should be integer
+	            while (!isNaN(interval) && Math.abs(interval) < 1 && Math.abs(interval) > 0) {
+	                interval *= 10;
+	            }
+
 	            var niceExtent = [
 	                numberUtil.round(mathCeil(extent[0] / interval) * interval),
 	                numberUtil.round(mathFloor(extent[1] / interval) * interval)
@@ -25593,7 +25725,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    zrUtil.each(['contain', 'normalize'], function (methodName) {
 	        LogScale.prototype[methodName] = function (val) {
-	            val = mathLog(val) / mathLog(LOG_BASE);
+	            val = mathLog(val) / mathLog(this.base);
 	            return scaleProto[methodName].call(this, val);
 	        };
 	    });
@@ -26343,6 +26475,17 @@ return /******/ (function(modules) { // webpackBootstrap
 	                ? false : !option.scale;
 	        },
 
+	        /**
+	         * @return {module:echarts/model/Model}
+	         */
+	        findGridModel: function () {
+	            return this.ecModel.queryComponents({
+	                mainType: 'grid',
+	                index: this.get('gridIndex'),
+	                id: this.get('gridId')
+	            })[0];
+	        },
+
 	        /**
 	         * @private
 	         */
@@ -26361,7 +26504,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	    zrUtil.merge(AxisModel.prototype, __webpack_require__(129));
 
 	    var extraOption = {
-	        gridIndex: 0,
+	        // gridIndex: 0,
+	        // gridId: '',
 
 	        // Offset is for multiple axis on the same position
 	        offset: 0
@@ -26581,7 +26725,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	        min: 'dataMin',
 	        max: 'dataMax'
 	    }, valueAxis);
-	    var logAxis = zrUtil.defaults({}, valueAxis);
+	    var logAxis = zrUtil.defaults({
+	        logBase: 10
+	    }, valueAxis);
 	    logAxis.scale = true;
 
 	    module.exports = {
@@ -26693,7 +26839,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                return;
 	            }
 
-	            var gridModel = ecModel.getComponent('grid', axisModel.get('gridIndex'));
+	            var gridModel = axisModel.findGridModel();
 
 	            var layout = layoutAxis(gridModel, axisModel);
 
@@ -27615,8 +27761,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	            // stack: null
 
 	            // Cartesian coordinate system
-	            xAxisIndex: 0,
-	            yAxisIndex: 0,
+	            // xAxisIndex: 0,
+	            // yAxisIndex: 0,
 
 	            // 最小高度改为0
 	            barMinHeight: 0,
@@ -28809,15 +28955,21 @@ return /******/ (function(modules) { // webpackBootstrap
 	                    // FIXME Performance
 	                    var itemModel = dataAll.getItemModel(rawIdx);
 	                    var filteredIdx = idxMap[rawIdx];
+
 	                    // If series.itemStyle.normal.color is a function. itemVisual may be encoded
-	                    var singleDataColor = data.getItemVisual(filteredIdx, 'color', true);
+	                    var singleDataColor = filteredIdx != null
+	                        && data.getItemVisual(filteredIdx, 'color', true);
 
 	                    if (!singleDataColor) {
 	                        var color = itemModel.get('itemStyle.normal.color')
 	                            || seriesModel.getColorFromPalette(dataAll.getName(rawIdx), paletteScope);
 	                        // Legend may use the visual info in data before processed
 	                        dataAll.setItemVisual(rawIdx, 'color', color);
-	                        data.setItemVisual(filteredIdx, 'color', color);
+
+	                        // Data is not filtered
+	                        if (filteredIdx != null) {
+	                            data.setItemVisual(filteredIdx, 'color', color);
+	                        }
 	                    }
 	                    else {
 	                        // Set data all color for legend
@@ -29270,14 +29422,14 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	            hoverAnimation: true,
 	            // Cartesian coordinate system
-	            xAxisIndex: 0,
-	            yAxisIndex: 0,
+	            // xAxisIndex: 0,
+	            // yAxisIndex: 0,
 
 	            // Polar coordinate system
-	            polarIndex: 0,
+	            // polarIndex: 0,
 
 	            // Geo coordinate system
-	            geoIndex: 0,
+	            // geoIndex: 0,
 
 	            // symbol: null,        // 图形类型
 	            symbolSize: 10,          // 图形大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
@@ -29862,10 +30014,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	            var nameGap = this.get('nameGap');
 	            var indicatorModels = zrUtil.map(this.get('indicator') || [], function (indicatorOpt) {
 	                // PENDING
-	                if (indicatorOpt.max != null && indicatorOpt.max > 0) {
+	                if (indicatorOpt.max != null && indicatorOpt.max > 0 && !indicatorOpt.min) {
 	                    indicatorOpt.min = 0;
 	                }
-	                else if (indicatorOpt.min != null && indicatorOpt.min < 0) {
+	                else if (indicatorOpt.min != null && indicatorOpt.min < 0 && !indicatorOpt.max) {
 	                    indicatorOpt.max = 0;
 	                }
 	                // Use same configuration
@@ -30074,7 +30226,15 @@ return /******/ (function(modules) { // webpackBootstrap
 	                        points.push(axesTicksPoints[j][i]);
 	                    }
 	                    // Close
-	                    points.push(points[0].slice());
+	                    if (points[0]) {
+	                        points.push(points[0].slice());
+	                    }
+	                    else {
+	                        if (true) {
+	                            console.error('Can\'t draw value axis ' + i);
+	                            continue;
+	                        }
+	                    }
 	                    if (showSplitLine) {
 	                        var colorIndex = getColorIndex(splitLines, splitLineColors, i);
 	                        splitLines[colorIndex].push(new graphic.Polyline({
@@ -31971,8 +32131,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	            group.removeAll();
 	            // Not update map if it is an roam action from self
 	            if (!(payload && payload.type === 'geoRoam'
-	                && payload.component === 'series'
-	                && payload.name === mapModel.name)) {
+	                && payload.componentType === 'series'
+	                && payload.seriesId === mapModel.id)) {
 
 	                if (mapModel.needsDrawMap) {
 	                    var mapDraw = this._mapDraw || new MapDraw(api, true);
@@ -36783,6 +36943,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	            this.option.center = center;
 	        },
 
+	        ifEnableAnimation: function () {
+	            return GraphSeries.superCall(this, 'ifEnableAnimation')
+	                // Not enable animation when do force layout
+	                && !(this.get('layout') === 'force' && this.get('force.layoutAnimation'));
+	        },
+
 	        defaultOption: {
 	            zlevel: 0,
 	            z: 2,
@@ -36790,10 +36956,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	            coordinateSystem: 'view',
 
 	            // Default option for all coordinate systems
-	            xAxisIndex: 0,
-	            yAxisIndex: 0,
-	            polarIndex: 0,
-	            geoIndex: 0,
+	            // xAxisIndex: 0,
+	            // yAxisIndex: 0,
+	            // polarIndex: 0,
+	            // geoIndex: 0,
 
 	            legendHoverLink: true,
 
@@ -36803,11 +36969,18 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	            focusNodeAdjacency: false,
 
-	            // Configuration of force
+	            // Configuration of circular layout
+	            circular: {
+	                rotateLabel: false
+	            },
+	            // Configuration of force directed layout
 	            force: {
 	                initLayout: null,
-	                repulsion: 50,
+	                // Node repulsion. Can be an array to represent range.
+	                repulsion: [0, 50],
 	                gravity: 0.1,
+
+	                // Edge length. Can be an array to represent range.
 	                edgeLength: 30,
 
 	                layoutAnimation: true
@@ -36908,14 +37081,16 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	        var linkNameList = [];
 	        var validEdges = [];
+	        var linkCount = 0;
 	        for (var i = 0; i < edges.length; i++) {
 	            var link = edges[i];
 	            var source = link.source;
 	            var target = link.target;
 	            // addEdge may fail when source or target not exists
-	            if (graph.addEdge(source, target, i)) {
+	            if (graph.addEdge(source, target, linkCount)) {
 	                validEdges.push(link);
 	                linkNameList.push(zrUtil.retrieve(link.id, source + ' > ' + target));
+	                linkCount++;
 	            }
 	        }
 
@@ -37591,6 +37766,35 @@ return /******/ (function(modules) { // webpackBootstrap
 	                }
 	            }, this);
 
+	            var circularRotateLabel = seriesModel.get('layout') === 'circular' && seriesModel.get('circular.rotateLabel');
+	            var cx = data.getLayout('cx');
+	            var cy = data.getLayout('cy');
+	            data.eachItemGraphicEl(function (el, idx) {
+	                var symbolPath = el.getSymbolPath();
+	                if (circularRotateLabel) {
+	                    var pos = data.getItemLayout(idx);
+	                    var rad = Math.atan2(pos[1] - cy, pos[0] - cx);
+	                    if (rad < 0) {
+	                        rad = Math.PI * 2 + rad;
+	                    }
+	                    var isLeft = pos[0] < cx;
+	                    if (isLeft) {
+	                        rad = rad - Math.PI;
+	                    }
+	                    var textPosition = isLeft ? 'left' : 'right';
+	                    symbolPath.setStyle({
+	                        textRotation: rad,
+	                        textPosition: textPosition
+	                    });
+	                    symbolPath.hoverStyle && (symbolPath.hoverStyle.textPosition = textPosition);
+	                }
+	                else {
+	                    symbolPath.setStyle({
+	                        textRotation: 0
+	                    });
+	                }
+	            });
+
 	            this._firstRender = false;
 	        },
 
@@ -37936,6 +38140,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	            targetShape.cpx1 = cp1[0];
 	            targetShape.cpy1 = cp1[1];
 	        }
+	        else {
+	            targetShape.cpx1 = NaN;
+	            targetShape.cpy1 = NaN;
+	        }
 	    }
 
 	    function updateSymbolAndLabelBeforeLineUpdate () {
@@ -38134,6 +38342,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	        }
 
 	        var visualColor = lineData.getItemVisual(idx, 'color');
+	        var visualOpacity = zrUtil.retrieve(
+	            lineData.getItemVisual(idx, 'opacity'),
+	            lineStyle.opacity,
+	            1
+	        );
 	        if (isNaN(defaultText)) {
 	            // Use name
 	            defaultText = lineData.getName(idx);
@@ -38142,12 +38355,24 @@ return /******/ (function(modules) { // webpackBootstrap
 	            {
 	                strokeNoScale: true,
 	                fill: 'none',
-	                stroke: visualColor
+	                stroke: visualColor,
+	                opacity: visualOpacity
 	            },
 	            lineStyle
 	        ));
 	        line.hoverStyle = hoverLineStyle;
 
+	        // Update symbol
+	        zrUtil.each(SYMBOL_CATEGORIES, function (symbolCategory) {
+	            var symbol = this.childOfName(symbolCategory);
+	            if (symbol) {
+	                symbol.setColor(visualColor);
+	                symbol.setStyle({
+	                    opacity: visualOpacity
+	                });
+	            }
+	        }, this);
+
 	        var showLabel = labelModel.getShallow('show');
 	        var hoverShowLabel = hoverLabelModel.getShallow('show');
 	        var defaultText;
@@ -38229,7 +38454,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var bezierCurveProto = graphic.BezierCurve.prototype;
 
 	    function isLine(shape) {
-	        return shape.cpx1 == null || shape.cpy1 == null;
+	        return isNaN(+shape.cpx1) || isNaN(+shape.cpy1);
 	    }
 
 	    module.exports = graphic.extendShape({
@@ -38356,6 +38581,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	        var v = [];
 	        scale /= 2;
 
+	        function getSymbolSize(node) {
+	            var symbolSize = node.getVisual('symbolSize');
+	            if (symbolSize instanceof Array) {
+	                symbolSize = (symbolSize[0] + symbolSize[1]) / 2;
+	            }
+	            return symbolSize;
+	        }
 	        graph.eachEdge(function (edge, idx) {
 	            var linePoints = edge.getLayout();
 	            var fromSymbol = edge.getVisual('fromSymbol');
@@ -38377,10 +38609,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	                vec2.copy(pts[1], originalPoints[2]);
 	                vec2.copy(pts[2], originalPoints[1]);
 	                if (fromSymbol && fromSymbol != 'none') {
-	                    var symbolSize = edge.node1.getVisual('symbolSize');
-	                    if (symbolSize instanceof Array) {
-	                        symbolSize = (symbolSize[0] + symbolSize[1]) / 2;
-	                    }
+	                    var symbolSize = getSymbolSize(edge.node1);
+
 	                    var t = intersectCurveCircle(pts, originalPoints[0], symbolSize * scale);
 	                    // Subdivide and get the second
 	                    quadraticSubdivide(pts[0][0], pts[1][0], pts[2][0], t, tmp0);
@@ -38391,10 +38621,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	                    pts[1][1] = tmp0[4];
 	                }
 	                if (toSymbol && toSymbol != 'none') {
-	                    var symbolSize = edge.node1.getVisual('symbolSize');
-	                    if (symbolSize instanceof Array) {
-	                        symbolSize = (symbolSize[0] + symbolSize[1]) / 2;
-	                    }
+	                    var symbolSize = getSymbolSize(edge.node2);
+
 	                    var t = intersectCurveCircle(pts, originalPoints[1], symbolSize * scale);
 	                    // Subdivide and get the first
 	                    quadraticSubdivide(pts[0][0], pts[1][0], pts[2][0], t, tmp0);
@@ -38417,10 +38645,15 @@ return /******/ (function(modules) { // webpackBootstrap
 	                vec2.sub(v, pts2[1], pts2[0]);
 	                vec2.normalize(v, v);
 	                if (fromSymbol && fromSymbol != 'none') {
-	                    vec2.scaleAndAdd(pts2[0], pts2[0], v, edge.node1.getVisual('symbolSize') * scale);
+
+	                    var symbolSize = getSymbolSize(edge.node1);
+
+	                    vec2.scaleAndAdd(pts2[0], pts2[0], v, symbolSize * scale);
 	                }
 	                if (toSymbol && toSymbol != 'none') {
-	                    vec2.scaleAndAdd(pts2[1], pts2[1], v, -edge.node2.getVisual('symbolSize') * scale);
+	                    var symbolSize = getSymbolSize(edge.node2);
+
+	                    vec2.scaleAndAdd(pts2[1], pts2[1], v, -symbolSize * scale);
 	                }
 	                vec2.copy(linePoints[0], pts2[0]);
 	                vec2.copy(linePoints[1], pts2[1]);
@@ -38516,6 +38749,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	
 
 	    module.exports = function (ecModel) {
+
+	        var paletteScope = {};
 	        ecModel.eachSeriesByType('graph', function (seriesModel) {
 	            var categoriesData = seriesModel.getCategoriesData();
 	            var data = seriesModel.getData();
@@ -38528,7 +38763,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	                var itemModel = categoriesData.getItemModel(idx);
 	                var color = itemModel.get('itemStyle.normal.color')
-	                    || seriesModel.getColorFromPalette(name);
+	                    || seriesModel.getColorFromPalette(name, paletteScope);
 	                categoriesData.setItemVisual(idx, 'color', color);
 	            });
 
@@ -38573,11 +38808,15 @@ return /******/ (function(modules) { // webpackBootstrap
 	            var symbolType = normalize(seriesModel.get('edgeSymbol'));
 	            var symbolSize = normalize(seriesModel.get('edgeSymbolSize'));
 
+	            var colorQuery = 'lineStyle.normal.color'.split('.');
+	            var opacityQuery = 'lineStyle.normal.opacity'.split('.');
+
 	            edgeData.setVisual('fromSymbol', symbolType && symbolType[0]);
 	            edgeData.setVisual('toSymbol', symbolType && symbolType[1]);
 	            edgeData.setVisual('fromSymbolSize', symbolSize && symbolSize[0]);
 	            edgeData.setVisual('toSymbolSize', symbolSize && symbolSize[1]);
-	            edgeData.setVisual('color', seriesModel.get('lineStyle.normal.color'));
+	            edgeData.setVisual('color', seriesModel.get(colorQuery));
+	            edgeData.setVisual('opacity', seriesModel.get(opacityQuery));
 
 	            edgeData.each(function (idx) {
 	                var itemModel = edgeData.getItemModel(idx);
@@ -38585,7 +38824,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	                var symbolType = normalize(itemModel.getShallow('symbol', true));
 	                var symbolSize = normalize(itemModel.getShallow('symbolSize', true));
 	                // Edge visual must after node visual
-	                var color = itemModel.get('lineStyle.normal.color');
+	                var color = itemModel.get(colorQuery);
+	                var opacity = itemModel.get(opacityQuery);
 	                switch (color) {
 	                    case 'source':
 	                        color = edge.node1.getVisual('color');
@@ -38601,6 +38841,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                symbolSize[1] && edge.setVisual('toSymbolSize', symbolSize[1]);
 
 	                edge.setVisual('color', color);
+	                edge.setVisual('opacity', opacity);
 	            });
 	        });
 	    };
@@ -38675,7 +38916,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	            var p1 = vec2.clone(edge.node1.getLayout());
 	            var p2 = vec2.clone(edge.node2.getLayout());
 	            var points = [p1, p2];
-	            if (curveness > 0) {
+	            if (+curveness) {
 	                points.push([
 	                    (p1[0] + p2[0]) / 2 - (p1[1] - p2[1]) * curveness,
 	                    (p1[1] + p2[1]) / 2 - (p2[0] - p1[0]) * curveness
@@ -38740,6 +38981,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	            angle += unitAngle * (sum ? value : 2) / 2;
 	        });
 
+	        nodeData.setLayout({
+	            cx: cx,
+	            cy: cy
+	        });
+
 	        graph.eachEdge(function (edge) {
 	            var curveness = edge.getModel().get('lineStyle.normal.curveness') || 0;
 	            var p1 = vec2.clone(edge.node1.getLayout());
@@ -38747,7 +38993,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	            var cp1;
 	            var x12 = (p1[0] + p2[0]) / 2;
 	            var y12 = (p1[1] + p2[1]) / 2;
-	            if (curveness > 0) {
+	            if (+curveness) {
 	                curveness *= 3;
 	                cp1 = [
 	                    cx * curveness + x12 * (1 - curveness),
@@ -38770,6 +39016,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var simpleLayoutHelper = __webpack_require__(208);
 	    var circularLayoutHelper = __webpack_require__(211);
 	    var vec2 = __webpack_require__(10);
+	    var zrUtil = __webpack_require__(4);
 
 	    module.exports = function (ecModel) {
 	        ecModel.eachSeriesByType('graph', function (graphSeries) {
@@ -38798,13 +39045,26 @@ return /******/ (function(modules) { // webpackBootstrap
 	                }
 
 	                var nodeDataExtent = nodeData.getDataExtent('value');
+	                var edgeDataExtent = edgeData.getDataExtent('value');
 	                // var edgeDataExtent = edgeData.getDataExtent('value');
 	                var repulsion = forceModel.get('repulsion');
 	                var edgeLength = forceModel.get('edgeLength');
+	                if (!zrUtil.isArray(repulsion)) {
+	                    repulsion = [repulsion, repulsion];
+	                }
+	                if (!zrUtil.isArray(edgeLength)) {
+	                    edgeLength = [edgeLength, edgeLength];
+	                }
+	                // Larger value has smaller length
+	                edgeLength = [edgeLength[1], edgeLength[0]];
+
 	                var nodes = nodeData.mapArray('value', function (value, idx) {
 	                    var point = nodeData.getItemLayout(idx);
 	                    // var w = numberUtil.linearMap(value, nodeDataExtent, [0, 50]);
-	                    var rep = numberUtil.linearMap(value, nodeDataExtent, [0, repulsion]) || (repulsion / 2);
+	                    var rep = numberUtil.linearMap(value, nodeDataExtent, repulsion);
+	                    if (isNaN(rep)) {
+	                        rep = (repulsion[0] + repulsion[1]) / 2;
+	                    }
 	                    return {
 	                        w: rep,
 	                        rep: rep,
@@ -38813,11 +39073,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	                });
 	                var edges = edgeData.mapArray('value', function (value, idx) {
 	                    var edge = graph.getEdgeByIndex(idx);
-	                    // var w = numberUtil.linearMap(value, edgeDataExtent, [0, 100]);
+	                    var d = numberUtil.linearMap(value, edgeDataExtent, edgeLength);
+	                    if (isNaN(d)) {
+	                        d = (edgeLength[0] + edgeLength[1]) / 2;
+	                    }
 	                    return {
 	                        n1: nodes[edge.node1.dataIndex],
 	                        n2: nodes[edge.node2.dataIndex],
-	                        d: edgeLength,
+	                        d: d,
 	                        curveness: edge.getModel().get('lineStyle.normal.curveness') || 0
 	                    };
 	                });
@@ -38854,7 +39117,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                            points[1] = points[1] || [];
 	                            vec2.copy(points[0], p1);
 	                            vec2.copy(points[1], p2);
-	                            if (e.curveness > 0) {
+	                            if (+e.curveness) {
 	                                points[2] = [
 	                                    (p1[0] + p2[0]) / 2 - (p1[1] - p2[1]) * e.curveness,
 	                                    (p1[1] + p2[1]) / 2 - (p2[0] - p1[0]) * e.curveness
@@ -40335,8 +40598,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	        // Inject the coordinateSystems into seriesModel
 	        ecModel.eachSeries(function (seriesModel) {
 	            if (seriesModel.get('coordinateSystem') === 'parallel') {
-	                var parallelIndex = seriesModel.get('parallelIndex');
-	                seriesModel.coordinateSystem = coordSysList[parallelIndex];
+	                var parallelModel = ecModel.queryComponents({
+	                    mainType: 'parallel',
+	                    index: seriesModel.get('parallelIndex'),
+	                    id: seriesModel.get('parallelId')
+	                })[0];
+	                seriesModel.coordinateSystem = parallelModel.coordinateSystem;
 	            }
 	        });
 
@@ -41026,7 +41293,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	         */
 	        dim: null, // 0, 1, 2, ...
 
-	        parallelIndex: null,
+	        // parallelIndex: null,
 
 	        areaSelectStyle: {
 	            width: 20,
@@ -42799,7 +43066,10 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 239 */
 /***/ function(module, exports, __webpack_require__) {
 
-	'use strict';
+	/**
+	 * @file Get initial data and define sankey view's series model
+	 * @author Deqing Li(annong035@gmail.com)
+	 */
 
 
 	    var SeriesModel = __webpack_require__(28);
@@ -42811,7 +43081,13 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	        layoutInfo: null,
 
-	        getInitialData: function (option, ecModel) {
+	        /**
+	         * Init a graph data structure from data in option series
+	         *
+	         * @param  {Object} option  the object used to config echarts view
+	         * @return {module:echarts/data/List} storage initial data
+	         */
+	        getInitialData: function (option) {
 	            var links = option.edges || option.links;
 	            var nodes = option.data || option.nodes;
 	            if (nodes && links) {
@@ -42821,16 +43097,20 @@ return /******/ (function(modules) { // webpackBootstrap
 	        },
 
 	        /**
-	         * @return {module:echarts/data/Graph}
+	         * Return the graphic data structure
+	         *
+	         * @return {module:echarts/data/Graph} graphic data structure
 	         */
 	        getGraph: function () {
 	            return this.getData().graph;
 	        },
 
 	        /**
-	         * return {module:echarts/data/List}
+	         * Get edge data of graphic data structure
+	         *
+	         * @return {module:echarts/data/List} data structure of list
 	         */
-	        getEdgeData: function() {
+	        getEdgeData: function () {
 	            return this.getGraph().edgeData;
 	        },
 
@@ -42838,6 +43118,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	         * @override
 	         */
 	        formatTooltip: function (dataIndex, multipleSeries, dataType) {
+	            // dataType === 'node' or empty do not show tooltip by default
 	            if (dataType === 'edge') {
 	                var params = this.getDataParams(dataIndex, dataType);
 	                var rawDataOpt = params.data;
@@ -42847,10 +43128,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	                }
 	                return html;
 	            }
-	            else {
-	                return SankeySeries.superCall(this, 'formatTooltip', dataIndex, multipleSeries);
-	            }
-	            // dataType === 'node' or empty do not show tooltip by default.
+
+	            return SankeySeries.superCall(this, 'formatTooltip', dataIndex, multipleSeries);
 	        },
 
 	        defaultOption: {
@@ -42859,7 +43138,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	            coordinateSystem: 'view',
 
-	            layout : null,
+	            layout: null,
 
 	            // the position of the whole view
 	            left: '5%',
@@ -42870,7 +43149,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	            // the dx of the node
 	            nodeWidth: 20,
 
-	            // the distance between two nodes
+	            // the vertical distance between two nodes
 	            nodeGap: 8,
 
 	            // the number of iterations to change the position of the node
@@ -42918,11 +43197,16 @@ return /******/ (function(modules) { // webpackBootstrap
 	    module.exports = SankeySeries;
 
 
+
 /***/ },
 /* 240 */
 /***/ function(module, exports, __webpack_require__) {
 
-	
+	/**
+	 * @file  The file used to draw sankey view
+	 * @author  Deqing Li(annong035@gmail.com)
+	 */
+
 
 	    var graphic = __webpack_require__(43);
 	    var zrUtil = __webpack_require__(4);
@@ -42965,7 +43249,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	         */
 	        _model: null,
 
-	        render: function(seriesModel, ecModel, api) {
+	        render: function (seriesModel, ecModel, api) {
 	            var graph = seriesModel.getGraph();
 	            var group = this.group;
 	            var layoutInfo = seriesModel.layoutInfo;
@@ -42978,60 +43262,6 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	            group.position = [layoutInfo.x, layoutInfo.y];
 
-	            // generate a rect  for each node
-	            graph.eachNode(function (node) {
-	                var layout = node.getLayout();
-	                var itemModel = node.getModel();
-	                var labelModel = itemModel.getModel('label.normal');
-	                var textStyleModel = labelModel.getModel('textStyle');
-	                var labelHoverModel = itemModel.getModel('label.emphasis');
-	                var textStyleHoverModel = labelHoverModel.getModel('textStyle');
-
-	                var rect = new graphic.Rect({
-	                    shape: {
-	                        x: layout.x,
-	                        y: layout.y,
-	                        width: node.getLayout().dx,
-	                        height: node.getLayout().dy
-	                    },
-	                    style: {
-	                        // Get formatted label in label.normal option. Use node id if it is not specified
-	                        text: labelModel.get('show')
-	                            ? seriesModel.getFormattedLabel(node.dataIndex, 'normal') || node.id
-	                            // Use empty string to hide the label
-	                            : '',
-	                        textFont: textStyleModel.getFont(),
-	                        textFill: textStyleModel.getTextColor(),
-	                        textPosition: labelModel.get('position')
-	                    }
-	                });
-
-	                rect.setStyle(zrUtil.defaults(
-	                    {
-	                        fill: node.getVisual('color')
-	                    },
-	                    itemModel.getModel('itemStyle.normal').getItemStyle()
-	                ));
-
-	                graphic.setHoverStyle(rect, zrUtil.extend(
-	                    node.getModel('itemStyle.emphasis'),
-	                    {
-	                        text: labelHoverModel.get('show')
-	                            ? seriesModel.getFormattedLabel(node.dataIndex, 'emphasis') || node.id
-	                            : '',
-	                        textFont: textStyleHoverModel.getFont(),
-	                        textFill: textStyleHoverModel.getTextColor(),
-	                        textPosition: labelHoverModel.get('position')
-	                    }
-	                ));
-
-	                group.add(rect);
-
-	                nodeData.setItemGraphicEl(node.dataIndex, rect);
-
-	                rect.dataType = 'node';
-	            });
-
 	            // generate a bezire Curve for each edge
 	            graph.eachEdge(function (edge) {
 	                var curve = new SankeyShape();
@@ -43077,7 +43307,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	                    case 'target':
 	                        curve.style.fill = edge.node2.getVisual('color');
 	                        break;
-	                    default:
 	                }
 
 	                graphic.setHoverStyle(curve, edge.getModel('lineStyle.emphasis').getItemStyle());
@@ -43086,16 +43315,73 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	                edgeData.setItemGraphicEl(edge.dataIndex, curve);
 	            });
+
+	            // generate a rect  for each node
+	            graph.eachNode(function (node) {
+	                var layout = node.getLayout();
+	                var itemModel = node.getModel();
+	                var labelModel = itemModel.getModel('label.normal');
+	                var textStyleModel = labelModel.getModel('textStyle');
+	                var labelHoverModel = itemModel.getModel('label.emphasis');
+	                var textStyleHoverModel = labelHoverModel.getModel('textStyle');
+
+	                var rect = new graphic.Rect({
+	                    shape: {
+	                        x: layout.x,
+	                        y: layout.y,
+	                        width: node.getLayout().dx,
+	                        height: node.getLayout().dy
+	                    },
+	                    style: {
+	                        // Get formatted label in label.normal option
+	                        //  Use node id if it is not specified
+	                        text: labelModel.get('show')
+	                            ? seriesModel.getFormattedLabel(node.dataIndex, 'normal') || node.id
+	                            // Use empty string to hide the label
+	                            : '',
+	                        textFont: textStyleModel.getFont(),
+	                        textFill: textStyleModel.getTextColor(),
+	                        textPosition: labelModel.get('position')
+	                    }
+	                });
+
+	                rect.setStyle(zrUtil.defaults(
+	                    {
+	                        fill: node.getVisual('color')
+	                    },
+	                    itemModel.getModel('itemStyle.normal').getItemStyle()
+	                ));
+
+	                graphic.setHoverStyle(rect, zrUtil.extend(
+	                    node.getModel('itemStyle.emphasis'),
+	                    {
+	                        text: labelHoverModel.get('show')
+	                            ? seriesModel.getFormattedLabel(node.dataIndex, 'emphasis') || node.id
+	                            : '',
+	                        textFont: textStyleHoverModel.getFont(),
+	                        textFill: textStyleHoverModel.getTextColor(),
+	                        textPosition: labelHoverModel.get('position')
+	                    }
+	                ));
+
+	                group.add(rect);
+
+	                nodeData.setItemGraphicEl(node.dataIndex, rect);
+
+	                rect.dataType = 'node';
+	            });
+
 	            if (!this._data && seriesModel.get('animation')) {
 	                group.setClipPath(createGridClipShape(group.getBoundingRect(), seriesModel, function () {
 	                    group.removeClipPath();
 	                }));
 	            }
+
 	            this._data = seriesModel.getData();
 	        }
 	    });
 
-	    //add animation to the view
+	    // add animation to the view
 	    function createGridClipShape(rect, seriesModel, cb) {
 	        var rectEl = new graphic.Rect({
 	            shape: {
@@ -43116,11 +43402,16 @@ return /******/ (function(modules) { // webpackBootstrap
 	    }
 
 
+
 /***/ },
 /* 241 */
 /***/ function(module, exports, __webpack_require__) {
 
-	
+	/**
+	 * @file The layout algorithm of sankey view
+	 * @author  Deqing Li(annong035@gmail.com)
+	 */
+
 
 	    var layout = __webpack_require__(21);
 	    var nest = __webpack_require__(242);
@@ -43159,7 +43450,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	    };
 
 	    /**
-	     * get the layout position of the whole view.
+	     * Get the layout position of the whole view
+	     *
+	     * @param {module:echarts/model/Series} seriesModel  the model object of sankey series
+	     * @param {module:echarts/ExtensionAPI} api  provide the API list that the developer can call
+	     * @return {module:zrender/core/BoundingRect}  size of rect to draw the sankey view
 	     */
 	    function getViewRect(seriesModel, api) {
 	        return layout.getLayoutRect(
@@ -43177,8 +43472,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	    }
 
 	    /**
-	     * compute the value of each node by summing the associated edge's value.
-	     * @param {module:echarts/data/Graph~Node} nodes
+	     * Compute the value of each node by summing the associated edge's value
+	     *
+	     * @param {module:echarts/data/Graph~Node} nodes  node of sankey view
 	     */
 	    function computeNodeValues(nodes) {
 	        zrUtil.each(nodes, function (node) {
@@ -43190,10 +43486,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	    }
 
 	    /**
-	     * compute the x-position for each node.
-	     * @param {module:echarts/data/Graph~Node} nodes
-	     * @param  {number} nodeWidth
-	     * @param  {number} width
+	     * Compute the x-position for each node
+	     *
+	     * @param {module:echarts/data/Graph~Node} nodes  node of sankey view
+	     * @param  {number} nodeWidth  the dx of the node
+	     * @param  {number} width  the whole width of the area to draw the view
 	     */
 	    function computeNodeBreadths(nodes, nodeWidth, width) {
 	        var remainNodes = nodes;
@@ -43203,12 +43500,10 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	        while (remainNodes.length) {
 	            nextNode = [];
-
 	            for (var i = 0, len = remainNodes.length; i < len; i++) {
 	                var node = remainNodes[i];
 	                node.setLayout({x: x}, true);
 	                node.setLayout({dx: nodeWidth}, true);
-
 	                for (var j = 0, lenj = node.outEdges.length; j < lenj; j++) {
 	                    nextNode.push(node.outEdges[j].node2);
 	                }
@@ -43224,38 +43519,43 @@ return /******/ (function(modules) { // webpackBootstrap
 	    }
 
 	    /**
-	     * all the node without outEgdes are assigned maximum breadth and
-	     * be aligned in the last column.
-	     * @param {module:echarts/data/Graph~Node} nodes
-	     * @param {number} x
+	     * All the node without outEgdes are assigned maximum x-position and
+	     *     be aligned in the last column.
+	     *
+	     * @param {module:echarts/data/Graph~Node} nodes  node of sankey view
+	     * @param {number} x  value (x-1) use to assign to node without outEdges
+	     *     as x-position
 	     */
 	    function moveSinksRight(nodes, x) {
 	        zrUtil.each(nodes, function (node) {
-	            if(!node.outEdges.length) {
-	                node.setLayout({x: x-1}, true);
+	            if (!node.outEdges.length) {
+	                node.setLayout({x: x - 1}, true);
 	            }
 	        });
 	    }
 
 	    /**
-	     * scale node x-position to the width.
-	     * @param {module:echarts/data/Graph~Node} nodes
-	     * @param {number} kx
+	     * Scale node x-position to the width
+	     *
+	     * @param {module:echarts/data/Graph~Node} nodes  node of sankey view
+	     * @param {number} kx   multiple used to scale nodes
 	     */
 	    function scaleNodeBreadths(nodes, kx) {
-	        zrUtil.each(nodes, function(node) {
+	        zrUtil.each(nodes, function (node) {
 	            var nodeX = node.getLayout().x * kx;
 	            node.setLayout({x: nodeX}, true);
 	        });
 	    }
 
 	    /**
-	     * using Gauss-Seidel iterations method to compute the node depth(y-position).
-	     * @param {module:echarts/data/Graph~Node} nodes
-	     * @param {module:echarts/data/Graph~Edge} edges
-	     * @param {number} height
-	     * @param {numbber} nodeGap
-	     * @param {number} iterations
+	     * Using Gauss-Seidel iterations method to compute the node depth(y-position)
+	     *
+	     * @param {module:echarts/data/Graph~Node} nodes  node of sankey view
+	     * @param {module:echarts/data/Graph~Edge} edges  edge of sankey view
+	     * @param {number} height  the whole height of the area to draw the view
+	     * @param {numbber} nodeGap  the vertical distance between two nodes
+	     *     in the same column.
+	     * @param {number} iterations  the number of iterations for the algorithm
 	     */
 	    function computeNodeDepths(nodes, edges, height, nodeGap, iterations) {
 	        var nodesByBreadth = nest()
@@ -43272,6 +43572,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	        resolveCollisions(nodesByBreadth, nodeGap, height);
 
 	        for (var alpha = 1; iterations > 0; iterations--) {
+	            // 0.99 is a experience parameter, ensure that each iterations of
+	            // changes as small as possible.
 	            alpha *= 0.99;
 	            relaxRightToLeft(nodesByBreadth, alpha);
 	            resolveCollisions(nodesByBreadth, nodeGap, height);
@@ -43281,12 +43583,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	    }
 
 	    /**
-	     * compute the original y-position for each node.
-	     * @param {module:echarts/data/Graph~Node} nodes
+	     * Compute the original y-position for each node
+	     *
+	     * @param {module:echarts/data/Graph~Node} nodes  node of sankey view
 	     * @param {Array.<Array.<module:echarts/data/Graph~Node>>} nodesByBreadth
-	     * @param {module:echarts/data/Graph~Edge} edges
-	     * @param {number} height
-	     * @param {number} nodeGap
+	     *     group by the array of all sankey nodes based on the nodes x-position.
+	     * @param {module:echarts/data/Graph~Edge} edges  edge of sankey view
+	     * @param {number} height  the whole height of the area to draw the view
+	     * @param {number} nodeGap  the vertical distance between two nodes
 	     */
 	    function initializeNodeDepth(nodes, nodesByBreadth, edges, height, nodeGap) {
 	        var kyArray = [];
@@ -43296,9 +43600,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	            zrUtil.each(nodes, function (node) {
 	                sum += node.getLayout().value;
 	            });
-	            var ky = (height - (n-1) * nodeGap) / sum;
+	            var ky = (height - (n - 1) * nodeGap) / sum;
 	            kyArray.push(ky);
 	        });
+
 	        kyArray.sort(function (a, b) {
 	            return a - b;
 	        });
@@ -43319,10 +43624,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	    }
 
 	    /**
-	     * resolve the collision of initialized depth.
+	     * Resolve the collision of initialized depth (y-position)
+	     *
 	     * @param {Array.<Array.<module:echarts/data/Graph~Node>>} nodesByBreadth
-	     * @param {number} nodeGap
-	     * @param {number} height
+	     *     group by the array of all sankey nodes based on the nodes x-position.
+	     * @param {number} nodeGap  the vertical distance between two nodes
+	     * @param {number} height  the whole height of the area to draw the view
 	     */
 	    function resolveCollisions(nodesByBreadth, nodeGap, height) {
 	        zrUtil.each(nodesByBreadth, function (nodes) {
@@ -43337,17 +43644,17 @@ return /******/ (function(modules) { // webpackBootstrap
 	            for (i = 0; i < n; i++) {
 	                node = nodes[i];
 	                dy = y0 - node.getLayout().y;
-	                if(dy > 0) {
+	                if (dy > 0) {
 	                    var nodeY = node.getLayout().y + dy;
 	                    node.setLayout({y: nodeY}, true);
 	                }
 	                y0 = node.getLayout().y + node.getLayout().dy + nodeGap;
 	            }
 
-	            // if the bottommost node goes outside the biunds, push it back up
+	            // if the bottommost node goes outside the bounds, push it back up
 	            dy = y0 - nodeGap - height;
 	            if (dy > 0) {
-	                var nodeY = node.getLayout().y -dy;
+	                var nodeY = node.getLayout().y - dy;
 	                node.setLayout({y: nodeY}, true);
 	                y0 = node.getLayout().y;
 	                for (i = n - 2; i >= 0; --i) {
@@ -43364,9 +43671,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	    }
 
 	    /**
-	     * change the y-position of the nodes, except most the right side nodes.
+	     * Change the y-position of the nodes, except most the right side nodes
+	     *
 	     * @param {Array.<Array.<module:echarts/data/Graph~Node>>} nodesByBreadth
-	     * @param {number} alpha
+	     *     group by the array of all sankey nodes based on the node x-position.
+	     * @param {number} alpha  parameter used to adjust the nodes y-position
 	     */
 	    function relaxRightToLeft(nodesByBreadth, alpha) {
 	        zrUtil.each(nodesByBreadth.slice().reverse(), function (nodes) {
@@ -43385,9 +43694,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	    }
 
 	    /**
-	     * change the y-position of the nodes, except most the left side nodes.
+	     * Change the y-position of the nodes, except most the left side nodes
+	     *
 	     * @param {Array.<Array.<module:echarts/data/Graph~Node>>} nodesByBreadth
-	     * @param {number} alpha
+	     *     group by the array of all sankey nodes based on the node x-position.
+	     * @param {number} alpha  parameter used to adjust the nodes y-position
 	     */
 	    function relaxLeftToRight(nodesByBreadth, alpha) {
 	        zrUtil.each(nodesByBreadth, function (nodes) {
@@ -43406,8 +43717,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	    }
 
 	    /**
-	     * compute the depth(y-position) of each edge.
-	     * @param {module:echarts/data/Graph~Node} nodes
+	     * Compute the depth(y-position) of each edge
+	     *
+	     * @param {module:echarts/data/Graph~Node} nodes  node of sankey view
 	     */
 	    function computeEdgeDepths(nodes) {
 	        zrUtil.each(nodes, function (node) {
@@ -43437,27 +43749,16 @@ return /******/ (function(modules) { // webpackBootstrap
 	    }
 
 	    function sum(array, f) {
-	        var s = 0;
-	        var n = array.length;
-	        var a;
+	        var sum = 0;
+	        var len = array.length;
 	        var i = -1;
-	        if (arguments.length === 1) {
-	            while (++i < n) {
-	                a = +array[i];
-	                if (!isNaN(a)) {
-	                    s += a;
-	                }
-	            }
-	        }
-	        else {
-	            while (++i < n) {
-	                a = +f.call(array, array[i], i);
-	                if(!isNaN(a)) {
-	                    s += a;
-	                }
+	        while (++i < len) {
+	            var value = +f.call(array, array[i], i);
+	            if (!isNaN(value)) {
+	                sum += value;
 	            }
 	        }
-	        return s;
+	        return sum;
 	    }
 
 	    function center(node) {
@@ -43469,7 +43770,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    }
 
 	    function ascending(a, b) {
-	        return a < b ? -1 : a > b ? 1 : a == b ? 0 : NaN;
+	        return a < b ? -1 : a > b ? 1 : a === b ? 0 : NaN;
 	    }
 
 	    function getEdgeValue(edge) {
@@ -43593,7 +43894,11 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 243 */
 /***/ function(module, exports, __webpack_require__) {
 
-	
+	/**
+	 * @file Visual encoding for sankey view
+	 * @author  Deqing Li(annong035@gmail.com)
+	 */
+
 
 	    var VisualMapping = __webpack_require__(192);
 
@@ -43627,10 +43932,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	                }
 	            });
 
-	        }) ;
+	        });
 	    };
 
 
+
 /***/ },
 /* 244 */
 /***/ function(module, exports, __webpack_require__) {
@@ -43692,8 +43998,8 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	            hoverAnimation: true,
 
-	            xAxisIndex: 0,
-	            yAxisIndex: 0,
+	            // xAxisIndex: 0,
+	            // yAxisIndex: 0,
 
 	            layout: null,               // 'horizontal' or 'vertical'
 	            boxWidth: [7, 50],       // [min, max] can be percent of band width.
@@ -44427,8 +44733,8 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	            hoverAnimation: true,
 
-	            xAxisIndex: 0,
-	            yAxisIndex: 0,
+	            // xAxisIndex: 0,
+	            // yAxisIndex: 0,
 
 	            layout: null, // 'horizontal' or 'vertical'
 
@@ -44799,14 +45105,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	            },
 
 	            // Cartesian coordinate system
-	            xAxisIndex: 0,
-	            yAxisIndex: 0,
+	            // xAxisIndex: 0,
+	            // yAxisIndex: 0,
 
 	            // Polar coordinate system
-	            polarIndex: 0,
+	            // polarIndex: 0,
 
 	            // Geo coordinate system
-	            geoIndex: 0,
+	            // geoIndex: 0,
 
 	            // symbol: null,        // 图形类型
 	            symbolSize: 10          // 图形大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
@@ -45935,7 +46241,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                    pts[1] = coordSys.dataToPoint(coords[1]);
 
 	                    var curveness = itemModel.get('lineStyle.normal.curveness');
-	                    if (curveness > 0) {
+	                    if (+curveness) {
 	                        pts[2] = [
 	                            (pts[0][0] + pts[1][0]) / 2 - (pts[0][1] - pts[1][1]) * curveness,
 	                            (pts[0][1] + pts[1][1]) / 2 - (pts[1][0] - pts[0][0]) * curveness
@@ -45984,8 +46290,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	            z: 2,
 
 	            // Cartesian coordinate system
-	            xAxisIndex: 0,
-	            yAxisIndex: 0,
+	            // xAxisIndex: 0,
+	            // yAxisIndex: 0,
 
 	            // Geo coordinate system
 	            geoIndex: 0,
@@ -48680,6 +48986,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var Polar = __webpack_require__(285);
 	    var numberUtil = __webpack_require__(7);
+	    var zrUtil = __webpack_require__(4);
 
 	    var axisHelper = __webpack_require__(114);
 	    var niceScaleExtent = axisHelper.niceScaleExtent;
@@ -48796,7 +49103,24 @@ return /******/ (function(modules) { // webpackBootstrap
 	            // Inject coordinateSystem to series
 	            ecModel.eachSeries(function (seriesModel) {
 	                if (seriesModel.get('coordinateSystem') === 'polar') {
-	                    seriesModel.coordinateSystem = polarList[seriesModel.get('polarIndex')];
+	                    var polarModel = ecModel.queryComponents({
+	                        mainType: 'polar',
+	                        index: seriesModel.get('polarIndex'),
+	                        id: seriesModel.get('polarId')
+	                    })[0];
+
+	                    if (true) {
+	                        if (!polarModel) {
+	                            throw new Error(
+	                                'Polar "' + zrUtil.retrieve(
+	                                    seriesModel.get('polarIndex'),
+	                                    seriesModel.get('polarId'),
+	                                    0
+	                                ) + '" not found'
+	                            );
+	                        }
+	                    }
+	                    seriesModel.coordinateSystem = polarModel.coordinateSystem;
 	                }
 	            });
 
@@ -49145,16 +49469,21 @@ return /******/ (function(modules) { // webpackBootstrap
 	         * @return {module:echarts/coord/polar/AxisModel}
 	         */
 	        findAxisModel: function (axisType) {
-	            var angleAxisModel;
+	            var foundAxisModel;
 	            var ecModel = this.ecModel;
+
 	            ecModel.eachComponent(axisType, function (axisModel) {
-	                if (ecModel.getComponent(
-	                        'polar', axisModel.getShallow('polarIndex')
-	                    ) === this) {
-	                    angleAxisModel = axisModel;
+	                var polarModel = ecModel.queryComponents({
+	                    mainType: 'polar',
+	                    index: axisModel.getShallow('polarIndex'),
+	                    id: axisModel.getShallow('polarId')
+	                })[0];
+
+	                if(polarModel === this) {
+	                    foundAxisModel = axisModel;
 	                }
 	            }, this);
-	            return angleAxisModel;
+	            return foundAxisModel;
 	        },
 
 	        defaultOption: {
@@ -49193,7 +49522,8 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var polarAxisDefaultExtendedOption = {
 	        angle: {
-	            polarIndex: 0,
+	            // polarIndex: 0,
+	            // polarId: '',
 
 	            startAngle: 90,
 
@@ -49206,7 +49536,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	            }
 	        },
 	        radius: {
-	            polarIndex: 0,
+	            // polarIndex: 0,
+	            // polarId: '',
 
 	            splitNumber: 5
 	        }
@@ -49940,9 +50271,12 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	        ecModel.eachSeries(function (seriesModel) {
 	            if (seriesModel.get('coordinateSystem') === 'singleAxis') {
-	                var singleAxisIndex = seriesModel.get('singleAxisIndex') || 0;
-	                var axisModel = ecModel.getComponent('singleAxis', singleAxisIndex);
-	                seriesModel.coordinateSystem = axisModel.coordinateSystem;
+	                var singleAxisModel = ecModel.queryComponents({
+	                    mainType: 'singleAxis',
+	                    index: seriesModel.get('singleAxisIndex'),
+	                    id: seriesModel.get('singleAxisId')
+	                })[0];
+	                seriesModel.coordinateSystem = singleAxisModel.coordinateSystem;
 	            }
 	        });
 
@@ -52380,16 +52714,16 @@ return /******/ (function(modules) { // webpackBootstrap
 	    __webpack_require__(317);
 
 	    __webpack_require__(318);
-	    __webpack_require__(320);
-
 	    __webpack_require__(321);
+
 	    __webpack_require__(322);
+	    __webpack_require__(323);
 
-	    __webpack_require__(324);
 	    __webpack_require__(325);
+	    __webpack_require__(326);
 
-	    __webpack_require__(327);
 	    __webpack_require__(328);
+	    __webpack_require__(329);
 
 
 
@@ -52419,9 +52753,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var env = __webpack_require__(2);
 	    var echarts = __webpack_require__(1);
 	    var modelUtil = __webpack_require__(5);
-	    var AxisProxy = __webpack_require__(319);
+	    var helper = __webpack_require__(319);
+	    var AxisProxy = __webpack_require__(320);
 	    var each = zrUtil.each;
-	    var eachAxisDim = modelUtil.eachAxisDim;
+	    var eachAxisDim = helper.eachAxisDim;
 
 	    var DataZoomModel = echarts.extendComponentModel({
 
@@ -52440,8 +52775,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	            orient: null,           // Default auto by axisIndex. Possible value: 'horizontal', 'vertical'.
 	            xAxisIndex: null,       // Default the first horizontal category axis.
 	            yAxisIndex: null,       // Default the first vertical category axis.
-	            angleAxisIndex: null,
-	            radiusAxisIndex: null,
+
+
 	            filterMode: 'filter',   // Possible values: 'filter' or 'empty'.
 	                                    // 'filter': data items which are out of window will be removed.
 	                                    //           This option is applicable when filtering outliers.
@@ -52669,7 +53004,29 @@ return /******/ (function(modules) { // webpackBootstrap
 	                    if (this._isSeriesHasAllAxesTypeOf(seriesModel, 'value')) {
 	                        eachAxisDim(function (dimNames) {
 	                            var axisIndices = thisOption[dimNames.axisIndex];
+
 	                            var axisIndex = seriesModel.get(dimNames.axisIndex);
+	                            var axisId = seriesModel.get(dimNames.axisId);
+
+	                            var axisModel = seriesModel.ecModel.queryComponents({
+	                                mainType: dimNames.axis,
+	                                index: axisIndex,
+	                                id: axisId
+	                            })[0];
+
+	                            if (true) {
+	                                if (!axisModel) {
+	                                    throw new Error(
+	                                        dimNames.axis + ' "' + zrUtil.retrieve(
+	                                            axisIndex,
+	                                            axisId,
+	                                            0
+	                                        ) + '" not found'
+	                                    );
+	                                }
+	                            }
+	                            axisIndex = axisModel.componentIndex;
+
 	                            if (zrUtil.indexOf(axisIndices, axisIndex) < 0) {
 	                                axisIndices.push(axisIndex);
 	                            }
@@ -52873,6 +53230,134 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 319 */
 /***/ function(module, exports, __webpack_require__) {
 
+	
+	    var formatUtil = __webpack_require__(6);
+	    var zrUtil = __webpack_require__(4);
+
+	    var helper = {};
+
+	    var AXIS_DIMS = ['x', 'y', 'z', 'radius', 'angle'];
+
+	    /**
+	     * Create "each" method to iterate names.
+	     *
+	     * @pubilc
+	     * @param  {Array.<string>} names
+	     * @param  {Array.<string>=} attrs
+	     * @return {Function}
+	     */
+	    helper.createNameEach = function (names, attrs) {
+	        names = names.slice();
+	        var capitalNames = zrUtil.map(names, formatUtil.capitalFirst);
+	        attrs = (attrs || []).slice();
+	        var capitalAttrs = zrUtil.map(attrs, formatUtil.capitalFirst);
+
+	        return function (callback, context) {
+	            zrUtil.each(names, function (name, index) {
+	                var nameObj = {name: name, capital: capitalNames[index]};
+
+	                for (var j = 0; j < attrs.length; j++) {
+	                    nameObj[attrs[j]] = name + capitalAttrs[j];
+	                }
+
+	                callback.call(context, nameObj);
+	            });
+	        };
+	    };
+
+	    /**
+	     * Iterate each dimension name.
+	     *
+	     * @public
+	     * @param {Function} callback The parameter is like:
+	     *                            {
+	     *                                name: 'angle',
+	     *                                capital: 'Angle',
+	     *                                axis: 'angleAxis',
+	     *                                axisIndex: 'angleAixs',
+	     *                                index: 'angleIndex'
+	     *                            }
+	     * @param {Object} context
+	     */
+	    helper.eachAxisDim = helper.createNameEach(AXIS_DIMS, ['axisIndex', 'axis', 'index', 'id']);
+
+	    /**
+	     * If tow dataZoomModels has the same axis controlled, we say that they are 'linked'.
+	     * dataZoomModels and 'links' make up one or more graphics.
+	     * This function finds the graphic where the source dataZoomModel is in.
+	     *
+	     * @public
+	     * @param {Function} forEachNode Node iterator.
+	     * @param {Function} forEachEdgeType edgeType iterator
+	     * @param {Function} edgeIdGetter Giving node and edgeType, return an array of edge id.
+	     * @return {Function} Input: sourceNode, Output: Like {nodes: [], dims: {}}
+	     */
+	    helper.createLinkedNodesFinder = function (forEachNode, forEachEdgeType, edgeIdGetter) {
+
+	        return function (sourceNode) {
+	            var result = {
+	                nodes: [],
+	                records: {} // key: edgeType.name, value: Object (key: edge id, value: boolean).
+	            };
+
+	            forEachEdgeType(function (edgeType) {
+	                result.records[edgeType.name] = {};
+	            });
+
+	            if (!sourceNode) {
+	                return result;
+	            }
+
+	            absorb(sourceNode, result);
+
+	            var existsLink;
+	            do {
+	                existsLink = false;
+	                forEachNode(processSingleNode);
+	            }
+	            while (existsLink);
+
+	            function processSingleNode(node) {
+	                if (!isNodeAbsorded(node, result) && isLinked(node, result)) {
+	                    absorb(node, result);
+	                    existsLink = true;
+	                }
+	            }
+
+	            return result;
+	        };
+
+	        function isNodeAbsorded(node, result) {
+	            return zrUtil.indexOf(result.nodes, node) >= 0;
+	        }
+
+	        function isLinked(node, result) {
+	            var hasLink = false;
+	            forEachEdgeType(function (edgeType) {
+	                zrUtil.each(edgeIdGetter(node, edgeType) || [], function (edgeId) {
+	                    result.records[edgeType.name][edgeId] && (hasLink = true);
+	                });
+	            });
+	            return hasLink;
+	        }
+
+	        function absorb(node, result) {
+	            result.nodes.push(node);
+	            forEachEdgeType(function (edgeType) {
+	                zrUtil.each(edgeIdGetter(node, edgeType) || [], function (edgeId) {
+	                    result.records[edgeType.name][edgeId] = true;
+	                });
+	            });
+	        }
+	    };
+
+	    module.exports = helper;
+
+
+/***/ },
+/* 320 */
+/***/ function(module, exports, __webpack_require__) {
+
 	/**
 	 * @file Axis operator
 	 */
@@ -52979,10 +53464,16 @@ return /******/ (function(modules) { // webpackBootstrap
 	         */
 	        getTargetSeriesModels: function () {
 	            var seriesModels = [];
+	            var ecModel = this.ecModel;
 
-	            this.ecModel.eachSeries(function (seriesModel) {
-	                // Legacy problem: some one wrote xAxisIndex as [0] following the wrong way in example.
-	                if (this._axisIndex === +seriesModel.get(this._dimName + 'AxisIndex')) {
+	            ecModel.eachSeries(function (seriesModel) {
+	                var dimName = this._dimName;
+	                var axisModel = ecModel.queryComponents({
+	                    mainType: dimName + 'Axis',
+	                    index: seriesModel.get(dimName + 'AxisIndex'),
+	                    id: seriesModel.get(dimName + 'AxisId')
+	                })[0];
+	                if (this._axisIndex === (axisModel && axisModel.componentIndex)) {
 	                    seriesModels.push(seriesModel);
 	                }
 	            }, this);
@@ -53233,7 +53724,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 320 */
+/* 321 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
@@ -53279,17 +53770,22 @@ return /******/ (function(modules) { // webpackBootstrap
 	                var axisModel = ecModel.getComponent(dimNames.axis, axisIndex);
 	                if (axisModel) {
 	                    axisModels.push(axisModel);
-
-	                    var gridIndex = axisModel.get('gridIndex');
-	                    var polarIndex = axisModel.get('polarIndex');
-
-	                    if (gridIndex != null) {
-	                        var coordModel = ecModel.getComponent('grid', gridIndex);
-	                        save(coordModel, axisModel, cartesians, gridIndex);
+	                    var coordSysName;
+	                    if (dimNames.axis === 'xAxis' || dimNames.axis === 'yAxis') {
+	                        coordSysName = 'grid';
 	                    }
-	                    else if (polarIndex != null) {
-	                        var coordModel = ecModel.getComponent('polar', polarIndex);
-	                        save(coordModel, axisModel, polars, polarIndex);
+	                    else {
+	                        // Polar
+	                        coordSysName = 'polar';
+	                    }
+	                    var coordModel = ecModel.queryComponents({
+	                        mainType: coordSysName,
+	                        index: axisModel.get(coordSysName + 'Index'),
+	                        id: axisModel.get(coordSysName + 'Id')
+	                    })[0];
+
+	                    if (coordModel != null) {
+	                        save(coordModel, axisModel, coordSysName === 'grid' ? cartesians : polars, coordModel.componentIndex);
 	                    }
 	                }
 	            }, this);
@@ -53322,7 +53818,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 321 */
+/* 322 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -53401,7 +53897,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 322 */
+/* 323 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
@@ -53409,12 +53905,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var zrUtil = __webpack_require__(4);
 	    var graphic = __webpack_require__(43);
 	    var throttle = __webpack_require__(308);
-	    var DataZoomView = __webpack_require__(320);
+	    var DataZoomView = __webpack_require__(321);
 	    var Rect = graphic.Rect;
 	    var numberUtil = __webpack_require__(7);
 	    var linearMap = numberUtil.linearMap;
 	    var layout = __webpack_require__(21);
-	    var sliderMove = __webpack_require__(323);
+	    var sliderMove = __webpack_require__(324);
 	    var asc = numberUtil.asc;
 	    var bind = zrUtil.bind;
 	    // var mathMax = Math.max;
@@ -54140,7 +54636,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 323 */
+/* 324 */
 /***/ function(module, exports) {
 
 	
@@ -54199,7 +54695,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 324 */
+/* 325 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -54221,15 +54717,15 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 325 */
+/* 326 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
 
-	    var DataZoomView = __webpack_require__(320);
+	    var DataZoomView = __webpack_require__(321);
 	    var zrUtil = __webpack_require__(4);
-	    var sliderMove = __webpack_require__(323);
-	    var roams = __webpack_require__(326);
+	    var sliderMove = __webpack_require__(324);
+	    var roams = __webpack_require__(327);
 	    var bind = zrUtil.bind;
 
 	    var InsideZoomView = DataZoomView.extend({
@@ -54412,7 +54908,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 326 */
+/* 327 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -54609,7 +55105,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 327 */
+/* 328 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -54672,7 +55168,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 328 */
+/* 329 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -54681,15 +55177,15 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 	    var zrUtil = __webpack_require__(4);
-	    var modelUtil = __webpack_require__(5);
+	    var helper = __webpack_require__(319);
 	    var echarts = __webpack_require__(1);
 
 
 	    echarts.registerAction('dataZoom', function (payload, ecModel) {
 
-	        var linkedNodesFinder = modelUtil.createLinkedNodesFinder(
+	        var linkedNodesFinder = helper.createLinkedNodesFinder(
 	            zrUtil.bind(ecModel.eachComponent, ecModel, 'dataZoom'),
-	            modelUtil.eachAxisDim,
+	            helper.eachAxisDim,
 	            function (model, dimNames) {
 	                return model.get(dimNames.axisIndex);
 	            }
@@ -54720,7 +55216,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 329 */
+/* 330 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -54728,13 +55224,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	 */
 
 
-	    __webpack_require__(330);
-	    __webpack_require__(341);
+	    __webpack_require__(331);
+	    __webpack_require__(342);
 
 
 
 /***/ },
-/* 330 */
+/* 331 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -54743,19 +55239,19 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 	    __webpack_require__(1).registerPreprocessor(
-	        __webpack_require__(331)
+	        __webpack_require__(332)
 	    );
 
-	    __webpack_require__(332);
 	    __webpack_require__(333);
 	    __webpack_require__(334);
-	    __webpack_require__(337);
-	    __webpack_require__(340);
+	    __webpack_require__(335);
+	    __webpack_require__(338);
+	    __webpack_require__(341);
 
 
 
 /***/ },
-/* 331 */
+/* 332 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -54807,7 +55303,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 332 */
+/* 333 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
@@ -54831,7 +55327,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 333 */
+/* 334 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -54916,7 +55412,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 334 */
+/* 335 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -54924,7 +55420,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	 */
 
 
-	    var VisualMapModel = __webpack_require__(335);
+	    var VisualMapModel = __webpack_require__(336);
 	    var zrUtil = __webpack_require__(4);
 	    var numberUtil = __webpack_require__(7);
 
@@ -55149,7 +55645,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 335 */
+/* 336 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -55160,7 +55656,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var echarts = __webpack_require__(1);
 	    var zrUtil = __webpack_require__(4);
 	    var env = __webpack_require__(2);
-	    var visualDefault = __webpack_require__(336);
+	    var visualDefault = __webpack_require__(337);
 	    var VisualMapping = __webpack_require__(192);
 	    var visualSolution = __webpack_require__(306);
 	    var mapVisual = VisualMapping.mapVisual;
@@ -55659,7 +56155,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 336 */
+/* 337 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -55735,18 +56231,18 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 337 */
+/* 338 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
 
-	    var VisualMapView = __webpack_require__(338);
+	    var VisualMapView = __webpack_require__(339);
 	    var graphic = __webpack_require__(43);
 	    var zrUtil = __webpack_require__(4);
 	    var numberUtil = __webpack_require__(7);
-	    var sliderMove = __webpack_require__(323);
+	    var sliderMove = __webpack_require__(324);
 	    var LinearGradient = __webpack_require__(79);
-	    var helper = __webpack_require__(339);
+	    var helper = __webpack_require__(340);
 	    var modelUtil = __webpack_require__(5);
 
 	    var linearMap = numberUtil.linearMap;
@@ -56158,7 +56654,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	            var barPoints = this._createBarPoints(handleEnds, symbolSizes);
 
 	            return {
-	                barColor: new LinearGradient(0, 0, 1, 1, colorStops),
+	                barColor: new LinearGradient(0, 0, 0, 1, colorStops),
 	                barPoints: barPoints,
 	                handlesColor: [
 	                    colorStops[0].color,
@@ -56568,7 +57064,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 338 */
+/* 339 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
@@ -56728,7 +57224,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 339 */
+/* 340 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
@@ -56785,7 +57281,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 340 */
+/* 341 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -56813,7 +57309,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 341 */
+/* 342 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -56822,24 +57318,24 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 	    __webpack_require__(1).registerPreprocessor(
-	        __webpack_require__(331)
+	        __webpack_require__(332)
 	    );
 
-	    __webpack_require__(332);
 	    __webpack_require__(333);
-	    __webpack_require__(342);
+	    __webpack_require__(334);
 	    __webpack_require__(343);
-	    __webpack_require__(340);
+	    __webpack_require__(344);
+	    __webpack_require__(341);
 
 
 
 /***/ },
-/* 342 */
+/* 343 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
 
-	    var VisualMapModel = __webpack_require__(335);
+	    var VisualMapModel = __webpack_require__(336);
 	    var zrUtil = __webpack_require__(4);
 	    var VisualMapping = __webpack_require__(192);
 
@@ -57288,17 +57784,17 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 343 */
+/* 344 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
 
-	    var VisualMapView = __webpack_require__(338);
+	    var VisualMapView = __webpack_require__(339);
 	    var zrUtil = __webpack_require__(4);
 	    var graphic = __webpack_require__(43);
 	    var symbolCreators = __webpack_require__(106);
 	    var layout = __webpack_require__(21);
-	    var helper = __webpack_require__(339);
+	    var helper = __webpack_require__(340);
 
 	    var PiecewiseVisualMapView = VisualMapView.extend({
 
@@ -57511,14 +58007,14 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 344 */
+/* 345 */
 /***/ function(module, exports, __webpack_require__) {
 
 	// HINT Markpoint can't be used too much
 
 
-	    __webpack_require__(345);
-	    __webpack_require__(347);
+	    __webpack_require__(346);
+	    __webpack_require__(348);
 
 	    __webpack_require__(1).registerPreprocessor(function (opt) {
 	        // Make sure markPoint component is enabled
@@ -57527,12 +58023,12 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 345 */
+/* 346 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
 
-	    module.exports = __webpack_require__(346).extend({
+	    module.exports = __webpack_require__(347).extend({
 
 	        type: 'markPoint',
 
@@ -57565,7 +58061,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 346 */
+/* 347 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
@@ -57700,7 +58196,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 347 */
+/* 348 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
@@ -57711,7 +58207,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var List = __webpack_require__(97);
 
-	    var markerHelper = __webpack_require__(348);
+	    var markerHelper = __webpack_require__(349);
 
 	    function updateMarkerLayout(mpData, seriesModel, api) {
 	        var coordSys = seriesModel.coordinateSystem;
@@ -57749,7 +58245,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        });
 	    }
 
-	    __webpack_require__(349).extend({
+	    __webpack_require__(350).extend({
 
 	        type: 'markPoint',
 
@@ -57861,7 +58357,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 348 */
+/* 349 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
@@ -58065,7 +58561,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 349 */
+/* 350 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
@@ -58107,13 +58603,13 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 350 */
+/* 351 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
 
-	    __webpack_require__(351);
 	    __webpack_require__(352);
+	    __webpack_require__(353);
 
 	    __webpack_require__(1).registerPreprocessor(function (opt) {
 	        // Make sure markLine component is enabled
@@ -58122,12 +58618,12 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 351 */
+/* 352 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
 
-	    module.exports = __webpack_require__(346).extend({
+	    module.exports = __webpack_require__(347).extend({
 
 	        type: 'markLine',
 
@@ -58167,7 +58663,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 352 */
+/* 353 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
@@ -58176,7 +58672,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var List = __webpack_require__(97);
 	    var numberUtil = __webpack_require__(7);
 
-	    var markerHelper = __webpack_require__(348);
+	    var markerHelper = __webpack_require__(349);
 
 	    var LineDraw = __webpack_require__(199);
 
@@ -58348,7 +58844,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        data.setItemLayout(idx, point);
 	    }
 
-	    __webpack_require__(349).extend({
+	    __webpack_require__(350).extend({
 
 	        type: 'markLine',
 
@@ -58527,13 +59023,13 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 353 */
+/* 354 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
 
-	    __webpack_require__(354);
 	    __webpack_require__(355);
+	    __webpack_require__(356);
 
 	    __webpack_require__(1).registerPreprocessor(function (opt) {
 	        // Make sure markArea component is enabled
@@ -58542,12 +59038,12 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 354 */
+/* 355 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
 
-	    module.exports = __webpack_require__(346).extend({
+	    module.exports = __webpack_require__(347).extend({
 
 	        type: 'markArea',
 
@@ -58583,7 +59079,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 355 */
+/* 356 */
 /***/ function(module, exports, __webpack_require__) {
 
 	// TODO Better on polar
@@ -58595,7 +59091,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var graphic = __webpack_require__(43);
 	    var colorUtil = __webpack_require__(39);
 
-	    var markerHelper = __webpack_require__(348);
+	    var markerHelper = __webpack_require__(349);
 
 	    var markAreaTransform = function (seriesModel, coordSys, maModel, item) {
 	        var lt = markerHelper.dataTransform(seriesModel, item[0]);
@@ -58715,7 +59211,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var dimPermutations = [['x0', 'y0'], ['x1', 'y0'], ['x1', 'y1'], ['x0', 'y1']];
 
-	    __webpack_require__(349).extend({
+	    __webpack_require__(350).extend({
 
 	        type: 'markArea',
 
@@ -58894,7 +59390,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 356 */
+/* 357 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -58904,17 +59400,17 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var echarts = __webpack_require__(1);
 
-	    echarts.registerPreprocessor(__webpack_require__(357));
+	    echarts.registerPreprocessor(__webpack_require__(358));
 
-	    __webpack_require__(358);
 	    __webpack_require__(359);
 	    __webpack_require__(360);
-	    __webpack_require__(362);
+	    __webpack_require__(361);
+	    __webpack_require__(363);
 
 
 
 /***/ },
-/* 357 */
+/* 358 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -59005,7 +59501,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 358 */
+/* 359 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
@@ -59018,7 +59514,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 359 */
+/* 360 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -59062,7 +59558,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 360 */
+/* 361 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -59070,7 +59566,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	 */
 
 
-	    var TimelineModel = __webpack_require__(361);
+	    var TimelineModel = __webpack_require__(362);
 	    var zrUtil = __webpack_require__(4);
 	    var modelUtil = __webpack_require__(5);
 
@@ -59178,7 +59674,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 361 */
+/* 362 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -59380,7 +59876,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 362 */
+/* 363 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -59391,8 +59887,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var zrUtil = __webpack_require__(4);
 	    var graphic = __webpack_require__(43);
 	    var layout = __webpack_require__(21);
-	    var TimelineView = __webpack_require__(363);
-	    var TimelineAxis = __webpack_require__(364);
+	    var TimelineView = __webpack_require__(364);
+	    var TimelineAxis = __webpack_require__(365);
 	    var symbolUtil = __webpack_require__(106);
 	    var axisHelper = __webpack_require__(114);
 	    var BoundingRect = __webpack_require__(9);
@@ -60073,7 +60569,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 363 */
+/* 364 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -60093,7 +60589,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 364 */
+/* 365 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
@@ -60194,23 +60690,23 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 365 */
+/* 366 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
 
-	    __webpack_require__(366);
 	    __webpack_require__(367);
+	    __webpack_require__(368);
 
-	    __webpack_require__(369);
 	    __webpack_require__(370);
 	    __webpack_require__(371);
 	    __webpack_require__(372);
-	    __webpack_require__(377);
+	    __webpack_require__(373);
+	    __webpack_require__(378);
 
 
 /***/ },
-/* 366 */
+/* 367 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
@@ -60286,7 +60782,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 367 */
+/* 368 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/* WEBPACK VAR INJECTION */(function(process) {
@@ -60536,10 +61032,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	    }
 
 
-	/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(368)))
+	/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(369)))
 
 /***/ },
-/* 368 */
+/* 369 */
 /***/ function(module, exports) {
 
 	// shim for using process in browser
@@ -60664,7 +61160,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 369 */
+/* 370 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
@@ -60736,7 +61232,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 370 */
+/* 371 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -60859,13 +61355,19 @@ return /******/ (function(modules) { // webpackBootstrap
 	                var categoryAxis = coordSys.getAxesByScale('ordinal')[0];
 	                if (categoryAxis) {
 	                    var axisDim = categoryAxis.dim;
-	                    var axisIndex = seriesModel.get(axisDim + 'AxisIndex');
-	                    var axisKey = axisDim + 'Axis';
-	                    newOption[axisKey] = newOption[axisKey] || [];
+	                    var axisType = axisDim + 'Axis';
+	                    var axisModel = ecModel.queryComponents({
+	                        mainType: axisType,
+	                        index: seriesModel.get(name + 'Index'),
+	                        id: seriesModel.get(name + 'Id')
+	                    })[0];
+	                    var axisIndex = axisModel.componentIndex;
+
+	                    newOption[axisType] = newOption[axisType] || [];
 	                    for (var i = 0; i <= axisIndex; i++) {
-	                        newOption[axisKey][axisIndex] = newOption[axisKey][axisIndex] || {};
+	                        newOption[axisType][axisIndex] = newOption[axisType][axisIndex] || {};
 	                    }
-	                    newOption[axisKey][axisIndex].boundaryGap = type === 'bar' ? true : false;
+	                    newOption[axisType][axisIndex].boundaryGap = type === 'bar' ? true : false;
 	                }
 	            }
 	        };
@@ -60910,7 +61412,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 371 */
+/* 372 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -61393,7 +61895,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 372 */
+/* 373 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -61402,12 +61904,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var zrUtil = __webpack_require__(4);
 	    var BrushController = __webpack_require__(233);
 	    var brushHelper = __webpack_require__(309);
-	    var history = __webpack_require__(373);
+	    var history = __webpack_require__(374);
 
 	    var each = zrUtil.each;
 
 	    // Use dataZoomSelect
-	    __webpack_require__(374);
+	    __webpack_require__(375);
 
 	    // Spectial component id start with \0ec\0, see echarts/model/Global.js~hasInnerId
 	    var DATA_ZOOM_ID_BASE = '\0_ec_\0toolbox-dataZoom_';
@@ -61701,7 +62203,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 373 */
+/* 374 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -61815,7 +62317,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 374 */
+/* 375 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -61826,18 +62328,18 @@ return /******/ (function(modules) { // webpackBootstrap
 	    __webpack_require__(317);
 
 	    __webpack_require__(318);
-	    __webpack_require__(320);
+	    __webpack_require__(321);
 
-	    __webpack_require__(375);
 	    __webpack_require__(376);
+	    __webpack_require__(377);
 
-	    __webpack_require__(327);
 	    __webpack_require__(328);
+	    __webpack_require__(329);
 
 
 
 /***/ },
-/* 375 */
+/* 376 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -61856,12 +62358,12 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 376 */
+/* 377 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
 
-	    module.exports = __webpack_require__(320).extend({
+	    module.exports = __webpack_require__(321).extend({
 
 	        type: 'dataZoom.select'
 
@@ -61870,13 +62372,13 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 377 */
+/* 378 */
 /***/ function(module, exports, __webpack_require__) {
 
 	'use strict';
 
 
-	    var history = __webpack_require__(373);
+	    var history = __webpack_require__(374);
 
 	    function Restore(model) {
 	        this.model = model;
@@ -61914,16 +62416,16 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 378 */
+/* 379 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
-	    __webpack_require__(379);
-	    __webpack_require__(81).registerPainter('vml', __webpack_require__(381));
+	    __webpack_require__(380);
+	    __webpack_require__(81).registerPainter('vml', __webpack_require__(382));
 
 
 /***/ },
-/* 379 */
+/* 380 */
 /***/ function(module, exports, __webpack_require__) {
 
 	// http://www.w3.org/TR/NOTE-VML
@@ -61944,7 +62446,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var Gradient = __webpack_require__(61);
 
-	    var vmlCore = __webpack_require__(380);
+	    var vmlCore = __webpack_require__(381);
 
 	    var round = Math.round;
 	    var sqrt = Math.sqrt;
@@ -62981,7 +63483,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 380 */
+/* 381 */
 /***/ function(module, exports, __webpack_require__) {
 
 	
@@ -63034,7 +63536,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ },
-/* 381 */
+/* 382 */
 /***/ function(module, exports, __webpack_require__) {
 
 	/**
@@ -63046,7 +63548,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 	    var zrLog = __webpack_require__(40);
-	    var vmlCore = __webpack_require__(380);
+	    var vmlCore = __webpack_require__(381);
 
 	    function parseInt10(val) {
 	        return parseInt(val, 10);