echarts 4.4.0 → 4.6.0

package/lib/component/axis/AxisBuilder.js

@@ -24,6 +24,7 @@ var retrieve = _util.retrieve;
 var defaults = _util.defaults;
 var extend = _util.extend;
 var each = _util.each;
+var map = _util.map;
 
 var formatUtil = require("../../util/format");
 
@@ -248,9 +249,10 @@ var builders = {
   axisTickLabel: function () {
     var axisModel = this.axisModel;
     var opt = this.opt;
-    var tickEls = buildAxisTick(this, axisModel, opt);
+    var ticksEls = buildAxisMajorTicks(this, axisModel, opt);
     var labelEls = buildAxisLabel(this, axisModel, opt);
-    fixMinMaxLabelShow(axisModel, labelEls, tickEls);
+    fixMinMaxLabelShow(axisModel, labelEls, ticksEls);
+    buildAxisMinorTicks(this, axisModel, opt);
   },
 
   /**
@@ -519,38 +521,27 @@ function isNameLocationCenter(nameLocation) {
   return nameLocation === 'middle' || nameLocation === 'center';
 }
 
-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 ticksCoords = axis.getTicksCoords();
+function createTicks(ticksCoords, tickTransform, tickEndCoord, tickLineStyle, aniid) {
+  var tickEls = [];
   var pt1 = [];
   var pt2 = [];
-  var matrix = axisBuilder._transform;
-  var tickEls = [];
 
   for (var i = 0; i < ticksCoords.length; i++) {
     var tickCoord = ticksCoords[i].coord;
     pt1[0] = tickCoord;
     pt1[1] = 0;
     pt2[0] = tickCoord;
-    pt2[1] = opt.tickDirection * tickLen;
+    pt2[1] = tickEndCoord;
 
-    if (matrix) {
-      v2ApplyTransform(pt1, pt1, matrix);
-      v2ApplyTransform(pt2, pt2, matrix);
+    if (tickTransform) {
+      v2ApplyTransform(pt1, pt1, tickTransform);
+      v2ApplyTransform(pt2, pt2, tickTransform);
     } // Tick line, Not use group transform to have better line draw
 
 
     var tickEl = new graphic.Line({
       // Id for animation
-      anid: 'tick_' + ticksCoords[i].tickValue,
+      anid: aniid + '_' + ticksCoords[i].tickValue,
       subPixelOptimize: true,
       shape: {
         x1: pt1[0],
@@ -558,19 +549,67 @@ function buildAxisTick(axisBuilder, axisModel, opt) {
         x2: pt2[0],
         y2: pt2[1]
       },
-      style: defaults(lineStyleModel.getLineStyle(), {
-        stroke: axisModel.get('axisLine.lineStyle.color')
-      }),
+      style: tickLineStyle,
       z2: 2,
       silent: true
     });
-    axisBuilder.group.add(tickEl);
     tickEls.push(tickEl);
   }
 
   return tickEls;
 }
 
+function buildAxisMajorTicks(axisBuilder, axisModel, opt) {
+  var axis = axisModel.axis;
+  var tickModel = axisModel.getModel('axisTick');
+
+  if (!tickModel.get('show') || axis.scale.isBlank()) {
+    return;
+  }
+
+  var lineStyleModel = tickModel.getModel('lineStyle');
+  var tickEndCoord = opt.tickDirection * tickModel.get('length');
+  var ticksCoords = axis.getTicksCoords();
+  var ticksEls = createTicks(ticksCoords, axisBuilder._transform, tickEndCoord, defaults(lineStyleModel.getLineStyle(), {
+    stroke: axisModel.get('axisLine.lineStyle.color')
+  }), 'ticks');
+
+  for (var i = 0; i < ticksEls.length; i++) {
+    axisBuilder.group.add(ticksEls[i]);
+  }
+
+  return ticksEls;
+}
+
+function buildAxisMinorTicks(axisBuilder, axisModel, opt) {
+  var axis = axisModel.axis;
+  var minorTickModel = axisModel.getModel('minorTick');
+
+  if (!minorTickModel.get('show') || axis.scale.isBlank()) {
+    return;
+  }
+
+  var minorTicksCoords = axis.getMinorTicksCoords();
+
+  if (!minorTicksCoords.length) {
+    return;
+  }
+
+  var lineStyleModel = minorTickModel.getModel('lineStyle');
+  var tickEndCoord = opt.tickDirection * minorTickModel.get('length');
+  var minorTickLineStyle = defaults(lineStyleModel.getLineStyle(), defaults(axisModel.getModel('axisTick').getLineStyle(), {
+    stroke: axisModel.get('axisLine.lineStyle.color')
+  }));
+
+  for (var i = 0; i < minorTicksCoords.length; i++) {
+    var minorTicksEls = createTicks(minorTicksCoords[i], axisBuilder._transform, tickEndCoord, minorTickLineStyle, 'minorticks_' + i);
+
+    for (var k = 0; k < minorTicksEls.length; k++) {
+      axisBuilder.group.add(minorTicksEls[k]);
+    }
+  }
+}
+
 function buildAxisLabel(axisBuilder, axisModel, opt) {
   var axis = axisModel.axis;
   var show = retrieve(opt.axisLabelShow, axisModel.get('axisLabel.show'));

package/lib/component/axis/CartesianAxisView.js

@@ -47,14 +47,7 @@ var cartesianAxisHelper = require("../../coord/cartesian/cartesianAxisHelper");
 * under the License.
 */
 var axisBuilderAttrs = ['axisLine', 'axisTickLabel', 'axisName'];
-var selfBuilderAttrs = ['splitArea', 'splitLine']; // function getAlignWithLabel(model, axisModel) {
-//     var alignWithLabel = model.get('alignWithLabel');
-//     if (alignWithLabel === 'auto') {
-//         alignWithLabel = axisModel.get('axisTick.alignWithLabel');
-//     }
-//     return alignWithLabel;
-// }
-
+var selfBuilderAttrs = ['splitArea', 'splitLine', 'minorSplitLine'];
 var CartesianAxisView = AxisView.extend({
   type: 'cartesianAxis',
   axisPointerClass: 'CartesianAxisPointer',
@@ -114,9 +107,7 @@ var CartesianAxisView = AxisView.extend({
       tickModel: splitLineModel
     });
     var p1 = [];
-    var p2 = []; // Simple optimization
-    // Batching the lines if color are the same
-
+    var p2 = [];
     var lineStyle = lineStyleModel.getLineStyle();
 
     for (var i = 0; i < ticksCoords.length; i++) {
@@ -154,6 +145,59 @@ var CartesianAxisView = AxisView.extend({
     }
   },
 
+  /**
+   * @param {module:echarts/coord/cartesian/AxisModel} axisModel
+   * @param {module:echarts/coord/cartesian/GridModel} gridModel
+   * @private
+   */
+  _minorSplitLine: function (axisModel, gridModel) {
+    var axis = axisModel.axis;
+    var minorSplitLineModel = axisModel.getModel('minorSplitLine');
+    var lineStyleModel = minorSplitLineModel.getModel('lineStyle');
+    var gridRect = gridModel.coordinateSystem.getRect();
+    var isHorizontal = axis.isHorizontal();
+    var minorTicksCoords = axis.getMinorTicksCoords();
+
+    if (!minorTicksCoords.length) {
+      return;
+    }
+
+    var p1 = [];
+    var p2 = [];
+    var lineStyle = lineStyleModel.getLineStyle();
+
+    for (var i = 0; i < minorTicksCoords.length; i++) {
+      for (var k = 0; k < minorTicksCoords[i].length; k++) {
+        var tickCoord = axis.toGlobalCoord(minorTicksCoords[i][k].coord);
+
+        if (isHorizontal) {
+          p1[0] = tickCoord;
+          p1[1] = gridRect.y;
+          p2[0] = tickCoord;
+          p2[1] = gridRect.y + gridRect.height;
+        } else {
+          p1[0] = gridRect.x;
+          p1[1] = tickCoord;
+          p2[0] = gridRect.x + gridRect.width;
+          p2[1] = tickCoord;
+        }
+
+        this._axisGroup.add(new graphic.Line({
+          anid: 'minor_line_' + minorTicksCoords[i][k].tickValue,
+          subPixelOptimize: true,
+          shape: {
+            x1: p1[0],
+            y1: p1[1],
+            x2: p2[0],
+            y2: p2[1]
+          },
+          style: lineStyle,
+          silent: true
+        }));
+      }
+    }
+  },
+
   /**
    * @param {module:echarts/coord/cartesian/AxisModel} axisModel
    * @param {module:echarts/coord/cartesian/GridModel} gridModel

package/lib/component/axis/RadiusAxisView.js

@@ -45,7 +45,7 @@ var AxisView = require("./AxisView");
 * under the License.
 */
 var axisBuilderAttrs = ['axisLine', 'axisTickLabel', 'axisName'];
-var selfBuilderAttrs = ['splitLine', 'splitArea'];
+var selfBuilderAttrs = ['splitLine', 'splitArea', 'minorSplitLine'];
 
 var _default = AxisView.extend({
   type: 'radiusAxis',
@@ -61,6 +61,7 @@ var _default = AxisView.extend({
     var polar = radiusAxis.polar;
     var angleAxis = polar.getAngleAxis();
     var ticksCoords = radiusAxis.getTicksCoords();
+    var minorTicksCoords = radiusAxis.getMinorTicksCoords();
     var axisAngle = angleAxis.getExtent()[0];
     var radiusExtent = radiusAxis.getExtent();
     var layout = layoutAxis(polar, radiusAxisModel, axisAngle);
@@ -69,7 +70,7 @@ var _default = AxisView.extend({
     this.group.add(axisBuilder.getGroup());
     zrUtil.each(selfBuilderAttrs, function (name) {
       if (radiusAxisModel.get(name + '.show') && !radiusAxis.scale.isBlank()) {
-        this['_' + name](radiusAxisModel, polar, axisAngle, radiusExtent, ticksCoords);
+        this['_' + name](radiusAxisModel, polar, axisAngle, radiusExtent, ticksCoords, minorTicksCoords);
       }
     }, this);
   },
@@ -93,8 +94,7 @@ var _default = AxisView.extend({
           cx: polar.cx,
           cy: polar.cy,
           r: ticksCoords[i].coord
-        },
-        silent: true
+        }
       }));
     } // Simple optimization
     // Batching the lines if color are the same
@@ -111,6 +111,38 @@ var _default = AxisView.extend({
     }
   },
 
+  /**
+   * @private
+   */
+  _minorSplitLine: function (radiusAxisModel, polar, axisAngle, radiusExtent, ticksCoords, minorTicksCoords) {
+    if (!minorTicksCoords.length) {
+      return;
+    }
+
+    var minorSplitLineModel = radiusAxisModel.getModel('minorSplitLine');
+    var lineStyleModel = minorSplitLineModel.getModel('lineStyle');
+    var lines = [];
+
+    for (var i = 0; i < minorTicksCoords.length; i++) {
+      for (var k = 0; k < minorTicksCoords[i].length; k++) {
+        lines.push(new graphic.Circle({
+          shape: {
+            cx: polar.cx,
+            cy: polar.cy,
+            r: minorTicksCoords[i][k].coord
+          }
+        }));
+      }
+    }
+
+    this.group.add(graphic.mergePath(lines, {
+      style: zrUtil.defaults({
+        fill: null
+      }, lineStyleModel.getLineStyle()),
+      silent: true
+    }));
+  },
+
   /**
    * @private
    */

package/lib/component/brush/BrushView.js

@@ -119,6 +119,12 @@ var _default = echarts.extendComponentView({
       areas: zrUtil.clone(areas),
       $from: modelId
     });
+    opt.isEnd && this.api.dispatchAction({
+      type: 'brushEnd',
+      brushId: modelId,
+      areas: zrUtil.clone(areas),
+      $from: modelId
+    });
   }
 });
 

package/lib/component/brush/brushAction.js

@@ -86,4 +86,9 @@ echarts.registerAction({
   type: 'brushSelect',
   event: 'brushSelected',
   update: 'none'
+}, function () {});
+echarts.registerAction({
+  type: 'brushEnd',
+  event: 'brushEnd',
+  update: 'none'
 }, function () {});

package/lib/component/dataZoom/DataZoomModel.js

@@ -144,7 +144,21 @@ var DataZoomModel = echarts.extendComponentModel({
 
     this._autoThrottle = true;
     /**
-     * 'percent' or 'value'
+     * It is `[rangeModeForMin, rangeModeForMax]`.
+     * The optional values for `rangeMode`:
+     * + `'value'` mode: the axis extent will always be determined by
+     *     `dataZoom.startValue` and `dataZoom.endValue`, despite
+     *     how data like and how `axis.min` and `axis.max` are.
+     * + `'percent'` mode: `100` represents 100% of the `[dMin, dMax]`,
+     *     where `dMin` is `axis.min` if `axis.min` specified, otherwise `data.extent[0]`,
+     *     and `dMax` is `axis.max` if `axis.max` specified, otherwise `data.extent[1]`.
+     *     Axis extent will be determined by the result of the percent of `[dMin, dMax]`.
+     *
+     * For example, when users are using dynamic data (update data periodically via `setOption`),
+     * if in `'value`' mode, the window will be kept in a fixed value range despite how
+     * data are appended, while if in `'percent'` mode, whe window range will be changed alone with
+     * the appended data (suppose `axis.min` and `axis.max` are not specified).
+     *
      * @private
      */
 

package/lib/component/dataZoom/SliderZoomView.js

@@ -435,10 +435,6 @@ var SliderZoomView = DataZoomView.extend({
       draggable: true,
       cursor: getCursor(this._orient),
       drift: bind(this._onDragMove, this, 'all'),
-      onmousemove: function (e) {
-        // Fot mobile devicem, prevent screen slider on the button.
-        eventTool.stop(e.event);
-      },
       ondragstart: bind(this._showDataInfo, this, true),
       ondragend: bind(this._onDragEnd, this),
       onmouseover: bind(this._showDataInfo, this, true),
@@ -469,10 +465,6 @@ var SliderZoomView = DataZoomView.extend({
         cursor: getCursor(this._orient),
         draggable: true,
         drift: bind(this._onDragMove, this, handleIndex),
-        onmousemove: function (e) {
-          // Fot mobile devicem, prevent screen slider on the button.
-          eventTool.stop(e.event);
-        },
         ondragend: bind(this._onDragEnd, this),
         onmouseover: bind(this._showDataInfo, this, true),
         onmouseout: bind(this._showDataInfo, this, false)
@@ -647,8 +639,10 @@ var SliderZoomView = DataZoomView.extend({
     handleLabels[0].attr('invisible', !showOrHide);
     handleLabels[1].attr('invisible', !showOrHide);
   },
-  _onDragMove: function (handleIndex, dx, dy) {
-    this._dragging = true; // Transform dx, dy to bar coordination.
+  _onDragMove: function (handleIndex, dx, dy, event) {
+    this._dragging = true; // For mobile device, prevent screen slider on the button.
+
+    eventTool.stop(event.event); // Transform dx, dy to bar coordination.
 
     var barTransform = this._displayables.barGroup.getLocalTransform();
 

package/lib/component/helper/BrushController.js

@@ -194,7 +194,7 @@ function BrushController(zr) {
    */
 
   this._handlers = {};
-  each(mouseHandlers, function (handler, eventName) {
+  each(pointerHandlers, function (handler, eventName) {
     this._handlers[eventName] = zrUtil.bind(handler, this);
   }, this);
 }
@@ -345,9 +345,7 @@ function doEnableBrush(controller, brushOption) {
     interactionMutex.take(zr, MUTEX_RESOURCE_KEY, controller._uid);
   }
 
-  each(controller._handlers, function (handler, eventName) {
-    zr.on(eventName, handler);
-  });
+  mountHandlers(zr, controller._handlers);
   controller._brushType = brushOption.brushType;
   controller._brushOption = zrUtil.merge(zrUtil.clone(DEFAULT_BRUSH_OPT), brushOption, true);
 }
@@ -355,10 +353,20 @@ function doEnableBrush(controller, brushOption) {
 function doDisableBrush(controller) {
   var zr = controller._zr;
   interactionMutex.release(zr, MUTEX_RESOURCE_KEY, controller._uid);
-  each(controller._handlers, function (handler, eventName) {
+  unmountHandlers(zr, controller._handlers);
+  controller._brushType = controller._brushOption = null;
+}
+
+function mountHandlers(zr, handlers) {
+  each(handlers, function (handler, eventName) {
+    zr.on(eventName, handler);
+  });
+}
+
+function unmountHandlers(zr, handlers) {
+  each(handlers, function (handler, eventName) {
     zr.off(eventName, handler);
   });
-  controller._brushType = controller._brushOption = null;
 }
 
 function createCover(controller, brushOption) {
@@ -661,8 +669,11 @@ function pointsToRect(points) {
 }
 
 function resetCursor(controller, e, localCursorPoint) {
-  // Check active
-  if (!controller._brushType) {
+  if ( // Check active
+  !controller._brushType // resetCursor should be always called when mouse is in zr area,
+  // but not called when mouse is out of zr area to avoid bad influence
+  // if `mousemove`, `mouseup` are triggered from `document` event.
+  || isOutsideZrArea(controller, e)) {
     return;
   }
 
@@ -752,12 +763,12 @@ function determineBrushType(brushType, panel) {
   return brushType;
 }
 
-var mouseHandlers = {
+var pointerHandlers = {
   mousedown: function (e) {
     if (this._dragging) {
       // In case some browser do not support globalOut,
       // and release mose out side the browser.
-      handleDragEnd.call(this, e);
+      handleDragEnd(this, e);
     } else if (!e.target || !e.target.draggable) {
       preventDefault(e);
       var localCursorPoint = this.group.transformCoordToLocal(e.offsetX, e.offsetY);
@@ -771,7 +782,9 @@ var mouseHandlers = {
     }
   },
   mousemove: function (e) {
-    var localCursorPoint = this.group.transformCoordToLocal(e.offsetX, e.offsetY);
+    var x = e.offsetX;
+    var y = e.offsetY;
+    var localCursorPoint = this.group.transformCoordToLocal(x, y);
     resetCursor(this, e, localCursorPoint);
 
     if (this._dragging) {
@@ -780,25 +793,30 @@ var mouseHandlers = {
       eventParams && trigger(this, eventParams);
     }
   },
-  mouseup: handleDragEnd //,
-  // FIXME
-  // in tooltip, globalout should not be triggered.
-  // globalout: handleDragEnd
-
+  mouseup: function (e) {
+    handleDragEnd(this, e);
+  }
 };
 
-function handleDragEnd(e) {
-  if (this._dragging) {
+function handleDragEnd(controller, e) {
+  if (controller._dragging) {
     preventDefault(e);
-    var localCursorPoint = this.group.transformCoordToLocal(e.offsetX, e.offsetY);
-    var eventParams = updateCoverByMouse(this, e, localCursorPoint, true);
-    this._dragging = false;
-    this._track = [];
-    this._creatingCover = null; // trigger event shoule be at final, after procedure will be nested.
-
-    eventParams && trigger(this, eventParams);
+    var x = e.offsetX;
+    var y = e.offsetY;
+    var localCursorPoint = controller.group.transformCoordToLocal(x, y);
+    var eventParams = updateCoverByMouse(controller, e, localCursorPoint, true);
+    controller._dragging = false;
+    controller._track = [];
+    controller._creatingCover = null; // trigger event shoule be at final, after procedure will be nested.
+
+    eventParams && trigger(controller, eventParams);
   }
 }
+
+function isOutsideZrArea(controller, x, y) {
+  var zr = controller._zr;
+  return x < 0 || x > zr.getWidth() || y < 0 || y > zr.getHeight();
+}
 /**
  * key: brushType
  * @type {Object}

package/lib/component/legend/LegendModel.js

@@ -131,9 +131,9 @@ var LegendModel = echarts.extendComponentModel({
       availableNames.push(seriesName);
       var isPotential;
 
-      if (seriesModel.legendDataProvider) {
-        var data = seriesModel.legendDataProvider();
-        var names = data.mapArray(data.getName);
+      if (seriesModel.legendVisualProvider) {
+        var provider = seriesModel.legendVisualProvider;
+        var names = provider.getAllNames();
 
         if (!ecModel.isSeriesFiltered(seriesModel)) {
           availableNames = availableNames.concat(names);

package/lib/component/legend/LegendView.js

@@ -191,7 +191,7 @@ var _default = echarts.extendComponentView({
       if (legendDrawnMap.get(name)) {
         // Have been drawed
         return;
-      } // Series legend
+      } // Legend to control series.
 
 
       if (seriesModel) {
@@ -216,32 +216,32 @@ var _default = echarts.extendComponentView({
 
         var itemGroup = this._createItem(name, dataIndex, itemModel, legendModel, legendSymbolType, symbolType, itemAlign, color, borderColor, selectMode);
 
-        itemGroup.on('click', curry(dispatchSelectAction, name, api)).on('mouseover', curry(dispatchHighlightAction, seriesModel.name, null, api, excludeSeriesId)).on('mouseout', curry(dispatchDownplayAction, seriesModel.name, null, api, excludeSeriesId));
+        itemGroup.on('click', curry(dispatchSelectAction, name, null, api, excludeSeriesId)).on('mouseover', curry(dispatchHighlightAction, seriesModel.name, null, api, excludeSeriesId)).on('mouseout', curry(dispatchDownplayAction, seriesModel.name, null, api, excludeSeriesId));
         legendDrawnMap.set(name, true);
       } else {
-        // Data legend of pie, funnel
+        // Legend to control data. In pie and funnel.
         ecModel.eachRawSeries(function (seriesModel) {
           // In case multiple series has same data name
           if (legendDrawnMap.get(name)) {
             return;
           }
 
-          if (seriesModel.legendDataProvider) {
-            var data = seriesModel.legendDataProvider();
-            var idx = data.indexOfName(name);
+          if (seriesModel.legendVisualProvider) {
+            var provider = seriesModel.legendVisualProvider;
 
-            if (idx < 0) {
+            if (!provider.containName(name)) {
               return;
             }
 
-            var color = data.getItemVisual(idx, 'color');
-            var borderColor = data.getItemVisual(idx, 'borderColor');
+            var idx = provider.indexOfName(name);
+            var color = provider.getItemVisual(idx, 'color');
+            var borderColor = provider.getItemVisual(idx, 'borderColor');
             var legendSymbolType = 'roundRect';
 
             var itemGroup = this._createItem(name, dataIndex, itemModel, legendModel, legendSymbolType, null, itemAlign, color, borderColor, selectMode); // FIXME: consider different series has items with the same name.
 
 
-            itemGroup.on('click', curry(dispatchSelectAction, name, api)) // Should not specify the series name, consider legend controls
+            itemGroup.on('click', curry(dispatchSelectAction, null, name, api, excludeSeriesId)) // Should not specify the series name, consider legend controls
             // more than one pie series.
             .on('mouseover', curry(dispatchHighlightAction, null, name, api, excludeSeriesId)).on('mouseout', curry(dispatchDownplayAction, null, name, api, excludeSeriesId));
             legendDrawnMap.set(name, true);
@@ -442,11 +442,15 @@ function setSymbolStyle(symbol, symbolType, legendModelItemStyle, borderColor, i
   return symbol.setStyle(itemStyle);
 }
 
-function dispatchSelectAction(name, api) {
+function dispatchSelectAction(seriesName, dataName, api, excludeSeriesId) {
+  // downplay before unselect
+  dispatchDownplayAction(seriesName, dataName, api, excludeSeriesId);
   api.dispatchAction({
     type: 'legendToggleSelect',
-    name: name
-  });
+    name: seriesName != null ? seriesName : dataName
+  }); // highlight after select
+
+  dispatchHighlightAction(seriesName, dataName, api, excludeSeriesId);
 }
 
 function dispatchHighlightAction(seriesName, dataName, api, excludeSeriesId) {

package/lib/component/toolbox/ToolboxView.js

@@ -78,7 +78,11 @@ var _default = echarts.extendComponentView({
       var oldName = featureNames[oldIndex];
       var featureOpt = featureOpts[featureName];
       var featureModel = new Model(featureOpt, toolboxModel, toolboxModel.ecModel);
-      var feature;
+      var feature; // FIX#11236, merge feature title from MagicType newOption. TODO: consider seriesIndex ?
+
+      if (payload && payload.newTitle != null) {
+        featureOpt.title = payload.newTitle;
+      }
 
       if (featureName && !oldName) {
         // Create
@@ -172,7 +176,15 @@ var _default = echarts.extendComponentView({
           height: itemSize
         });
         path.setStyle(iconStyleModel.getItemStyle());
-        path.hoverStyle = iconStyleEmphasisModel.getItemStyle();
+        path.hoverStyle = iconStyleEmphasisModel.getItemStyle(); // Text position calculation
+
+        path.setStyle({
+          text: titles[iconName],
+          textAlign: iconStyleEmphasisModel.get('textAlign'),
+          textBorderRadius: iconStyleEmphasisModel.get('textBorderRadius'),
+          textPadding: iconStyleEmphasisModel.get('textPadding'),
+          textFill: null
+        });
         var tooltipModel = toolboxModel.getModel('tooltip');
 
         if (tooltipModel && tooltipModel.get('show')) {
@@ -198,14 +210,11 @@ var _default = echarts.extendComponentView({
           path.on('mouseover', function () {
             // Should not reuse above hoverStyle, which might be modified.
             var hoverStyle = iconStyleEmphasisModel.getItemStyle();
+            var defaultTextPosition = toolboxModel.get('orient') === 'vertical' ? toolboxModel.get('right') == null ? 'right' : 'left' : toolboxModel.get('bottom') == null ? 'bottom' : 'top';
             path.setStyle({
-              text: titles[iconName],
-              textPosition: iconStyleEmphasisModel.get('textPosition') || 'bottom',
               textFill: iconStyleEmphasisModel.get('textFill') || hoverStyle.fill || hoverStyle.stroke || '#000',
-              textAlign: iconStyleEmphasisModel.get('textAlign') || 'center',
               textBackgroundColor: iconStyleEmphasisModel.get('textBackgroundColor'),
-              textBorderRadius: iconStyleEmphasisModel.get('textBorderRadius'),
-              textPadding: iconStyleEmphasisModel.get('textPadding')
+              textPosition: iconStyleEmphasisModel.get('textPosition') || defaultTextPosition
             });
           }).on('mouseout', function () {
             path.setStyle({