echarts 4.0.1 → 4.1.0

package/lib/component/axis/AngleAxisView.js

@@ -6,6 +6,24 @@ var Model = require("../../model/Model");
 
 var AxisView = require("./AxisView");
 
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
 var elementList = ['axisLine', 'axisLabel', 'axisTick', 'splitLine', 'splitArea'];
 
 function getAxisLineShape(polar, rExtent, angle) {
@@ -23,6 +41,16 @@ function getAxisLineShape(polar, rExtent, angle) {
 function getRadiusIdx(polar) {
   var radiusAxis = polar.getRadiusAxis();
   return radiusAxis.inverse ? 0 : 1;
+} // Remove the last tick which will overlap the first tick
+
+
+function fixAngleOverlap(list) {
+  var firstItem = list[0];
+  var lastItem = list[list.length - 1];
+
+  if (firstItem && lastItem && Math.abs(Math.abs(firstItem.coord - lastItem.coord) - 360) < 1e-4) {
+    list.pop();
+  }
 }
 
 var _default = AxisView.extend({
@@ -39,15 +67,16 @@ var _default = AxisView.extend({
     var polar = angleAxis.polar;
     var radiusExtent = polar.getRadiusAxis().getExtent();
     var ticksAngles = angleAxis.getTicksCoords();
-
-    if (angleAxis.type !== 'category') {
-      // Remove the last tick which will overlap the first tick
-      ticksAngles.pop();
-    }
-
+    var labels = zrUtil.map(angleAxis.getViewLabels(), function (labelItem) {
+      var labelItem = zrUtil.clone(labelItem);
+      labelItem.coord = angleAxis.dataToCoord(labelItem.tickValue);
+      return labelItem;
+    });
+    fixAngleOverlap(labels);
+    fixAngleOverlap(ticksAngles);
     zrUtil.each(elementList, function (name) {
       if (angleAxisModel.get(name + '.show') && (!angleAxis.scale.isBlank() || name === 'axisLine')) {
-        this['_' + name](angleAxisModel, polar, ticksAngles, radiusExtent);
+        this['_' + name](angleAxisModel, polar, ticksAngles, radiusExtent, labels);
       }
     }, this);
   },
@@ -78,9 +107,9 @@ var _default = AxisView.extend({
     var tickModel = angleAxisModel.getModel('axisTick');
     var tickLen = (tickModel.get('inside') ? -1 : 1) * tickModel.get('length');
     var radius = radiusExtent[getRadiusIdx(polar)];
-    var lines = zrUtil.map(ticksAngles, function (tickAngle) {
+    var lines = zrUtil.map(ticksAngles, function (tickAngleItem) {
       return new graphic.Line({
-        shape: getAxisLineShape(polar, [radius, radius + tickLen], tickAngle)
+        shape: getAxisLineShape(polar, [radius, radius + tickLen], tickAngleItem.coord)
       });
     });
     this.group.add(graphic.mergePath(lines, {
@@ -93,24 +122,23 @@ var _default = AxisView.extend({
   /**
    * @private
    */
-  _axisLabel: function (angleAxisModel, polar, ticksAngles, radiusExtent) {
-    var axis = angleAxisModel.axis;
-    var categoryData = angleAxisModel.getCategories();
-    var labelModel = angleAxisModel.getModel('axisLabel');
-    var labels = angleAxisModel.getFormattedLabels();
-    var labelMargin = labelModel.get('margin');
-    var labelsAngles = axis.getLabelsCoords(); // Use length of ticksAngles because it may remove the last tick to avoid overlapping
-
-    for (var i = 0; i < ticksAngles.length; i++) {
+  _axisLabel: function (angleAxisModel, polar, ticksAngles, radiusExtent, labels) {
+    var rawCategoryData = angleAxisModel.getCategories(true);
+    var commonLabelModel = angleAxisModel.getModel('axisLabel');
+    var labelMargin = commonLabelModel.get('margin'); // Use length of ticksAngles because it may remove the last tick to avoid overlapping
+
+    zrUtil.each(labels, function (labelItem, idx) {
+      var labelModel = commonLabelModel;
+      var tickValue = labelItem.tickValue;
       var r = radiusExtent[getRadiusIdx(polar)];
-      var p = polar.coordToPoint([r + labelMargin, labelsAngles[i]]);
+      var p = polar.coordToPoint([r + labelMargin, labelItem.coord]);
       var cx = polar.cx;
       var cy = polar.cy;
       var labelTextAlign = Math.abs(p[0] - cx) / r < 0.3 ? 'center' : p[0] > cx ? 'left' : 'right';
       var labelTextVerticalAlign = Math.abs(p[1] - cy) / r < 0.3 ? 'middle' : p[1] > cy ? 'top' : 'bottom';
 
-      if (categoryData && categoryData[i] && categoryData[i].textStyle) {
-        labelModel = new Model(categoryData[i].textStyle, labelModel, labelModel.ecModel);
+      if (rawCategoryData && rawCategoryData[tickValue] && rawCategoryData[tickValue].textStyle) {
+        labelModel = new Model(rawCategoryData[tickValue].textStyle, commonLabelModel, commonLabelModel.ecModel);
       }
 
       var textEl = new graphic.Text({
@@ -121,11 +149,11 @@ var _default = AxisView.extend({
         x: p[0],
         y: p[1],
         textFill: labelModel.getTextColor() || angleAxisModel.get('axisLine.lineStyle.color'),
-        text: labels[i],
+        text: labelItem.formattedLabel,
         textAlign: labelTextAlign,
         textVerticalAlign: labelTextVerticalAlign
       });
-    }
+    }, this);
   },
 
   /**
@@ -143,7 +171,7 @@ var _default = AxisView.extend({
       var colorIndex = lineCount++ % lineColors.length;
       splitLines[colorIndex] = splitLines[colorIndex] || [];
       splitLines[colorIndex].push(new graphic.Line({
-        shape: getAxisLineShape(polar, radiusExtent, ticksAngles[i])
+        shape: getAxisLineShape(polar, radiusExtent, ticksAngles[i].coord)
       }));
     } // Simple optimization
     // Batching the lines if color are the same
@@ -164,6 +192,10 @@ var _default = AxisView.extend({
    * @private
    */
   _splitArea: function (angleAxisModel, polar, ticksAngles, radiusExtent) {
+    if (!ticksAngles.length) {
+      return;
+    }
+
     var splitAreaModel = angleAxisModel.getModel('splitArea');
     var areaStyleModel = splitAreaModel.getModel('areaStyle');
     var areaColors = areaStyleModel.get('color');
@@ -171,7 +203,7 @@ var _default = AxisView.extend({
     areaColors = areaColors instanceof Array ? areaColors : [areaColors];
     var splitAreas = [];
     var RADIAN = Math.PI / 180;
-    var prevAngle = -ticksAngles[0] * RADIAN;
+    var prevAngle = -ticksAngles[0].coord * RADIAN;
     var r0 = Math.min(radiusExtent[0], radiusExtent[1]);
     var r1 = Math.max(radiusExtent[0], radiusExtent[1]);
     var clockwise = angleAxisModel.get('clockwise');
@@ -186,12 +218,12 @@ var _default = AxisView.extend({
           r0: r0,
           r: r1,
           startAngle: prevAngle,
-          endAngle: -ticksAngles[i] * RADIAN,
+          endAngle: -ticksAngles[i].coord * RADIAN,
           clockwise: clockwise
         },
         silent: true
       }));
-      prevAngle = -ticksAngles[i] * RADIAN;
+      prevAngle = -ticksAngles[i].coord * RADIAN;
     } // Simple optimization
     // Batching the lines if color are the same
 

package/lib/component/axis/AxisBuilder.js

@@ -25,6 +25,25 @@ var matrixUtil = require("zrender/lib/core/matrix");
 var _vector = require("zrender/lib/core/vector");
 
 var v2ApplyTransform = _vector.applyTransform;
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
 var PI = Math.PI;
 
 function makeAxisEventDataBase(axisModel) {
@@ -69,8 +88,6 @@ function makeAxisEventDataBase(axisModel) {
  * @param {string} [opt.axisName] default get from axisModel.
  * @param {number} [opt.axisNameAvailableWidth]
  * @param {number} [opt.labelRotate] by degree, default get from axisModel.
- * @param {number} [opt.labelInterval] Default label interval when label
- *                                     interval from model is null or 'auto'.
  * @param {number} [opt.strokeContainThreshold] Default label interval when label
  * @param {number} [opt.nameTruncateMaxWidth]
  */
@@ -164,6 +181,11 @@ var builders = {
     })));
     var arrows = axisModel.get('axisLine.symbol');
     var arrowSize = axisModel.get('axisLine.symbolSize');
+    var arrowOffset = axisModel.get('axisLine.symbolOffset') || 0;
+
+    if (typeof arrowOffset === 'number') {
+      arrowOffset = [arrowOffset, arrowOffset];
+    }
 
     if (arrows != null) {
       if (typeof arrows === 'string') {
@@ -178,12 +200,23 @@ var builders = {
 
       var symbolWidth = arrowSize[0];
       var symbolHeight = arrowSize[1];
-      each([[opt.rotation + Math.PI / 2, pt1], [opt.rotation - Math.PI / 2, pt2]], function (item, index) {
+      each([{
+        rotate: opt.rotation + Math.PI / 2,
+        offset: arrowOffset[0],
+        r: 0
+      }, {
+        rotate: opt.rotation - Math.PI / 2,
+        offset: arrowOffset[1],
+        r: Math.sqrt((pt1[0] - pt2[0]) * (pt1[0] - pt2[0]) + (pt1[1] - pt2[1]) * (pt1[1] - pt2[1]))
+      }], function (point, index) {
         if (arrows[index] !== 'none' && arrows[index] != null) {
-          var symbol = createSymbol(arrows[index], -symbolWidth / 2, -symbolHeight / 2, symbolWidth, symbolHeight, lineStyle.stroke, true);
+          var symbol = createSymbol(arrows[index], -symbolWidth / 2, -symbolHeight / 2, symbolWidth, symbolHeight, lineStyle.stroke, true); // Calculate arrow position with offset
+
+          var r = point.r + point.offset;
+          var pos = [pt1[0] + r * Math.cos(opt.rotation), pt1[1] - r * Math.sin(opt.rotation)];
           symbol.attr({
-            rotation: item[0],
-            position: item[1],
+            rotation: point.rotate,
+            position: pos,
             silent: true
           });
           this.group.add(symbol);
@@ -454,36 +487,6 @@ function isTwoLabelOverlapped(current, next, labelLayout) {
 function isNameLocationCenter(nameLocation) {
   return nameLocation === 'middle' || nameLocation === 'center';
 }
-/**
- * @static
- */
-
-
-var ifIgnoreOnTick = AxisBuilder.ifIgnoreOnTick = function (axis, i, interval, ticksCnt, showMinLabel, showMaxLabel) {
-  if (i === 0 && showMinLabel || i === ticksCnt - 1 && showMaxLabel) {
-    return false;
-  } // FIXME
-  // Have not consider label overlap (if label is too long) yet.
-
-
-  var rawTick;
-  var scale = axis.scale;
-  return scale.type === 'ordinal' && (typeof interval === 'function' ? (rawTick = scale.getTicks()[i], !interval(rawTick, scale.getLabel(rawTick))) : i % (interval + 1));
-};
-/**
- * @static
- */
-
-
-var getInterval = AxisBuilder.getInterval = function (model, labelInterval) {
-  var interval = model.get('interval');
-
-  if (interval == null || interval == 'auto') {
-    interval = labelInterval;
-  }
-
-  return interval;
-};
 
 function buildAxisTick(axisBuilder, axisModel, opt) {
   var axis = axisModel.axis;
@@ -495,26 +498,14 @@ function buildAxisTick(axisBuilder, axisModel, opt) {
   var tickModel = axisModel.getModel('axisTick');
   var lineStyleModel = tickModel.getModel('lineStyle');
   var tickLen = tickModel.get('length');
-  var tickInterval = getInterval(tickModel, opt.labelInterval);
-  var ticksCoords = axis.getTicksCoords(tickModel.get('alignWithLabel')); // FIXME
-  // Corresponds to ticksCoords ?
-
-  var ticks = axis.scale.getTicks();
-  var showMinLabel = axisModel.get('axisLabel.showMinLabel');
-  var showMaxLabel = axisModel.get('axisLabel.showMaxLabel');
+  var ticksCoords = axis.getTicksCoords();
   var pt1 = [];
   var pt2 = [];
   var matrix = axisBuilder._transform;
   var tickEls = [];
-  var ticksCnt = ticksCoords.length;
-
-  for (var i = 0; i < ticksCnt; i++) {
-    // Only ordinal scale support tick interval
-    if (ifIgnoreOnTick(axis, i, tickInterval, ticksCnt, showMinLabel, showMaxLabel)) {
-      continue;
-    }
 
-    var tickCoord = ticksCoords[i];
+  for (var i = 0; i < ticksCoords.length; i++) {
+    var tickCoord = ticksCoords[i].coord;
     pt1[0] = tickCoord;
     pt1[1] = 0;
     pt2[0] = tickCoord;
@@ -528,7 +519,7 @@ function buildAxisTick(axisBuilder, axisModel, opt) {
 
     var tickEl = new graphic.Line(graphic.subPixelOptimizeLine({
       // Id for animation
-      anid: 'tick_' + ticks[i],
+      anid: 'tick_' + ticksCoords[i].tickValue,
       shape: {
         x1: pt1[0],
         y1: pt1[1],
@@ -558,58 +549,53 @@ function buildAxisLabel(axisBuilder, axisModel, opt) {
 
   var labelModel = axisModel.getModel('axisLabel');
   var labelMargin = labelModel.get('margin');
-  var ticks = axis.scale.getTicks();
-  var labels = axisModel.getFormattedLabels(); // Special label rotate.
+  var labels = axis.getViewLabels(); // Special label rotate.
 
   var labelRotation = (retrieve(opt.labelRotate, labelModel.get('rotate')) || 0) * PI / 180;
   var labelLayout = innerTextLayout(opt.rotation, labelRotation, opt.labelDirection);
-  var categoryData = axisModel.getCategories();
+  var rawCategoryData = axisModel.getCategories(true);
   var labelEls = [];
   var silent = isSilent(axisModel);
   var triggerEvent = axisModel.get('triggerEvent');
-  var showMinLabel = axisModel.get('axisLabel.showMinLabel');
-  var showMaxLabel = axisModel.get('axisLabel.showMaxLabel');
-  each(ticks, function (tickVal, index) {
-    if (ifIgnoreOnTick(axis, index, opt.labelInterval, ticks.length, showMinLabel, showMaxLabel)) {
-      return;
-    }
-
+  each(labels, function (labelItem, index) {
+    var tickValue = labelItem.tickValue;
+    var formattedLabel = labelItem.formattedLabel;
+    var rawLabel = labelItem.rawLabel;
     var itemLabelModel = labelModel;
 
-    if (categoryData && categoryData[tickVal] && categoryData[tickVal].textStyle) {
-      itemLabelModel = new Model(categoryData[tickVal].textStyle, labelModel, axisModel.ecModel);
+    if (rawCategoryData && rawCategoryData[tickValue] && rawCategoryData[tickValue].textStyle) {
+      itemLabelModel = new Model(rawCategoryData[tickValue].textStyle, labelModel, axisModel.ecModel);
     }
 
     var textColor = itemLabelModel.getTextColor() || axisModel.get('axisLine.lineStyle.color');
-    var tickCoord = axis.dataToCoord(tickVal);
+    var tickCoord = axis.dataToCoord(tickValue);
     var pos = [tickCoord, opt.labelOffset + opt.labelDirection * labelMargin];
-    var labelStr = axis.scale.getLabel(tickVal);
     var textEl = new graphic.Text({
       // Id for animation
-      anid: 'label_' + tickVal,
+      anid: 'label_' + tickValue,
       position: pos,
       rotation: labelLayout.rotation,
       silent: silent,
       z2: 10
     });
     graphic.setTextStyle(textEl.style, itemLabelModel, {
-      text: labels[index],
+      text: formattedLabel,
       textAlign: itemLabelModel.getShallow('align', true) || labelLayout.textAlign,
       textVerticalAlign: itemLabelModel.getShallow('verticalAlign', true) || itemLabelModel.getShallow('baseline', true) || labelLayout.textVerticalAlign,
       textFill: typeof textColor === 'function' ? textColor( // (1) In category axis with data zoom, tick is not the original
       // index of axis.data. So tick should not be exposed to user
       // in category axis.
-      // (2) Compatible with previous version, which always returns labelStr.
-      // But in interval scale labelStr is like '223,445', which maked
-      // user repalce ','. So we modify it to return original val but remain
+      // (2) Compatible with previous version, which always use formatted label as
+      // input. But in interval scale the formatted label is like '223,445', which
+      // maked user repalce ','. So we modify it to return original val but remain
       // it as 'string' to avoid error in replacing.
-      axis.type === 'category' ? labelStr : axis.type === 'value' ? tickVal + '' : tickVal, index) : textColor
+      axis.type === 'category' ? rawLabel : axis.type === 'value' ? tickValue + '' : tickValue, index) : textColor
     }); // Pack data for mouse event
 
     if (triggerEvent) {
       textEl.eventData = makeAxisEventDataBase(axisModel);
       textEl.eventData.targetType = 'axisLabel';
-      textEl.eventData.value = labelStr;
+      textEl.eventData.value = rawLabel;
     } // FIXME
 
 

package/lib/component/axis/AxisView.js

@@ -6,6 +6,25 @@ var echarts = require("../../echarts");
 
 var axisPointerModelHelper = require("../axisPointer/modelHelper");
 
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
 /**
  * Base class of AxisView.
  */

package/lib/component/axis/CartesianAxisView.js

@@ -6,10 +6,26 @@ var AxisBuilder = require("./AxisBuilder");
 
 var AxisView = require("./AxisView");
 
-var cartesianAxisHelper = require("./cartesianAxisHelper");
-
-var ifIgnoreOnTick = AxisBuilder.ifIgnoreOnTick;
-var getInterval = AxisBuilder.getInterval;
+var cartesianAxisHelper = require("../../coord/cartesian/cartesianAxisHelper");
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
 var axisBuilderAttrs = ['axisLine', 'axisTickLabel', 'axisName'];
 var selfBuilderAttrs = ['splitArea', 'splitLine']; // function getAlignWithLabel(model, axisModel) {
 //     var alignWithLabel = model.get('alignWithLabel');
@@ -45,20 +61,22 @@ var CartesianAxisView = AxisView.extend({
 
     zrUtil.each(selfBuilderAttrs, function (name) {
       if (axisModel.get(name + '.show')) {
-        this['_' + name](axisModel, gridModel, layout.labelInterval);
+        this['_' + name](axisModel, gridModel);
       }
     }, this);
     graphic.groupTransition(oldAxisGroup, this._axisGroup, axisModel);
     CartesianAxisView.superCall(this, 'render', axisModel, ecModel, api, payload);
   },
+  remove: function () {
+    this._splitAreaColors = null;
+  },
 
   /**
    * @param {module:echarts/coord/cartesian/AxisModel} axisModel
    * @param {module:echarts/coord/cartesian/GridModel} gridModel
-   * @param {number|Function} labelInterval
    * @private
    */
-  _splitLine: function (axisModel, gridModel, labelInterval) {
+  _splitLine: function (axisModel, gridModel) {
     var axis = axisModel.axis;
 
     if (axis.scale.isBlank()) {
@@ -68,15 +86,13 @@ var CartesianAxisView = AxisView.extend({
     var splitLineModel = axisModel.getModel('splitLine');
     var lineStyleModel = splitLineModel.getModel('lineStyle');
     var lineColors = lineStyleModel.get('color');
-    var lineInterval = getInterval(splitLineModel, labelInterval);
     lineColors = zrUtil.isArray(lineColors) ? lineColors : [lineColors];
     var gridRect = gridModel.coordinateSystem.getRect();
     var isHorizontal = axis.isHorizontal();
     var lineCount = 0;
-    var ticksCoords = axis.getTicksCoords();
-    var ticks = axis.scale.getTicks();
-    var showMinLabel = axisModel.get('axisLabel.showMinLabel');
-    var showMaxLabel = axisModel.get('axisLabel.showMaxLabel');
+    var ticksCoords = axis.getTicksCoords({
+      tickModel: splitLineModel
+    });
     var p1 = [];
     var p2 = []; // Simple optimization
     // Batching the lines if color are the same
@@ -84,11 +100,7 @@ var CartesianAxisView = AxisView.extend({
     var lineStyle = lineStyleModel.getLineStyle();
 
     for (var i = 0; i < ticksCoords.length; i++) {
-      if (ifIgnoreOnTick(axis, i, lineInterval, ticksCoords.length, showMinLabel, showMaxLabel)) {
-        continue;
-      }
-
-      var tickCoord = axis.toGlobalCoord(ticksCoords[i]);
+      var tickCoord = axis.toGlobalCoord(ticksCoords[i].coord);
 
       if (isHorizontal) {
         p1[0] = tickCoord;
@@ -103,9 +115,10 @@ var CartesianAxisView = AxisView.extend({
       }
 
       var colorIndex = lineCount++ % lineColors.length;
+      var tickValue = ticksCoords[i].tickValue;
 
       this._axisGroup.add(new graphic.Line(graphic.subPixelOptimizeLine({
-        anid: 'line_' + ticks[i],
+        anid: tickValue != null ? 'line_' + ticksCoords[i].tickValue : null,
         shape: {
           x1: p1[0],
           y1: p1[1],
@@ -123,10 +136,9 @@ var CartesianAxisView = AxisView.extend({
   /**
    * @param {module:echarts/coord/cartesian/AxisModel} axisModel
    * @param {module:echarts/coord/cartesian/GridModel} gridModel
-   * @param {number|Function} labelInterval
    * @private
    */
-  _splitArea: function (axisModel, gridModel, labelInterval) {
+  _splitArea: function (axisModel, gridModel) {
     var axis = axisModel.axis;
 
     if (axis.scale.isBlank()) {
@@ -137,44 +149,63 @@ var CartesianAxisView = AxisView.extend({
     var areaStyleModel = splitAreaModel.getModel('areaStyle');
     var areaColors = areaStyleModel.get('color');
     var gridRect = gridModel.coordinateSystem.getRect();
-    var ticksCoords = axis.getTicksCoords();
-    var ticks = axis.scale.getTicks();
-    var prevX = axis.toGlobalCoord(ticksCoords[0]);
-    var prevY = axis.toGlobalCoord(ticksCoords[0]);
-    var count = 0;
-    var areaInterval = getInterval(splitAreaModel, labelInterval);
+    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];
-    var showMinLabel = axisModel.get('axisLabel.showMinLabel');
-    var showMaxLabel = axisModel.get('axisLabel.showMaxLabel');
 
     for (var i = 1; i < ticksCoords.length; i++) {
-      if (ifIgnoreOnTick(axis, i, areaInterval, ticksCoords.length, showMinLabel, showMaxLabel)) {
-        continue;
-      }
-
-      var tickCoord = axis.toGlobalCoord(ticksCoords[i]);
+      var tickCoord = axis.toGlobalCoord(ticksCoords[i].coord);
       var x;
       var y;
       var width;
       var height;
 
       if (axis.isHorizontal()) {
-        x = prevX;
+        x = prev;
         y = gridRect.y;
         width = tickCoord - x;
         height = gridRect.height;
+        prev = x + width;
       } else {
         x = gridRect.x;
-        y = prevY;
+        y = prev;
         width = gridRect.width;
         height = tickCoord - y;
+        prev = y + height;
       }
 
-      var colorIndex = count++ % areaColors.length;
+      var tickValue = ticksCoords[i - 1].tickValue;
+      tickValue != null && newSplitAreaColors.set(tickValue, colorIndex);
 
       this._axisGroup.add(new graphic.Rect({
-        anid: 'area_' + ticks[i],
+        anid: tickValue != null ? 'area_' + tickValue : null,
         shape: {
           x: x,
           y: y,
@@ -187,9 +218,10 @@ var CartesianAxisView = AxisView.extend({
         silent: true
       }));
 
-      prevX = x + width;
-      prevY = y + height;
+      colorIndex = (colorIndex + 1) % areaColorsLen;
     }
+
+    this._splitAreaColors = newSplitAreaColors;
   }
 });
 CartesianAxisView.extend({

package/lib/component/axis/ParallelAxisView.js

@@ -10,6 +10,24 @@ var brushHelper = require("../helper/brushHelper");
 
 var graphic = require("../../util/graphic");
 
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
 var elementList = ['axisLine', 'axisTickLabel', 'axisName'];
 var AxisView = echarts.extendComponentView({
   type: 'parallelAxis',