echarts 4.5.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/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

@@ -153,12 +153,6 @@ function BrushController(zr) {
    */
 
   this._dragging;
-  /**
-   * @private
-   * @type {Object}
-   */
-
-  this._lastMouseMovePoint = {};
   /**
    * @private
    * @type {Array}
@@ -200,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);
 }
@@ -351,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);
 }
@@ -361,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) {
@@ -667,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;
   }
 
@@ -758,7 +763,7 @@ function determineBrushType(brushType, panel) {
   return brushType;
 }
 
-var mouseHandlers = {
+var pointerHandlers = {
   mousedown: function (e) {
     if (this._dragging) {
       // In case some browser do not support globalOut,
@@ -777,10 +782,9 @@ var mouseHandlers = {
     }
   },
   mousemove: function (e) {
-    var lastPoint = this._lastMouseMovePoint;
-    lastPoint.x = e.offsetX;
-    lastPoint.y = e.offsetY;
-    var localCursorPoint = this.group.transformCoordToLocal(lastPoint.x, lastPoint.y);
+    var x = e.offsetX;
+    var y = e.offsetY;
+    var localCursorPoint = this.group.transformCoordToLocal(x, y);
     resetCursor(this, e, localCursorPoint);
 
     if (this._dragging) {
@@ -791,34 +795,15 @@ var mouseHandlers = {
   },
   mouseup: function (e) {
     handleDragEnd(this, e);
-  },
-  globalout: function (e) {
-    handleDragEnd(this, e, true);
   }
 };
 
-function handleDragEnd(controller, e, isGlobalOut) {
+function handleDragEnd(controller, e) {
   if (controller._dragging) {
-    // Just be worried about bring some side effect to the world
-    // out of echarts, we do not `preventDefault` for globalout.
-    !isGlobalOut && preventDefault(e);
-    var pointerX = e.offsetX;
-    var pointerY = e.offsetY;
-    var lastPoint = controller._lastMouseMovePoint;
-
-    if (isGlobalOut) {
-      pointerX = lastPoint.x;
-      pointerY = lastPoint.y;
-    }
-
-    var localCursorPoint = controller.group.transformCoordToLocal(pointerX, pointerY); // FIXME
-    // Here `e` is used only in `onIrrelevantElement` finally. And it's OK
-    // that pass the `e` of `globalout` to `onIrrelevantElement`. But it is
-    // not a good design of these interfaces. However, we do not refactor
-    // these code now because the implementation of `onIrrelevantElement`
-    // need to be discussed and probably be changed in future, becuase it
-    // slows down the performance of zrender in some cases.
-
+    preventDefault(e);
+    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 = [];
@@ -827,6 +812,11 @@ function handleDragEnd(controller, e, isGlobalOut) {
     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

package/lib/component/toolbox/feature/MagicType.js

@@ -45,6 +45,7 @@ var featureManager = require("../featureManager");
 * under the License.
 */
 var magicTypeLang = lang.toolbox.magicType;
+var INNER_STACK_KEYWORD = '__ec_magicType_stack__';
 
 function MagicType(model) {
   this.model = model;
@@ -58,9 +59,8 @@ MagicType.defaultOption = {
     /* eslint-disable */
     line: 'M4.1,28.9h7.1l9.3-22l7.4,38l9.7-19.7l3,12.8h14.9M4.1,58h51.4',
     bar: 'M6.7,22.9h10V48h-10V22.9zM24.9,13h10v35h-10V13zM43.2,2h10v46h-10V2zM3.1,58h53.7',
-    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'
+    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
+
     /* eslint-enable */
 
   },
@@ -111,23 +111,18 @@ var seriesOptGenreator = {
     }
   },
   'stack': function (seriesType, seriesId, seriesModel, model) {
+    var isStack = seriesModel.get('stack') === INNER_STACK_KEYWORD;
+
     if (seriesType === 'line' || seriesType === 'bar') {
+      model.setIconStatus('stack', isStack ? 'normal' : 'emphasis');
       return zrUtil.merge({
         id: seriesId,
-        stack: '__ec_magicType_stack__'
+        stack: isStack ? '' : INNER_STACK_KEYWORD
       }, model.get('option.stack') || {}, true);
     }
-  },
-  'tiled': function (seriesType, seriesId, seriesModel, model) {
-    if (seriesType === 'line' || seriesType === 'bar') {
-      return zrUtil.merge({
-        id: seriesId,
-        stack: ''
-      }, model.get('option.tiled') || {}, true);
-    }
   }
 };
-var radioTypes = [['line', 'bar'], ['stack', 'tiled']];
+var radioTypes = [['line', 'bar'], ['stack']];
 
 proto.onclick = function (ecModel, api, type) {
   var model = this.model;
@@ -192,10 +187,20 @@ proto.onclick = function (ecModel, api, type) {
       seriesIndex: seriesIndex
     }
   }, generateNewSeriesTypes);
+  var newTitle; // Change title of stack
+
+  if (type === 'stack') {
+    var isStack = newOption.series && newOption.series[0] && newOption.series[0].stack === INNER_STACK_KEYWORD;
+    newTitle = isStack ? zrUtil.merge({
+      stack: magicTypeLang.title.tiled
+    }, magicTypeLang.title) : zrUtil.clone(magicTypeLang.title);
+  }
+
   api.dispatchAction({
     type: 'changeMagicType',
     currentType: type,
-    newOption: newOption
+    newOption: newOption,
+    newTitle: newTitle
   });
 };