echarts 3.7.1 → 3.7.2

package/dist/echarts.common.js

@@ -69,15 +69,15 @@ return /******/ (function(modules) { // webpackBootstrap
 	__webpack_require__(324);
 
 	__webpack_require__(323);
-	__webpack_require__(369);
-
-	__webpack_require__(398);
-	__webpack_require__(404);
-	__webpack_require__(407);
 	__webpack_require__(370);
-	__webpack_require__(419);
 
-	__webpack_require__(431);
+	__webpack_require__(399);
+	__webpack_require__(405);
+	__webpack_require__(408);
+	__webpack_require__(371);
+	__webpack_require__(420);
+
+	__webpack_require__(432);
 
 /***/ }),
 /* 1 */
@@ -131,10 +131,11 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var zrender = __webpack_require__(87);
 	    var zrUtil = __webpack_require__(4);
-	    var colorTool = __webpack_require__(35);
-	    var Eventful = __webpack_require__(29);
+	    var colorTool = __webpack_require__(33);
+	    var Eventful = __webpack_require__(27);
 	    var timsort = __webpack_require__(91);
 
+
 	    var each = zrUtil.each;
 	    var parseClassType = ComponentModel.parseClassType;
 
@@ -160,6 +161,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var OPTION_UPDATED = '__optionUpdated';
 	    var ACTION_REG = /^[a-zA-Z0-9_]+$/;
 
+
 	    function createRegisterEventWithLowercaseName(method) {
 	        return function (eventName, handler, context) {
 	            // Event name is all lowercase
@@ -1609,9 +1611,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	        /**
 	         * @type {number}
 	         */
-	        version: '3.7.1',
+	        version: '3.7.2',
 	        dependencies: {
-	            zrender: '3.6.1'
+	            zrender: '3.6.2'
 	        }
 	    };
 
@@ -2043,7 +2045,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	        update: 'downplay'
 	    }, zrUtil.noop);
 
-
 	    // --------
 	    // Exports
 	    // --------
@@ -2060,7 +2061,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    echarts.throttle = throttle.throttle;
 	    echarts.matrix = __webpack_require__(11);
 	    echarts.vector = __webpack_require__(10);
-	    echarts.color = __webpack_require__(35);
+	    echarts.color = __webpack_require__(33);
 
 	    echarts.util = {};
 	    each([
@@ -4756,11 +4757,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var TIME_REG = /^(?:(\d{4})(?:[-\/](\d{1,2})(?:[-\/](\d{1,2})(?:[T ](\d{1,2})(?::(\d\d)(?::(\d\d)(?:[.,](\d+))?)?)?(Z|[\+\-]\d\d:?\d\d)?)?)?)?)?$/; // jshint ignore:line
 
 	    /**
+	     * Consider DST, it is incorrect to provide a method `getTimezoneOffset`
+	     * without time specified. So this method is removed.
+	     *
 	     * @return {number} in minutes
 	     */
-	    number.getTimezoneOffset = function () {
-	        return (new Date()).getTimezoneOffset();
-	    };
+	    // number.getTimezoneOffset = function () {
+	    //     return (new Date()).getTimezoneOffset();
+	    // };
 
 	    /**
 	     * @param {string|Date|number} value These values can be accepted:
@@ -4794,24 +4798,42 @@ return /******/ (function(modules) { // webpackBootstrap
 	                return new Date(NaN);
 	            }
 
-	            var timezoneOffset = number.getTimezoneOffset();
-	            var timeOffset = !match[8]
-	                ? 0
-	                : match[8].toUpperCase() === 'Z'
-	                ? timezoneOffset
-	                : +match[8].slice(0, 3) * 60 + timezoneOffset;
-
-	            // match[n] can only be string or undefined.
-	            // But take care of '12' + 1 => '121'.
-	            return new Date(
-	                +match[1],
-	                +(match[2] || 1) - 1,
-	                +match[3] || 1,
-	                +match[4] || 0,
-	                +(match[5] || 0) - timeOffset,
-	                +match[6] || 0,
-	                +match[7] || 0
-	            );
+	            // Use local time when no timezone offset specifed.
+	            if (!match[8]) {
+	                // match[n] can only be string or undefined.
+	                // But take care of '12' + 1 => '121'.
+	                return new Date(
+	                    +match[1],
+	                    +(match[2] || 1) - 1,
+	                    +match[3] || 1,
+	                    +match[4] || 0,
+	                    +(match[5] || 0),
+	                    +match[6] || 0,
+	                    +match[7] || 0
+	                );
+	            }
+	            // Timezoneoffset of Javascript Date has considered DST (Daylight Saving Time,
+	            // https://tc39.github.io/ecma262/#sec-daylight-saving-time-adjustment).
+	            // For example, system timezone is set as "Time Zone: America/Toronto",
+	            // then these code will get different result:
+	            // `new Date(1478411999999).getTimezoneOffset();  // get 240`
+	            // `new Date(1478412000000).getTimezoneOffset();  // get 300`
+	            // So we should not use `new Date`, but use `Date.UTC`.
+	            else {
+	                var hour = +match[4] || 0;
+	                if (match[8].toUpperCase() !== 'Z') {
+	                    hour -= match[8].slice(0, 3);
+	                }
+	                return new Date(Date.UTC(
+	                    +match[1],
+	                    +(match[2] || 1) - 1,
+	                    +match[3] || 1,
+	                    hour,
+	                    +(match[5] || 0),
+	                    +match[6] || 0,
+	                    +match[7] || 0
+	                ));
+	            }
 	        }
 	        else if (value == null) {
 	            return new Date(NaN);
@@ -7239,10 +7261,10 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var pathTool = __webpack_require__(21);
 	    var Path = __webpack_require__(22);
-	    var colorTool = __webpack_require__(35);
+	    var colorTool = __webpack_require__(33);
 	    var matrix = __webpack_require__(11);
 	    var vector = __webpack_require__(10);
-	    var Transformable = __webpack_require__(30);
+	    var Transformable = __webpack_require__(28);
 	    var BoundingRect = __webpack_require__(9);
 
 	    var round = Math.round;
@@ -7784,7 +7806,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	     *              for textFill, textStroke, textBackgroundColor, and textBorderColor.
 	     *              If autoColor specified, it is used as default textFill.
 	     *      useInsideStyle:
-	     *              `true`: Use inside style (textFill, textStroke, textLineWidth)
+	     *              `true`: Use inside style (textFill, textStroke, textStrokeWidth)
 	     *                  if `textFill` is not specified.
 	     *              `false`: Do not use inside style.
 	     *              `null/undefined`: use inside style if `isRectText` is true and
@@ -7897,7 +7919,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	            || globalTextStyle.color;
 	        textStyle.textStroke = getAutoColor(textStyleModel.getShallow('textBorderColor'), opt)
 	            || globalTextStyle.textBorderColor;
-	        textStyle.textLineWidth = zrUtil.retrieve2(
+	        textStyle.textStrokeWidth = zrUtil.retrieve2(
 	            textStyleModel.getShallow('textBorderWidth'),
 	            globalTextStyle.textBorderWidth
 	        );
@@ -7981,13 +8003,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	            insideRollback = {
 	                textFill: null,
 	                textStroke: textStyle.textStroke,
-	                textLineWidth: textStyle.textLineWidth
+	                textStrokeWidth: textStyle.textStrokeWidth
 	            };
 	            textStyle.textFill = '#fff';
 	            // Consider text with #fff overflow its container.
 	            if (textStyle.textStroke == null) {
 	                textStyle.textStroke = opt.autoColor;
-	                textStyle.textLineWidth == null && (textStyle.textLineWidth = 2);
+	                textStyle.textStrokeWidth == null && (textStyle.textStrokeWidth = 2);
 	            }
 	        }
 
@@ -7999,7 +8021,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        if (insideRollback) {
 	            style.textFill = insideRollback.textFill;
 	            style.textStroke = insideRollback.textStroke;
-	            style.textLineWidth = insideRollback.textLineWidth;
+	            style.textStrokeWidth = insideRollback.textStrokeWidth;
 	        }
 	    }
 
@@ -9074,8 +9096,8 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var Style = __webpack_require__(24);
 
-	    var Element = __webpack_require__(27);
-	    var RectText = __webpack_require__(38);
+	    var Element = __webpack_require__(25);
+	    var RectText = __webpack_require__(36);
 	    // var Stateful = require('./mixin/Stateful');
 
 	    /**
@@ -9334,15 +9356,13 @@ return /******/ (function(modules) { // webpackBootstrap
 
 /***/ }),
 /* 24 */
-/***/ (function(module, exports, __webpack_require__) {
+/***/ (function(module, exports) {
 
 	/**
 	 * @module zrender/graphic/Style
 	 */
 
 
-	    var textHelper = __webpack_require__(25);
-
 	    var STYLE_COMMON_PROPS = [
 	        ['shadowBlur', 0], ['shadowOffsetX', 0], ['shadowOffsetY', 0], ['shadowColor', '#000'],
 	        ['lineCap', 'butt'], ['lineJoin', 'miter'], ['miterLimit', 10]
@@ -9532,11 +9552,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	        /**
 	         * textStroke may be set as some color as a default
 	         * value in upper applicaion, where the default value
-	         * of textLineWidth should be 0 to make sure that
+	         * of textStrokeWidth should be 0 to make sure that
 	         * user can choose to do not use text stroke.
 	         * @type {number}
 	         */
-	        textLineWidth: 0,
+	        textStrokeWidth: 0,
 
 	        /**
 	         * @type {number}
@@ -9816,597 +9836,16 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 25 */
 /***/ (function(module, exports, __webpack_require__) {
 
-	
-
-	    var textContain = __webpack_require__(8);
-	    var util = __webpack_require__(4);
-	    var roundRectHelper = __webpack_require__(26);
-	    var imageHelper = __webpack_require__(12);
-
-	    var retrieve3 = util.retrieve3;
-	    var retrieve2 = util.retrieve2;
-
-	    // TODO: Have not support 'start', 'end' yet.
-	    var VALID_TEXT_ALIGN = {left: 1, right: 1, center: 1};
-	    var VALID_TEXT_VERTICAL_ALIGN = {top: 1, bottom: 1, middle: 1};
-
-	    var helper = {};
-
-	    /**
-	     * @param {module:zrender/graphic/Style} style
-	     * @return {module:zrender/graphic/Style} The input style.
-	     */
-	    helper.normalizeTextStyle = function (style) {
-	        normalizeStyle(style);
-	        util.each(style.rich, normalizeStyle);
-	        return style;
-	    };
-
-	    function normalizeStyle(style) {
-	        if (style) {
-
-	            style.font = textContain.makeFont(style);
-
-	            var textAlign = style.textAlign;
-	            textAlign === 'middle' && (textAlign = 'center');
-	            style.textAlign = (
-	                textAlign == null || VALID_TEXT_ALIGN[textAlign]
-	            ) ? textAlign : 'left';
-
-	            // Compatible with textBaseline.
-	            var textVerticalAlign = style.textVerticalAlign || style.textBaseline;
-	            textVerticalAlign === 'center' && (textVerticalAlign = 'middle');
-	            style.textVerticalAlign = (
-	                textVerticalAlign == null || VALID_TEXT_VERTICAL_ALIGN[textVerticalAlign]
-	            ) ? textVerticalAlign : 'top';
-
-	            var textPadding = style.textPadding;
-	            if (textPadding) {
-	                style.textPadding = util.normalizeCssArray(style.textPadding);
-	            }
-	        }
-	    }
-
-	    /**
-	     * @param {CanvasRenderingContext2D} ctx
-	     * @param {string} text
-	     * @param {module:zrender/graphic/Style} style
-	     * @param {Object|boolean} [rect] {x, y, width, height}
-	     *                  If set false, rect text is not used.
-	     */
-	    helper.renderText = function (hostEl, ctx, text, style, rect) {
-	        style.rich
-	            ? renderRichText(hostEl, ctx, text, style, rect)
-	            : renderPlainText(hostEl, ctx, text, style, rect);
-	    };
-
-	    function renderPlainText(hostEl, ctx, text, style, rect) {
-	        var font = setCtx(ctx, 'font', style.font || textContain.DEFAULT_FONT);
-
-	        var textPadding = style.textPadding;
-
-	        var contentBlock = hostEl.__textCotentBlock;
-	        if (!contentBlock || hostEl.__dirty) {
-	            contentBlock = hostEl.__textCotentBlock = textContain.parsePlainText(
-	                text, font, textPadding, style.truncate
-	            );
-	        }
-
-	        var outerHeight = contentBlock.outerHeight;
-
-	        var textLines = contentBlock.lines;
-	        var lineHeight = contentBlock.lineHeight;
-
-	        var boxPos = getBoxPosition(outerHeight, style, rect);
-	        var baseX = boxPos.baseX;
-	        var baseY = boxPos.baseY;
-	        var textAlign = boxPos.textAlign;
-	        var textVerticalAlign = boxPos.textVerticalAlign;
-
-	        // Origin of textRotation should be the base point of text drawing.
-	        applyTextRotation(ctx, style, rect, baseX, baseY);
-
-	        var boxY = textContain.adjustTextY(baseY, outerHeight, textVerticalAlign);
-	        var textX = baseX;
-	        var textY = boxY;
-
-	        var needDrawBg = needDrawBackground(style);
-	        if (needDrawBg || textPadding) {
-	            // Consider performance, do not call getTextWidth util necessary.
-	            var textWidth = textContain.getWidth(text, font);
-	            var outerWidth = textWidth;
-	            textPadding && (outerWidth += textPadding[1] + textPadding[3]);
-	            var boxX = textContain.adjustTextX(baseX, outerWidth, textAlign);
-
-	            needDrawBg && drawBackground(hostEl, ctx, style, boxX, boxY, outerWidth, outerHeight);
-
-	            if (textPadding) {
-	                textX = getTextXForPadding(baseX, textAlign, textPadding);
-	                textY += textPadding[0];
-	            }
-	        }
-
-	        setCtx(ctx, 'textAlign', textAlign || 'left');
-	        // Force baseline to be "middle". Otherwise, if using "top", the
-	        // text will offset downward a little bit in font "Microsoft YaHei".
-	        setCtx(ctx, 'textBaseline', 'middle');
-
-	        // Always set shadowBlur and shadowOffset to avoid leak from displayable.
-	        setCtx(ctx, 'shadowBlur', style.textShadowBlur || 0);
-	        setCtx(ctx, 'shadowColor', style.textShadowColor || 'transparent');
-	        setCtx(ctx, 'shadowOffsetX', style.textShadowOffsetX || 0);
-	        setCtx(ctx, 'shadowOffsetY', style.textShadowOffsetY || 0);
-
-	        // `textBaseline` is set as 'middle'.
-	        textY += lineHeight / 2;
-
-	        var textLineWidth = style.textLineWidth;
-	        var textStroke = getStroke(style.textStroke, textLineWidth);
-	        var textFill = getFill(style.textFill);
-
-	        if (textStroke) {
-	            setCtx(ctx, 'lineWidth', textLineWidth);
-	            setCtx(ctx, 'strokeStyle', textStroke);
-	        }
-	        if (textFill) {
-	            setCtx(ctx, 'fillStyle', textFill);
-	        }
-
-	        for (var i = 0; i < textLines.length; i++) {
-	            // Fill after stroke so the outline will not cover the main part.
-	            textStroke && ctx.strokeText(textLines[i], textX, textY);
-	            textFill && ctx.fillText(textLines[i], textX, textY);
-	            textY += lineHeight;
-	        }
-	    }
-
-	    function renderRichText(hostEl, ctx, text, style, rect) {
-	        var contentBlock = hostEl.__textCotentBlock;
-
-	        if (!contentBlock || hostEl.__dirty) {
-	            contentBlock = hostEl.__textCotentBlock = textContain.parseRichText(text, style);
-	        }
-
-	        drawRichText(hostEl, ctx, contentBlock, style, rect);
-	    }
-
-	    function drawRichText(hostEl, ctx, contentBlock, style, rect) {
-	        var contentWidth = contentBlock.width;
-	        var outerWidth = contentBlock.outerWidth;
-	        var outerHeight = contentBlock.outerHeight;
-	        var textPadding = style.textPadding;
-
-	        var boxPos = getBoxPosition(outerHeight, style, rect);
-	        var baseX = boxPos.baseX;
-	        var baseY = boxPos.baseY;
-	        var textAlign = boxPos.textAlign;
-	        var textVerticalAlign = boxPos.textVerticalAlign;
-
-	        // Origin of textRotation should be the base point of text drawing.
-	        applyTextRotation(ctx, style, rect, baseX, baseY);
-
-	        var boxX = textContain.adjustTextX(baseX, outerWidth, textAlign);
-	        var boxY = textContain.adjustTextY(baseY, outerHeight, textVerticalAlign);
-	        var xLeft = boxX;
-	        var lineTop = boxY;
-	        if (textPadding) {
-	            xLeft += textPadding[3];
-	            lineTop += textPadding[0];
-	        }
-	        var xRight = xLeft + contentWidth;
-
-	        needDrawBackground(style) && drawBackground(
-	            hostEl, ctx, style, boxX, boxY, outerWidth, outerHeight
-	        );
-
-	        for (var i = 0; i < contentBlock.lines.length; i++) {
-	            var line = contentBlock.lines[i];
-	            var tokens = line.tokens;
-	            var tokenCount = tokens.length;
-	            var lineHeight = line.lineHeight;
-	            var usedWidth = line.width;
-
-	            var leftIndex = 0;
-	            var lineXLeft = xLeft;
-	            var lineXRight = xRight;
-	            var rightIndex = tokenCount - 1;
-	            var token;
-
-	            while (
-	                leftIndex < tokenCount
-	                && (token = tokens[leftIndex], !token.textAlign || token.textAlign === 'left')
-	            ) {
-	                placeToken(hostEl, ctx, token, style, lineHeight, lineTop, lineXLeft, 'left');
-	                usedWidth -= token.width;
-	                lineXLeft += token.width;
-	                leftIndex++;
-	            }
-
-	            while (
-	                rightIndex >= 0
-	                && (token = tokens[rightIndex], token.textAlign === 'right')
-	            ) {
-	                placeToken(hostEl, ctx, token, style, lineHeight, lineTop, lineXRight, 'right');
-	                usedWidth -= token.width;
-	                lineXRight -= token.width;
-	                rightIndex--;
-	            }
-
-	            // The other tokens are placed as textAlign 'center' if there is enough space.
-	            lineXLeft += (contentWidth - (lineXLeft - xLeft) - (xRight - lineXRight) - usedWidth) / 2;
-	            while (leftIndex <= rightIndex) {
-	                token = tokens[leftIndex];
-	                // Consider width specified by user, use 'center' rather than 'left'.
-	                placeToken(hostEl, ctx, token, style, lineHeight, lineTop, lineXLeft + token.width / 2, 'center');
-	                lineXLeft += token.width;
-	                leftIndex++;
-	            }
-
-	            lineTop += lineHeight;
-	        }
-	    }
-
-	    function applyTextRotation(ctx, style, rect, x, y) {
-	        // textRotation only apply in RectText.
-	        if (rect && style.textRotation) {
-	            var origin = style.textOrigin;
-	            if (origin === 'center') {
-	                x = rect.width / 2 + rect.x;
-	                y = rect.height / 2 + rect.y;
-	            }
-	            else if (origin) {
-	                x = origin[0] + rect.x;
-	                y = origin[1] + rect.y;
-	            }
-
-	            ctx.translate(x, y);
-	            // Positive: anticlockwise
-	            ctx.rotate(-style.textRotation);
-	            ctx.translate(-x, -y);
-	        }
-	    }
-
-	    function placeToken(hostEl, ctx, token, style, lineHeight, lineTop, x, textAlign) {
-	        var tokenStyle = style.rich[token.styleName] || {};
-
-	        // 'ctx.textBaseline' is always set as 'middle', for sake of
-	        // the bias of "Microsoft YaHei".
-	        var textVerticalAlign = token.textVerticalAlign;
-	        var y = lineTop + lineHeight / 2;
-	        if (textVerticalAlign === 'top') {
-	            y = lineTop + token.height / 2;
-	        }
-	        else if (textVerticalAlign === 'bottom') {
-	            y = lineTop + lineHeight - token.height / 2;
-	        }
-
-	        !token.isLineHolder && needDrawBackground(tokenStyle) && drawBackground(
-	            hostEl,
-	            ctx,
-	            tokenStyle,
-	            textAlign === 'right'
-	                ? x - token.width
-	                : textAlign === 'center'
-	                ? x - token.width / 2
-	                : x,
-	            y - token.height / 2,
-	            token.width,
-	            token.height
-	        );
-
-	        var textPadding = token.textPadding;
-	        if (textPadding) {
-	            x = getTextXForPadding(x, textAlign, textPadding);
-	            y -= token.height / 2 - textPadding[2] - token.textHeight / 2;
-	        }
-
-	        setCtx(ctx, 'shadowBlur', retrieve3(tokenStyle.textShadowBlur, style.textShadowBlur, 0));
-	        setCtx(ctx, 'shadowColor', tokenStyle.textShadowColor || style.textShadowColor || 'transparent');
-	        setCtx(ctx, 'shadowOffsetX', retrieve3(tokenStyle.textShadowOffsetX, style.textShadowOffsetX, 0));
-	        setCtx(ctx, 'shadowOffsetY', retrieve3(tokenStyle.textShadowOffsetY, style.textShadowOffsetY, 0));
-
-	        setCtx(ctx, 'textAlign', textAlign);
-	        // Force baseline to be "middle". Otherwise, if using "top", the
-	        // text will offset downward a little bit in font "Microsoft YaHei".
-	        setCtx(ctx, 'textBaseline', 'middle');
-
-	        setCtx(ctx, 'font', token.font || textContain.DEFAULT_FONT);
-
-	        var textStroke = getStroke(tokenStyle.textStroke || style.textStroke, textLineWidth);
-	        var textFill = getFill(tokenStyle.textFill || style.textFill);
-	        var textLineWidth = retrieve2(tokenStyle.textLineWidth, style.textLineWidth);
-
-	        // Fill after stroke so the outline will not cover the main part.
-	        if (textStroke) {
-	            setCtx(ctx, 'lineWidth', textLineWidth);
-	            setCtx(ctx, 'strokeStyle', textStroke);
-	            ctx.strokeText(token.text, x, y);
-	        }
-	        if (textFill) {
-	            setCtx(ctx, 'fillStyle', textFill);
-	            ctx.fillText(token.text, x, y);
-	        }
-	    }
-
-	    function needDrawBackground(style) {
-	        return style.textBackgroundColor
-	            || (style.textBorderWidth && style.textBorderColor);
-	    }
-
-	    // style: {textBackgroundColor, textBorderWidth, textBorderColor, textBorderRadius}
-	    // shape: {x, y, width, height}
-	    function drawBackground(hostEl, ctx, style, x, y, width, height) {
-	        var textBackgroundColor = style.textBackgroundColor;
-	        var textBorderWidth = style.textBorderWidth;
-	        var textBorderColor = style.textBorderColor;
-	        var isPlainBg = util.isString(textBackgroundColor);
-
-	        setCtx(ctx, 'shadowBlur', style.textBoxShadowBlur || 0);
-	        setCtx(ctx, 'shadowColor', style.textBoxShadowColor || 'transparent');
-	        setCtx(ctx, 'shadowOffsetX', style.textBoxShadowOffsetX || 0);
-	        setCtx(ctx, 'shadowOffsetY', style.textBoxShadowOffsetY || 0);
-
-	        if (isPlainBg || (textBorderWidth && textBorderColor)) {
-	            ctx.beginPath();
-	            var textBorderRadius = style.textBorderRadius;
-	            if (!textBorderRadius) {
-	                ctx.rect(x, y, width, height);
-	            }
-	            else {
-	                roundRectHelper.buildPath(ctx, {
-	                    x: x, y: y, width: width, height: height, r: textBorderRadius
-	                });
-	            }
-	            ctx.closePath();
-	        }
-
-	        if (isPlainBg) {
-	            setCtx(ctx, 'fillStyle', textBackgroundColor);
-	            ctx.fill();
-	        }
-	        else if (util.isObject(textBackgroundColor)) {
-	            var image = textBackgroundColor.image;
-
-	            image = imageHelper.createOrUpdateImage(
-	                image, null, hostEl, onBgImageLoaded, textBackgroundColor
-	            );
-	            if (image && imageHelper.isImageReady(image)) {
-	                ctx.drawImage(image, x, y, width, height);
-	            }
-	        }
-
-	        if (textBorderWidth && textBorderColor) {
-	            setCtx(ctx, 'lineWidth', textBorderWidth);
-	            setCtx(ctx, 'strokeStyle', textBorderColor);
-	            ctx.stroke();
-	        }
-	    }
-
-	    function onBgImageLoaded(image, textBackgroundColor) {
-	        // Replace image, so that `contain/text.js#parseRichText`
-	        // will get correct result in next tick.
-	        textBackgroundColor.image = image;
-	    }
-
-	    function getBoxPosition(blockHeiht, style, rect) {
-	        var baseX = style.x || 0;
-	        var baseY = style.y || 0;
-	        var textAlign = style.textAlign;
-	        var textVerticalAlign = style.textVerticalAlign;
-
-	        // Text position represented by coord
-	        if (rect) {
-	            var textPosition = style.textPosition;
-	            if (textPosition instanceof Array) {
-	                // Percent
-	                baseX = rect.x + parsePercent(textPosition[0], rect.width);
-	                baseY = rect.y + parsePercent(textPosition[1], rect.height);
-	            }
-	            else {
-	                var res = textContain.adjustTextPositionOnRect(
-	                    textPosition, rect, style.textDistance
-	                );
-	                baseX = res.x;
-	                baseY = res.y;
-	                // Default align and baseline when has textPosition
-	                textAlign = textAlign || res.textAlign;
-	                textVerticalAlign = textVerticalAlign || res.textVerticalAlign;
-	            }
-
-	            // textOffset is only support in RectText, otherwise
-	            // we have to adjust boundingRect for textOffset.
-	            var textOffset = style.textOffset;
-	            if (textOffset) {
-	                baseX += textOffset[0];
-	                baseY += textOffset[1];
-	            }
-	        }
-
-	        return {
-	            baseX: baseX,
-	            baseY: baseY,
-	            textAlign: textAlign,
-	            textVerticalAlign: textVerticalAlign
-	        };
-	    }
-
-	    function setCtx(ctx, prop, value) {
-	        // FIXME ??? performance try
-	        // if (ctx.__currentValues[prop] !== value) {
-	            ctx[prop] = ctx.__currentValues[prop] = value;
-	        // }
-	        return ctx[prop];
-	    }
-
-	    /**
-	     * @param {string} [stroke] If specified, do not check style.textStroke.
-	     * @param {string} [lineWidth] If specified, do not check style.textStroke.
-	     * @param {number} style
-	     */
-	    var getStroke = helper.getStroke = function (stroke, lineWidth) {
-	        return (stroke == null || lineWidth <= 0 || stroke === 'transparent' || stroke === 'none')
-	            ? null
-	            // TODO pattern and gradient?
-	            : (stroke.image || stroke.colorStops)
-	            ? '#000'
-	            : stroke;
-	    };
-
-	    var getFill = helper.getFill = function (fill) {
-	        return (fill == null || fill === 'none')
-	            ? null
-	            // TODO pattern and gradient?
-	            : (fill.image || fill.colorStops)
-	            ? '#000'
-	            : fill;
-	    };
-
-	    function parsePercent(value, maxValue) {
-	        if (typeof value === 'string') {
-	            if (value.lastIndexOf('%') >= 0) {
-	                return parseFloat(value) / 100 * maxValue;
-	            }
-	            return parseFloat(value);
-	        }
-	        return value;
-	    }
-
-	    function getTextXForPadding(x, textAlign, textPadding) {
-	        return textAlign === 'right'
-	            ? (x - textPadding[1])
-	            : textAlign === 'center'
-	            ? (x + textPadding[3] / 2 - textPadding[1] / 2)
-	            : (x + textPadding[3]);
-	    }
-
-	    /**
-	     * @param {string} text
-	     * @param {module:zrender/Style} style
-	     * @return {boolean}
-	     */
-	    helper.needDrawText = function (text, style) {
-	        return text != null
-	            && (text
-	                || style.textBackgroundColor
-	                || (style.textBorderWidth && style.textBorderColor)
-	                || style.textPadding
-	            );
-	    };
-
-	    module.exports = helper;
-
-
-
-
-/***/ }),
-/* 26 */
-/***/ (function(module, exports) {
-
-	
-
-	    module.exports = {
-	        buildPath: function (ctx, shape) {
-	            var x = shape.x;
-	            var y = shape.y;
-	            var width = shape.width;
-	            var height = shape.height;
-	            var r = shape.r;
-	            var r1;
-	            var r2;
-	            var r3;
-	            var r4;
-
-	            // Convert width and height to positive for better borderRadius
-	            if (width < 0) {
-	                x = x + width;
-	                width = -width;
-	            }
-	            if (height < 0) {
-	                y = y + height;
-	                height = -height;
-	            }
-
-	            if (typeof r === 'number') {
-	                r1 = r2 = r3 = r4 = r;
-	            }
-	            else if (r instanceof Array) {
-	                if (r.length === 1) {
-	                    r1 = r2 = r3 = r4 = r[0];
-	                }
-	                else if (r.length === 2) {
-	                    r1 = r3 = r[0];
-	                    r2 = r4 = r[1];
-	                }
-	                else if (r.length === 3) {
-	                    r1 = r[0];
-	                    r2 = r4 = r[1];
-	                    r3 = r[2];
-	                }
-	                else {
-	                    r1 = r[0];
-	                    r2 = r[1];
-	                    r3 = r[2];
-	                    r4 = r[3];
-	                }
-	            }
-	            else {
-	                r1 = r2 = r3 = r4 = 0;
-	            }
-
-	            var total;
-	            if (r1 + r2 > width) {
-	                total = r1 + r2;
-	                r1 *= width / total;
-	                r2 *= width / total;
-	            }
-	            if (r3 + r4 > width) {
-	                total = r3 + r4;
-	                r3 *= width / total;
-	                r4 *= width / total;
-	            }
-	            if (r2 + r3 > height) {
-	                total = r2 + r3;
-	                r2 *= height / total;
-	                r3 *= height / total;
-	            }
-	            if (r1 + r4 > height) {
-	                total = r1 + r4;
-	                r1 *= height / total;
-	                r4 *= height / total;
-	            }
-	            ctx.moveTo(x + r1, y);
-	            ctx.lineTo(x + width - r2, y);
-	            r2 !== 0 && ctx.quadraticCurveTo(
-	                x + width, y, x + width, y + r2
-	            );
-	            ctx.lineTo(x + width, y + height - r3);
-	            r3 !== 0 && ctx.quadraticCurveTo(
-	                x + width, y + height, x + width - r3, y + height
-	            );
-	            ctx.lineTo(x + r4, y + height);
-	            r4 !== 0 && ctx.quadraticCurveTo(
-	                x, y + height, x, y + height - r4
-	            );
-	            ctx.lineTo(x, y + r1);
-	            r1 !== 0 && ctx.quadraticCurveTo(x, y, x + r1, y);
-	        }
-	    };
-
-
-/***/ }),
-/* 27 */
-/***/ (function(module, exports, __webpack_require__) {
-
 	'use strict';
 	/**
 	 * @module zrender/Element
 	 */
 
 
-	    var guid = __webpack_require__(28);
-	    var Eventful = __webpack_require__(29);
-	    var Transformable = __webpack_require__(30);
-	    var Animatable = __webpack_require__(31);
+	    var guid = __webpack_require__(26);
+	    var Eventful = __webpack_require__(27);
+	    var Transformable = __webpack_require__(28);
+	    var Animatable = __webpack_require__(29);
 	    var zrUtil = __webpack_require__(4);
 
 	    /**
@@ -10662,7 +10101,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 28 */
+/* 26 */
 /***/ (function(module, exports) {
 
 	/**
@@ -10681,7 +10120,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 29 */
+/* 27 */
 /***/ (function(module, exports) {
 
 	/**
@@ -10989,7 +10428,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 30 */
+/* 28 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -11257,7 +10696,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 31 */
+/* 29 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -11266,12 +10705,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	 */
 
 
-	    var Animator = __webpack_require__(32);
+	    var Animator = __webpack_require__(30);
 	    var util = __webpack_require__(4);
 	    var isString = util.isString;
 	    var isFunction = util.isFunction;
 	    var isObject = util.isObject;
-	    var log = __webpack_require__(36);
+	    var log = __webpack_require__(34);
 
 	    /**
 	     * @alias modue:zrender/mixin/Animatable
@@ -11536,7 +10975,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 32 */
+/* 30 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	/**
@@ -11544,8 +10983,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	 */
 
 
-	    var Clip = __webpack_require__(33);
-	    var color = __webpack_require__(35);
+	    var Clip = __webpack_require__(31);
+	    var color = __webpack_require__(33);
 	    var util = __webpack_require__(4);
 	    var isArrayLike = util.isArrayLike;
 
@@ -12196,7 +11635,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 33 */
+/* 31 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	/**
@@ -12215,7 +11654,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	 */
 
 
-	    var easingFuncs = __webpack_require__(34);
+	    var easingFuncs = __webpack_require__(32);
 
 	    function Clip(options) {
 
@@ -12325,7 +11764,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 34 */
+/* 32 */
 /***/ (function(module, exports) {
 
 	/**
@@ -12676,7 +12115,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 35 */
+/* 33 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	/**
@@ -12811,7 +12250,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        return m1;
 	    }
 
-	    function lerp(a, b, p) {
+	    function lerpNumber(a, b, p) {
 	        return a + (b - a) * p;
 	    }
 
@@ -13077,13 +12516,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	    }
 
 	    /**
-	     * Map value to color. Faster than mapToColor methods because color is represented by rgba array.
+	     * Map value to color. Faster than lerp methods because color is represented by rgba array.
 	     * @param {number} normalizedValue A float between 0 and 1.
 	     * @param {Array.<Array.<number>>} colors List of rgba color array
 	     * @param {Array.<number>} [out] Mapped gba color array
 	     * @return {Array.<number>} will be null/undefined if input illegal.
 	     */
-	    function fastMapToColor(normalizedValue, colors, out) {
+	    function fastLerp(normalizedValue, colors, out) {
 	        if (!(colors && colors.length)
 	            || !(normalizedValue >= 0 && normalizedValue <= 1)
 	        ) {
@@ -13098,13 +12537,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	        var leftColor = colors[leftIndex];
 	        var rightColor = colors[rightIndex];
 	        var dv = value - leftIndex;
-	        out[0] = clampCssByte(lerp(leftColor[0], rightColor[0], dv));
-	        out[1] = clampCssByte(lerp(leftColor[1], rightColor[1], dv));
-	        out[2] = clampCssByte(lerp(leftColor[2], rightColor[2], dv));
-	        out[3] = clampCssFloat(lerp(leftColor[3], rightColor[3], dv));
+	        out[0] = clampCssByte(lerpNumber(leftColor[0], rightColor[0], dv));
+	        out[1] = clampCssByte(lerpNumber(leftColor[1], rightColor[1], dv));
+	        out[2] = clampCssByte(lerpNumber(leftColor[2], rightColor[2], dv));
+	        out[3] = clampCssFloat(lerpNumber(leftColor[3], rightColor[3], dv));
 
 	        return out;
 	    }
+
 	    /**
 	     * @param {number} normalizedValue A float between 0 and 1.
 	     * @param {Array.<string>} colors Color list.
@@ -13113,7 +12553,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	     *                           return {color: ..., leftIndex: ..., rightIndex: ..., value: ...},
 	     * @memberOf module:zrender/util/color
 	     */
-	    function mapToColor(normalizedValue, colors, fullOutput) {
+	    function lerp(normalizedValue, colors, fullOutput) {
 	        if (!(colors && colors.length)
 	            || !(normalizedValue >= 0 && normalizedValue <= 1)
 	        ) {
@@ -13129,229 +12569,813 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	        var color = stringify(
 	            [
-	                clampCssByte(lerp(leftColor[0], rightColor[0], dv)),
-	                clampCssByte(lerp(leftColor[1], rightColor[1], dv)),
-	                clampCssByte(lerp(leftColor[2], rightColor[2], dv)),
-	                clampCssFloat(lerp(leftColor[3], rightColor[3], dv))
+	                clampCssByte(lerpNumber(leftColor[0], rightColor[0], dv)),
+	                clampCssByte(lerpNumber(leftColor[1], rightColor[1], dv)),
+	                clampCssByte(lerpNumber(leftColor[2], rightColor[2], dv)),
+	                clampCssFloat(lerpNumber(leftColor[3], rightColor[3], dv))
 	            ],
 	            'rgba'
 	        );
 
-	        return fullOutput
-	            ? {
-	                color: color,
-	                leftIndex: leftIndex,
-	                rightIndex: rightIndex,
-	                value: value
+	        return fullOutput
+	            ? {
+	                color: color,
+	                leftIndex: leftIndex,
+	                rightIndex: rightIndex,
+	                value: value
+	            }
+	            : color;
+	    }
+
+	    /**
+	     * @param {string} color
+	     * @param {number=} h 0 ~ 360, ignore when null.
+	     * @param {number=} s 0 ~ 1, ignore when null.
+	     * @param {number=} l 0 ~ 1, ignore when null.
+	     * @return {string} Color string in rgba format.
+	     * @memberOf module:zrender/util/color
+	     */
+	    function modifyHSL(color, h, s, l) {
+	        color = parse(color);
+
+	        if (color) {
+	            color = rgba2hsla(color);
+	            h != null && (color[0] = clampCssAngle(h));
+	            s != null && (color[1] = parseCssFloat(s));
+	            l != null && (color[2] = parseCssFloat(l));
+
+	            return stringify(hsla2rgba(color), 'rgba');
+	        }
+	    }
+
+	    /**
+	     * @param {string} color
+	     * @param {number=} alpha 0 ~ 1
+	     * @return {string} Color string in rgba format.
+	     * @memberOf module:zrender/util/color
+	     */
+	    function modifyAlpha(color, alpha) {
+	        color = parse(color);
+
+	        if (color && alpha != null) {
+	            color[3] = clampCssFloat(alpha);
+	            return stringify(color, 'rgba');
+	        }
+	    }
+
+	    /**
+	     * @param {Array.<number>} arrColor like [12,33,44,0.4]
+	     * @param {string} type 'rgba', 'hsva', ...
+	     * @return {string} Result color. (If input illegal, return undefined).
+	     */
+	    function stringify(arrColor, type) {
+	        if (!arrColor || !arrColor.length) {
+	            return;
+	        }
+	        var colorStr = arrColor[0] + ',' + arrColor[1] + ',' + arrColor[2];
+	        if (type === 'rgba' || type === 'hsva' || type === 'hsla') {
+	            colorStr += ',' + arrColor[3];
+	        }
+	        return type + '(' + colorStr + ')';
+	    }
+
+	    module.exports = {
+	        parse: parse,
+	        lift: lift,
+	        toHex: toHex,
+	        fastLerp: fastLerp,
+	        fastMapToColor: fastLerp, // Deprecated
+	        lerp: lerp,
+	        mapToColor: lerp, // Deprecated
+	        modifyHSL: modifyHSL,
+	        modifyAlpha: modifyAlpha,
+	        stringify: stringify
+	    };
+
+
+
+
+/***/ }),
+/* 34 */
+/***/ (function(module, exports, __webpack_require__) {
+
+	
+	        var config = __webpack_require__(35);
+
+	        /**
+	         * @exports zrender/tool/log
+	         * @author Kener (@Kener-林峰, kener.linfeng@gmail.com)
+	         */
+	        module.exports = function() {
+	            if (config.debugMode === 0) {
+	                return;
+	            }
+	            else if (config.debugMode == 1) {
+	                for (var k in arguments) {
+	                    throw new Error(arguments[k]);
+	                }
+	            }
+	            else if (config.debugMode > 1) {
+	                for (var k in arguments) {
+	                    console.log(arguments[k]);
+	                }
+	            }
+	        };
+
+	        /* for debug
+	        return function(mes) {
+	            document.getElementById('wrong-message').innerHTML =
+	                mes + ' ' + (new Date() - 0)
+	                + '<br/>'
+	                + document.getElementById('wrong-message').innerHTML;
+	        };
+	        */
+	    
+
+
+/***/ }),
+/* 35 */
+/***/ (function(module, exports) {
+
+	
+	    var dpr = 1;
+	    // If in browser environment
+	    if (typeof window !== 'undefined') {
+	        dpr = Math.max(window.devicePixelRatio || 1, 1);
+	    }
+	    /**
+	     * config默认配置项
+	     * @exports zrender/config
+	     * @author Kener (@Kener-林峰, kener.linfeng@gmail.com)
+	     */
+	    var config = {
+	        /**
+	         * debug日志选项：catchBrushException为true下有效
+	         * 0 : 不生成debug数据，发布用
+	         * 1 : 异常抛出，调试用
+	         * 2 : 控制台输出，调试用
+	         */
+	        debugMode: 0,
+
+	        // retina 屏幕优化
+	        devicePixelRatio: dpr
+	    };
+	    module.exports = config;
+
+
+
+
+/***/ }),
+/* 36 */
+/***/ (function(module, exports, __webpack_require__) {
+
+	/**
+	 * Mixin for drawing text in a element bounding rect
+	 * @module zrender/mixin/RectText
+	 */
+
+
+
+	    var textHelper = __webpack_require__(37);
+	    var BoundingRect = __webpack_require__(9);
+
+	    var tmpRect = new BoundingRect();
+
+	    var RectText = function () {};
+
+	    RectText.prototype = {
+
+	        constructor: RectText,
+
+	        /**
+	         * Draw text in a rect with specified position.
+	         * @param  {CanvasRenderingContext2D} ctx
+	         * @param  {Object} rect Displayable rect
+	         */
+	        drawRectText: function (ctx, rect) {
+	            var style = this.style;
+
+	            rect = style.textRect || rect;
+
+	            // Optimize, avoid normalize every time.
+	            this.__dirty && textHelper.normalizeTextStyle(style, true);
+
+	            var text = style.text;
+
+	            // Convert to string
+	            text != null && (text += '');
+
+	            if (!textHelper.needDrawText(text, style)) {
+	                return;
+	            }
+
+	            // FIXME
+	            ctx.save();
+
+	            // Transform rect to view space
+	            var transform = this.transform;
+	            if (!style.transformText) {
+	                if (transform) {
+	                    tmpRect.copy(rect);
+	                    tmpRect.applyTransform(transform);
+	                    rect = tmpRect;
+	                }
+	            }
+	            else {
+	                this.setTransform(ctx);
+	            }
+
+	            // transformText and textRotation can not be used at the same time.
+	            textHelper.renderText(this, ctx, text, style, rect);
+
+	            ctx.restore();
+	        }
+	    };
+
+	    module.exports = RectText;
+
+
+/***/ }),
+/* 37 */
+/***/ (function(module, exports, __webpack_require__) {
+
+	
+
+	    var textContain = __webpack_require__(8);
+	    var util = __webpack_require__(4);
+	    var roundRectHelper = __webpack_require__(38);
+	    var imageHelper = __webpack_require__(12);
+
+	    var retrieve3 = util.retrieve3;
+	    var retrieve2 = util.retrieve2;
+
+	    // TODO: Have not support 'start', 'end' yet.
+	    var VALID_TEXT_ALIGN = {left: 1, right: 1, center: 1};
+	    var VALID_TEXT_VERTICAL_ALIGN = {top: 1, bottom: 1, middle: 1};
+
+	    var helper = {};
+
+	    /**
+	     * @param {module:zrender/graphic/Style} style
+	     * @return {module:zrender/graphic/Style} The input style.
+	     */
+	    helper.normalizeTextStyle = function (style) {
+	        normalizeStyle(style);
+	        util.each(style.rich, normalizeStyle);
+	        return style;
+	    };
+
+	    function normalizeStyle(style) {
+	        if (style) {
+
+	            style.font = textContain.makeFont(style);
+
+	            var textAlign = style.textAlign;
+	            textAlign === 'middle' && (textAlign = 'center');
+	            style.textAlign = (
+	                textAlign == null || VALID_TEXT_ALIGN[textAlign]
+	            ) ? textAlign : 'left';
+
+	            // Compatible with textBaseline.
+	            var textVerticalAlign = style.textVerticalAlign || style.textBaseline;
+	            textVerticalAlign === 'center' && (textVerticalAlign = 'middle');
+	            style.textVerticalAlign = (
+	                textVerticalAlign == null || VALID_TEXT_VERTICAL_ALIGN[textVerticalAlign]
+	            ) ? textVerticalAlign : 'top';
+
+	            var textPadding = style.textPadding;
+	            if (textPadding) {
+	                style.textPadding = util.normalizeCssArray(style.textPadding);
+	            }
+	        }
+	    }
+
+	    /**
+	     * @param {CanvasRenderingContext2D} ctx
+	     * @param {string} text
+	     * @param {module:zrender/graphic/Style} style
+	     * @param {Object|boolean} [rect] {x, y, width, height}
+	     *                  If set false, rect text is not used.
+	     */
+	    helper.renderText = function (hostEl, ctx, text, style, rect) {
+	        style.rich
+	            ? renderRichText(hostEl, ctx, text, style, rect)
+	            : renderPlainText(hostEl, ctx, text, style, rect);
+	    };
+
+	    function renderPlainText(hostEl, ctx, text, style, rect) {
+	        var font = setCtx(ctx, 'font', style.font || textContain.DEFAULT_FONT);
+
+	        var textPadding = style.textPadding;
+
+	        var contentBlock = hostEl.__textCotentBlock;
+	        if (!contentBlock || hostEl.__dirty) {
+	            contentBlock = hostEl.__textCotentBlock = textContain.parsePlainText(
+	                text, font, textPadding, style.truncate
+	            );
+	        }
+
+	        var outerHeight = contentBlock.outerHeight;
+
+	        var textLines = contentBlock.lines;
+	        var lineHeight = contentBlock.lineHeight;
+
+	        var boxPos = getBoxPosition(outerHeight, style, rect);
+	        var baseX = boxPos.baseX;
+	        var baseY = boxPos.baseY;
+	        var textAlign = boxPos.textAlign;
+	        var textVerticalAlign = boxPos.textVerticalAlign;
+
+	        // Origin of textRotation should be the base point of text drawing.
+	        applyTextRotation(ctx, style, rect, baseX, baseY);
+
+	        var boxY = textContain.adjustTextY(baseY, outerHeight, textVerticalAlign);
+	        var textX = baseX;
+	        var textY = boxY;
+
+	        var needDrawBg = needDrawBackground(style);
+	        if (needDrawBg || textPadding) {
+	            // Consider performance, do not call getTextWidth util necessary.
+	            var textWidth = textContain.getWidth(text, font);
+	            var outerWidth = textWidth;
+	            textPadding && (outerWidth += textPadding[1] + textPadding[3]);
+	            var boxX = textContain.adjustTextX(baseX, outerWidth, textAlign);
+
+	            needDrawBg && drawBackground(hostEl, ctx, style, boxX, boxY, outerWidth, outerHeight);
+
+	            if (textPadding) {
+	                textX = getTextXForPadding(baseX, textAlign, textPadding);
+	                textY += textPadding[0];
+	            }
+	        }
+
+	        setCtx(ctx, 'textAlign', textAlign || 'left');
+	        // Force baseline to be "middle". Otherwise, if using "top", the
+	        // text will offset downward a little bit in font "Microsoft YaHei".
+	        setCtx(ctx, 'textBaseline', 'middle');
+
+	        // Always set shadowBlur and shadowOffset to avoid leak from displayable.
+	        setCtx(ctx, 'shadowBlur', style.textShadowBlur || 0);
+	        setCtx(ctx, 'shadowColor', style.textShadowColor || 'transparent');
+	        setCtx(ctx, 'shadowOffsetX', style.textShadowOffsetX || 0);
+	        setCtx(ctx, 'shadowOffsetY', style.textShadowOffsetY || 0);
+
+	        // `textBaseline` is set as 'middle'.
+	        textY += lineHeight / 2;
+
+	        var textStrokeWidth = style.textStrokeWidth;
+	        var textStroke = getStroke(style.textStroke, textStrokeWidth);
+	        var textFill = getFill(style.textFill);
+
+	        if (textStroke) {
+	            setCtx(ctx, 'lineWidth', textStrokeWidth);
+	            setCtx(ctx, 'strokeStyle', textStroke);
+	        }
+	        if (textFill) {
+	            setCtx(ctx, 'fillStyle', textFill);
+	        }
+
+	        for (var i = 0; i < textLines.length; i++) {
+	            // Fill after stroke so the outline will not cover the main part.
+	            textStroke && ctx.strokeText(textLines[i], textX, textY);
+	            textFill && ctx.fillText(textLines[i], textX, textY);
+	            textY += lineHeight;
+	        }
+	    }
+
+	    function renderRichText(hostEl, ctx, text, style, rect) {
+	        var contentBlock = hostEl.__textCotentBlock;
+
+	        if (!contentBlock || hostEl.__dirty) {
+	            contentBlock = hostEl.__textCotentBlock = textContain.parseRichText(text, style);
+	        }
+
+	        drawRichText(hostEl, ctx, contentBlock, style, rect);
+	    }
+
+	    function drawRichText(hostEl, ctx, contentBlock, style, rect) {
+	        var contentWidth = contentBlock.width;
+	        var outerWidth = contentBlock.outerWidth;
+	        var outerHeight = contentBlock.outerHeight;
+	        var textPadding = style.textPadding;
+
+	        var boxPos = getBoxPosition(outerHeight, style, rect);
+	        var baseX = boxPos.baseX;
+	        var baseY = boxPos.baseY;
+	        var textAlign = boxPos.textAlign;
+	        var textVerticalAlign = boxPos.textVerticalAlign;
+
+	        // Origin of textRotation should be the base point of text drawing.
+	        applyTextRotation(ctx, style, rect, baseX, baseY);
+
+	        var boxX = textContain.adjustTextX(baseX, outerWidth, textAlign);
+	        var boxY = textContain.adjustTextY(baseY, outerHeight, textVerticalAlign);
+	        var xLeft = boxX;
+	        var lineTop = boxY;
+	        if (textPadding) {
+	            xLeft += textPadding[3];
+	            lineTop += textPadding[0];
+	        }
+	        var xRight = xLeft + contentWidth;
+
+	        needDrawBackground(style) && drawBackground(
+	            hostEl, ctx, style, boxX, boxY, outerWidth, outerHeight
+	        );
+
+	        for (var i = 0; i < contentBlock.lines.length; i++) {
+	            var line = contentBlock.lines[i];
+	            var tokens = line.tokens;
+	            var tokenCount = tokens.length;
+	            var lineHeight = line.lineHeight;
+	            var usedWidth = line.width;
+
+	            var leftIndex = 0;
+	            var lineXLeft = xLeft;
+	            var lineXRight = xRight;
+	            var rightIndex = tokenCount - 1;
+	            var token;
+
+	            while (
+	                leftIndex < tokenCount
+	                && (token = tokens[leftIndex], !token.textAlign || token.textAlign === 'left')
+	            ) {
+	                placeToken(hostEl, ctx, token, style, lineHeight, lineTop, lineXLeft, 'left');
+	                usedWidth -= token.width;
+	                lineXLeft += token.width;
+	                leftIndex++;
 	            }
-	            : color;
-	    }
 
-	    /**
-	     * @param {string} color
-	     * @param {number=} h 0 ~ 360, ignore when null.
-	     * @param {number=} s 0 ~ 1, ignore when null.
-	     * @param {number=} l 0 ~ 1, ignore when null.
-	     * @return {string} Color string in rgba format.
-	     * @memberOf module:zrender/util/color
-	     */
-	    function modifyHSL(color, h, s, l) {
-	        color = parse(color);
+	            while (
+	                rightIndex >= 0
+	                && (token = tokens[rightIndex], token.textAlign === 'right')
+	            ) {
+	                placeToken(hostEl, ctx, token, style, lineHeight, lineTop, lineXRight, 'right');
+	                usedWidth -= token.width;
+	                lineXRight -= token.width;
+	                rightIndex--;
+	            }
 
-	        if (color) {
-	            color = rgba2hsla(color);
-	            h != null && (color[0] = clampCssAngle(h));
-	            s != null && (color[1] = parseCssFloat(s));
-	            l != null && (color[2] = parseCssFloat(l));
+	            // The other tokens are placed as textAlign 'center' if there is enough space.
+	            lineXLeft += (contentWidth - (lineXLeft - xLeft) - (xRight - lineXRight) - usedWidth) / 2;
+	            while (leftIndex <= rightIndex) {
+	                token = tokens[leftIndex];
+	                // Consider width specified by user, use 'center' rather than 'left'.
+	                placeToken(hostEl, ctx, token, style, lineHeight, lineTop, lineXLeft + token.width / 2, 'center');
+	                lineXLeft += token.width;
+	                leftIndex++;
+	            }
 
-	            return stringify(hsla2rgba(color), 'rgba');
+	            lineTop += lineHeight;
 	        }
 	    }
 
-	    /**
-	     * @param {string} color
-	     * @param {number=} alpha 0 ~ 1
-	     * @return {string} Color string in rgba format.
-	     * @memberOf module:zrender/util/color
-	     */
-	    function modifyAlpha(color, alpha) {
-	        color = parse(color);
+	    function applyTextRotation(ctx, style, rect, x, y) {
+	        // textRotation only apply in RectText.
+	        if (rect && style.textRotation) {
+	            var origin = style.textOrigin;
+	            if (origin === 'center') {
+	                x = rect.width / 2 + rect.x;
+	                y = rect.height / 2 + rect.y;
+	            }
+	            else if (origin) {
+	                x = origin[0] + rect.x;
+	                y = origin[1] + rect.y;
+	            }
 
-	        if (color && alpha != null) {
-	            color[3] = clampCssFloat(alpha);
-	            return stringify(color, 'rgba');
+	            ctx.translate(x, y);
+	            // Positive: anticlockwise
+	            ctx.rotate(-style.textRotation);
+	            ctx.translate(-x, -y);
 	        }
 	    }
 
-	    /**
-	     * @param {Array.<number>} arrColor like [12,33,44,0.4]
-	     * @param {string} type 'rgba', 'hsva', ...
-	     * @return {string} Result color. (If input illegal, return undefined).
-	     */
-	    function stringify(arrColor, type) {
-	        if (!arrColor || !arrColor.length) {
-	            return;
+	    function placeToken(hostEl, ctx, token, style, lineHeight, lineTop, x, textAlign) {
+	        var tokenStyle = style.rich[token.styleName] || {};
+
+	        // 'ctx.textBaseline' is always set as 'middle', for sake of
+	        // the bias of "Microsoft YaHei".
+	        var textVerticalAlign = token.textVerticalAlign;
+	        var y = lineTop + lineHeight / 2;
+	        if (textVerticalAlign === 'top') {
+	            y = lineTop + token.height / 2;
 	        }
-	        var colorStr = arrColor[0] + ',' + arrColor[1] + ',' + arrColor[2];
-	        if (type === 'rgba' || type === 'hsva' || type === 'hsla') {
-	            colorStr += ',' + arrColor[3];
+	        else if (textVerticalAlign === 'bottom') {
+	            y = lineTop + lineHeight - token.height / 2;
 	        }
-	        return type + '(' + colorStr + ')';
-	    }
 
-	    module.exports = {
-	        parse: parse,
-	        lift: lift,
-	        toHex: toHex,
-	        fastMapToColor: fastMapToColor,
-	        mapToColor: mapToColor,
-	        modifyHSL: modifyHSL,
-	        modifyAlpha: modifyAlpha,
-	        stringify: stringify
-	    };
+	        !token.isLineHolder && needDrawBackground(tokenStyle) && drawBackground(
+	            hostEl,
+	            ctx,
+	            tokenStyle,
+	            textAlign === 'right'
+	                ? x - token.width
+	                : textAlign === 'center'
+	                ? x - token.width / 2
+	                : x,
+	            y - token.height / 2,
+	            token.width,
+	            token.height
+	        );
+
+	        var textPadding = token.textPadding;
+	        if (textPadding) {
+	            x = getTextXForPadding(x, textAlign, textPadding);
+	            y -= token.height / 2 - textPadding[2] - token.textHeight / 2;
+	        }
 
+	        setCtx(ctx, 'shadowBlur', retrieve3(tokenStyle.textShadowBlur, style.textShadowBlur, 0));
+	        setCtx(ctx, 'shadowColor', tokenStyle.textShadowColor || style.textShadowColor || 'transparent');
+	        setCtx(ctx, 'shadowOffsetX', retrieve3(tokenStyle.textShadowOffsetX, style.textShadowOffsetX, 0));
+	        setCtx(ctx, 'shadowOffsetY', retrieve3(tokenStyle.textShadowOffsetY, style.textShadowOffsetY, 0));
 
+	        setCtx(ctx, 'textAlign', textAlign);
+	        // Force baseline to be "middle". Otherwise, if using "top", the
+	        // text will offset downward a little bit in font "Microsoft YaHei".
+	        setCtx(ctx, 'textBaseline', 'middle');
 
+	        setCtx(ctx, 'font', token.font || textContain.DEFAULT_FONT);
 
-/***/ }),
-/* 36 */
-/***/ (function(module, exports, __webpack_require__) {
+	        var textStroke = getStroke(tokenStyle.textStroke || style.textStroke, textStrokeWidth);
+	        var textFill = getFill(tokenStyle.textFill || style.textFill);
+	        var textStrokeWidth = retrieve2(tokenStyle.textStrokeWidth, style.textStrokeWidth);
 
-	
-	        var config = __webpack_require__(37);
+	        // Fill after stroke so the outline will not cover the main part.
+	        if (textStroke) {
+	            setCtx(ctx, 'lineWidth', textStrokeWidth);
+	            setCtx(ctx, 'strokeStyle', textStroke);
+	            ctx.strokeText(token.text, x, y);
+	        }
+	        if (textFill) {
+	            setCtx(ctx, 'fillStyle', textFill);
+	            ctx.fillText(token.text, x, y);
+	        }
+	    }
 
-	        /**
-	         * @exports zrender/tool/log
-	         * @author Kener (@Kener-林峰, kener.linfeng@gmail.com)
-	         */
-	        module.exports = function() {
-	            if (config.debugMode === 0) {
-	                return;
-	            }
-	            else if (config.debugMode == 1) {
-	                for (var k in arguments) {
-	                    throw new Error(arguments[k]);
-	                }
+	    function needDrawBackground(style) {
+	        return style.textBackgroundColor
+	            || (style.textBorderWidth && style.textBorderColor);
+	    }
+
+	    // style: {textBackgroundColor, textBorderWidth, textBorderColor, textBorderRadius}
+	    // shape: {x, y, width, height}
+	    function drawBackground(hostEl, ctx, style, x, y, width, height) {
+	        var textBackgroundColor = style.textBackgroundColor;
+	        var textBorderWidth = style.textBorderWidth;
+	        var textBorderColor = style.textBorderColor;
+	        var isPlainBg = util.isString(textBackgroundColor);
+
+	        setCtx(ctx, 'shadowBlur', style.textBoxShadowBlur || 0);
+	        setCtx(ctx, 'shadowColor', style.textBoxShadowColor || 'transparent');
+	        setCtx(ctx, 'shadowOffsetX', style.textBoxShadowOffsetX || 0);
+	        setCtx(ctx, 'shadowOffsetY', style.textBoxShadowOffsetY || 0);
+
+	        if (isPlainBg || (textBorderWidth && textBorderColor)) {
+	            ctx.beginPath();
+	            var textBorderRadius = style.textBorderRadius;
+	            if (!textBorderRadius) {
+	                ctx.rect(x, y, width, height);
 	            }
-	            else if (config.debugMode > 1) {
-	                for (var k in arguments) {
-	                    console.log(arguments[k]);
-	                }
+	            else {
+	                roundRectHelper.buildPath(ctx, {
+	                    x: x, y: y, width: width, height: height, r: textBorderRadius
+	                });
 	            }
-	        };
-
-	        /* for debug
-	        return function(mes) {
-	            document.getElementById('wrong-message').innerHTML =
-	                mes + ' ' + (new Date() - 0)
-	                + '<br/>'
-	                + document.getElementById('wrong-message').innerHTML;
-	        };
-	        */
-	    
+	            ctx.closePath();
+	        }
 
+	        if (isPlainBg) {
+	            setCtx(ctx, 'fillStyle', textBackgroundColor);
+	            ctx.fill();
+	        }
+	        else if (util.isObject(textBackgroundColor)) {
+	            var image = textBackgroundColor.image;
 
-/***/ }),
-/* 37 */
-/***/ (function(module, exports) {
+	            image = imageHelper.createOrUpdateImage(
+	                image, null, hostEl, onBgImageLoaded, textBackgroundColor
+	            );
+	            if (image && imageHelper.isImageReady(image)) {
+	                ctx.drawImage(image, x, y, width, height);
+	            }
+	        }
 
-	
-	    var dpr = 1;
-	    // If in browser environment
-	    if (typeof window !== 'undefined') {
-	        dpr = Math.max(window.devicePixelRatio || 1, 1);
+	        if (textBorderWidth && textBorderColor) {
+	            setCtx(ctx, 'lineWidth', textBorderWidth);
+	            setCtx(ctx, 'strokeStyle', textBorderColor);
+	            ctx.stroke();
+	        }
 	    }
-	    /**
-	     * config默认配置项
-	     * @exports zrender/config
-	     * @author Kener (@Kener-林峰, kener.linfeng@gmail.com)
-	     */
-	    var config = {
-	        /**
-	         * debug日志选项：catchBrushException为true下有效
-	         * 0 : 不生成debug数据，发布用
-	         * 1 : 异常抛出，调试用
-	         * 2 : 控制台输出，调试用
-	         */
-	        debugMode: 0,
 
-	        // retina 屏幕优化
-	        devicePixelRatio: dpr
-	    };
-	    module.exports = config;
+	    function onBgImageLoaded(image, textBackgroundColor) {
+	        // Replace image, so that `contain/text.js#parseRichText`
+	        // will get correct result in next tick.
+	        textBackgroundColor.image = image;
+	    }
 
+	    function getBoxPosition(blockHeiht, style, rect) {
+	        var baseX = style.x || 0;
+	        var baseY = style.y || 0;
+	        var textAlign = style.textAlign;
+	        var textVerticalAlign = style.textVerticalAlign;
 
+	        // Text position represented by coord
+	        if (rect) {
+	            var textPosition = style.textPosition;
+	            if (textPosition instanceof Array) {
+	                // Percent
+	                baseX = rect.x + parsePercent(textPosition[0], rect.width);
+	                baseY = rect.y + parsePercent(textPosition[1], rect.height);
+	            }
+	            else {
+	                var res = textContain.adjustTextPositionOnRect(
+	                    textPosition, rect, style.textDistance
+	                );
+	                baseX = res.x;
+	                baseY = res.y;
+	                // Default align and baseline when has textPosition
+	                textAlign = textAlign || res.textAlign;
+	                textVerticalAlign = textVerticalAlign || res.textVerticalAlign;
+	            }
 
+	            // textOffset is only support in RectText, otherwise
+	            // we have to adjust boundingRect for textOffset.
+	            var textOffset = style.textOffset;
+	            if (textOffset) {
+	                baseX += textOffset[0];
+	                baseY += textOffset[1];
+	            }
+	        }
 
-/***/ }),
-/* 38 */
-/***/ (function(module, exports, __webpack_require__) {
+	        return {
+	            baseX: baseX,
+	            baseY: baseY,
+	            textAlign: textAlign,
+	            textVerticalAlign: textVerticalAlign
+	        };
+	    }
 
-	/**
-	 * Mixin for drawing text in a element bounding rect
-	 * @module zrender/mixin/RectText
-	 */
+	    function setCtx(ctx, prop, value) {
+	        // FIXME ??? performance try
+	        // if (ctx.__currentValues[prop] !== value) {
+	            // ctx[prop] = ctx.__currentValues[prop] = value;
+	        ctx[prop] = value;
+	        // }
+	        return ctx[prop];
+	    }
 
+	    /**
+	     * @param {string} [stroke] If specified, do not check style.textStroke.
+	     * @param {string} [lineWidth] If specified, do not check style.textStroke.
+	     * @param {number} style
+	     */
+	    var getStroke = helper.getStroke = function (stroke, lineWidth) {
+	        return (stroke == null || lineWidth <= 0 || stroke === 'transparent' || stroke === 'none')
+	            ? null
+	            // TODO pattern and gradient?
+	            : (stroke.image || stroke.colorStops)
+	            ? '#000'
+	            : stroke;
+	    };
 
+	    var getFill = helper.getFill = function (fill) {
+	        return (fill == null || fill === 'none')
+	            ? null
+	            // TODO pattern and gradient?
+	            : (fill.image || fill.colorStops)
+	            ? '#000'
+	            : fill;
+	    };
 
-	    var textHelper = __webpack_require__(25);
-	    var BoundingRect = __webpack_require__(9);
+	    function parsePercent(value, maxValue) {
+	        if (typeof value === 'string') {
+	            if (value.lastIndexOf('%') >= 0) {
+	                return parseFloat(value) / 100 * maxValue;
+	            }
+	            return parseFloat(value);
+	        }
+	        return value;
+	    }
 
-	    var tmpRect = new BoundingRect();
+	    function getTextXForPadding(x, textAlign, textPadding) {
+	        return textAlign === 'right'
+	            ? (x - textPadding[1])
+	            : textAlign === 'center'
+	            ? (x + textPadding[3] / 2 - textPadding[1] / 2)
+	            : (x + textPadding[3]);
+	    }
 
-	    var RectText = function () {};
+	    /**
+	     * @param {string} text
+	     * @param {module:zrender/Style} style
+	     * @return {boolean}
+	     */
+	    helper.needDrawText = function (text, style) {
+	        return text != null
+	            && (text
+	                || style.textBackgroundColor
+	                || (style.textBorderWidth && style.textBorderColor)
+	                || style.textPadding
+	            );
+	    };
 
-	    RectText.prototype = {
+	    module.exports = helper;
 
-	        constructor: RectText,
 
-	        /**
-	         * Draw text in a rect with specified position.
-	         * @param  {CanvasRenderingContext2D} ctx
-	         * @param  {Object} rect Displayable rect
-	         */
-	        drawRectText: function (ctx, rect) {
-	            var style = this.style;
 
-	            rect = style.textRect || rect;
 
-	            // Optimize, avoid normalize every time.
-	            this.__dirty && textHelper.normalizeTextStyle(style, true);
+/***/ }),
+/* 38 */
+/***/ (function(module, exports) {
 
-	            var text = style.text;
+	
 
-	            // Convert to string
-	            text != null && (text += '');
+	    module.exports = {
+	        buildPath: function (ctx, shape) {
+	            var x = shape.x;
+	            var y = shape.y;
+	            var width = shape.width;
+	            var height = shape.height;
+	            var r = shape.r;
+	            var r1;
+	            var r2;
+	            var r3;
+	            var r4;
 
-	            if (!textHelper.needDrawText(text, style)) {
-	                return;
+	            // Convert width and height to positive for better borderRadius
+	            if (width < 0) {
+	                x = x + width;
+	                width = -width;
+	            }
+	            if (height < 0) {
+	                y = y + height;
+	                height = -height;
 	            }
 
-	            // FIXME
-	            ctx.save();
-
-	            // Transform rect to view space
-	            var transform = this.transform;
-	            if (!style.transformText) {
-	                if (transform) {
-	                    tmpRect.copy(rect);
-	                    tmpRect.applyTransform(transform);
-	                    rect = tmpRect;
+	            if (typeof r === 'number') {
+	                r1 = r2 = r3 = r4 = r;
+	            }
+	            else if (r instanceof Array) {
+	                if (r.length === 1) {
+	                    r1 = r2 = r3 = r4 = r[0];
+	                }
+	                else if (r.length === 2) {
+	                    r1 = r3 = r[0];
+	                    r2 = r4 = r[1];
+	                }
+	                else if (r.length === 3) {
+	                    r1 = r[0];
+	                    r2 = r4 = r[1];
+	                    r3 = r[2];
+	                }
+	                else {
+	                    r1 = r[0];
+	                    r2 = r[1];
+	                    r3 = r[2];
+	                    r4 = r[3];
 	                }
 	            }
 	            else {
-	                this.setTransform(ctx);
+	                r1 = r2 = r3 = r4 = 0;
 	            }
 
-	            // transformText and textRotation can not be used at the same time.
-	            textHelper.renderText(this, ctx, text, style, rect);
-
-	            ctx.restore();
+	            var total;
+	            if (r1 + r2 > width) {
+	                total = r1 + r2;
+	                r1 *= width / total;
+	                r2 *= width / total;
+	            }
+	            if (r3 + r4 > width) {
+	                total = r3 + r4;
+	                r3 *= width / total;
+	                r4 *= width / total;
+	            }
+	            if (r2 + r3 > height) {
+	                total = r2 + r3;
+	                r2 *= height / total;
+	                r3 *= height / total;
+	            }
+	            if (r1 + r4 > height) {
+	                total = r1 + r4;
+	                r1 *= height / total;
+	                r4 *= height / total;
+	            }
+	            ctx.moveTo(x + r1, y);
+	            ctx.lineTo(x + width - r2, y);
+	            r2 !== 0 && ctx.quadraticCurveTo(
+	                x + width, y, x + width, y + r2
+	            );
+	            ctx.lineTo(x + width, y + height - r3);
+	            r3 !== 0 && ctx.quadraticCurveTo(
+	                x + width, y + height, x + width - r3, y + height
+	            );
+	            ctx.lineTo(x + r4, y + height);
+	            r4 !== 0 && ctx.quadraticCurveTo(
+	                x, y + height, x, y + height - r4
+	            );
+	            ctx.lineTo(x, y + r1);
+	            r1 !== 0 && ctx.quadraticCurveTo(x, y, x + r1, y);
 	        }
 	    };
 
-	    module.exports = RectText;
-
 
 /***/ }),
 /* 39 */
@@ -13373,7 +13397,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var vec2 = __webpack_require__(10);
 	    var bbox = __webpack_require__(41);
 	    var BoundingRect = __webpack_require__(9);
-	    var dpr = __webpack_require__(37).devicePixelRatio;
+	    var dpr = __webpack_require__(35).devicePixelRatio;
 
 	    var CMD = {
 	        M: 1,
@@ -15738,7 +15762,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 	    var zrUtil = __webpack_require__(4);
-	    var Element = __webpack_require__(27);
+	    var Element = __webpack_require__(25);
 	    var BoundingRect = __webpack_require__(9);
 
 	    /**
@@ -16174,7 +16198,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var Displayable = __webpack_require__(23);
 	    var zrUtil = __webpack_require__(4);
 	    var textContain = __webpack_require__(8);
-	    var textHelper = __webpack_require__(25);
+	    var textHelper = __webpack_require__(37);
 
 	    /**
 	     * @alias zrender/graphic/Text
@@ -16242,8 +16266,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	                rect.x += style.x || 0;
 	                rect.y += style.y || 0;
 
-	                if (textHelper.getStroke(style.textStroke, style.textLineWidth)) {
-	                    var w = style.textLineWidth;
+	                if (textHelper.getStroke(style.textStroke, style.textStrokeWidth)) {
+	                    var w = style.textStrokeWidth;
 	                    rect.x -= w / 2;
 	                    rect.y -= w / 2;
 	                    rect.width += w;
@@ -16790,7 +16814,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	 */
 
 
-	    var roundRectHelper = __webpack_require__(26);
+	    var roundRectHelper = __webpack_require__(38);
 
 	    module.exports = __webpack_require__(22).extend({
 
@@ -19055,30 +19079,31 @@ return /******/ (function(modules) { // webpackBootstrap
 	                compatItemStyle(data[i]);
 	                compatLabelTextStyle(data[i] && data[i].label);
 	            }
-	            // mark point data
-	            var markPoint = seriesOpt.markPoint;
-	            if (markPoint && markPoint.data) {
-	                var mpData = markPoint.data;
-	                for (var i = 0; i < mpData.length; i++) {
-	                    compatItemStyle(mpData[i]);
-	                    compatLabelTextStyle(mpData[i] && mpData[i].label);
-	                }
-	            }
-	            // mark line data
-	            var markLine = seriesOpt.markLine;
-	            if (markLine && markLine.data) {
-	                var mlData = markLine.data;
-	                for (var i = 0; i < mlData.length; i++) {
-	                    if (zrUtil.isArray(mlData[i])) {
-	                        compatItemStyle(mlData[i][0]);
-	                        compatLabelTextStyle(mlData[i][0] && mlData[i][0].label);
-	                        compatItemStyle(mlData[i][1]);
-	                        compatLabelTextStyle(mlData[i][1] && mlData[i][1].label);
-	                    }
-	                    else {
-	                        compatItemStyle(mlData[i]);
-	                        compatLabelTextStyle(mlData[i] && mlData[i].label);
-	                    }
+	        }
+
+	        // mark point data
+	        var markPoint = seriesOpt.markPoint;
+	        if (markPoint && markPoint.data) {
+	            var mpData = markPoint.data;
+	            for (var i = 0; i < mpData.length; i++) {
+	                compatItemStyle(mpData[i]);
+	                compatLabelTextStyle(mpData[i] && mpData[i].label);
+	            }
+	        }
+	        // mark line data
+	        var markLine = seriesOpt.markLine;
+	        if (markLine && markLine.data) {
+	            var mlData = markLine.data;
+	            for (var i = 0; i < mlData.length; i++) {
+	                if (zrUtil.isArray(mlData[i])) {
+	                    compatItemStyle(mlData[i][0]);
+	                    compatLabelTextStyle(mlData[i][0] && mlData[i][0].label);
+	                    compatItemStyle(mlData[i][1]);
+	                    compatLabelTextStyle(mlData[i][1] && mlData[i][1].label);
+	                }
+	                else {
+	                    compatItemStyle(mlData[i]);
+	                    compatLabelTextStyle(mlData[i] && mlData[i].label);
 	                }
 	            }
 	        }
@@ -19871,7 +19896,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	 */
 	// Global defines
 
-	    var guid = __webpack_require__(28);
+	    var guid = __webpack_require__(26);
 	    var env = __webpack_require__(2);
 	    var zrUtil = __webpack_require__(4);
 
@@ -19893,7 +19918,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    /**
 	     * @type {string}
 	     */
-	    zrender.version = '3.6.1';
+	    zrender.version = '3.6.2';
 
 	    /**
 	     * Initializing a zrender instance
@@ -20316,9 +20341,10 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 	    var util = __webpack_require__(4);
+	    var vec2 = __webpack_require__(10);
 	    var Draggable = __webpack_require__(89);
 
-	    var Eventful = __webpack_require__(29);
+	    var Eventful = __webpack_require__(27);
 
 	    var SILENT = 'silent';
 
@@ -20338,7 +20364,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	            pinchY: event.pinchY,
 	            pinchScale: event.pinchScale,
 	            wheelDelta: event.zrDelta,
-	            zrByTouch: event.zrByTouch
+	            zrByTouch: event.zrByTouch,
+	            which: event.which
 	        };
 	    }
 
@@ -20593,17 +20620,27 @@ return /******/ (function(modules) { // webpackBootstrap
 	            var hoveredTarget = hovered.target;
 
 	            if (name === 'mousedown') {
-	                this._downel = hoveredTarget;
+	                this._downEl = hoveredTarget;
+	                this._downPoint = [event.zrX, event.zrY];
 	                // In case click triggered before mouseup
-	                this._upel = hoveredTarget;
+	                this._upEl = hoveredTarget;
 	            }
 	            else if (name === 'mosueup') {
-	                this._upel = hoveredTarget;
+	                this._upEl = hoveredTarget;
 	            }
 	            else if (name === 'click') {
-	                if (this._downel !== this._upel) {
+	                if (this._downEl !== this._upEl
+	                    // Original click event is triggered on the whole canvas element,
+	                    // including the case that `mousedown` - `mousemove` - `mouseup`,
+	                    // which should be filtered, otherwise it will bring trouble to
+	                    // pan and zoom.
+	                    || !this._downPoint
+	                    // Arbitrary value
+	                    || vec2.dist(this._downPoint, [event.zrX, event.zrY]) > 4
+	                ) {
 	                    return;
 	                }
+	                this._downPoint = null;
 	            }
 
 	            this.dispatchToElement(hovered, name, event);
@@ -21691,7 +21728,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var requestAnimationFrame = __webpack_require__(94);
 
-	    var Animator = __webpack_require__(32);
+	    var Animator = __webpack_require__(30);
 	    /**
 	     * @typedef {Object} IZRenderStage
 	     * @property {Function} update
@@ -21942,11 +21979,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	 */
 
 
-	    var Eventful = __webpack_require__(29);
+	    var Eventful = __webpack_require__(27);
 	    var env = __webpack_require__(2);
 
 	    var isDomLevel2 = (typeof window !== 'undefined') && !!window.addEventListener;
 
+	    var MOUSE_EVENT_REG = /^(?:mouse|pointer|contextmenu|drag|drop)|click/;
+
 	    function getBoundingClientRect(el) {
 	        // BlackBerry 5, iOS 3 (original iPhone) don't have getBoundingRect
 	        return el.getBoundingClientRect ? el.getBoundingClientRect() : {left: 0, top: 0};
@@ -22027,6 +22066,15 @@ return /******/ (function(modules) { // webpackBootstrap
 	            touch && clientToLocal(el, touch, e, calculate);
 	        }
 
+	        // Add which for click: 1 === left; 2 === middle; 3 === right; otherwise: 0;
+	        // See jQuery: https://github.com/jquery/jquery/blob/master/src/event.js
+	        // If e.which has been defined, if may be readonly,
+	        // see: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/which
+	        var button = e.button;
+	        if (e.which == null && button !== undefined && MOUSE_EVENT_REG.test(e.type)) {
+	            e.which = (button & 1 ? 1 : (button & 2 ? 3 : (button & 4 ? 2 : 0)));
+	        }
+
 	        return e;
 	    }
 
@@ -22068,11 +22116,17 @@ return /******/ (function(modules) { // webpackBootstrap
 	            e.cancelBubble = true;
 	        };
 
+	    function notLeftMouse(e) {
+	        // If e.which is undefined, considered as left mouse event.
+	        return e.which > 1;
+	    }
+
 	    module.exports = {
 	        clientToLocal: clientToLocal,
 	        normalizeEvent: normalizeEvent,
 	        addEventListener: addEventListener,
 	        removeEventListener: removeEventListener,
+	        notLeftMouse: notLeftMouse,
 
 	        stop: stop,
 	        // 做向上兼容
@@ -22108,7 +22162,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var eventTool = __webpack_require__(93);
 	    var zrUtil = __webpack_require__(4);
-	    var Eventful = __webpack_require__(29);
+	    var Eventful = __webpack_require__(27);
 	    var env = __webpack_require__(2);
 	    var GestureMgr = __webpack_require__(96);
 
@@ -22624,9 +22678,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	 */
 	 
 
-	    var config = __webpack_require__(37);
+	    var config = __webpack_require__(35);
 	    var util = __webpack_require__(4);
-	    var log = __webpack_require__(36);
+	    var log = __webpack_require__(34);
 	    var BoundingRect = __webpack_require__(9);
 	    var timsort = __webpack_require__(91);
 
@@ -22737,6 +22791,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	     * @param {Object} opts
 	     */
 	    var Painter = function (root, storage, opts) {
+
+	        this.type = 'canvas';
+
 	        // In node environment using node-canvas
 	        var singleCanvas = !root.nodeName // In node ?
 	            || root.nodeName.toUpperCase() === 'CANVAS';
@@ -22842,6 +22899,10 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	        constructor: Painter,
 
+	        getType: function () {
+	            return 'canvas';
+	        },
+
 	        /**
 	         * If painter use a single canvas
 	         * @return {boolean}
@@ -23749,7 +23810,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 	    var util = __webpack_require__(4);
-	    var config = __webpack_require__(37);
+	    var config = __webpack_require__(35);
 	    var Style = __webpack_require__(24);
 	    var Pattern = __webpack_require__(49);
 
@@ -26670,7 +26731,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	            // If there are no data and extent are [Infinity, -Infinity]
 	            if (extent[1] === -Infinity && extent[0] === Infinity) {
 	                var d = new Date();
-	                extent[1] = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+	                extent[1] = +new Date(d.getFullYear(), d.getMonth(), d.getDate());
 	                extent[0] = extent[1] - ONE_DAY;
 	            }
 
@@ -26691,8 +26752,6 @@ return /******/ (function(modules) { // webpackBootstrap
 	         * @override
 	         */
 	        niceTicks: function (approxTickNum, minInterval, maxInterval) {
-	            var timezoneOffset = this.getSetting('useUTC')
-	                ? 0 : numberUtil.getTimezoneOffset() * 60 * 1000;
 	            approxTickNum = approxTickNum || 10;
 
 	            var extent = this._extent;
@@ -26722,9 +26781,11 @@ return /******/ (function(modules) { // webpackBootstrap
 	                interval *= yearStep;
 	            }
 
+	            var timezoneOffset = this.getSetting('useUTC')
+	                ? 0 : (new Date(+extent[0] || +extent[1])).getTimezoneOffset() * 60 * 1000;
 	            var niceExtent = [
 	                Math.round(mathCeil((extent[0] - timezoneOffset) / interval) * interval + timezoneOffset),
-	                Math.round(mathFloor((extent[1] - timezoneOffset)/ interval) * interval + timezoneOffset)
+	                Math.round(mathFloor((extent[1] - timezoneOffset) / interval) * interval + timezoneOffset)
 	            ];
 
 	            scaleHelper.fixExtent(niceExtent, extent);
@@ -28272,8 +28333,20 @@ return /******/ (function(modules) { // webpackBootstrap
 	    function getStackedOnPoints(coordSys, data) {
 	        var baseAxis = coordSys.getBaseAxis();
 	        var valueAxis = coordSys.getOtherAxis(baseAxis);
-	        var valueStart = baseAxis.onZero
-	            ? 0 : valueAxis.scale.getExtent()[0];
+
+	        var valueStart = 0;
+	        if (!baseAxis.onZero) {
+	            var extent = valueAxis.scale.getExtent();
+	            if (extent[0] > 0) {
+	                // Both positive
+	                valueStart = extent[0];
+	            }
+	            else if (extent[1] < 0) {
+	                // Both negative
+	                valueStart = extent[1];
+	            }
+	            // If is one positive, and one negative, onZero shall be true
+	        }
 
 	        var valueDim = valueAxis.dim;
 
@@ -31440,7 +31513,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var getInterval = AxisBuilder.getInterval;
 
 	    var axisBuilderAttrs = [
-	        'axisLine', 'axisLabel', 'axisTick', 'axisName'
+	        'axisLine', 'axisTickLabel', 'axisName'
 	    ];
 	    var selfBuilderAttrs = [
 	        'splitArea', 'splitLine'
@@ -31528,13 +31601,19 @@ return /******/ (function(modules) { // webpackBootstrap
 	            );
 	            var ticks = axis.scale.getTicks();
 
+	            var showMinLabel = axisModel.get('axisLabel.showMinLabel');
+	            var showMaxLabel = axisModel.get('axisLabel.showMaxLabel');
+
 	            var p1 = [];
 	            var p2 = [];
 	            // Simple optimization
 	            // Batching the lines if color are the same
 	            var lineStyle = lineStyleModel.getLineStyle();
 	            for (var i = 0; i < ticksCoords.length; i++) {
-	                if (ifIgnoreOnTick(axis, i, lineInterval)) {
+	                if (ifIgnoreOnTick(
+	                    axis, i, lineInterval, ticksCoords.length,
+	                    showMinLabel, showMaxLabel
+	                )) {
 	                    continue;
 	                }
 
@@ -31605,8 +31684,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	            var areaStyle = areaStyleModel.getAreaStyle();
 	            areaColors = zrUtil.isArray(areaColors) ? areaColors : [areaColors];
 
+	            var showMinLabel = axisModel.get('axisLabel.showMinLabel');
+	            var showMaxLabel = axisModel.get('axisLabel.showMaxLabel');
+
 	            for (var i = 1; i < ticksCoords.length; i++) {
-	                if (ifIgnoreOnTick(axis, i, areaInterval)) {
+	                if (ifIgnoreOnTick(
+	                    axis, i, areaInterval, ticksCoords.length,
+	                    showMinLabel, showMaxLabel
+	                )) {
 	                    continue;
 	                }
 
@@ -31715,7 +31800,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	     * @param {Object} opt Standard axis parameters.
 	     * @param {Array.<number>} opt.position [x, y]
 	     * @param {number} opt.rotation by radian
-	     * @param {number} [opt.nameDirection=1] 1 or -1 Used when nameLocation is 'middle'.
+	     * @param {number} [opt.nameDirection=1] 1 or -1 Used when nameLocation is 'middle' or 'center'.
 	     * @param {number} [opt.tickDirection=1] 1 or -1
 	     * @param {number} [opt.labelDirection=1] 1 or -1
 	     * @param {number} [opt.labelOffset=0] Usefull when onZero.
@@ -31837,173 +31922,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	        /**
 	         * @private
 	         */
-	        axisTick: function () {
+	        axisTickLabel: function () {
 	            var axisModel = this.axisModel;
-	            var axis = axisModel.axis;
-
-	            if (!axisModel.get('axisTick.show') || axis.scale.isBlank()) {
-	                return;
-	            }
-
-	            var tickModel = axisModel.getModel('axisTick');
 	            var opt = this.opt;
 
-	            var lineStyleModel = tickModel.getModel('lineStyle');
-	            var tickLen = tickModel.get('length');
-
-	            var tickInterval = getInterval(tickModel, opt.labelInterval);
-	            var ticksCoords = axis.getTicksCoords(tickModel.get('alignWithLabel'));
-	            var ticks = axis.scale.getTicks();
-
-	            var pt1 = [];
-	            var pt2 = [];
-	            var matrix = this._transform;
-
-	            for (var i = 0; i < ticksCoords.length; i++) {
-	                // Only ordinal scale support tick interval
-	                if (ifIgnoreOnTick(axis, i, tickInterval)) {
-	                     continue;
-	                }
-
-	                var tickCoord = ticksCoords[i];
-
-	                pt1[0] = tickCoord;
-	                pt1[1] = 0;
-	                pt2[0] = tickCoord;
-	                pt2[1] = opt.tickDirection * tickLen;
-
-	                if (matrix) {
-	                    v2ApplyTransform(pt1, pt1, matrix);
-	                    v2ApplyTransform(pt2, pt2, matrix);
-	                }
-	                // Tick line, Not use group transform to have better line draw
-	                this.group.add(new graphic.Line(graphic.subPixelOptimizeLine({
-
-	                    // Id for animation
-	                    anid: 'tick_' + ticks[i],
-
-	                    shape: {
-	                        x1: pt1[0],
-	                        y1: pt1[1],
-	                        x2: pt2[0],
-	                        y2: pt2[1]
-	                    },
-	                    style: zrUtil.defaults(
-	                        lineStyleModel.getLineStyle(),
-	                        {
-	                            stroke: axisModel.get('axisLine.lineStyle.color')
-	                        }
-	                    ),
-	                    z2: 2,
-	                    silent: true
-	                })));
-	            }
-	        },
-
-	        /**
-	         * @param {module:echarts/coord/cartesian/AxisModel} axisModel
-	         * @param {module:echarts/coord/cartesian/GridModel} gridModel
-	         * @private
-	         */
-	        axisLabel: function () {
-	            var opt = this.opt;
-	            var axisModel = this.axisModel;
-	            var axis = axisModel.axis;
-	            var show = retrieve(opt.axisLabelShow, axisModel.get('axisLabel.show'));
-
-	            if (!show || axis.scale.isBlank()) {
-	                return;
-	            }
-
-	            var labelModel = axisModel.getModel('axisLabel');
-	            var labelMargin = labelModel.get('margin');
-	            var ticks = axis.scale.getTicks();
-	            var labels = axisModel.getFormattedLabels();
-
-	            // Special label rotate.
-	            var labelRotation = (
-	                retrieve(opt.labelRotate, labelModel.get('rotate')) || 0
-	            ) * PI / 180;
-
-	            var labelLayout = innerTextLayout(opt.rotation, labelRotation, opt.labelDirection);
-	            var categoryData = axisModel.get('data');
-
-	            var textEls = [];
-	            var silent = isSilent(axisModel);
-	            var triggerEvent = axisModel.get('triggerEvent');
-
-	            zrUtil.each(ticks, function (tickVal, index) {
-	                if (ifIgnoreOnTick(axis, index, opt.labelInterval)) {
-	                     return;
-	                }
-
-	                var itemLabelModel = labelModel;
-	                if (categoryData && categoryData[tickVal] && categoryData[tickVal].textStyle) {
-	                    itemLabelModel = new Model(
-	                        categoryData[tickVal].textStyle, labelModel, axisModel.ecModel
-	                    );
-	                }
-
-	                var textColor = itemLabelModel.getTextColor()
-	                    || axisModel.get('axisLine.lineStyle.color');
-
-	                var tickCoord = axis.dataToCoord(tickVal);
-	                var pos = [
-	                    tickCoord,
-	                    opt.labelOffset + opt.labelDirection * labelMargin
-	                ];
-	                var labelStr = axis.scale.getLabel(tickVal);
-
-	                var textEl = new graphic.Text({
-	                    // Id for animation
-	                    anid: 'label_' + tickVal,
-	                    position: pos,
-	                    rotation: labelLayout.rotation,
-	                    silent: silent,
-	                    z2: 10
-	                });
-
-	                graphic.setTextStyle(textEl.style, itemLabelModel, {
-	                    text: labels[index],
-	                    textAlign: itemLabelModel.getShallow('align', true)
-	                        || labelLayout.textAlign,
-	                    textVerticalAlign: itemLabelModel.getShallow('verticalAlign', true)
-	                        || itemLabelModel.getShallow('baseline', true)
-	                        || labelLayout.textVerticalAlign,
-	                    textFill: typeof textColor === 'function'
-	                        ? textColor(
-	                            // (1) In category axis with data zoom, tick is not the original
-	                            // index of axis.data. So tick should not be exposed to user
-	                            // in category axis.
-	                            // (2) Compatible with previous version, which always returns labelStr.
-	                            // But in interval scale labelStr is like '223,445', which maked
-	                            // user repalce ','. So we modify it to return original val but remain
-	                            // it as 'string' to avoid error in replacing.
-	                            axis.type === 'category' ? labelStr : axis.type === 'value' ? tickVal + '' : tickVal,
-	                            index
-	                        )
-	                        : textColor
-	                });
-
-	                // Pack data for mouse event
-	                if (triggerEvent) {
-	                    textEl.eventData = makeAxisEventDataBase(axisModel);
-	                    textEl.eventData.targetType = 'axisLabel';
-	                    textEl.eventData.value = labelStr;
-	                }
+	            var tickEls = buildAxisTick(this, axisModel, opt);
+	            var labelEls = buildAxisLabel(this, axisModel, opt);
 
-	                // FIXME
-	                this._dumbGroup.add(textEl);
-	                textEl.updateTransform();
-
-	                textEls.push(textEl);
-	                this.group.add(textEl);
-
-	                textEl.decomposeTransform();
-
-	            }, this);
-
-	            fixMinMaxLabelShow(axisModel, textEls);
+	            fixMinMaxLabelShow(axisModel, labelEls, tickEls);
 	        },
 
 	        /**
@@ -32032,7 +31958,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                    ? extent[1] + gapSignal * gap
 	                    : (extent[0] + extent[1]) / 2, // 'middle'
 	                // Reuse labelOffset.
-	                nameLocation === 'middle' ? opt.labelOffset + nameDirection * gap : 0
+	                isNameLocationCenter(nameLocation) ? opt.labelOffset + nameDirection * gap : 0
 	            ];
 
 	            var labelLayout;
@@ -32044,7 +31970,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	            var axisNameAvailableWidth;
 
-	            if (nameLocation === 'middle') {
+	            if (isNameLocationCenter(nameLocation)) {
 	                labelLayout = innerTextLayout(
 	                    opt.rotation,
 	                    nameRotation != null ? nameRotation : opt.rotation, // Adapt to axis.
@@ -32225,32 +32151,64 @@ return /******/ (function(modules) { // webpackBootstrap
 	            );
 	    }
 
-	    function fixMinMaxLabelShow(axisModel, textEls) {
+	    function fixMinMaxLabelShow(axisModel, labelEls, tickEls) {
 	        // If min or max are user set, we need to check
 	        // If the tick on min(max) are overlap on their neighbour tick
 	        // If they are overlapped, we need to hide the min(max) tick label
 	        var showMinLabel = axisModel.get('axisLabel.showMinLabel');
 	        var showMaxLabel = axisModel.get('axisLabel.showMaxLabel');
-	        var firstLabel = textEls[0];
-	        var nextLabel = textEls[1];
-	        var lastLabel = textEls[textEls.length - 1];
-	        var prevLabel = textEls[textEls.length - 2];
+
+	        // FIXME
+	        // Have not consider onBand yet, where tick els is more than label els.
+
+	        labelEls = labelEls || [];
+	        tickEls = tickEls || [];
+
+	        var firstLabel = labelEls[0];
+	        var nextLabel = labelEls[1];
+	        var lastLabel = labelEls[labelEls.length - 1];
+	        var prevLabel = labelEls[labelEls.length - 2];
+
+	        var firstTick = tickEls[0];
+	        var nextTick = tickEls[1];
+	        var lastTick = tickEls[tickEls.length - 1];
+	        var prevTick = tickEls[tickEls.length - 2];
 
 	        if (showMinLabel === false) {
-	            firstLabel.ignore = true;
+	            ignoreEl(firstLabel);
+	            ignoreEl(firstTick);
 	        }
-	        else if (axisModel.getMin() != null && isTwoLabelOverlapped(firstLabel, nextLabel)) {
-	            showMinLabel ? (nextLabel.ignore = true) : (firstLabel.ignore = true);
+	        else if (isTwoLabelOverlapped(firstLabel, nextLabel)) {
+	            if (showMinLabel) {
+	                ignoreEl(nextLabel);
+	                ignoreEl(nextTick);
+	            }
+	            else {
+	                ignoreEl(firstLabel);
+	                ignoreEl(firstTick);
+	            }
 	        }
 
 	        if (showMaxLabel === false) {
-	            lastLabel.ignore = true;
+	            ignoreEl(lastLabel);
+	            ignoreEl(lastTick);
 	        }
-	        else if (axisModel.getMax() != null && isTwoLabelOverlapped(prevLabel, lastLabel)) {
-	            showMaxLabel ? (prevLabel.ignore = true) : (lastLabel.ignore = true);
+	        else if (isTwoLabelOverlapped(prevLabel, lastLabel)) {
+	            if (showMaxLabel) {
+	                ignoreEl(prevLabel);
+	                ignoreEl(prevTick);
+	            }
+	            else {
+	                ignoreEl(lastLabel);
+	                ignoreEl(lastTick);
+	            }
 	        }
 	    }
 
+	    function ignoreEl(el) {
+	        el && (el.ignore = true);
+	    }
+
 	    function isTwoLabelOverlapped(current, next, labelLayout) {
 	        // current and next has the same rotation.
 	        var firstRect = current && current.getBoundingRect().clone();
@@ -32271,11 +32229,28 @@ return /******/ (function(modules) { // webpackBootstrap
 	        return firstRect.intersect(nextRect);
 	    }
 
+	    function isNameLocationCenter(nameLocation) {
+	        return nameLocation === 'middle' || nameLocation === 'center';
+	    }
 
 	    /**
 	     * @static
 	     */
-	    var ifIgnoreOnTick = AxisBuilder.ifIgnoreOnTick = function (axis, i, interval) {
+	    var ifIgnoreOnTick = AxisBuilder.ifIgnoreOnTick = function (
+	        axis,
+	        i,
+	        interval,
+	        ticksCnt,
+	        showMinLabel,
+	        showMaxLabel
+	    ) {
+	        if (i === 0 && showMinLabel || i === ticksCnt - 1 && showMaxLabel) {
+	            return false;
+	        }
+
+	        // FIXME
+	        // Have not consider label overlap (if label is too long) yet.
+
 	        var rawTick;
 	        var scale = axis.scale;
 	        return scale.type === 'ordinal'
@@ -32300,6 +32275,187 @@ return /******/ (function(modules) { // webpackBootstrap
 	        return interval;
 	    };
 
+	    function buildAxisTick(axisBuilder, axisModel, opt) {
+	        var axis = axisModel.axis;
+
+	        if (!axisModel.get('axisTick.show') || axis.scale.isBlank()) {
+	            return;
+	        }
+
+	        var tickModel = axisModel.getModel('axisTick');
+
+	        var lineStyleModel = tickModel.getModel('lineStyle');
+	        var tickLen = tickModel.get('length');
+
+	        var tickInterval = getInterval(tickModel, opt.labelInterval);
+	        var ticksCoords = axis.getTicksCoords(tickModel.get('alignWithLabel'));
+	        // FIXME
+	        // Corresponds to ticksCoords ?
+	        var ticks = axis.scale.getTicks();
+
+	        var showMinLabel = axisModel.get('axisLabel.showMinLabel');
+	        var showMaxLabel = axisModel.get('axisLabel.showMaxLabel');
+
+	        var pt1 = [];
+	        var pt2 = [];
+	        var matrix = axisBuilder._transform;
+
+	        var tickEls = [];
+
+	        var ticksCnt = ticksCoords.length;
+	        for (var i = 0; i < ticksCnt; i++) {
+	            // Only ordinal scale support tick interval
+	            if (ifIgnoreOnTick(
+	                axis, i, tickInterval, ticksCnt,
+	                showMinLabel, showMaxLabel
+	            )) {
+	                continue;
+	            }
+
+	            var tickCoord = ticksCoords[i];
+
+	            pt1[0] = tickCoord;
+	            pt1[1] = 0;
+	            pt2[0] = tickCoord;
+	            pt2[1] = opt.tickDirection * tickLen;
+
+	            if (matrix) {
+	                v2ApplyTransform(pt1, pt1, matrix);
+	                v2ApplyTransform(pt2, pt2, matrix);
+	            }
+	            // Tick line, Not use group transform to have better line draw
+	            var tickEl = new graphic.Line(graphic.subPixelOptimizeLine({
+	                // Id for animation
+	                anid: 'tick_' + ticks[i],
+
+	                shape: {
+	                    x1: pt1[0],
+	                    y1: pt1[1],
+	                    x2: pt2[0],
+	                    y2: pt2[1]
+	                },
+	                style: zrUtil.defaults(
+	                    lineStyleModel.getLineStyle(),
+	                    {
+	                        stroke: axisModel.get('axisLine.lineStyle.color')
+	                    }
+	                ),
+	                z2: 2,
+	                silent: true
+	            }));
+	            axisBuilder.group.add(tickEl);
+	            tickEls.push(tickEl);
+	        }
+
+	        return tickEls;
+	    }
+
+	    function buildAxisLabel(axisBuilder, axisModel, opt) {
+	        var axis = axisModel.axis;
+	        var show = retrieve(opt.axisLabelShow, axisModel.get('axisLabel.show'));
+
+	        if (!show || axis.scale.isBlank()) {
+	            return;
+	        }
+
+	        var labelModel = axisModel.getModel('axisLabel');
+	        var labelMargin = labelModel.get('margin');
+	        var ticks = axis.scale.getTicks();
+	        var labels = axisModel.getFormattedLabels();
+
+	        // Special label rotate.
+	        var labelRotation = (
+	            retrieve(opt.labelRotate, labelModel.get('rotate')) || 0
+	        ) * PI / 180;
+
+	        var labelLayout = innerTextLayout(opt.rotation, labelRotation, opt.labelDirection);
+	        var categoryData = axisModel.get('data');
+
+	        var labelEls = [];
+	        var silent = isSilent(axisModel);
+	        var triggerEvent = axisModel.get('triggerEvent');
+
+	        var showMinLabel = axisModel.get('axisLabel.showMinLabel');
+	        var showMaxLabel = axisModel.get('axisLabel.showMaxLabel');
+
+	        zrUtil.each(ticks, function (tickVal, index) {
+	            if (ifIgnoreOnTick(
+	                axis, index, opt.labelInterval, ticks.length,
+	                showMinLabel, showMaxLabel
+	            )) {
+	                    return;
+	            }
+
+	            var itemLabelModel = labelModel;
+	            if (categoryData && categoryData[tickVal] && categoryData[tickVal].textStyle) {
+	                itemLabelModel = new Model(
+	                    categoryData[tickVal].textStyle, labelModel, axisModel.ecModel
+	                );
+	            }
+
+	            var textColor = itemLabelModel.getTextColor()
+	                || axisModel.get('axisLine.lineStyle.color');
+
+	            var tickCoord = axis.dataToCoord(tickVal);
+	            var pos = [
+	                tickCoord,
+	                opt.labelOffset + opt.labelDirection * labelMargin
+	            ];
+	            var labelStr = axis.scale.getLabel(tickVal);
+
+	            var textEl = new graphic.Text({
+	                // Id for animation
+	                anid: 'label_' + tickVal,
+	                position: pos,
+	                rotation: labelLayout.rotation,
+	                silent: silent,
+	                z2: 10
+	            });
+
+	            graphic.setTextStyle(textEl.style, itemLabelModel, {
+	                text: labels[index],
+	                textAlign: itemLabelModel.getShallow('align', true)
+	                    || labelLayout.textAlign,
+	                textVerticalAlign: itemLabelModel.getShallow('verticalAlign', true)
+	                    || itemLabelModel.getShallow('baseline', true)
+	                    || labelLayout.textVerticalAlign,
+	                textFill: typeof textColor === 'function'
+	                    ? textColor(
+	                        // (1) In category axis with data zoom, tick is not the original
+	                        // index of axis.data. So tick should not be exposed to user
+	                        // in category axis.
+	                        // (2) Compatible with previous version, which always returns labelStr.
+	                        // But in interval scale labelStr is like '223,445', which maked
+	                        // user repalce ','. So we modify it to return original val but remain
+	                        // it as 'string' to avoid error in replacing.
+	                        axis.type === 'category' ? labelStr : axis.type === 'value' ? tickVal + '' : tickVal,
+	                        index
+	                    )
+	                    : textColor
+	            });
+
+	            // Pack data for mouse event
+	            if (triggerEvent) {
+	                textEl.eventData = makeAxisEventDataBase(axisModel);
+	                textEl.eventData.targetType = 'axisLabel';
+	                textEl.eventData.value = labelStr;
+	            }
+
+	            // FIXME
+	            axisBuilder._dumbGroup.add(textEl);
+	            textEl.updateTransform();
+
+	            labelEls.push(textEl);
+	            axisBuilder.group.add(textEl);
+
+	            textEl.decomposeTransform();
+
+	        });
+
+	        return labelEls;
+	    }
+
+
 	    module.exports = AxisBuilder;
 
 
@@ -32938,10 +33094,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	            //     }
 	            // },
 	            itemStyle: {
-	                normal: {
+	                // normal: {
 	                    // color: '各异'
-	                },
-	                emphasis: {}
+	                // },
+	                // emphasis: {}
 	            }
 	        }
 	    });
@@ -33766,8 +33922,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	            startAngle: 90,
 	            // 最小角度改为0
 	            minAngle: 0,
-	            // 选中是扇区偏移量
+	            // 选中时扇区偏移量
 	            selectedOffset: 10,
+	            // 高亮扇区偏移量
+	            hoverOffset: 10,
 
 	            // If use strategy to avoid label overlapping
 	            avoidLabelOverlap: true,
@@ -34102,7 +34260,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	            sector.stopAnimation(true);
 	            sector.animateTo({
 	                shape: {
-	                    r: layout.r + 10
+	                    r: layout.r + seriesModel.get('hoverOffset')
 	                }
 	            }, 300, 'elasticOut');
 	        }
@@ -35169,7 +35327,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	 */
 
 
-	    var Eventful = __webpack_require__(29);
+	    var Eventful = __webpack_require__(27);
 	    var zrUtil = __webpack_require__(4);
 	    var eventTool = __webpack_require__(93);
 	    var interactionMutex = __webpack_require__(187);
@@ -35279,7 +35437,9 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 	    function mousedown(e) {
-	        if (e.target && e.target.draggable) {
+	        if (eventTool.notLeftMouse(e)
+	            || (e.target && e.target.draggable)
+	        ) {
 	            return;
 	        }
 
@@ -35296,15 +35456,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	    }
 
 	    function mousemove(e) {
-	        if (!checkKeyBinding(this, 'moveOnMouseMove', e) || !this._dragging) {
-	            return;
-	        }
-
-	        if (e.gestureEvent === 'pinch') {
-	            return;
-	        }
-
-	        if (interactionMutex.isTaken(this._zr, 'globalPan')) {
+	        if (eventTool.notLeftMouse(e)
+	            || !checkKeyBinding(this, 'moveOnMouseMove', e)
+	            || !this._dragging
+	            || e.gestureEvent === 'pinch'
+	            || interactionMutex.isTaken(this._zr, 'globalPan')
+	        ) {
 	            return;
 	        }
 
@@ -35326,7 +35483,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	    }
 
 	    function mouseup(e) {
-	        this._dragging = false;
+	        if (!eventTool.notLeftMouse(e)) {
+	            this._dragging = false;
+	        }
 	    }
 
 	    function mousewheel(e) {
@@ -36146,7 +36305,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 
-	    var Eventful = __webpack_require__(29);
+	    var Eventful = __webpack_require__(27);
 	    var zrUtil = __webpack_require__(4);
 	    var graphic = __webpack_require__(20);
 	    var interactionMutex = __webpack_require__(187);
@@ -41887,7 +42046,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 	    var zrUtil = __webpack_require__(4);
-	    var zrColor = __webpack_require__(35);
+	    var zrColor = __webpack_require__(33);
 	    var eventUtil = __webpack_require__(93);
 	    var formatUtil = __webpack_require__(6);
 	    var each = zrUtil.each;
@@ -42637,11 +42796,59 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 365 */,
+/* 365 */
+/***/ (function(module, exports) {
+
+	
+
+	    module.exports = {
+	        toolbox: {
+	            brush: {
+	                title: {
+	                    rect: '矩形选择',
+	                    polygon: '圈选',
+	                    lineX: '横向选择',
+	                    lineY: '纵向选择',
+	                    keep: '保持选择',
+	                    clear: '清除选择'
+	                }
+	            },
+	            dataView: {
+	                title: '数据视图',
+	                lang: ['数据视图', '关闭', '刷新']
+	            },
+	            dataZoom: {
+	                title: {
+	                    zoom: '区域缩放',
+	                    back: '区域缩放还原'
+	                }
+	            },
+	            magicType: {
+	                title: {
+	                    line: '切换为折线图',
+	                    bar: '切换为柱状图',
+	                    stack: '切换为堆叠',
+	                    tiled: '切换为平铺'
+	                }
+	            },
+	            restore: {
+	                title: '还原'
+	            },
+	            saveAsImage: {
+	                title: '保存为图片',
+	                lang: ['右键另存为图片']
+	            }
+	        }
+	    };
+
+
+
+/***/ }),
 /* 366 */,
 /* 367 */,
 /* 368 */,
-/* 369 */
+/* 369 */,
+/* 370 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -42854,7 +43061,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 370 */
+/* 371 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	/**
@@ -42862,24 +43069,24 @@ return /******/ (function(modules) { // webpackBootstrap
 	 */
 
 
-	    __webpack_require__(371);
-
 	    __webpack_require__(372);
-	    __webpack_require__(375);
 
+	    __webpack_require__(373);
 	    __webpack_require__(376);
-	    __webpack_require__(377);
 
+	    __webpack_require__(377);
 	    __webpack_require__(378);
+
 	    __webpack_require__(379);
+	    __webpack_require__(380);
 
-	    __webpack_require__(381);
 	    __webpack_require__(382);
+	    __webpack_require__(383);
 
 
 
 /***/ }),
-/* 371 */
+/* 372 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	
@@ -42892,7 +43099,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 372 */
+/* 373 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	/**
@@ -42904,8 +43111,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var env = __webpack_require__(2);
 	    var echarts = __webpack_require__(1);
 	    var modelUtil = __webpack_require__(5);
-	    var helper = __webpack_require__(373);
-	    var AxisProxy = __webpack_require__(374);
+	    var helper = __webpack_require__(374);
+	    var AxisProxy = __webpack_require__(375);
 	    var each = zrUtil.each;
 	    var eachAxisDim = helper.eachAxisDim;
 
@@ -43454,7 +43661,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 373 */
+/* 374 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	
@@ -43592,7 +43799,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 374 */
+/* 375 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	/**
@@ -43602,7 +43809,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var zrUtil = __webpack_require__(4);
 	    var numberUtil = __webpack_require__(7);
-	    var helper = __webpack_require__(373);
+	    var helper = __webpack_require__(374);
 	    var each = zrUtil.each;
 	    var asc = numberUtil.asc;
 
@@ -44066,7 +44273,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 375 */
+/* 376 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	
@@ -44143,7 +44350,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 376 */
+/* 377 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	/**
@@ -44151,7 +44358,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	 */
 
 
-	    var DataZoomModel = __webpack_require__(372);
+	    var DataZoomModel = __webpack_require__(373);
 
 	    var SliderZoomModel = DataZoomModel.extend({
 
@@ -44222,7 +44429,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 377 */
+/* 378 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	
@@ -44230,7 +44437,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var zrUtil = __webpack_require__(4);
 	    var graphic = __webpack_require__(20);
 	    var throttle = __webpack_require__(86);
-	    var DataZoomView = __webpack_require__(375);
+	    var DataZoomView = __webpack_require__(376);
 	    var Rect = graphic.Rect;
 	    var numberUtil = __webpack_require__(7);
 	    var linearMap = numberUtil.linearMap;
@@ -45018,7 +45225,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 378 */
+/* 379 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	/**
@@ -45026,7 +45233,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	 */
 
 
-	    module.exports = __webpack_require__(372).extend({
+	    module.exports = __webpack_require__(373).extend({
 
 	        type: 'dataZoom.inside',
 
@@ -45044,15 +45251,15 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 379 */
+/* 380 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	
 
-	    var DataZoomView = __webpack_require__(375);
+	    var DataZoomView = __webpack_require__(376);
 	    var zrUtil = __webpack_require__(4);
 	    var sliderMove = __webpack_require__(242);
-	    var roams = __webpack_require__(380);
+	    var roams = __webpack_require__(381);
 	    var bind = zrUtil.bind;
 
 	    var InsideZoomView = DataZoomView.extend({
@@ -45272,7 +45479,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 380 */
+/* 381 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	/**
@@ -45496,7 +45703,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 381 */
+/* 382 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	/**
@@ -45559,7 +45766,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 382 */
+/* 383 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	/**
@@ -45568,7 +45775,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 	    var zrUtil = __webpack_require__(4);
-	    var helper = __webpack_require__(373);
+	    var helper = __webpack_require__(374);
 	    var echarts = __webpack_require__(1);
 
 
@@ -45607,7 +45814,6 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 383 */,
 /* 384 */,
 /* 385 */,
 /* 386 */,
@@ -45622,14 +45828,15 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 395 */,
 /* 396 */,
 /* 397 */,
-/* 398 */
+/* 398 */,
+/* 399 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	// HINT Markpoint can't be used too much
 
 
-	    __webpack_require__(399);
-	    __webpack_require__(401);
+	    __webpack_require__(400);
+	    __webpack_require__(402);
 
 	    __webpack_require__(1).registerPreprocessor(function (opt) {
 	        // Make sure markPoint component is enabled
@@ -45638,12 +45845,12 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 399 */
+/* 400 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	
 
-	    module.exports = __webpack_require__(400).extend({
+	    module.exports = __webpack_require__(401).extend({
 
 	        type: 'markPoint',
 
@@ -45676,7 +45883,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 400 */
+/* 401 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	
@@ -45811,7 +46018,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 401 */
+/* 402 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	
@@ -45822,7 +46029,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var List = __webpack_require__(101);
 
-	    var markerHelper = __webpack_require__(402);
+	    var markerHelper = __webpack_require__(403);
 
 	    function updateMarkerLayout(mpData, seriesModel, api) {
 	        var coordSys = seriesModel.coordinateSystem;
@@ -45860,7 +46067,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        });
 	    }
 
-	    __webpack_require__(403).extend({
+	    __webpack_require__(404).extend({
 
 	        type: 'markPoint',
 
@@ -45970,7 +46177,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 402 */
+/* 403 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	
@@ -46175,7 +46382,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 403 */
+/* 404 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	
@@ -46217,13 +46424,13 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 404 */
+/* 405 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	
 
-	    __webpack_require__(405);
 	    __webpack_require__(406);
+	    __webpack_require__(407);
 
 	    __webpack_require__(1).registerPreprocessor(function (opt) {
 	        // Make sure markLine component is enabled
@@ -46232,12 +46439,12 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 405 */
+/* 406 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	
 
-	    module.exports = __webpack_require__(400).extend({
+	    module.exports = __webpack_require__(401).extend({
 
 	        type: 'markLine',
 
@@ -46277,7 +46484,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 406 */
+/* 407 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	
@@ -46286,7 +46493,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var List = __webpack_require__(101);
 	    var numberUtil = __webpack_require__(7);
 
-	    var markerHelper = __webpack_require__(402);
+	    var markerHelper = __webpack_require__(403);
 
 	    var LineDraw = __webpack_require__(213);
 
@@ -46458,7 +46665,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	        data.setItemLayout(idx, point);
 	    }
 
-	    __webpack_require__(403).extend({
+	    __webpack_require__(404).extend({
 
 	        type: 'markLine',
 
@@ -46635,13 +46842,13 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 407 */
+/* 408 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	
 
-	    __webpack_require__(408);
 	    __webpack_require__(409);
+	    __webpack_require__(410);
 
 	    __webpack_require__(1).registerPreprocessor(function (opt) {
 	        // Make sure markArea component is enabled
@@ -46650,12 +46857,12 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 408 */
+/* 409 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	
 
-	    module.exports = __webpack_require__(400).extend({
+	    module.exports = __webpack_require__(401).extend({
 
 	        type: 'markArea',
 
@@ -46691,7 +46898,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 409 */
+/* 410 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	// TODO Better on polar
@@ -46701,9 +46908,9 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var List = __webpack_require__(101);
 	    var numberUtil = __webpack_require__(7);
 	    var graphic = __webpack_require__(20);
-	    var colorUtil = __webpack_require__(35);
+	    var colorUtil = __webpack_require__(33);
 
-	    var markerHelper = __webpack_require__(402);
+	    var markerHelper = __webpack_require__(403);
 
 	    var markAreaTransform = function (seriesModel, coordSys, maModel, item) {
 	        var lt = markerHelper.dataTransform(seriesModel, item[0]);
@@ -46823,7 +47030,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var dimPermutations = [['x0', 'y0'], ['x1', 'y0'], ['x1', 'y1'], ['x0', 'y1']];
 
-	    __webpack_require__(403).extend({
+	    __webpack_require__(404).extend({
 
 	        type: 'markArea',
 
@@ -46917,7 +47124,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	                    )
 	                );
 
-	                polygon.hoverStyle = itemModel.getModel('itemStyle.normal').getItemStyle();
+	                polygon.hoverStyle = itemModel.getModel('itemStyle.emphasis').getItemStyle();
 
 	                graphic.setLabelStyle(
 	                    polygon.style, polygon.hoverStyle, labelModel, labelHoverModel,
@@ -46996,7 +47203,6 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 410 */,
 /* 411 */,
 /* 412 */,
 /* 413 */,
@@ -47005,23 +47211,24 @@ return /******/ (function(modules) { // webpackBootstrap
 /* 416 */,
 /* 417 */,
 /* 418 */,
-/* 419 */
+/* 419 */,
+/* 420 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	
 
-	    __webpack_require__(420);
 	    __webpack_require__(421);
-
 	    __webpack_require__(422);
+
 	    __webpack_require__(423);
 	    __webpack_require__(424);
 	    __webpack_require__(425);
-	    __webpack_require__(430);
+	    __webpack_require__(426);
+	    __webpack_require__(431);
 
 
 /***/ }),
-/* 420 */
+/* 421 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	
@@ -47099,7 +47306,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 421 */
+/* 422 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	/* WEBPACK VAR INJECTION */(function(process) {
@@ -47342,12 +47549,13 @@ return /******/ (function(modules) { // webpackBootstrap
 	/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(313)))
 
 /***/ }),
-/* 422 */
+/* 423 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	
 
 	    var env = __webpack_require__(2);
+	    var lang = __webpack_require__(365).toolbox.saveAsImage;
 
 	    function SaveAsImage (model) {
 	        this.model = model;
@@ -47356,14 +47564,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	    SaveAsImage.defaultOption = {
 	        show: true,
 	        icon: 'M4.7,22.9L29.3,45.5L54.7,23.4M4.6,43.6L4.6,58L53.8,58L53.8,43.6M29.2,45.1L29.2,0',
-	        title: '保存为图片',
+	        title: lang.title,
 	        type: 'png',
 	        // Default use option.backgroundColor
 	        // backgroundColor: '#fff',
 	        name: '',
 	        excludeComponents: ['toolbox'],
 	        pixelRatio: 1,
-	        lang: ['右键另存为图片']
+	        lang: lang.lang.slice()
 	    };
 
 	    SaveAsImage.prototype.unusable = !env.canvasSupported;
@@ -47396,13 +47604,25 @@ return /******/ (function(modules) { // webpackBootstrap
 	        }
 	        // IE
 	        else {
-	            var lang = model.get('lang');
-	            var html = ''
-	                + '<body style="margin:0;">'
-	                + '<img src="' + url + '" style="max-width:100%;" title="' + ((lang && lang[0]) || '') + '" />'
-	                + '</body>';
-	            var tab = window.open();
-	            tab.document.write(html);
+	            if (window.navigator.msSaveOrOpenBlob) {
+	                var bstr = atob(url.split(',')[1]);
+	                var n = bstr.length;
+	                var u8arr = new Uint8Array(n);
+	                while(n--) {
+	                    u8arr[n] = bstr.charCodeAt(n);
+	                }
+	                var blob = new Blob([u8arr]);
+	                window.navigator.msSaveOrOpenBlob(blob, title + '.' + type);
+	            }
+	            else {
+	                var lang = model.get('lang');
+	                var html = '' +
+	                    '<body style="margin:0;">' +
+	                    '<img src="' + url + '" style="max-width:100%;" title="' + ((lang && lang[0]) || '') + '" />' +
+	                    '</body>';
+	                var tab = window.open();
+	                tab.document.write(html);
+	            }
 	        }
 	    };
 
@@ -47413,14 +47633,16 @@ return /******/ (function(modules) { // webpackBootstrap
 	    module.exports = SaveAsImage;
 
 
+
 /***/ }),
-/* 423 */
+/* 424 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	'use strict';
 
 
 	    var zrUtil = __webpack_require__(4);
+	    var lang = __webpack_require__(365).toolbox.magicType;
 
 	    function MagicType(model) {
 	        this.model = model;
@@ -47436,12 +47658,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	            stack: 'M8.2,38.4l-8.4,4.1l30.6,15.3L60,42.5l-8.1-4.1l-21.5,11L8.2,38.4z M51.9,30l-8.1,4.2l-13.4,6.9l-13.9-6.9L8.2,30l-8.4,4.2l8.4,4.2l22.2,11l21.5-11l8.1-4.2L51.9,30z M51.9,21.7l-8.1,4.2L35.7,30l-5.3,2.8L24.9,30l-8.4-4.1l-8.3-4.2l-8.4,4.2L8.2,30l8.3,4.2l13.9,6.9l13.4-6.9l8.1-4.2l8.1-4.1L51.9,21.7zM30.4,2.2L-0.2,17.5l8.4,4.1l8.3,4.2l8.4,4.2l5.5,2.7l5.3-2.7l8.1-4.2l8.1-4.2l8.1-4.1L30.4,2.2z', // jshint ignore:line
 	            tiled: 'M2.3,2.2h22.8V25H2.3V2.2z M35,2.2h22.8V25H35V2.2zM2.3,35h22.8v22.8H2.3V35z M35,35h22.8v22.8H35V35z'
 	        },
-	        title: {
-	            line: '切换为折线图',
-	            bar: '切换为柱状图',
-	            stack: '切换为堆叠',
-	            tiled: '切换为平铺'
-	        },
+	        // `line`, `bar`, `stack`, `tiled`
+	        title: zrUtil.clone(lang.title),
 	        option: {},
 	        seriesIndex: {}
 	    };
@@ -47594,7 +47812,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 424 */
+/* 425 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	/**
@@ -47605,7 +47823,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var zrUtil = __webpack_require__(4);
 	    var eventTool = __webpack_require__(93);
-
+	    var lang = __webpack_require__(365).toolbox.dataView;
 
 	    var BLOCK_SPLITER = new Array(60).join('-');
 	    var ITEM_SPLITER = '\t';
@@ -47876,8 +48094,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	        contentToOption: null,
 
 	        icon: 'M17.5,17.3H33 M17.5,17.3H33 M45.4,29.5h-28 M11.5,2v56H51V14.8L38.4,2H11.5z M38.4,2.2v12.7H51 M45.4,41.7h-28',
-	        title: '数据视图',
-	        lang: ['数据视图', '关闭', '刷新'],
+	        title: zrUtil.clone(lang.title),
+	        lang: zrUtil.clone(lang.lang),
 	        backgroundColor: '#fff',
 	        textColor: '#000',
 	        textareaColor: '#fff',
@@ -48077,7 +48295,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 425 */
+/* 426 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	'use strict';
@@ -48086,13 +48304,14 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var zrUtil = __webpack_require__(4);
 	    var BrushController = __webpack_require__(248);
 	    var BrushTargetManager = __webpack_require__(359);
-	    var history = __webpack_require__(426);
+	    var history = __webpack_require__(427);
 	    var sliderMove = __webpack_require__(242);
+	    var lang = __webpack_require__(365).toolbox.dataZoom;
 
 	    var each = zrUtil.each;
 
 	    // Use dataZoomSelect
-	    __webpack_require__(427);
+	    __webpack_require__(428);
 
 	    // Spectial component id start with \0ec\0, see echarts/model/Global.js~hasInnerId
 	    var DATA_ZOOM_ID_BASE = '\0_ec_\0toolbox-dataZoom_';
@@ -48121,10 +48340,8 @@ return /******/ (function(modules) { // webpackBootstrap
 	            zoom: 'M0,13.5h26.9 M13.5,26.9V0 M32.1,13.5H58V58H13.5 V32.1',
 	            back: 'M22,1.4L9.9,13.5l12.3,12.3 M10.3,13.5H54.9v44.6 H10.3v-26'
 	        },
-	        title: {
-	            zoom: '区域缩放',
-	            back: '区域缩放还原'
-	        }
+	        // `zoom`, `back`
+	        title: zrUtil.clone(lang.title)
 	    };
 
 	    var proto = DataZoom.prototype;
@@ -48386,7 +48603,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 426 */
+/* 427 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	/**
@@ -48500,7 +48717,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 427 */
+/* 428 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	/**
@@ -48508,21 +48725,21 @@ return /******/ (function(modules) { // webpackBootstrap
 	 */
 
 
-	    __webpack_require__(371);
-
 	    __webpack_require__(372);
-	    __webpack_require__(375);
 
-	    __webpack_require__(428);
+	    __webpack_require__(373);
+	    __webpack_require__(376);
+
 	    __webpack_require__(429);
+	    __webpack_require__(430);
 
-	    __webpack_require__(381);
 	    __webpack_require__(382);
+	    __webpack_require__(383);
 
 
 
 /***/ }),
-/* 428 */
+/* 429 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	/**
@@ -48530,7 +48747,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	 */
 
 
-	    var DataZoomModel = __webpack_require__(372);
+	    var DataZoomModel = __webpack_require__(373);
 
 	    module.exports = DataZoomModel.extend({
 
@@ -48541,12 +48758,12 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 429 */
+/* 430 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	
 
-	    module.exports = __webpack_require__(375).extend({
+	    module.exports = __webpack_require__(376).extend({
 
 	        type: 'dataZoom.select'
 
@@ -48555,13 +48772,14 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 430 */
+/* 431 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	'use strict';
 
 
-	    var history = __webpack_require__(426);
+	    var history = __webpack_require__(427);
+	    var lang = __webpack_require__(365).toolbox.restore;
 
 	    function Restore(model) {
 	        this.model = model;
@@ -48570,7 +48788,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    Restore.defaultOption = {
 	        show: true,
 	        icon: 'M3.8,33.4 M47,18.9h9.8V8.7 M56.3,20.1 C52.1,9,40.5,0.6,26.8,2.1C12.6,3.7,1.6,16.2,2.1,30.6 M13,41.1H3.1v10.2 M3.7,39.9c4.2,11.1,15.8,19.5,29.5,18 c14.2-1.6,25.2-14.1,24.7-28.5',
-	        title: '还原'
+	        title: lang.title
 	    };
 
 	    var proto = Restore.prototype;
@@ -48599,16 +48817,16 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 431 */
+/* 432 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	
-	    __webpack_require__(432);
-	    __webpack_require__(87).registerPainter('vml', __webpack_require__(434));
+	    __webpack_require__(433);
+	    __webpack_require__(87).registerPainter('vml', __webpack_require__(435));
 
 
 /***/ }),
-/* 432 */
+/* 433 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	// http://www.w3.org/TR/NOTE-VML
@@ -48619,10 +48837,10 @@ return /******/ (function(modules) { // webpackBootstrap
 	    var vec2 = __webpack_require__(10);
 	    var BoundingRect = __webpack_require__(9);
 	    var CMD = __webpack_require__(39).CMD;
-	    var colorTool = __webpack_require__(35);
+	    var colorTool = __webpack_require__(33);
 	    var textContain = __webpack_require__(8);
-	    var textHelper = __webpack_require__(25);
-	    var RectText = __webpack_require__(38);
+	    var textHelper = __webpack_require__(37);
+	    var RectText = __webpack_require__(36);
 	    var Displayable = __webpack_require__(23);
 	    var ZImage = __webpack_require__(52);
 	    var Text = __webpack_require__(53);
@@ -48631,7 +48849,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    var Gradient = __webpack_require__(69);
 
-	    var vmlCore = __webpack_require__(433);
+	    var vmlCore = __webpack_require__(434);
 
 	    var round = Math.round;
 	    var sqrt = Math.sqrt;
@@ -49682,7 +49900,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 433 */
+/* 434 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	
@@ -49735,7 +49953,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 /***/ }),
-/* 434 */
+/* 435 */
 /***/ (function(module, exports, __webpack_require__) {
 
 	/**
@@ -49746,8 +49964,8 @@ return /******/ (function(modules) { // webpackBootstrap
 
 
 
-	    var zrLog = __webpack_require__(36);
-	    var vmlCore = __webpack_require__(433);
+	    var zrLog = __webpack_require__(34);
+	    var vmlCore = __webpack_require__(434);
 
 	    function parseInt10(val) {
 	        return parseInt(val, 10);
@@ -49804,6 +50022,10 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	        constructor: VMLPainter,
 
+	        getType: function () {
+	            return 'vml';
+	        },
+
 	        /**
 	         * @return {HTMLDivElement}
 	         */