echarts 4.6.0 → 4.7.0

package/lib/chart/sankey/SankeyView.js

@@ -43,7 +43,9 @@ var zrUtil = require("zrender/lib/core/util");
 * under the License.
 */
 var nodeOpacityPath = ['itemStyle', 'opacity'];
+var hoverNodeOpacityPath = ['emphasis', 'itemStyle', 'opacity'];
 var lineOpacityPath = ['lineStyle', 'opacity'];
+var hoverLineOpacityPath = ['emphasis', 'lineStyle', 'opacity'];
 
 function getItemOpacity(item, opacityPath) {
   return item.getVisual('opacity') || item.getModel().get(opacityPath);
@@ -69,12 +71,13 @@ function fadeOutItem(item, opacityPath, opacityRatio) {
 function fadeInItem(item, opacityPath) {
   var opacity = getItemOpacity(item, opacityPath);
   var el = item.getGraphicEl();
-  el.highlight && el.highlight();
   el.traverse(function (child) {
     if (child.type !== 'group') {
       child.setStyle('opacity', opacity);
     }
-  });
+  }); // Support emphasis here.
+
+  el.highlight && el.highlight();
 }
 
 var SankeyShape = graphic.extendShape({
@@ -104,6 +107,12 @@ var SankeyShape = graphic.extendShape({
     }
 
     ctx.closePath();
+  },
+  highlight: function () {
+    this.trigger('emphasis');
+  },
+  downplay: function () {
+    this.trigger('normal');
   }
 });
 
@@ -266,8 +275,19 @@ var _default = echarts.extendChartView({
         el.cursor = 'move';
       }
 
+      el.highlight = function () {
+        this.trigger('emphasis');
+      };
+
+      el.downplay = function () {
+        this.trigger('normal');
+      };
+
+      el.focusNodeAdjHandler && el.off('mouseover', el.focusNodeAdjHandler);
+      el.unfocusNodeAdjHandler && el.off('mouseout', el.unfocusNodeAdjHandler);
+
       if (itemModel.get('focusNodeAdjacency')) {
-        el.off('mouseover').on('mouseover', function () {
+        el.on('mouseover', el.focusNodeAdjHandler = function () {
           if (!sankeyView._focusAdjacencyDisabled) {
             sankeyView._clearTimer();
 
@@ -278,7 +298,7 @@ var _default = echarts.extendChartView({
             });
           }
         });
-        el.off('mouseout').on('mouseout', function () {
+        el.on('mouseout', el.unfocusNodeAdjHandler = function () {
           if (!sankeyView._focusAdjacencyDisabled) {
             sankeyView._dispatchUnfocus(api);
           }
@@ -287,9 +307,11 @@ var _default = echarts.extendChartView({
     });
     edgeData.eachItemGraphicEl(function (el, dataIndex) {
       var edgeModel = edgeData.getItemModel(dataIndex);
+      el.focusNodeAdjHandler && el.off('mouseover', el.focusNodeAdjHandler);
+      el.unfocusNodeAdjHandler && el.off('mouseout', el.unfocusNodeAdjHandler);
 
       if (edgeModel.get('focusNodeAdjacency')) {
-        el.off('mouseover').on('mouseover', function () {
+        el.on('mouseover', el.focusNodeAdjHandler = function () {
           if (!sankeyView._focusAdjacencyDisabled) {
             sankeyView._clearTimer();
 
@@ -300,7 +322,7 @@ var _default = echarts.extendChartView({
             });
           }
         });
-        el.off('mouseout').on('mouseout', function () {
+        el.on('mouseout', el.unfocusNodeAdjHandler = function () {
           if (!sankeyView._focusAdjacencyDisabled) {
             sankeyView._dispatchUnfocus(api);
           }
@@ -339,8 +361,7 @@ var _default = echarts.extendChartView({
     }
   },
   focusNodeAdjacency: function (seriesModel, ecModel, api, payload) {
-    var data = this._model.getData();
-
+    var data = seriesModel.getData();
     var graph = data.graph;
     var dataIndex = payload.dataIndex;
     var itemModel = data.getItemModel(dataIndex);
@@ -360,7 +381,7 @@ var _default = echarts.extendChartView({
     });
 
     if (node) {
-      fadeInItem(node, nodeOpacityPath);
+      fadeInItem(node, hoverNodeOpacityPath);
       var focusNodeAdj = itemModel.get('focusNodeAdjacency');
 
       if (focusNodeAdj === 'outEdges') {
@@ -369,8 +390,8 @@ var _default = echarts.extendChartView({
             return;
           }
 
-          fadeInItem(edge, lineOpacityPath);
-          fadeInItem(edge.node2, nodeOpacityPath);
+          fadeInItem(edge, hoverLineOpacityPath);
+          fadeInItem(edge.node2, hoverNodeOpacityPath);
         });
       } else if (focusNodeAdj === 'inEdges') {
         zrUtil.each(node.inEdges, function (edge) {
@@ -378,8 +399,8 @@ var _default = echarts.extendChartView({
             return;
           }
 
-          fadeInItem(edge, lineOpacityPath);
-          fadeInItem(edge.node1, nodeOpacityPath);
+          fadeInItem(edge, hoverLineOpacityPath);
+          fadeInItem(edge.node1, hoverNodeOpacityPath);
         });
       } else if (focusNodeAdj === 'allEdges') {
         zrUtil.each(node.edges, function (edge) {
@@ -387,22 +408,21 @@ var _default = echarts.extendChartView({
             return;
           }
 
-          fadeInItem(edge, lineOpacityPath);
-          fadeInItem(edge.node1, nodeOpacityPath);
-          fadeInItem(edge.node2, nodeOpacityPath);
+          fadeInItem(edge, hoverLineOpacityPath);
+          edge.node1 !== node && fadeInItem(edge.node1, hoverNodeOpacityPath);
+          edge.node2 !== node && fadeInItem(edge.node2, hoverNodeOpacityPath);
         });
       }
     }
 
     if (edge) {
-      fadeInItem(edge, lineOpacityPath);
-      fadeInItem(edge.node1, nodeOpacityPath);
-      fadeInItem(edge.node2, nodeOpacityPath);
+      fadeInItem(edge, hoverLineOpacityPath);
+      fadeInItem(edge.node1, hoverNodeOpacityPath);
+      fadeInItem(edge.node2, hoverNodeOpacityPath);
     }
   },
   unfocusNodeAdjacency: function (seriesModel, ecModel, api, payload) {
-    var graph = this._model.getGraph();
-
+    var graph = seriesModel.getGraph();
     graph.eachNode(function (node) {
       fadeOutItem(node, nodeOpacityPath);
     });
@@ -424,8 +444,7 @@ function createGridClipShape(rect, seriesModel, cb) {
   });
   graphic.initProps(rectEl, {
     shape: {
-      width: rect.width + 20,
-      height: rect.height + 20
+      width: rect.width + 20
     }
   }, seriesModel, cb);
   return rectEl;

package/lib/chart/sankey/sankeyLayout.js

@@ -97,7 +97,8 @@ function computeNodeValues(nodes) {
   zrUtil.each(nodes, function (node) {
     var value1 = sum(node.outEdges, getEdgeValue);
     var value2 = sum(node.inEdges, getEdgeValue);
-    var value = Math.max(value1, value2);
+    var nodeRawValue = node.getValue() || 0;
+    var value = Math.max(value1, value2, nodeRawValue);
     node.setLayout({
       value: value
     }, true);
@@ -488,13 +489,13 @@ function getEdgeValue(edge) {
   return edge.getValue();
 }
 
-function sum(array, f, orient) {
+function sum(array, cb, orient) {
   var sum = 0;
   var len = array.length;
   var i = -1;
 
   while (++i < len) {
-    var value = +f.call(array, array[i], orient);
+    var value = +cb.call(array, array[i], orient);
 
     if (!isNaN(value)) {
       sum += value;

package/lib/chart/tree/TreeSeries.js

@@ -147,6 +147,9 @@ var _default = SeriesModel.extend({
     bottom: '12%',
     // the layout of the tree, two value can be selected, 'orthogonal' or 'radial'
     layout: 'orthogonal',
+    // value can be 'polyline'
+    edgeShape: 'curve',
+    edgeForkPosition: '50%',
     // true | false | 'move' | 'scale', see module:component/helper/RoamController.
     roam: false,
     // Symbol size scale ratio in roam

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);
+}
 
-    if (!edge) {
-      edge = symbolEl.__edge = new graphic.BezierCurve({
-        shape: getEdgeShape(seriesScope, sourceOldLayout, sourceOldLayout),
-        style: zrUtil.defaults({
-          opacity: 0,
-          strokeNoScale: true
-        }, seriesScope.lineStyle)
-      });
+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)
+        });
+      }
+
+      graphic.updateProps(edge, {
+        shape: getEdgeShape(seriesScope, sourceLayout, targetLayout),
+        style: {
+          opacity: 1
+        }
+      }, 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: {
+            opacity: 1
+          }
+        }, 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/TreemapView.js

@@ -673,6 +673,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 +710,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.
 
-  if (!isParent) {
+  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.
+
+      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 +757,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 +786,9 @@ function renderNode(seriesModel, thisStorage, oldStorage, reRoot, lastsForAnimat
         }
 
       bg.setStyle(normalStyle);
-      graphic.setHoverStyle(bg, emphasisStyle);
-    });
+      graphic.setElementHoverStyle(bg, emphasisStyle);
+    }
+
     group.add(bg);
   }
 
@@ -771,37 +805,33 @@ 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) {

package/lib/component/axis/AxisBuilder.js

@@ -24,7 +24,6 @@ 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");
 

package/lib/component/axis/CartesianAxisView.js

@@ -28,6 +28,11 @@ var AxisView = require("./AxisView");
 
 var cartesianAxisHelper = require("../../coord/cartesian/cartesianAxisHelper");
 
+var _axisSplitHelper = require("./axisSplitHelper");
+
+var rectCoordAxisBuildSplitArea = _axisSplitHelper.rectCoordAxisBuildSplitArea;
+var rectCoordAxisHandleRemove = _axisSplitHelper.rectCoordAxisHandleRemove;
+
 /*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
@@ -81,7 +86,7 @@ var CartesianAxisView = AxisView.extend({
     CartesianAxisView.superCall(this, 'render', axisModel, ecModel, api, payload);
   },
   remove: function () {
-    this._splitAreaColors = null;
+    rectCoordAxisHandleRemove(this);
   },
 
   /**
@@ -204,89 +209,7 @@ var CartesianAxisView = AxisView.extend({
    * @private
    */
   _splitArea: function (axisModel, gridModel) {
-    var axis = axisModel.axis;
-
-    if (axis.scale.isBlank()) {
-      return;
-    }
-
-    var splitAreaModel = axisModel.getModel('splitArea');
-    var areaStyleModel = splitAreaModel.getModel('areaStyle');
-    var areaColors = areaStyleModel.get('color');
-    var gridRect = gridModel.coordinateSystem.getRect();
-    var ticksCoords = axis.getTicksCoords({
-      tickModel: splitAreaModel,
-      clamp: true
-    });
-
-    if (!ticksCoords.length) {
-      return;
-    } // For Making appropriate splitArea animation, the color and anid
-    // should be corresponding to previous one if possible.
-
-
-    var areaColorsLen = areaColors.length;
-    var lastSplitAreaColors = this._splitAreaColors;
-    var newSplitAreaColors = zrUtil.createHashMap();
-    var colorIndex = 0;
-
-    if (lastSplitAreaColors) {
-      for (var i = 0; i < ticksCoords.length; i++) {
-        var cIndex = lastSplitAreaColors.get(ticksCoords[i].tickValue);
-
-        if (cIndex != null) {
-          colorIndex = (cIndex + (areaColorsLen - 1) * i) % areaColorsLen;
-          break;
-        }
-      }
-    }
-
-    var prev = axis.toGlobalCoord(ticksCoords[0].coord);
-    var areaStyle = areaStyleModel.getAreaStyle();
-    areaColors = zrUtil.isArray(areaColors) ? areaColors : [areaColors];
-
-    for (var i = 1; i < ticksCoords.length; i++) {
-      var tickCoord = axis.toGlobalCoord(ticksCoords[i].coord);
-      var x;
-      var y;
-      var width;
-      var height;
-
-      if (axis.isHorizontal()) {
-        x = prev;
-        y = gridRect.y;
-        width = tickCoord - x;
-        height = gridRect.height;
-        prev = x + width;
-      } else {
-        x = gridRect.x;
-        y = prev;
-        width = gridRect.width;
-        height = tickCoord - y;
-        prev = y + height;
-      }
-
-      var tickValue = ticksCoords[i - 1].tickValue;
-      tickValue != null && newSplitAreaColors.set(tickValue, colorIndex);
-
-      this._axisGroup.add(new graphic.Rect({
-        anid: tickValue != null ? 'area_' + tickValue : null,
-        shape: {
-          x: x,
-          y: y,
-          width: width,
-          height: height
-        },
-        style: zrUtil.defaults({
-          fill: areaColors[colorIndex]
-        }, areaStyle),
-        silent: true
-      }));
-
-      colorIndex = (colorIndex + 1) % areaColorsLen;
-    }
-
-    this._splitAreaColors = newSplitAreaColors;
+    rectCoordAxisBuildSplitArea(this, this._axisGroup, axisModel, gridModel);
   }
 });
 CartesianAxisView.extend({