echarts 4.4.0 → 4.6.0

package/lib/chart/pie/labelLayout.js

@@ -20,6 +20,10 @@
 
 var textContain = require("zrender/lib/contain/text");
 
+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
@@ -41,13 +45,17 @@ var textContain = require("zrender/lib/contain/text");
 // FIXME emphasis label position is not same with normal label position
 var RADIAN = Math.PI / 180;
 
-function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight) {
+function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight, viewLeft, viewTop, farthestX) {
   list.sort(function (a, b) {
     return a.y - b.y;
   });
 
   function shiftDown(start, end, delta, dir) {
     for (var j = start; j < end; j++) {
+      if (list[j].y + delta > viewTop + viewHeight) {
+        break;
+      }
+
       list[j].y += delta;
 
       if (j > start && j + 1 < end && list[j + 1].y > list[j].y + list[j].height) {
@@ -61,6 +69,10 @@ function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight) {
 
   function shiftUp(end, delta) {
     for (var j = end; j >= 0; j--) {
+      if (list[j].y - delta < viewTop) {
+        break;
+      }
+
       list[j].y -= delta;
 
       if (j > 0 && list[j].y > list[j - 1].y + list[j - 1].height) {
@@ -78,6 +90,10 @@ function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight) {
     : 0; // up
 
     for (var i = 0, l = list.length; i < l; i++) {
+      if (list[i].labelAlignTo !== 'none') {
+        continue;
+      }
+
       var deltaY = Math.abs(list[i].y - cy);
       var length = list[i].len;
       var length2 = list[i].len2;
@@ -105,6 +121,12 @@ function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight) {
   var downList = [];
 
   for (var i = 0; i < len; i++) {
+    if (list[i].position === 'outer' && list[i].labelAlignTo === 'labelLine') {
+      var dx = list[i].x - farthestX;
+      list[i].linePoints[1][0] += dx;
+      list[i].x = farthestX;
+    }
+
     delta = list[i].y - lastY;
 
     if (delta < 0) {
@@ -130,9 +152,11 @@ function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight) {
   changeX(downList, true, cx, cy, r, dir);
 }
 
-function avoidOverlap(labelLayoutList, cx, cy, r, viewWidth, viewHeight) {
+function avoidOverlap(labelLayoutList, cx, cy, r, viewWidth, viewHeight, viewLeft, viewTop) {
   var leftList = [];
   var rightList = [];
+  var leftmostX = Number.MAX_VALUE;
+  var rightmostX = -Number.MAX_VALUE;
 
   for (var i = 0; i < labelLayoutList.length; i++) {
     if (isPositionCenter(labelLayoutList[i])) {
@@ -140,33 +164,72 @@ function avoidOverlap(labelLayoutList, cx, cy, r, viewWidth, viewHeight) {
     }
 
     if (labelLayoutList[i].x < cx) {
+      leftmostX = Math.min(leftmostX, labelLayoutList[i].x);
       leftList.push(labelLayoutList[i]);
     } else {
+      rightmostX = Math.max(rightmostX, labelLayoutList[i].x);
       rightList.push(labelLayoutList[i]);
     }
   }
 
-  adjustSingleSide(rightList, cx, cy, r, 1, viewWidth, viewHeight);
-  adjustSingleSide(leftList, cx, cy, r, -1, viewWidth, viewHeight);
+  adjustSingleSide(rightList, cx, cy, r, 1, viewWidth, viewHeight, viewLeft, viewTop, rightmostX);
+  adjustSingleSide(leftList, cx, cy, r, -1, viewWidth, viewHeight, viewLeft, viewTop, leftmostX);
 
   for (var i = 0; i < labelLayoutList.length; i++) {
-    if (isPositionCenter(labelLayoutList[i])) {
+    var layout = labelLayoutList[i];
+
+    if (isPositionCenter(layout)) {
       continue;
     }
 
-    var linePoints = labelLayoutList[i].linePoints;
+    var linePoints = layout.linePoints;
 
     if (linePoints) {
+      var isAlignToEdge = layout.labelAlignTo === 'edge';
+      var realTextWidth = layout.textRect.width;
+      var targetTextWidth;
+
+      if (isAlignToEdge) {
+        if (layout.x < cx) {
+          targetTextWidth = linePoints[2][0] - layout.labelDistance - viewLeft - layout.labelMargin;
+        } else {
+          targetTextWidth = viewLeft + viewWidth - layout.labelMargin - linePoints[2][0] - layout.labelDistance;
+        }
+      } else {
+        if (layout.x < cx) {
+          targetTextWidth = layout.x - viewLeft - layout.bleedMargin;
+        } else {
+          targetTextWidth = viewLeft + viewWidth - layout.x - layout.bleedMargin;
+        }
+      }
+
+      if (targetTextWidth < layout.textRect.width) {
+        layout.text = textContain.truncateText(layout.text, targetTextWidth, layout.font);
+
+        if (layout.labelAlignTo === 'edge') {
+          realTextWidth = textContain.getWidth(layout.text, layout.font);
+        }
+      }
+
       var dist = linePoints[1][0] - linePoints[2][0];
 
-      if (labelLayoutList[i].x < cx) {
-        linePoints[2][0] = labelLayoutList[i].x + 3;
+      if (isAlignToEdge) {
+        if (layout.x < cx) {
+          linePoints[2][0] = viewLeft + layout.labelMargin + realTextWidth + layout.labelDistance;
+        } else {
+          linePoints[2][0] = viewLeft + viewWidth - layout.labelMargin - realTextWidth - layout.labelDistance;
+        }
       } else {
-        linePoints[2][0] = labelLayoutList[i].x - 3;
+        if (layout.x < cx) {
+          linePoints[2][0] = layout.x + layout.labelDistance;
+        } else {
+          linePoints[2][0] = layout.x - layout.labelDistance;
+        }
+
+        linePoints[1][0] = linePoints[2][0] + dist;
       }
 
-      linePoints[1][1] = linePoints[2][1] = labelLayoutList[i].y;
-      linePoints[1][0] = linePoints[2][0] + dist;
+      linePoints[1][1] = linePoints[2][1] = layout.y;
     }
   }
 }
@@ -176,7 +239,7 @@ function isPositionCenter(layout) {
   return layout.position === 'center';
 }
 
-function _default(seriesModel, r, viewWidth, viewHeight, sum) {
+function _default(seriesModel, r, viewWidth, viewHeight, viewLeft, viewTop) {
   var data = seriesModel.getData();
   var labelLayoutList = [];
   var cx;
@@ -189,9 +252,16 @@ function _default(seriesModel, r, viewWidth, viewHeight, sum) {
     var labelModel = itemModel.getModel('label'); // Use position in normal or emphasis
 
     var labelPosition = labelModel.get('position') || itemModel.get('emphasis.label.position');
+    var labelDistance = labelModel.get('distanceToLabelLine');
+    var labelAlignTo = labelModel.get('alignTo');
+    var labelMargin = parsePercent(labelModel.get('margin'), viewWidth);
+    var bleedMargin = labelModel.get('bleedMargin');
+    var font = labelModel.getFont();
     var labelLineModel = itemModel.getModel('labelLine');
     var labelLineLen = labelLineModel.get('length');
+    labelLineLen = parsePercent(labelLineLen, viewWidth);
     var labelLineLen2 = labelLineModel.get('length2');
+    labelLineLen2 = parsePercent(labelLineLen2, viewWidth);
 
     if (layout.angle < minShowLabelRadian) {
       return;
@@ -206,6 +276,8 @@ function _default(seriesModel, r, viewWidth, viewHeight, sum) {
     var textAlign;
     cx = layout.cx;
     cy = layout.cy;
+    var text = seriesModel.getFormattedLabel(idx, 'normal') || data.getName(idx);
+    var textRect = textContain.getBoundingRect(text, font, textAlign, 'top');
     var isLabelInside = labelPosition === 'inside' || labelPosition === 'inner';
 
     if (labelPosition === 'center') {
@@ -224,15 +296,21 @@ function _default(seriesModel, r, viewWidth, viewHeight, sum) {
         var y2 = y1 + dy * (labelLineLen + r - layout.r);
         var x3 = x2 + (dx < 0 ? -1 : 1) * labelLineLen2;
         var y3 = y2;
-        textX = x3 + (dx < 0 ? -5 : 5);
+
+        if (labelAlignTo === 'edge') {
+          // Adjust textX because text align of edge is opposite
+          textX = dx < 0 ? viewLeft + labelMargin : viewLeft + viewWidth - labelMargin;
+        } else {
+          textX = x3 + (dx < 0 ? -labelDistance : labelDistance);
+        }
+
         textY = y3;
         linePoints = [[x1, y1], [x2, y2], [x3, y3]];
       }
 
-      textAlign = isLabelInside ? 'center' : dx > 0 ? 'left' : 'right';
+      textAlign = isLabelInside ? 'center' : labelAlignTo === 'edge' ? dx > 0 ? 'right' : 'left' : dx > 0 ? 'left' : 'right';
     }
 
-    var font = labelModel.getFont();
     var labelRotate;
     var rotate = labelModel.get('rotate');
 
@@ -242,8 +320,6 @@ function _default(seriesModel, r, viewWidth, viewHeight, sum) {
       labelRotate = rotate ? dx < 0 ? -midAngle + Math.PI : -midAngle : 0;
     }
 
-    var text = seriesModel.getFormattedLabel(idx, 'normal') || data.getName(idx);
-    var textRect = textContain.getBoundingRect(text, font, textAlign, 'top');
     hasLabelRotate = !!labelRotate;
     layout.label = {
       x: textX,
@@ -256,7 +332,14 @@ function _default(seriesModel, r, viewWidth, viewHeight, sum) {
       textAlign: textAlign,
       verticalAlign: 'middle',
       rotation: labelRotate,
-      inside: isLabelInside
+      inside: isLabelInside,
+      labelDistance: labelDistance,
+      labelAlignTo: labelAlignTo,
+      labelMargin: labelMargin,
+      bleedMargin: bleedMargin,
+      textRect: textRect,
+      text: text,
+      font: font
     }; // Not layout the inside label
 
     if (!isLabelInside) {
@@ -265,7 +348,7 @@ function _default(seriesModel, r, viewWidth, viewHeight, sum) {
   });
 
   if (!hasLabelRotate && seriesModel.get('avoidLabelOverlap')) {
-    avoidOverlap(labelLayoutList, cx, cy, r, viewWidth, viewHeight);
+    avoidOverlap(labelLayoutList, cx, cy, r, viewWidth, viewHeight, viewLeft, viewTop);
   }
 }
 

package/lib/chart/pie/pieLayout.js

@@ -23,6 +23,8 @@ var _number = require("../../util/number");
 var parsePercent = _number.parsePercent;
 var linearMap = _number.linearMap;
 
+var layout = require("../../util/layout");
+
 var labelLayout = require("./labelLayout");
 
 var zrUtil = require("zrender/lib/core/util");
@@ -48,10 +50,18 @@ var zrUtil = require("zrender/lib/core/util");
 var PI2 = Math.PI * 2;
 var RADIAN = Math.PI / 180;
 
+function getViewRect(seriesModel, api) {
+  return layout.getLayoutRect(seriesModel.getBoxLayoutParams(), {
+    width: api.getWidth(),
+    height: api.getHeight()
+  });
+}
+
 function _default(seriesType, ecModel, api, payload) {
   ecModel.eachSeriesByType(seriesType, function (seriesModel) {
     var data = seriesModel.getData();
     var valueDim = data.mapDimension('value');
+    var viewRect = getViewRect(seriesModel, api);
     var center = seriesModel.get('center');
     var radius = seriesModel.get('radius');
 
@@ -63,11 +73,11 @@ function _default(seriesType, ecModel, api, payload) {
       center = [center, center];
     }
 
-    var width = api.getWidth();
-    var height = api.getHeight();
+    var width = parsePercent(viewRect.width, api.getWidth());
+    var height = parsePercent(viewRect.height, api.getHeight());
     var size = Math.min(width, height);
-    var cx = parsePercent(center[0], width);
-    var cy = parsePercent(center[1], height);
+    var cx = parsePercent(center[0], width) + viewRect.x;
+    var cy = parsePercent(center[1], height) + viewRect.y;
     var r0 = parsePercent(radius[0], size / 2);
     var r = parsePercent(radius[1], size / 2);
     var startAngle = -seriesModel.get('startAngle') * RADIAN;
@@ -102,7 +112,8 @@ function _default(seriesType, ecModel, api, payload) {
           cx: cx,
           cy: cy,
           r0: r0,
-          r: roseType ? NaN : r
+          r: roseType ? NaN : r,
+          viewRect: viewRect
         });
         return;
       } // FIXME 兼容 2.0 但是 roseType 是 area 的时候才是这样？
@@ -130,7 +141,8 @@ function _default(seriesType, ecModel, api, payload) {
         cx: cx,
         cy: cy,
         r0: r0,
-        r: roseType ? linearMap(value, extent, [r0, r]) : r
+        r: roseType ? linearMap(value, extent, [r0, r]) : r,
+        viewRect: viewRect
       });
       currentAngle = endAngle;
     }); // Some sector is constrained by minAngle
@@ -164,7 +176,7 @@ function _default(seriesType, ecModel, api, payload) {
       }
     }
 
-    labelLayout(seriesModel, r, width, height);
+    labelLayout(seriesModel, r, viewRect.width, viewRect.height, viewRect.x, viewRect.y);
   });
 }
 

package/lib/chart/radar/RadarSeries.js

@@ -28,6 +28,8 @@ var _format = require("../../util/format");
 
 var encodeHTML = _format.encodeHTML;
 
+var LegendVisualProvider = require("../../visual/LegendVisualProvider");
+
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -54,9 +56,7 @@ var RadarSeries = SeriesModel.extend({
     RadarSeries.superApply(this, 'init', arguments); // Enable legend selection for each data item
     // Use a function instead of direct access because data reference may changed
 
-    this.legendDataProvider = function () {
-      return this.getRawData();
-    };
+    this.legendVisualProvider = new LegendVisualProvider(zrUtil.bind(this.getData, this), zrUtil.bind(this.getRawData, this));
   },
   getInitialData: function (option, ecModel) {
     return createListSimply(this, {

package/lib/chart/sankey/SankeyView.js

@@ -269,6 +269,8 @@ var _default = echarts.extendChartView({
       if (itemModel.get('focusNodeAdjacency')) {
         el.off('mouseover').on('mouseover', function () {
           if (!sankeyView._focusAdjacencyDisabled) {
+            sankeyView._clearTimer();
+
             api.dispatchAction({
               type: 'focusNodeAdjacency',
               seriesId: seriesModel.id,
@@ -278,10 +280,7 @@ var _default = echarts.extendChartView({
         });
         el.off('mouseout').on('mouseout', function () {
           if (!sankeyView._focusAdjacencyDisabled) {
-            api.dispatchAction({
-              type: 'unfocusNodeAdjacency',
-              seriesId: seriesModel.id
-            });
+            sankeyView._dispatchUnfocus(api);
           }
         });
       }
@@ -292,6 +291,8 @@ var _default = echarts.extendChartView({
       if (edgeModel.get('focusNodeAdjacency')) {
         el.off('mouseover').on('mouseover', function () {
           if (!sankeyView._focusAdjacencyDisabled) {
+            sankeyView._clearTimer();
+
             api.dispatchAction({
               type: 'focusNodeAdjacency',
               seriesId: seriesModel.id,
@@ -301,10 +302,7 @@ var _default = echarts.extendChartView({
         });
         el.off('mouseout').on('mouseout', function () {
           if (!sankeyView._focusAdjacencyDisabled) {
-            api.dispatchAction({
-              type: 'unfocusNodeAdjacency',
-              seriesId: seriesModel.id
-            });
+            sankeyView._dispatchUnfocus(api);
           }
         });
       }
@@ -318,7 +316,28 @@ var _default = echarts.extendChartView({
 
     this._data = seriesModel.getData();
   },
-  dispose: function () {},
+  dispose: function () {
+    this._clearTimer();
+  },
+  _dispatchUnfocus: function (api) {
+    var self = this;
+
+    this._clearTimer();
+
+    this._unfocusDelayTimer = setTimeout(function () {
+      self._unfocusDelayTimer = null;
+      api.dispatchAction({
+        type: 'unfocusNodeAdjacency',
+        seriesId: self._model.id
+      });
+    }, 500);
+  },
+  _clearTimer: function () {
+    if (this._unfocusDelayTimer) {
+      clearTimeout(this._unfocusDelayTimer);
+      this._unfocusDelayTimer = null;
+    }
+  },
   focusNodeAdjacency: function (seriesModel, ecModel, api, payload) {
     var data = this._model.getData();
 

package/lib/chart/scatter/ScatterSeries.js

@@ -44,7 +44,9 @@ var _default = SeriesModel.extend({
   type: 'series.scatter',
   dependencies: ['grid', 'polar', 'geo', 'singleAxis', 'calendar'],
   getInitialData: function (option, ecModel) {
-    return createListFromArray(this.getSource(), this);
+    return createListFromArray(this.getSource(), this, {
+      useEncodeDefaulter: true
+    });
   },
   brushSelector: 'point',
   getProgressive: function () {

package/lib/chart/themeRiver/ThemeRiverSeries.js

@@ -38,6 +38,8 @@ var _format = require("../../util/format");
 
 var encodeHTML = _format.encodeHTML;
 
+var LegendVisualProvider = require("../../visual/LegendVisualProvider");
+
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -76,9 +78,7 @@ var ThemeRiverSeries = SeriesModel.extend({
     // Enable legend selection for each data item
     // Use a function instead of direct access because data reference may changed
 
-    this.legendDataProvider = function () {
-      return this.getRawData();
-    };
+    this.legendVisualProvider = new LegendVisualProvider(zrUtil.bind(this.getData, this), zrUtil.bind(this.getRawData, this));
   },
 
   /**

package/lib/chart/tree/TreeSeries.js

@@ -65,7 +65,21 @@ var _default = SeriesModel.extend({
     var leaves = option.leaves || {};
     var treeOption = {};
     treeOption.leaves = leaves;
-    var tree = Tree.createTree(root, this, treeOption);
+    var tree = Tree.createTree(root, this, treeOption, beforeLink);
+
+    function beforeLink(nodeData) {
+      nodeData.wrapMethod('getItemModel', function (model, idx) {
+        var node = tree.getNodeByDataIndex(idx);
+        var leavesModel = node.getLeavesModel();
+
+        if (!node.children.length || !node.isExpand) {
+          model.parentModel = leavesModel;
+        }
+
+        return model;
+      });
+    }
+
     var treeDepth = 0;
     tree.eachNode('preorder', function (node) {
       if (node.depth > treeDepth) {

package/lib/chart/tree/TreeView.js

@@ -377,9 +377,11 @@ function updateNode(data, dataIndex, symbolEl, group, seriesModel, seriesScope)
     }
 
     var textPosition = isLeft ? 'left' : 'right';
+    var rotate = seriesScope.labelModel.get('rotate');
+    var labelRotateRadian = rotate * (Math.PI / 180);
     symbolPath.setStyle({
-      textPosition: textPosition,
-      textRotation: -rad,
+      textPosition: seriesScope.labelModel.get('position') || textPosition,
+      textRotation: rotate == null ? -rad : labelRotateRadian,
       textOrigin: 'center',
       verticalAlign: 'middle'
     });

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,26 +107,46 @@ var _default = AxisView.extend({
   /**
    * @private
    */
-  _axisLine: function (angleAxisModel, polar, ticksAngles, radiusExtent) {
-    var lineStyleModel = angleAxisModel.getModel('axisLine.lineStyle');
-    var circle = new graphic.Circle({
-      shape: {
-        cx: polar.cx,
-        cy: polar.cy,
-        r: radiusExtent[getRadiusIdx(polar)]
-      },
-      style: lineStyleModel.getLineStyle(),
-      z2: 1,
-      silent: true
-    });
-    circle.style.fill = null;
-    this.group.add(circle);
+  _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);
+    var r0Id = rId ? 0 : 1;
+    var shape;
+
+    if (radiusExtent[r0Id] === 0) {
+      shape = new graphic.Circle({
+        shape: {
+          cx: polar.cx,
+          cy: polar.cy,
+          r: radiusExtent[rId]
+        },
+        style: lineStyleModel.getLineStyle(),
+        z2: 1,
+        silent: true
+      });
+    } else {
+      shape = new graphic.Ring({
+        shape: {
+          cx: polar.cx,
+          cy: polar.cy,
+          r: radiusExtent[rId],
+          r0: radiusExtent[r0Id]
+        },
+        style: lineStyleModel.getLineStyle(),
+        z2: 1,
+        silent: true
+      });
+    }
+
+    shape.style.fill = null;
+    this.group.add(shape);
   },
 
   /**
    * @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)];
@@ -144,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');
@@ -188,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');
@@ -220,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;
     }