echarts 4.5.0 → 4.9.0

package/lib/chart/tree/TreeView.js

@@ -42,6 +42,14 @@ var _cursorHelper = require("../../component/helper/cursorHelper");
 
 var onIrrelevantElement = _cursorHelper.onIrrelevantElement;
 
+var _config = require("../../config");
+
+var __DEV__ = _config.__DEV__;
+
+var _number = require("../../util/number");
+
+var parsePercent = _number.parsePercent;
+
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -60,6 +68,55 @@ var onIrrelevantElement = _cursorHelper.onIrrelevantElement;
 * specific language governing permissions and limitations
 * under the License.
 */
+var TreeShape = graphic.extendShape({
+  shape: {
+    parentPoint: [],
+    childPoints: [],
+    orient: '',
+    forkPosition: ''
+  },
+  style: {
+    stroke: '#000',
+    fill: null
+  },
+  buildPath: function (ctx, shape) {
+    var childPoints = shape.childPoints;
+    var childLen = childPoints.length;
+    var parentPoint = shape.parentPoint;
+    var firstChildPos = childPoints[0];
+    var lastChildPos = childPoints[childLen - 1];
+
+    if (childLen === 1) {
+      ctx.moveTo(parentPoint[0], parentPoint[1]);
+      ctx.lineTo(firstChildPos[0], firstChildPos[1]);
+      return;
+    }
+
+    var orient = shape.orient;
+    var forkDim = orient === 'TB' || orient === 'BT' ? 0 : 1;
+    var otherDim = 1 - forkDim;
+    var forkPosition = parsePercent(shape.forkPosition, 1);
+    var tmpPoint = [];
+    tmpPoint[forkDim] = parentPoint[forkDim];
+    tmpPoint[otherDim] = parentPoint[otherDim] + (lastChildPos[otherDim] - parentPoint[otherDim]) * forkPosition;
+    ctx.moveTo(parentPoint[0], parentPoint[1]);
+    ctx.lineTo(tmpPoint[0], tmpPoint[1]);
+    ctx.moveTo(firstChildPos[0], firstChildPos[1]);
+    tmpPoint[forkDim] = firstChildPos[forkDim];
+    ctx.lineTo(tmpPoint[0], tmpPoint[1]);
+    tmpPoint[forkDim] = lastChildPos[forkDim];
+    ctx.lineTo(tmpPoint[0], tmpPoint[1]);
+    ctx.lineTo(lastChildPos[0], lastChildPos[1]);
+
+    for (var i = 1; i < childLen - 1; i++) {
+      var point = childPoints[i];
+      ctx.moveTo(point[0], point[1]);
+      tmpPoint[forkDim] = point[forkDim];
+      ctx.lineTo(tmpPoint[0], tmpPoint[1]);
+    }
+  }
+});
+
 var _default = echarts.extendChartView({
   type: 'tree',
 
@@ -112,6 +169,8 @@ var _default = echarts.extendChartView({
     var seriesScope = {
       expandAndCollapse: seriesModel.get('expandAndCollapse'),
       layout: layout,
+      edgeShape: seriesModel.get('edgeShape'),
+      edgeForkPosition: seriesModel.get('edgeForkPosition'),
       orient: seriesModel.getOrient(),
       curvature: seriesModel.get('lineStyle.curveness'),
       symbolRotate: seriesModel.get('symbolRotate'),
@@ -387,27 +446,72 @@ function updateNode(data, dataIndex, symbolEl, group, seriesModel, seriesScope)
     });
   }
 
-  if (node.parentNode && node.parentNode !== virtualRoot) {
-    var edge = symbolEl.__edge;
+  drawEdge(seriesModel, node, virtualRoot, symbolEl, sourceOldLayout, sourceLayout, targetLayout, group, seriesScope);
+}
+
+function drawEdge(seriesModel, node, virtualRoot, symbolEl, sourceOldLayout, sourceLayout, targetLayout, group, seriesScope) {
+  var edgeShape = seriesScope.edgeShape;
+  var edge = symbolEl.__edge;
+
+  if (edgeShape === 'curve') {
+    if (node.parentNode && node.parentNode !== virtualRoot) {
+      if (!edge) {
+        edge = symbolEl.__edge = new graphic.BezierCurve({
+          shape: getEdgeShape(seriesScope, sourceOldLayout, sourceOldLayout),
+          style: zrUtil.defaults({
+            opacity: 0,
+            strokeNoScale: true
+          }, seriesScope.lineStyle)
+        });
+      }
 
-    if (!edge) {
-      edge = symbolEl.__edge = new graphic.BezierCurve({
-        shape: getEdgeShape(seriesScope, sourceOldLayout, sourceOldLayout),
+      graphic.updateProps(edge, {
+        shape: getEdgeShape(seriesScope, sourceLayout, targetLayout),
         style: zrUtil.defaults({
-          opacity: 0,
-          strokeNoScale: true
+          opacity: 1
         }, seriesScope.lineStyle)
-      });
+      }, seriesModel);
     }
+  } else if (edgeShape === 'polyline') {
+    if (seriesScope.layout === 'orthogonal') {
+      if (node !== virtualRoot && node.children && node.children.length !== 0 && node.isExpand === true) {
+        var children = node.children;
+        var childPoints = [];
+
+        for (var i = 0; i < children.length; i++) {
+          var childLayout = children[i].getLayout();
+          childPoints.push([childLayout.x, childLayout.y]);
+        }
 
-    graphic.updateProps(edge, {
-      shape: getEdgeShape(seriesScope, sourceLayout, targetLayout),
-      style: {
-        opacity: 1
+        if (!edge) {
+          edge = symbolEl.__edge = new TreeShape({
+            shape: {
+              parentPoint: [targetLayout.x, targetLayout.y],
+              childPoints: [[targetLayout.x, targetLayout.y]],
+              orient: seriesScope.orient,
+              forkPosition: seriesScope.edgeForkPosition
+            },
+            style: zrUtil.defaults({
+              opacity: 0,
+              strokeNoScale: true
+            }, seriesScope.lineStyle)
+          });
+        }
+
+        graphic.updateProps(edge, {
+          shape: {
+            parentPoint: [targetLayout.x, targetLayout.y],
+            childPoints: childPoints
+          },
+          style: zrUtil.defaults({
+            opacity: 1
+          }, seriesScope.lineStyle)
+        }, seriesModel);
       }
-    }, seriesModel);
-    group.add(edge);
+    } else {}
   }
+
+  group.add(edge);
 }
 
 function removeNode(data, dataIndex, symbolEl, group, seriesModel, seriesScope) {
@@ -416,6 +520,7 @@ function removeNode(data, dataIndex, symbolEl, group, seriesModel, seriesScope)
   var itemModel = node.getModel();
   var seriesScope = getTreeNodeStyle(node, itemModel, seriesScope);
   var source = node.parentNode === virtualRoot ? node : node.parentNode || node;
+  var edgeShape = seriesScope.edgeShape;
   var sourceLayout;
 
   while (sourceLayout = source.getLayout(), sourceLayout == null) {
@@ -431,17 +536,38 @@ function removeNode(data, dataIndex, symbolEl, group, seriesModel, seriesScope)
   symbolEl.fadeOut(null, {
     keepLabel: true
   });
-  var edge = symbolEl.__edge;
+  var sourceSymbolEl = data.getItemGraphicEl(source.dataIndex);
+  var sourceEdge = sourceSymbolEl.__edge; // 1. when expand the sub tree, delete the children node should delete the edge of
+  // the source at the same time. because the polyline edge shape is only owned by the source.
+  // 2.when the node is the only children of the source, delete the node should delete the edge of
+  // the source at the same time. the same reason as above.
+
+  var edge = symbolEl.__edge || (source.isExpand === false || source.children.length === 1 ? sourceEdge : undefined);
+  var edgeShape = seriesScope.edgeShape;
 
   if (edge) {
-    graphic.updateProps(edge, {
-      shape: getEdgeShape(seriesScope, sourceLayout, sourceLayout),
-      style: {
-        opacity: 0
-      }
-    }, seriesModel, function () {
-      group.remove(edge);
-    });
+    if (edgeShape === 'curve') {
+      graphic.updateProps(edge, {
+        shape: getEdgeShape(seriesScope, sourceLayout, sourceLayout),
+        style: {
+          opacity: 0
+        }
+      }, seriesModel, function () {
+        group.remove(edge);
+      });
+    } else if (edgeShape === 'polyline' && seriesScope.layout === 'orthogonal') {
+      graphic.updateProps(edge, {
+        shape: {
+          parentPoint: [sourceLayout.x, sourceLayout.y],
+          childPoints: [[sourceLayout.x, sourceLayout.y]]
+        },
+        style: {
+          opacity: 0
+        }
+      }, seriesModel, function () {
+        group.remove(edge);
+      });
+    }
   }
 }
 

package/lib/chart/treemap/TreemapSeries.js

@@ -226,14 +226,35 @@ var _default = SeriesModel.extend({
       children: option.data
     };
     completeTreeValue(root);
-    var levels = option.levels || [];
+    var levels = option.levels || []; // Used in "visual priority" in `treemapVisual.js`.
+    // This way is a little tricky, must satisfy the precondition:
+    //   1. There is no `treeNode.getModel('itemStyle.xxx')` used.
+    //   2. The `Model.prototype.getModel()` will not use any clone-like way.
+
+    var designatedVisualItemStyle = this.designatedVisualItemStyle = {};
+    var designatedVisualModel = new Model({
+      itemStyle: designatedVisualItemStyle
+    }, this, ecModel);
     levels = option.levels = setDefault(levels, ecModel);
-    var treeOption = {};
-    treeOption.levels = levels; // Make sure always a new tree is created when setOption,
+    var levelModels = zrUtil.map(levels || [], function (levelDefine) {
+      return new Model(levelDefine, designatedVisualModel, ecModel);
+    }, this); // Make sure always a new tree is created when setOption,
     // in TreemapView, we check whether oldTree === newTree
     // to choose mappings approach among old shapes and new shapes.
 
-    return Tree.createTree(root, this, treeOption).data;
+    var tree = Tree.createTree(root, this, beforeLink);
+
+    function beforeLink(nodeData) {
+      nodeData.wrapMethod('getItemModel', function (model, idx) {
+        var node = tree.getNodeByDataIndex(idx);
+        var levelModel = levelModels[node.depth]; // If no levelModel, we also need `designatedVisualModel`.
+
+        model.parentModel = levelModel || designatedVisualModel;
+        return model;
+      });
+    }
+
+    return tree.data;
   },
   optionUpdated: function () {
     this.resetViewRoot();

package/lib/chart/treemap/TreemapView.js

@@ -40,6 +40,10 @@ var animationUtil = require("../../util/animation");
 
 var makeStyleMapper = require("../../model/mixin/makeStyleMapper");
 
+var _format = require("../../util/format");
+
+var windowOpen = _format.windowOpen;
+
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -529,7 +533,7 @@ var _default = echarts.extendChartView({
           var itemModel = node.hostTree.data.getItemModel(node.dataIndex);
           var link = itemModel.get('link', true);
           var linkTarget = itemModel.get('target', true) || 'blank';
-          link && window.open(link, linkTarget);
+          link && windowOpen(link, linkTarget);
         }
       }
     }, this);
@@ -673,6 +677,10 @@ function renderNode(seriesModel, thisStorage, oldStorage, reRoot, lastsForAnimat
 
 
   var thisLayout = thisNode.getLayout();
+  var data = seriesModel.getData(); // Only for enabling highlight/downplay. Clear firstly.
+  // Because some node will not be rendered.
+
+  data.setItemGraphicEl(thisNode.dataIndex, null);
 
   if (!thisLayout || !thisLayout.isInView) {
     return;
@@ -706,15 +714,37 @@ function renderNode(seriesModel, thisStorage, oldStorage, reRoot, lastsForAnimat
 
   if (thisLayout.isAboveViewRoot) {
     return group;
-  } // Background
+  }
 
+  var nodeModel = thisNode.getModel(); // Background
 
   var bg = giveGraphic('background', Rect, depth, Z_BG);
-  bg && renderBackground(group, bg, isParent && thisLayout.upperHeight); // No children, render content.
+  bg && renderBackground(group, bg, isParent && thisLayout.upperLabelHeight); // No children, render content.
+
+  if (isParent) {
+    // Because of the implementation about "traverse" in graphic hover style, we
+    // can not set hover listener on the "group" of non-leaf node. Otherwise the
+    // hover event from the descendents will be listenered.
+    if (graphic.isHighDownDispatcher(group)) {
+      graphic.setAsHighDownDispatcher(group, false);
+    }
+
+    if (bg) {
+      graphic.setAsHighDownDispatcher(bg, true); // Only for enabling highlight/downplay.
 
-  if (!isParent) {
+      data.setItemGraphicEl(thisNode.dataIndex, bg);
+    }
+  } else {
     var content = giveGraphic('content', Rect, depth, Z_CONTENT);
     content && renderContent(group, content);
+
+    if (bg && graphic.isHighDownDispatcher(bg)) {
+      graphic.setAsHighDownDispatcher(bg, false);
+    }
+
+    graphic.setAsHighDownDispatcher(group, true); // Only for enabling highlight/downplay.
+
+    data.setItemGraphicEl(thisNode.dataIndex, group);
   }
 
   return group; // ----------------------------
@@ -731,9 +761,16 @@ function renderNode(seriesModel, thisStorage, oldStorage, reRoot, lastsForAnimat
       width: thisWidth,
       height: thisHeight
     });
-    var visualBorderColor = thisNode.getVisual('borderColor', true);
-    var emphasisBorderColor = itemStyleEmphasisModel.get('borderColor');
-    updateStyle(bg, function () {
+
+    if (thisInvisible) {
+      // If invisible, do not set visual, otherwise the element will
+      // change immediately before animation. We think it is OK to
+      // remain its origin color when moving out of the view window.
+      processInvisible(bg);
+    } else {
+      bg.invisible = false;
+      var visualBorderColor = thisNode.getVisual('borderColor', true);
+      var emphasisBorderColor = itemStyleEmphasisModel.get('borderColor');
       var normalStyle = getItemStyleNormal(itemStyleNormalModel);
       normalStyle.fill = visualBorderColor;
       var emphasisStyle = getItemStyleEmphasis(itemStyleEmphasisModel);
@@ -753,8 +790,9 @@ function renderNode(seriesModel, thisStorage, oldStorage, reRoot, lastsForAnimat
         }
 
       bg.setStyle(normalStyle);
-      graphic.setHoverStyle(bg, emphasisStyle);
-    });
+      graphic.setElementHoverStyle(bg, emphasisStyle);
+    }
+
     group.add(bg);
   }
 
@@ -771,52 +809,47 @@ function renderNode(seriesModel, thisStorage, oldStorage, reRoot, lastsForAnimat
       width: contentWidth,
       height: contentHeight
     });
-    var visualColor = thisNode.getVisual('color', true);
-    updateStyle(content, function () {
+
+    if (thisInvisible) {
+      // If invisible, do not set visual, otherwise the element will
+      // change immediately before animation. We think it is OK to
+      // remain its origin color when moving out of the view window.
+      processInvisible(content);
+    } else {
+      content.invisible = false;
+      var visualColor = thisNode.getVisual('color', true);
       var normalStyle = getItemStyleNormal(itemStyleNormalModel);
       normalStyle.fill = visualColor;
       var emphasisStyle = getItemStyleEmphasis(itemStyleEmphasisModel);
       prepareText(normalStyle, emphasisStyle, visualColor, contentWidth, contentHeight);
       content.setStyle(normalStyle);
-      graphic.setHoverStyle(content, emphasisStyle);
-    });
+      graphic.setElementHoverStyle(content, emphasisStyle);
+    }
+
     group.add(content);
   }
 
-  function updateStyle(element, cb) {
-    if (!thisInvisible) {
-      // If invisible, do not set visual, otherwise the element will
-      // change immediately before animation. We think it is OK to
-      // remain its origin color when moving out of the view window.
-      cb();
-
-      if (!element.__tmWillVisible) {
-        element.invisible = false;
-      }
-    } else {
-      // Delay invisible setting utill animation finished,
-      // avoid element vanish suddenly before animation.
-      !element.invisible && willInvisibleEls.push(element);
-    }
+  function processInvisible(element) {
+    // Delay invisible setting utill animation finished,
+    // avoid element vanish suddenly before animation.
+    !element.invisible && willInvisibleEls.push(element);
   }
 
   function prepareText(normalStyle, emphasisStyle, visualColor, width, height, upperLabelRect) {
-    var nodeModel = thisNode.getModel();
-    var text = zrUtil.retrieve(seriesModel.getFormattedLabel(thisNode.dataIndex, 'normal', null, null, upperLabelRect ? 'upperLabel' : 'label'), nodeModel.get('name'));
-
-    if (!upperLabelRect && thisLayout.isLeafRoot) {
-      var iconChar = seriesModel.get('drillDownIcon', true);
-      text = iconChar ? iconChar + ' ' + text : text;
-    }
-
+    var defaultText = nodeModel.get('name');
     var normalLabelModel = nodeModel.getModel(upperLabelRect ? PATH_UPPERLABEL_NORMAL : PATH_LABEL_NOAMAL);
     var emphasisLabelModel = nodeModel.getModel(upperLabelRect ? PATH_UPPERLABEL_EMPHASIS : PATH_LABEL_EMPHASIS);
     var isShow = normalLabelModel.getShallow('show');
     graphic.setLabelStyle(normalStyle, emphasisStyle, normalLabelModel, emphasisLabelModel, {
-      defaultText: isShow ? text : null,
+      defaultText: isShow ? defaultText : null,
       autoColor: visualColor,
-      isRectText: true
+      isRectText: true,
+      labelFetcher: seriesModel,
+      labelDataIndex: thisNode.dataIndex,
+      labelProp: upperLabelRect ? 'upperLabel' : 'label'
     });
+    addDrillDownIcon(normalStyle, upperLabelRect, thisLayout);
+    addDrillDownIcon(emphasisStyle, upperLabelRect, thisLayout);
     upperLabelRect && (normalStyle.textRect = zrUtil.clone(upperLabelRect));
     normalStyle.truncate = isShow && normalLabelModel.get('ellipsis') ? {
       outerWidth: width,
@@ -825,6 +858,15 @@ function renderNode(seriesModel, thisStorage, oldStorage, reRoot, lastsForAnimat
     } : null;
   }
 
+  function addDrillDownIcon(style, upperLabelRect, thisLayout) {
+    var text = style.text;
+
+    if (!upperLabelRect && thisLayout.isLeafRoot && text != null) {
+      var iconChar = seriesModel.get('drillDownIcon', true);
+      style.text = iconChar ? iconChar + ' ' + text : text;
+    }
+  }
+
   function giveGraphic(storageName, Ctor, depth, z) {
     var element = oldRawIndex != null && oldStorage[storageName][oldRawIndex];
     var lasts = lastsForAnimation[storageName];

package/lib/chart/treemap/treemapLayout.js

@@ -445,7 +445,7 @@ function position(row, rowFixedLength, rect, halfGapWidth, flush) {
 
   rect[xy[idx1WhenH]] += rowOtherLength;
   rect[wh[idx1WhenH]] -= rowOtherLength;
-} // Return [containerWidth, containerHeight] as defualt.
+} // Return [containerWidth, containerHeight] as default.
 
 
 function estimateRootSize(seriesModel, targetInfo, viewRoot, containerWidth, containerHeight) {

package/lib/chart/treemap/treemapVisual.js

@@ -49,21 +49,17 @@ var _default = {
   reset: function (seriesModel, ecModel, api, payload) {
     var tree = seriesModel.getData().tree;
     var root = tree.root;
-    var seriesItemStyleModel = seriesModel.getModel(ITEM_STYLE_NORMAL);
 
     if (root.isRemoved()) {
       return;
     }
 
-    var levelItemStyles = zrUtil.map(tree.levelModels, function (levelModel) {
-      return levelModel ? levelModel.get(ITEM_STYLE_NORMAL) : null;
-    });
     travelTree(root, // Visual should calculate from tree root but not view root.
-    {}, levelItemStyles, seriesItemStyleModel, seriesModel.getViewRoot().getAncestors(), seriesModel);
+    {}, seriesModel.getViewRoot().getAncestors(), seriesModel);
   }
 };
 
-function travelTree(node, designatedVisual, levelItemStyles, seriesItemStyleModel, viewRootAncestors, seriesModel) {
+function travelTree(node, designatedVisual, viewRootAncestors, seriesModel) {
   var nodeModel = node.getModel();
   var nodeLayout = node.getLayout(); // Optimize
 
@@ -72,8 +68,7 @@ function travelTree(node, designatedVisual, levelItemStyles, seriesItemStyleMode
   }
 
   var nodeItemStyleModel = node.getModel(ITEM_STYLE_NORMAL);
-  var levelItemStyle = levelItemStyles[node.depth];
-  var visuals = buildVisuals(nodeItemStyleModel, designatedVisual, levelItemStyle, seriesItemStyleModel); // calculate border color
+  var visuals = buildVisuals(nodeItemStyleModel, designatedVisual, seriesModel); // calculate border color
 
   var borderColor = nodeItemStyleModel.get('borderColor');
   var borderColorSaturation = nodeItemStyleModel.get('borderColorSaturation');
@@ -99,21 +94,20 @@ function travelTree(node, designatedVisual, levelItemStyles, seriesItemStyleMode
       // If higher than viewRoot, only ancestors of viewRoot is needed to visit.
       if (child.depth >= viewRootAncestors.length || child === viewRootAncestors[child.depth]) {
         var childVisual = mapVisual(nodeModel, visuals, child, index, mapping, seriesModel);
-        travelTree(child, childVisual, levelItemStyles, seriesItemStyleModel, viewRootAncestors, seriesModel);
+        travelTree(child, childVisual, viewRootAncestors, seriesModel);
       }
     });
   }
 }
 
-function buildVisuals(nodeItemStyleModel, designatedVisual, levelItemStyle, seriesItemStyleModel) {
+function buildVisuals(nodeItemStyleModel, designatedVisual, seriesModel) {
   var visuals = zrUtil.extend({}, designatedVisual);
+  var designatedVisualItemStyle = seriesModel.designatedVisualItemStyle;
   zrUtil.each(['color', 'colorAlpha', 'colorSaturation'], function (visualName) {
     // Priority: thisNode > thisLevel > parentNodeDesignated > seriesModel
-    var val = nodeItemStyleModel.get(visualName, true); // Ignore parent
-
-    val == null && levelItemStyle && (val = levelItemStyle[visualName]);
-    val == null && (val = designatedVisual[visualName]);
-    val == null && (val = seriesItemStyleModel.get(visualName));
+    designatedVisualItemStyle[visualName] = designatedVisual[visualName];
+    var val = nodeItemStyleModel.get(visualName);
+    designatedVisualItemStyle[visualName] = null;
     val != null && (visuals[visualName] = val);
   });
   return visuals;

package/lib/component/axis/AngleAxisView.js

@@ -46,7 +46,7 @@ var AxisBuilder = require("./AxisBuilder");
 * specific language governing permissions and limitations
 * under the License.
 */
-var elementList = ['axisLine', 'axisLabel', 'axisTick', 'splitLine', 'splitArea'];
+var elementList = ['axisLine', 'axisLabel', 'axisTick', 'minorTick', 'splitLine', 'minorSplitLine', 'splitArea'];
 
 function getAxisLineShape(polar, rExtent, angle) {
   rExtent[1] > rExtent[0] && (rExtent = rExtent.slice().reverse());
@@ -89,6 +89,7 @@ var _default = AxisView.extend({
     var polar = angleAxis.polar;
     var radiusExtent = polar.getRadiusAxis().getExtent();
     var ticksAngles = angleAxis.getTicksCoords();
+    var minorTickAngles = angleAxis.getMinorTicksCoords();
     var labels = zrUtil.map(angleAxis.getViewLabels(), function (labelItem) {
       var labelItem = zrUtil.clone(labelItem);
       labelItem.coord = angleAxis.dataToCoord(labelItem.tickValue);
@@ -98,7 +99,7 @@ var _default = AxisView.extend({
     fixAngleOverlap(ticksAngles);
     zrUtil.each(elementList, function (name) {
       if (angleAxisModel.get(name + '.show') && (!angleAxis.scale.isBlank() || name === 'axisLine')) {
-        this['_' + name](angleAxisModel, polar, ticksAngles, radiusExtent, labels);
+        this['_' + name](angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent, labels);
       }
     }, this);
   },
@@ -106,7 +107,7 @@ var _default = AxisView.extend({
   /**
    * @private
    */
-  _axisLine: function (angleAxisModel, polar, ticksAngles, radiusExtent) {
+  _axisLine: function (angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
     var lineStyleModel = angleAxisModel.getModel('axisLine.lineStyle'); // extent id of the axis radius (r0 and r)
 
     var rId = getRadiusIdx(polar);
@@ -145,7 +146,7 @@ var _default = AxisView.extend({
   /**
    * @private
    */
-  _axisTick: function (angleAxisModel, polar, ticksAngles, radiusExtent) {
+  _axisTick: function (angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
     var tickModel = angleAxisModel.getModel('axisTick');
     var tickLen = (tickModel.get('inside') ? -1 : 1) * tickModel.get('length');
     var radius = radiusExtent[getRadiusIdx(polar)];
@@ -164,7 +165,36 @@ var _default = AxisView.extend({
   /**
    * @private
    */
-  _axisLabel: function (angleAxisModel, polar, ticksAngles, radiusExtent, labels) {
+  _minorTick: function (angleAxisModel, polar, tickAngles, minorTickAngles, radiusExtent) {
+    if (!minorTickAngles.length) {
+      return;
+    }
+
+    var tickModel = angleAxisModel.getModel('axisTick');
+    var minorTickModel = angleAxisModel.getModel('minorTick');
+    var tickLen = (tickModel.get('inside') ? -1 : 1) * minorTickModel.get('length');
+    var radius = radiusExtent[getRadiusIdx(polar)];
+    var lines = [];
+
+    for (var i = 0; i < minorTickAngles.length; i++) {
+      for (var k = 0; k < minorTickAngles[i].length; k++) {
+        lines.push(new graphic.Line({
+          shape: getAxisLineShape(polar, [radius, radius + tickLen], minorTickAngles[i][k].coord)
+        }));
+      }
+    }
+
+    this.group.add(graphic.mergePath(lines, {
+      style: zrUtil.defaults(minorTickModel.getModel('lineStyle').getLineStyle(), zrUtil.defaults(tickModel.getLineStyle(), {
+        stroke: angleAxisModel.get('axisLine.lineStyle.color')
+      }))
+    }));
+  },
+
+  /**
+   * @private
+   */
+  _axisLabel: function (angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent, labels) {
     var rawCategoryData = angleAxisModel.getCategories(true);
     var commonLabelModel = angleAxisModel.getModel('axisLabel');
     var labelMargin = commonLabelModel.get('margin');
@@ -208,7 +238,7 @@ var _default = AxisView.extend({
   /**
    * @private
    */
-  _splitLine: function (angleAxisModel, polar, ticksAngles, radiusExtent) {
+  _splitLine: function (angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
     var splitLineModel = angleAxisModel.getModel('splitLine');
     var lineStyleModel = splitLineModel.getModel('lineStyle');
     var lineColors = lineStyleModel.get('color');
@@ -240,7 +270,34 @@ var _default = AxisView.extend({
   /**
    * @private
    */
-  _splitArea: function (angleAxisModel, polar, ticksAngles, radiusExtent) {
+  _minorSplitLine: function (angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
+    if (!minorTickAngles.length) {
+      return;
+    }
+
+    var minorSplitLineModel = angleAxisModel.getModel('minorSplitLine');
+    var lineStyleModel = minorSplitLineModel.getModel('lineStyle');
+    var lines = [];
+
+    for (var i = 0; i < minorTickAngles.length; i++) {
+      for (var k = 0; k < minorTickAngles[i].length; k++) {
+        lines.push(new graphic.Line({
+          shape: getAxisLineShape(polar, radiusExtent, minorTickAngles[i][k].coord)
+        }));
+      }
+    }
+
+    this.group.add(graphic.mergePath(lines, {
+      style: lineStyleModel.getLineStyle(),
+      silent: true,
+      z: angleAxisModel.get('z')
+    }));
+  },
+
+  /**
+   * @private
+   */
+  _splitArea: function (angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
     if (!ticksAngles.length) {
       return;
     }