echarts 4.5.0-rc.2 → 4.8.0

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;
     }

package/lib/component/axis/AxisBuilder.js

@@ -248,9 +248,10 @@ var builders = {
   axisTickLabel: function () {
     var axisModel = this.axisModel;
     var opt = this.opt;
-    var tickEls = buildAxisTick(this, axisModel, opt);
+    var ticksEls = buildAxisMajorTicks(this, axisModel, opt);
     var labelEls = buildAxisLabel(this, axisModel, opt);
-    fixMinMaxLabelShow(axisModel, labelEls, tickEls);
+    fixMinMaxLabelShow(axisModel, labelEls, ticksEls);
+    buildAxisMinorTicks(this, axisModel, opt);
   },
 
   /**
@@ -519,38 +520,27 @@ function isNameLocationCenter(nameLocation) {
   return nameLocation === 'middle' || nameLocation === 'center';
 }
 
-function buildAxisTick(axisBuilder, axisModel, opt) {
-  var axis = axisModel.axis;
-
-  if (!axisModel.get('axisTick.show') || axis.scale.isBlank()) {
-    return;
-  }
-
-  var tickModel = axisModel.getModel('axisTick');
-  var lineStyleModel = tickModel.getModel('lineStyle');
-  var tickLen = tickModel.get('length');
-  var ticksCoords = axis.getTicksCoords();
+function createTicks(ticksCoords, tickTransform, tickEndCoord, tickLineStyle, aniid) {
+  var tickEls = [];
   var pt1 = [];
   var pt2 = [];
-  var matrix = axisBuilder._transform;
-  var tickEls = [];
 
   for (var i = 0; i < ticksCoords.length; i++) {
     var tickCoord = ticksCoords[i].coord;
     pt1[0] = tickCoord;
     pt1[1] = 0;
     pt2[0] = tickCoord;
-    pt2[1] = opt.tickDirection * tickLen;
+    pt2[1] = tickEndCoord;
 
-    if (matrix) {
-      v2ApplyTransform(pt1, pt1, matrix);
-      v2ApplyTransform(pt2, pt2, matrix);
+    if (tickTransform) {
+      v2ApplyTransform(pt1, pt1, tickTransform);
+      v2ApplyTransform(pt2, pt2, tickTransform);
     } // Tick line, Not use group transform to have better line draw
 
 
     var tickEl = new graphic.Line({
       // Id for animation
-      anid: 'tick_' + ticksCoords[i].tickValue,
+      anid: aniid + '_' + ticksCoords[i].tickValue,
       subPixelOptimize: true,
       shape: {
         x1: pt1[0],
@@ -558,19 +548,67 @@ function buildAxisTick(axisBuilder, axisModel, opt) {
         x2: pt2[0],
         y2: pt2[1]
       },
-      style: defaults(lineStyleModel.getLineStyle(), {
-        stroke: axisModel.get('axisLine.lineStyle.color')
-      }),
+      style: tickLineStyle,
       z2: 2,
       silent: true
     });
-    axisBuilder.group.add(tickEl);
     tickEls.push(tickEl);
   }
 
   return tickEls;
 }
 
+function buildAxisMajorTicks(axisBuilder, axisModel, opt) {
+  var axis = axisModel.axis;
+  var tickModel = axisModel.getModel('axisTick');
+
+  if (!tickModel.get('show') || axis.scale.isBlank()) {
+    return;
+  }
+
+  var lineStyleModel = tickModel.getModel('lineStyle');
+  var tickEndCoord = opt.tickDirection * tickModel.get('length');
+  var ticksCoords = axis.getTicksCoords();
+  var ticksEls = createTicks(ticksCoords, axisBuilder._transform, tickEndCoord, defaults(lineStyleModel.getLineStyle(), {
+    stroke: axisModel.get('axisLine.lineStyle.color')
+  }), 'ticks');
+
+  for (var i = 0; i < ticksEls.length; i++) {
+    axisBuilder.group.add(ticksEls[i]);
+  }
+
+  return ticksEls;
+}
+
+function buildAxisMinorTicks(axisBuilder, axisModel, opt) {
+  var axis = axisModel.axis;
+  var minorTickModel = axisModel.getModel('minorTick');
+
+  if (!minorTickModel.get('show') || axis.scale.isBlank()) {
+    return;
+  }
+
+  var minorTicksCoords = axis.getMinorTicksCoords();
+
+  if (!minorTicksCoords.length) {
+    return;
+  }
+
+  var lineStyleModel = minorTickModel.getModel('lineStyle');
+  var tickEndCoord = opt.tickDirection * minorTickModel.get('length');
+  var minorTickLineStyle = defaults(lineStyleModel.getLineStyle(), defaults(axisModel.getModel('axisTick').getLineStyle(), {
+    stroke: axisModel.get('axisLine.lineStyle.color')
+  }));
+
+  for (var i = 0; i < minorTicksCoords.length; i++) {
+    var minorTicksEls = createTicks(minorTicksCoords[i], axisBuilder._transform, tickEndCoord, minorTickLineStyle, 'minorticks_' + i);
+
+    for (var k = 0; k < minorTicksEls.length; k++) {
+      axisBuilder.group.add(minorTicksEls[k]);
+    }
+  }
+}
+
 function buildAxisLabel(axisBuilder, axisModel, opt) {
   var axis = axisModel.axis;
   var show = retrieve(opt.axisLabelShow, axisModel.get('axisLabel.show'));

package/lib/component/axis/CartesianAxisView.js

@@ -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
@@ -47,14 +52,7 @@ var cartesianAxisHelper = require("../../coord/cartesian/cartesianAxisHelper");
 * under the License.
 */
 var axisBuilderAttrs = ['axisLine', 'axisTickLabel', 'axisName'];
-var selfBuilderAttrs = ['splitArea', 'splitLine']; // function getAlignWithLabel(model, axisModel) {
-//     var alignWithLabel = model.get('alignWithLabel');
-//     if (alignWithLabel === 'auto') {
-//         alignWithLabel = axisModel.get('axisTick.alignWithLabel');
-//     }
-//     return alignWithLabel;
-// }
-
+var selfBuilderAttrs = ['splitArea', 'splitLine', 'minorSplitLine'];
 var CartesianAxisView = AxisView.extend({
   type: 'cartesianAxis',
   axisPointerClass: 'CartesianAxisPointer',
@@ -88,7 +86,7 @@ var CartesianAxisView = AxisView.extend({
     CartesianAxisView.superCall(this, 'render', axisModel, ecModel, api, payload);
   },
   remove: function () {
-    this._splitAreaColors = null;
+    rectCoordAxisHandleRemove(this);
   },
 
   /**
@@ -114,9 +112,7 @@ var CartesianAxisView = AxisView.extend({
       tickModel: splitLineModel
     });
     var p1 = [];
-    var p2 = []; // Simple optimization
-    // Batching the lines if color are the same
-
+    var p2 = [];
     var lineStyle = lineStyleModel.getLineStyle();
 
     for (var i = 0; i < ticksCoords.length; i++) {
@@ -159,90 +155,61 @@ var CartesianAxisView = AxisView.extend({
    * @param {module:echarts/coord/cartesian/GridModel} gridModel
    * @private
    */
-  _splitArea: function (axisModel, gridModel) {
+  _minorSplitLine: 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 minorSplitLineModel = axisModel.getModel('minorSplitLine');
+    var lineStyleModel = minorSplitLineModel.getModel('lineStyle');
     var gridRect = gridModel.coordinateSystem.getRect();
-    var ticksCoords = axis.getTicksCoords({
-      tickModel: splitAreaModel,
-      clamp: true
-    });
+    var isHorizontal = axis.isHorizontal();
+    var minorTicksCoords = axis.getMinorTicksCoords();
 
-    if (!ticksCoords.length) {
+    if (!minorTicksCoords.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);
+    var p1 = [];
+    var p2 = [];
+    var lineStyle = lineStyleModel.getLineStyle();
 
-        if (cIndex != null) {
-          colorIndex = (cIndex + (areaColorsLen - 1) * i) % areaColorsLen;
-          break;
+    for (var i = 0; i < minorTicksCoords.length; i++) {
+      for (var k = 0; k < minorTicksCoords[i].length; k++) {
+        var tickCoord = axis.toGlobalCoord(minorTicksCoords[i][k].coord);
+
+        if (isHorizontal) {
+          p1[0] = tickCoord;
+          p1[1] = gridRect.y;
+          p2[0] = tickCoord;
+          p2[1] = gridRect.y + gridRect.height;
+        } else {
+          p1[0] = gridRect.x;
+          p1[1] = tickCoord;
+          p2[0] = gridRect.x + gridRect.width;
+          p2[1] = tickCoord;
         }
-      }
-    }
-
-    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;
+        this._axisGroup.add(new graphic.Line({
+          anid: 'minor_line_' + minorTicksCoords[i][k].tickValue,
+          subPixelOptimize: true,
+          shape: {
+            x1: p1[0],
+            y1: p1[1],
+            x2: p2[0],
+            y2: p2[1]
+          },
+          style: lineStyle,
+          silent: true
+        }));
       }
-
-      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;
+  /**
+   * @param {module:echarts/coord/cartesian/AxisModel} axisModel
+   * @param {module:echarts/coord/cartesian/GridModel} gridModel
+   * @private
+   */
+  _splitArea: function (axisModel, gridModel) {
+    rectCoordAxisBuildSplitArea(this, this._axisGroup, axisModel, gridModel);
   }
 });
 CartesianAxisView.extend({

package/lib/component/axis/RadiusAxisView.js

@@ -45,7 +45,7 @@ var AxisView = require("./AxisView");
 * under the License.
 */
 var axisBuilderAttrs = ['axisLine', 'axisTickLabel', 'axisName'];
-var selfBuilderAttrs = ['splitLine', 'splitArea'];
+var selfBuilderAttrs = ['splitLine', 'splitArea', 'minorSplitLine'];
 
 var _default = AxisView.extend({
   type: 'radiusAxis',
@@ -61,6 +61,7 @@ var _default = AxisView.extend({
     var polar = radiusAxis.polar;
     var angleAxis = polar.getAngleAxis();
     var ticksCoords = radiusAxis.getTicksCoords();
+    var minorTicksCoords = radiusAxis.getMinorTicksCoords();
     var axisAngle = angleAxis.getExtent()[0];
     var radiusExtent = radiusAxis.getExtent();
     var layout = layoutAxis(polar, radiusAxisModel, axisAngle);
@@ -69,7 +70,7 @@ var _default = AxisView.extend({
     this.group.add(axisBuilder.getGroup());
     zrUtil.each(selfBuilderAttrs, function (name) {
       if (radiusAxisModel.get(name + '.show') && !radiusAxis.scale.isBlank()) {
-        this['_' + name](radiusAxisModel, polar, axisAngle, radiusExtent, ticksCoords);
+        this['_' + name](radiusAxisModel, polar, axisAngle, radiusExtent, ticksCoords, minorTicksCoords);
       }
     }, this);
   },
@@ -93,8 +94,7 @@ var _default = AxisView.extend({
           cx: polar.cx,
           cy: polar.cy,
           r: ticksCoords[i].coord
-        },
-        silent: true
+        }
       }));
     } // Simple optimization
     // Batching the lines if color are the same
@@ -111,6 +111,38 @@ var _default = AxisView.extend({
     }
   },
 
+  /**
+   * @private
+   */
+  _minorSplitLine: function (radiusAxisModel, polar, axisAngle, radiusExtent, ticksCoords, minorTicksCoords) {
+    if (!minorTicksCoords.length) {
+      return;
+    }
+
+    var minorSplitLineModel = radiusAxisModel.getModel('minorSplitLine');
+    var lineStyleModel = minorSplitLineModel.getModel('lineStyle');
+    var lines = [];
+
+    for (var i = 0; i < minorTicksCoords.length; i++) {
+      for (var k = 0; k < minorTicksCoords[i].length; k++) {
+        lines.push(new graphic.Circle({
+          shape: {
+            cx: polar.cx,
+            cy: polar.cy,
+            r: minorTicksCoords[i][k].coord
+          }
+        }));
+      }
+    }
+
+    this.group.add(graphic.mergePath(lines, {
+      style: zrUtil.defaults({
+        fill: null
+      }, lineStyleModel.getLineStyle()),
+      silent: true
+    }));
+  },
+
   /**
    * @private
    */

package/lib/component/axis/SingleAxisView.js

@@ -28,6 +28,11 @@ var singleAxisHelper = require("../../coord/single/singleAxisHelper");
 
 var AxisView = require("./AxisView");
 
+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
@@ -47,24 +52,31 @@ var AxisView = require("./AxisView");
 * under the License.
 */
 var axisBuilderAttrs = ['axisLine', 'axisTickLabel', 'axisName'];
-var selfBuilderAttr = 'splitLine';
+var selfBuilderAttrs = ['splitArea', 'splitLine'];
 var SingleAxisView = AxisView.extend({
   type: 'singleAxis',
   axisPointerClass: 'SingleAxisPointer',
   render: function (axisModel, ecModel, api, payload) {
     var group = this.group;
     group.removeAll();
+    var oldAxisGroup = this._axisGroup;
+    this._axisGroup = new graphic.Group();
     var layout = singleAxisHelper.layout(axisModel);
     var axisBuilder = new AxisBuilder(axisModel, layout);
     zrUtil.each(axisBuilderAttrs, axisBuilder.add, axisBuilder);
+    group.add(this._axisGroup);
     group.add(axisBuilder.getGroup());
-
-    if (axisModel.get(selfBuilderAttr + '.show')) {
-      this['_' + selfBuilderAttr](axisModel);
-    }
-
+    zrUtil.each(selfBuilderAttrs, function (name) {
+      if (axisModel.get(name + '.show')) {
+        this['_' + name](axisModel);
+      }
+    }, this);
+    graphic.groupTransition(oldAxisGroup, this._axisGroup, axisModel);
     SingleAxisView.superCall(this, 'render', axisModel, ecModel, api, payload);
   },
+  remove: function () {
+    rectCoordAxisHandleRemove(this);
+  },
   _splitLine: function (axisModel) {
     var axis = axisModel.axis;
 
@@ -129,6 +141,9 @@ var SingleAxisView = AxisView.extend({
         silent: true
       }));
     }
+  },
+  _splitArea: function (axisModel) {
+    rectCoordAxisBuildSplitArea(this, this._axisGroup, axisModel, axisModel);
   }
 });
 var _default = SingleAxisView;