sun-card-design 1.1.18 → 1.1.19

package/dist/mobile/sun-card-design-mobile.es1776.js

@@ -1,977 +1,384 @@
-import { __extends } from "./sun-card-design-mobile.es1717.js";
-import { bind, defaults, isFunction, each, map, isNumber } from "./sun-card-design-mobile.es922.js";
-import SymbolDraw from "./sun-card-design-mobile.es2042.js";
-import Symbol$1 from "./sun-card-design-mobile.es2047.js";
-import lineAnimationDiff from "./sun-card-design-mobile.es2048.js";
-import { queryDataIndex, interpolateRawValues } from "./sun-card-design-mobile.es1729.js";
-import { ECPolyline, ECPolygon } from "./sun-card-design-mobile.es2049.js";
-import ChartView from "./sun-card-design-mobile.es919.js";
-import { prepareDataCoordInfo, getStackedOnPoint } from "./sun-card-design-mobile.es2050.js";
-import { createGridClipPath, createPolarClipPath } from "./sun-card-design-mobile.es2033.js";
-import { isCoordinateSystemType } from "./sun-card-design-mobile.es2035.js";
-import { setStatesStylesFromModel, toggleHoverEmphasis, setStatesFlag, SPECIAL_STATES } from "./sun-card-design-mobile.es1728.js";
-import { setLabelStyle, getLabelStatesModels, labelInner } from "./sun-card-design-mobile.es1918.js";
-import { getDefaultInterpolatedLabel, getDefaultLabel } from "./sun-card-design-mobile.es2036.js";
-import { getECData } from "./sun-card-design-mobile.es1727.js";
-import { createFloat32Array } from "./sun-card-design-mobile.es2030.js";
-import { convertToColorString } from "./sun-card-design-mobile.es1919.js";
-import { lerp } from "./sun-card-design-mobile.es1768.js";
-import Group from "./sun-card-design-mobile.es1753.js";
-import ZRText from "./sun-card-design-mobile.es1920.js";
-import LinearGradient from "./sun-card-design-mobile.es2003.js";
-import { initProps, updateProps } from "./sun-card-design-mobile.es1751.js";
-function isPointsSame(points1, points2) {
-  if (points1.length !== points2.length) {
-    return;
-  }
-  for (var i = 0; i < points1.length; i++) {
-    if (points1[i] !== points2[i]) {
-      return;
-    }
-  }
-  return true;
-}
-function bboxFromPoints(points) {
-  var minX = Infinity;
-  var minY = Infinity;
-  var maxX = -Infinity;
-  var maxY = -Infinity;
-  for (var i = 0; i < points.length; ) {
-    var x = points[i++];
-    var y = points[i++];
-    if (!isNaN(x)) {
-      minX = Math.min(x, minX);
-      maxX = Math.max(x, maxX);
-    }
-    if (!isNaN(y)) {
-      minY = Math.min(y, minY);
-      maxY = Math.max(y, maxY);
-    }
-  }
-  return [[minX, minY], [maxX, maxY]];
-}
-function getBoundingDiff(points1, points2) {
-  var _a = bboxFromPoints(points1), min1 = _a[0], max1 = _a[1];
-  var _b = bboxFromPoints(points2), min2 = _b[0], max2 = _b[1];
-  return Math.max(Math.abs(min1[0] - min2[0]), Math.abs(min1[1] - min2[1]), Math.abs(max1[0] - max2[0]), Math.abs(max1[1] - max2[1]));
-}
-function getSmooth(smooth) {
-  return isNumber(smooth) ? smooth : smooth ? 0.5 : 0;
-}
-function getStackedOnPoints(coordSys, data, dataCoordInfo) {
-  if (!dataCoordInfo.valueDim) {
-    return [];
-  }
-  var len = data.count();
-  var points = createFloat32Array(len * 2);
-  for (var idx = 0; idx < len; idx++) {
-    var pt = getStackedOnPoint(dataCoordInfo, coordSys, data, idx);
-    points[idx * 2] = pt[0];
-    points[idx * 2 + 1] = pt[1];
-  }
-  return points;
-}
-function turnPointsIntoStep(points, basePoints, coordSys, stepTurnAt, connectNulls) {
-  var baseAxis = coordSys.getBaseAxis();
-  var baseIndex = baseAxis.dim === "x" || baseAxis.dim === "radius" ? 0 : 1;
-  var stepPoints = [];
-  var i = 0;
-  var stepPt = [];
-  var pt = [];
-  var nextPt = [];
-  var filteredPoints = [];
-  if (connectNulls) {
-    for (i = 0; i < points.length; i += 2) {
-      var reference = basePoints || points;
-      if (!isNaN(reference[i]) && !isNaN(reference[i + 1])) {
-        filteredPoints.push(points[i], points[i + 1]);
-      }
-    }
-    points = filteredPoints;
-  }
-  for (i = 0; i < points.length - 2; i += 2) {
-    nextPt[0] = points[i + 2];
-    nextPt[1] = points[i + 3];
-    pt[0] = points[i];
-    pt[1] = points[i + 1];
-    stepPoints.push(pt[0], pt[1]);
-    switch (stepTurnAt) {
-      case "end":
-        stepPt[baseIndex] = nextPt[baseIndex];
-        stepPt[1 - baseIndex] = pt[1 - baseIndex];
-        stepPoints.push(stepPt[0], stepPt[1]);
-        break;
-      case "middle":
-        var middle = (pt[baseIndex] + nextPt[baseIndex]) / 2;
-        var stepPt2 = [];
-        stepPt[baseIndex] = stepPt2[baseIndex] = middle;
-        stepPt[1 - baseIndex] = pt[1 - baseIndex];
-        stepPt2[1 - baseIndex] = nextPt[1 - baseIndex];
-        stepPoints.push(stepPt[0], stepPt[1]);
-        stepPoints.push(stepPt2[0], stepPt2[1]);
-        break;
-      default:
-        stepPt[baseIndex] = pt[baseIndex];
-        stepPt[1 - baseIndex] = nextPt[1 - baseIndex];
-        stepPoints.push(stepPt[0], stepPt[1]);
-    }
-  }
-  stepPoints.push(points[i++], points[i++]);
-  return stepPoints;
-}
-function clipColorStops(colorStops, maxSize) {
-  var newColorStops = [];
-  var len = colorStops.length;
-  var prevOutOfRangeColorStop;
-  var prevInRangeColorStop;
-  function lerpStop(stop0, stop1, clippedCoord) {
-    var coord0 = stop0.coord;
-    var p = (clippedCoord - coord0) / (stop1.coord - coord0);
-    var color = lerp(p, [stop0.color, stop1.color]);
-    return {
-      coord: clippedCoord,
-      color
-    };
-  }
-  for (var i = 0; i < len; i++) {
-    var stop_1 = colorStops[i];
-    var coord = stop_1.coord;
-    if (coord < 0) {
-      prevOutOfRangeColorStop = stop_1;
-    } else if (coord > maxSize) {
-      if (prevInRangeColorStop) {
-        newColorStops.push(lerpStop(prevInRangeColorStop, stop_1, maxSize));
-      } else if (prevOutOfRangeColorStop) {
-        newColorStops.push(lerpStop(prevOutOfRangeColorStop, stop_1, 0), lerpStop(prevOutOfRangeColorStop, stop_1, maxSize));
-      }
-      break;
-    } else {
-      if (prevOutOfRangeColorStop) {
-        newColorStops.push(lerpStop(prevOutOfRangeColorStop, stop_1, 0));
-        prevOutOfRangeColorStop = null;
-      }
-      newColorStops.push(stop_1);
-      prevInRangeColorStop = stop_1;
-    }
-  }
-  return newColorStops;
-}
-function getVisualGradient(data, coordSys, api) {
-  var visualMetaList = data.getVisual("visualMeta");
-  if (!visualMetaList || !visualMetaList.length || !data.count()) {
-    return;
-  }
-  if (coordSys.type !== "cartesian2d") {
-    if (process.env.NODE_ENV !== "production") {
-      console.warn("Visual map on line style is only supported on cartesian2d.");
-    }
-    return;
-  }
-  var coordDim;
-  var visualMeta;
-  for (var i = visualMetaList.length - 1; i >= 0; i--) {
-    var dimInfo = data.getDimensionInfo(visualMetaList[i].dimension);
-    coordDim = dimInfo && dimInfo.coordDim;
-    if (coordDim === "x" || coordDim === "y") {
-      visualMeta = visualMetaList[i];
-      break;
-    }
-  }
-  if (!visualMeta) {
-    if (process.env.NODE_ENV !== "production") {
-      console.warn("Visual map on line style only support x or y dimension.");
-    }
-    return;
-  }
-  var axis = coordSys.getAxis(coordDim);
-  var colorStops = map(visualMeta.stops, function(stop) {
-    return {
-      coord: axis.toGlobalCoord(axis.dataToCoord(stop.value)),
-      color: stop.color
-    };
-  });
-  var stopLen = colorStops.length;
-  var outerColors = visualMeta.outerColors.slice();
-  if (stopLen && colorStops[0].coord > colorStops[stopLen - 1].coord) {
-    colorStops.reverse();
-    outerColors.reverse();
-  }
-  var colorStopsInRange = clipColorStops(colorStops, coordDim === "x" ? api.getWidth() : api.getHeight());
-  var inRangeStopLen = colorStopsInRange.length;
-  if (!inRangeStopLen && stopLen) {
-    return colorStops[0].coord < 0 ? outerColors[1] ? outerColors[1] : colorStops[stopLen - 1].color : outerColors[0] ? outerColors[0] : colorStops[0].color;
-  }
-  var tinyExtent = 10;
-  var minCoord = colorStopsInRange[0].coord - tinyExtent;
-  var maxCoord = colorStopsInRange[inRangeStopLen - 1].coord + tinyExtent;
-  var coordSpan = maxCoord - minCoord;
-  if (coordSpan < 1e-3) {
-    return "transparent";
-  }
-  each(colorStopsInRange, function(stop) {
-    stop.offset = (stop.coord - minCoord) / coordSpan;
-  });
-  colorStopsInRange.push({
-    // NOTE: inRangeStopLen may still be 0 if stoplen is zero.
-    offset: inRangeStopLen ? colorStopsInRange[inRangeStopLen - 1].offset : 0.5,
-    color: outerColors[1] || "transparent"
-  });
-  colorStopsInRange.unshift({
-    offset: inRangeStopLen ? colorStopsInRange[0].offset : 0.5,
-    color: outerColors[0] || "transparent"
-  });
-  var gradient = new LinearGradient(0, 0, 0, 0, colorStopsInRange, true);
-  gradient[coordDim] = minCoord;
-  gradient[coordDim + "2"] = maxCoord;
-  return gradient;
-}
-function getIsIgnoreFunc(seriesModel, data, coordSys) {
-  var showAllSymbol = seriesModel.get("showAllSymbol");
-  var isAuto = showAllSymbol === "auto";
-  if (showAllSymbol && !isAuto) {
-    return;
-  }
-  var categoryAxis = coordSys.getAxesByScale("ordinal")[0];
-  if (!categoryAxis) {
-    return;
-  }
-  if (isAuto && canShowAllSymbolForCategory(categoryAxis, data)) {
-    return;
-  }
-  var categoryDataDim = data.mapDimension(categoryAxis.dim);
-  var labelMap = {};
-  each(categoryAxis.getViewLabels(), function(labelItem) {
-    var ordinalNumber = categoryAxis.scale.getRawOrdinalNumber(labelItem.tickValue);
-    labelMap[ordinalNumber] = 1;
-  });
-  return function(dataIndex) {
-    return !labelMap.hasOwnProperty(data.get(categoryDataDim, dataIndex));
-  };
-}
-function canShowAllSymbolForCategory(categoryAxis, data) {
-  var axisExtent = categoryAxis.getExtent();
-  var availSize = Math.abs(axisExtent[1] - axisExtent[0]) / categoryAxis.scale.count();
-  isNaN(availSize) && (availSize = 0);
-  var dataLen = data.count();
-  var step = Math.max(1, Math.round(dataLen / 5));
-  for (var dataIndex = 0; dataIndex < dataLen; dataIndex += step) {
-    if (Symbol$1.getSymbolSize(
-      data,
-      dataIndex
-      // Only for cartesian, where `isHorizontal` exists.
-    )[categoryAxis.isHorizontal() ? 1 : 0] * 1.5 > availSize) {
-      return false;
-    }
-  }
-  return true;
-}
-function isPointNull(x, y) {
-  return isNaN(x) || isNaN(y);
-}
-function getLastIndexNotNull(points) {
-  var len = points.length / 2;
-  for (; len > 0; len--) {
-    if (!isPointNull(points[len * 2 - 2], points[len * 2 - 1])) {
-      break;
-    }
-  }
-  return len - 1;
-}
-function getPointAtIndex(points, idx) {
-  return [points[idx * 2], points[idx * 2 + 1]];
-}
-function getIndexRange(points, xOrY, dim) {
-  var len = points.length / 2;
-  var dimIdx = dim === "x" ? 0 : 1;
-  var a;
-  var b;
-  var prevIndex = 0;
-  var nextIndex = -1;
-  for (var i = 0; i < len; i++) {
-    b = points[i * 2 + dimIdx];
-    if (isNaN(b) || isNaN(points[i * 2 + 1 - dimIdx])) {
-      continue;
-    }
-    if (i === 0) {
-      a = b;
-      continue;
-    }
-    if (a <= xOrY && b >= xOrY || a >= xOrY && b <= xOrY) {
-      nextIndex = i;
-      break;
-    }
-    prevIndex = i;
-    a = b;
-  }
-  return {
-    range: [prevIndex, nextIndex],
-    t: (xOrY - a) / (b - a)
-  };
-}
-function anyStateShowEndLabel(seriesModel) {
-  if (seriesModel.get(["endLabel", "show"])) {
-    return true;
-  }
-  for (var i = 0; i < SPECIAL_STATES.length; i++) {
-    if (seriesModel.get([SPECIAL_STATES[i], "endLabel", "show"])) {
-      return true;
-    }
-  }
-  return false;
-}
-function createLineClipPath(lineView, coordSys, hasAnimation, seriesModel) {
-  if (isCoordinateSystemType(coordSys, "cartesian2d")) {
-    var endLabelModel_1 = seriesModel.getModel("endLabel");
-    var valueAnimation_1 = endLabelModel_1.get("valueAnimation");
-    var data_1 = seriesModel.getData();
-    var labelAnimationRecord_1 = {
-      lastFrameIndex: 0
-    };
-    var during = anyStateShowEndLabel(seriesModel) ? function(percent, clipRect) {
-      lineView._endLabelOnDuring(percent, clipRect, data_1, labelAnimationRecord_1, valueAnimation_1, endLabelModel_1, coordSys);
-    } : null;
-    var isHorizontal = coordSys.getBaseAxis().isHorizontal();
-    var clipPath = createGridClipPath(coordSys, hasAnimation, seriesModel, function() {
-      var endLabel = lineView._endLabel;
-      if (endLabel && hasAnimation) {
-        if (labelAnimationRecord_1.originalX != null) {
-          endLabel.attr({
-            x: labelAnimationRecord_1.originalX,
-            y: labelAnimationRecord_1.originalY
-          });
-        }
-      }
-    }, during);
-    if (!seriesModel.get("clip", true)) {
-      var rectShape = clipPath.shape;
-      var expandSize = Math.max(rectShape.width, rectShape.height);
-      if (isHorizontal) {
-        rectShape.y -= expandSize;
-        rectShape.height += expandSize * 2;
-      } else {
-        rectShape.x -= expandSize;
-        rectShape.width += expandSize * 2;
-      }
-    }
-    if (during) {
-      during(1, clipPath);
-    }
-    return clipPath;
-  } else {
-    if (process.env.NODE_ENV !== "production") {
-      if (seriesModel.get(["endLabel", "show"])) {
-        console.warn("endLabel is not supported for lines in polar systems.");
-      }
-    }
-    return createPolarClipPath(coordSys, hasAnimation, seriesModel);
-  }
-}
-function getEndLabelStateSpecified(endLabelModel, coordSys) {
-  var baseAxis = coordSys.getBaseAxis();
-  var isHorizontal = baseAxis.isHorizontal();
-  var isBaseInversed = baseAxis.inverse;
-  var align = isHorizontal ? isBaseInversed ? "right" : "left" : "center";
-  var verticalAlign = isHorizontal ? "middle" : isBaseInversed ? "top" : "bottom";
-  return {
-    normal: {
-      align: endLabelModel.get("align") || align,
-      verticalAlign: endLabelModel.get("verticalAlign") || verticalAlign
-    }
-  };
-}
-var LineView = (
+import { each, isObject, indexOf, retrieve3, keys } from "./sun-card-design-mobile.es922.js";
+import { getLayoutRect } from "./sun-card-design-mobile.es1758.js";
+import { estimateLabelUnionRect, createScaleByModel, getDataDimensionsOnAxis, niceScaleExtent, ifAxisCrossZero } from "./sun-card-design-mobile.es2021.js";
+import Cartesian2D, { cartesian2DDimensions } from "./sun-card-design-mobile.es2022.js";
+import Axis2D from "./sun-card-design-mobile.es2023.js";
+import { SINGLE_REFERRING } from "./sun-card-design-mobile.es1729.js";
+import { isCartesian2DSeries, findAxisModels } from "./sun-card-design-mobile.es2024.js";
+import { isIntervalOrLogScale } from "./sun-card-design-mobile.es2025.js";
+import { alignScaleTicks } from "./sun-card-design-mobile.es2026.js";
+var Grid = (
   /** @class */
-  (function(_super) {
-    __extends(LineView2, _super);
-    function LineView2() {
-      return _super !== null && _super.apply(this, arguments) || this;
+  (function() {
+    function Grid2(gridModel, ecModel, api) {
+      this.type = "grid";
+      this._coordsMap = {};
+      this._coordsList = [];
+      this._axesMap = {};
+      this._axesList = [];
+      this.axisPointerEnabled = true;
+      this.dimensions = cartesian2DDimensions;
+      this._initCartesian(gridModel, ecModel, api);
+      this.model = gridModel;
     }
-    LineView2.prototype.init = function() {
-      var lineGroup = new Group();
-      var symbolDraw = new SymbolDraw();
-      this.group.add(symbolDraw.group);
-      this._symbolDraw = symbolDraw;
-      this._lineGroup = lineGroup;
-      this._changePolyState = bind(this._changePolyState, this);
+    Grid2.prototype.getRect = function() {
+      return this._rect;
     };
-    LineView2.prototype.render = function(seriesModel, ecModel, api) {
-      var coordSys = seriesModel.coordinateSystem;
-      var group = this.group;
-      var data = seriesModel.getData();
-      var lineStyleModel = seriesModel.getModel("lineStyle");
-      var areaStyleModel = seriesModel.getModel("areaStyle");
-      var points = data.getLayout("points") || [];
-      var isCoordSysPolar = coordSys.type === "polar";
-      var prevCoordSys = this._coordSys;
-      var symbolDraw = this._symbolDraw;
-      var polyline = this._polyline;
-      var polygon = this._polygon;
-      var lineGroup = this._lineGroup;
-      var hasAnimation = !ecModel.ssr && seriesModel.get("animation");
-      var isAreaChart = !areaStyleModel.isEmpty();
-      var valueOrigin = areaStyleModel.get("origin");
-      var dataCoordInfo = prepareDataCoordInfo(coordSys, data, valueOrigin);
-      var stackedOnPoints = isAreaChart && getStackedOnPoints(coordSys, data, dataCoordInfo);
-      var showSymbol = seriesModel.get("showSymbol");
-      var connectNulls = seriesModel.get("connectNulls");
-      var isIgnoreFunc = showSymbol && !isCoordSysPolar && getIsIgnoreFunc(seriesModel, data, coordSys);
-      var oldData = this._data;
-      oldData && oldData.eachItemGraphicEl(function(el, idx) {
-        if (el.__temp) {
-          group.remove(el);
-          oldData.setItemGraphicEl(idx, null);
-        }
-      });
-      if (!showSymbol) {
-        symbolDraw.remove();
-      }
-      group.add(lineGroup);
-      var step = !isCoordSysPolar ? seriesModel.get("step") : false;
-      var clipShapeForSymbol;
-      if (coordSys && coordSys.getArea && seriesModel.get("clip", true)) {
-        clipShapeForSymbol = coordSys.getArea();
-        if (clipShapeForSymbol.width != null) {
-          clipShapeForSymbol.x -= 0.1;
-          clipShapeForSymbol.y -= 0.1;
-          clipShapeForSymbol.width += 0.2;
-          clipShapeForSymbol.height += 0.2;
-        } else if (clipShapeForSymbol.r0) {
-          clipShapeForSymbol.r0 -= 0.5;
-          clipShapeForSymbol.r += 0.5;
-        }
-      }
-      this._clipShapeForSymbol = clipShapeForSymbol;
-      var visualColor = getVisualGradient(data, coordSys, api) || data.getVisual("style")[data.getVisual("drawType")];
-      if (!(polyline && prevCoordSys.type === coordSys.type && step === this._step)) {
-        showSymbol && symbolDraw.updateData(data, {
-          isIgnore: isIgnoreFunc,
-          clipShape: clipShapeForSymbol,
-          disableAnimation: true,
-          getSymbolPoint: function(idx) {
-            return [points[idx * 2], points[idx * 2 + 1]];
-          }
-        });
-        hasAnimation && this._initSymbolLabelAnimation(data, coordSys, clipShapeForSymbol);
-        if (step) {
-          if (stackedOnPoints) {
-            stackedOnPoints = turnPointsIntoStep(stackedOnPoints, points, coordSys, step, connectNulls);
-          }
-          points = turnPointsIntoStep(points, null, coordSys, step, connectNulls);
-        }
-        polyline = this._newPolyline(points);
-        if (isAreaChart) {
-          polygon = this._newPolygon(points, stackedOnPoints);
-        } else if (polygon) {
-          lineGroup.remove(polygon);
-          polygon = this._polygon = null;
-        }
-        if (!isCoordSysPolar) {
-          this._initOrUpdateEndLabel(seriesModel, coordSys, convertToColorString(visualColor));
-        }
-        lineGroup.setClipPath(createLineClipPath(this, coordSys, true, seriesModel));
-      } else {
-        if (isAreaChart && !polygon) {
-          polygon = this._newPolygon(points, stackedOnPoints);
-        } else if (polygon && !isAreaChart) {
-          lineGroup.remove(polygon);
-          polygon = this._polygon = null;
-        }
-        if (!isCoordSysPolar) {
-          this._initOrUpdateEndLabel(seriesModel, coordSys, convertToColorString(visualColor));
-        }
-        var oldClipPath = lineGroup.getClipPath();
-        if (oldClipPath) {
-          var newClipPath = createLineClipPath(this, coordSys, false, seriesModel);
-          initProps(oldClipPath, {
-            shape: newClipPath.shape
-          }, seriesModel);
-        } else {
-          lineGroup.setClipPath(createLineClipPath(this, coordSys, true, seriesModel));
+    Grid2.prototype.update = function(ecModel, api) {
+      var axesMap = this._axesMap;
+      this._updateScale(ecModel, this.model);
+      function updateAxisTicks(axes) {
+        var alignTo;
+        var axesIndices = keys(axes);
+        var len = axesIndices.length;
+        if (!len) {
+          return;
         }
-        showSymbol && symbolDraw.updateData(data, {
-          isIgnore: isIgnoreFunc,
-          clipShape: clipShapeForSymbol,
-          disableAnimation: true,
-          getSymbolPoint: function(idx) {
-            return [points[idx * 2], points[idx * 2 + 1]];
-          }
-        });
-        if (!isPointsSame(this._stackedOnPoints, stackedOnPoints) || !isPointsSame(this._points, points)) {
-          if (hasAnimation) {
-            this._doUpdateAnimation(data, stackedOnPoints, coordSys, api, step, valueOrigin, connectNulls);
+        var axisNeedsAlign = [];
+        for (var i = len - 1; i >= 0; i--) {
+          var idx = +axesIndices[i];
+          var axis = axes[idx];
+          var model = axis.model;
+          var scale = axis.scale;
+          if (
+            // Only value and log axis without interval support alignTicks.
+            isIntervalOrLogScale(scale) && model.get("alignTicks") && model.get("interval") == null
+          ) {
+            axisNeedsAlign.push(axis);
           } else {
-            if (step) {
-              if (stackedOnPoints) {
-                stackedOnPoints = turnPointsIntoStep(stackedOnPoints, points, coordSys, step, connectNulls);
-              }
-              points = turnPointsIntoStep(points, null, coordSys, step, connectNulls);
+            niceScaleExtent(scale, model);
+            if (isIntervalOrLogScale(scale)) {
+              alignTo = axis;
             }
-            polyline.setShape({
-              points
-            });
-            polygon && polygon.setShape({
-              points,
-              stackedOnPoints
-            });
           }
         }
-      }
-      var emphasisModel = seriesModel.getModel("emphasis");
-      var focus = emphasisModel.get("focus");
-      var blurScope = emphasisModel.get("blurScope");
-      var emphasisDisabled = emphasisModel.get("disabled");
-      polyline.useStyle(defaults(
-        // Use color in lineStyle first
-        lineStyleModel.getLineStyle(),
-        {
-          fill: "none",
-          stroke: visualColor,
-          lineJoin: "bevel"
+        if (axisNeedsAlign.length) {
+          if (!alignTo) {
+            alignTo = axisNeedsAlign.pop();
+            niceScaleExtent(alignTo.scale, alignTo.model);
+          }
+          each(axisNeedsAlign, function(axis2) {
+            alignScaleTicks(axis2.scale, axis2.model, alignTo.scale);
+          });
         }
-      ));
-      setStatesStylesFromModel(polyline, seriesModel, "lineStyle");
-      if (polyline.style.lineWidth > 0 && seriesModel.get(["emphasis", "lineStyle", "width"]) === "bolder") {
-        var emphasisLineStyle = polyline.getState("emphasis").style;
-        emphasisLineStyle.lineWidth = +polyline.style.lineWidth + 1;
       }
-      getECData(polyline).seriesIndex = seriesModel.seriesIndex;
-      toggleHoverEmphasis(polyline, focus, blurScope, emphasisDisabled);
-      var smooth = getSmooth(seriesModel.get("smooth"));
-      var smoothMonotone = seriesModel.get("smoothMonotone");
-      polyline.setShape({
-        smooth,
-        smoothMonotone,
-        connectNulls
+      updateAxisTicks(axesMap.x);
+      updateAxisTicks(axesMap.y);
+      var onZeroRecords = {};
+      each(axesMap.x, function(xAxis) {
+        fixAxisOnZero(axesMap, "y", xAxis, onZeroRecords);
       });
-      if (polygon) {
-        var stackedOnSeries = data.getCalculationInfo("stackedOnSeries");
-        var stackedOnSmooth = 0;
-        polygon.useStyle(defaults(areaStyleModel.getAreaStyle(), {
-          fill: visualColor,
-          opacity: 0.7,
-          lineJoin: "bevel",
-          decal: data.getVisual("style").decal
-        }));
-        if (stackedOnSeries) {
-          stackedOnSmooth = getSmooth(stackedOnSeries.get("smooth"));
-        }
-        polygon.setShape({
-          smooth,
-          stackedOnSmooth,
-          smoothMonotone,
-          connectNulls
+      each(axesMap.y, function(yAxis) {
+        fixAxisOnZero(axesMap, "x", yAxis, onZeroRecords);
+      });
+      this.resize(this.model, api);
+    };
+    Grid2.prototype.resize = function(gridModel, api, ignoreContainLabel) {
+      var boxLayoutParams = gridModel.getBoxLayoutParams();
+      var isContainLabel = !ignoreContainLabel && gridModel.get("containLabel");
+      var gridRect = getLayoutRect(boxLayoutParams, {
+        width: api.getWidth(),
+        height: api.getHeight()
+      });
+      this._rect = gridRect;
+      var axesList = this._axesList;
+      adjustAxes();
+      if (isContainLabel) {
+        each(axesList, function(axis) {
+          if (!axis.model.get(["axisLabel", "inside"])) {
+            var labelUnionRect = estimateLabelUnionRect(axis);
+            if (labelUnionRect) {
+              var dim = axis.isHorizontal() ? "height" : "width";
+              var margin = axis.model.get(["axisLabel", "margin"]);
+              gridRect[dim] -= labelUnionRect[dim] + margin;
+              if (axis.position === "top") {
+                gridRect.y += labelUnionRect.height + margin;
+              } else if (axis.position === "left") {
+                gridRect.x += labelUnionRect.width + margin;
+              }
+            }
+          }
         });
-        setStatesStylesFromModel(polygon, seriesModel, "areaStyle");
-        getECData(polygon).seriesIndex = seriesModel.seriesIndex;
-        toggleHoverEmphasis(polygon, focus, blurScope, emphasisDisabled);
+        adjustAxes();
       }
-      var changePolyState = this._changePolyState;
-      data.eachItemGraphicEl(function(el) {
-        el && (el.onHoverStateChange = changePolyState);
+      each(this._coordsList, function(coord) {
+        coord.calcAffineTransform();
       });
-      this._polyline.onHoverStateChange = changePolyState;
-      this._data = data;
-      this._coordSys = coordSys;
-      this._stackedOnPoints = stackedOnPoints;
-      this._points = points;
-      this._step = step;
-      this._valueOrigin = valueOrigin;
-      if (seriesModel.get("triggerLineEvent")) {
-        this.packEventData(seriesModel, polyline);
-        polygon && this.packEventData(seriesModel, polygon);
+      function adjustAxes() {
+        each(axesList, function(axis) {
+          var isHorizontal = axis.isHorizontal();
+          var extent = isHorizontal ? [0, gridRect.width] : [0, gridRect.height];
+          var idx = axis.inverse ? 1 : 0;
+          axis.setExtent(extent[idx], extent[1 - idx]);
+          updateAxisTransform(axis, isHorizontal ? gridRect.x : gridRect.y);
+        });
       }
     };
-    LineView2.prototype.packEventData = function(seriesModel, el) {
-      getECData(el).eventData = {
-        componentType: "series",
-        componentSubType: "line",
-        componentIndex: seriesModel.componentIndex,
-        seriesIndex: seriesModel.seriesIndex,
-        seriesName: seriesModel.name,
-        seriesType: "line"
-      };
-    };
-    LineView2.prototype.highlight = function(seriesModel, ecModel, api, payload) {
-      var data = seriesModel.getData();
-      var dataIndex = queryDataIndex(data, payload);
-      this._changePolyState("emphasis");
-      if (!(dataIndex instanceof Array) && dataIndex != null && dataIndex >= 0) {
-        var points = data.getLayout("points");
-        var symbol = data.getItemGraphicEl(dataIndex);
-        if (!symbol) {
-          var x = points[dataIndex * 2];
-          var y = points[dataIndex * 2 + 1];
-          if (isNaN(x) || isNaN(y)) {
-            return;
-          }
-          if (this._clipShapeForSymbol && !this._clipShapeForSymbol.contain(x, y)) {
-            return;
-          }
-          var zlevel = seriesModel.get("zlevel") || 0;
-          var z = seriesModel.get("z") || 0;
-          symbol = new Symbol$1(data, dataIndex);
-          symbol.x = x;
-          symbol.y = y;
-          symbol.setZ(zlevel, z);
-          var symbolLabel = symbol.getSymbolPath().getTextContent();
-          if (symbolLabel) {
-            symbolLabel.zlevel = zlevel;
-            symbolLabel.z = z;
-            symbolLabel.z2 = this._polyline.z2 + 1;
-          }
-          symbol.__temp = true;
-          data.setItemGraphicEl(dataIndex, symbol);
-          symbol.stopSymbolAnimation(true);
-          this.group.add(symbol);
-        }
-        symbol.highlight();
-      } else {
-        ChartView.prototype.highlight.call(this, seriesModel, ecModel, api, payload);
+    Grid2.prototype.getAxis = function(dim, axisIndex) {
+      var axesMapOnDim = this._axesMap[dim];
+      if (axesMapOnDim != null) {
+        return axesMapOnDim[axisIndex || 0];
       }
     };
-    LineView2.prototype.downplay = function(seriesModel, ecModel, api, payload) {
-      var data = seriesModel.getData();
-      var dataIndex = queryDataIndex(data, payload);
-      this._changePolyState("normal");
-      if (dataIndex != null && dataIndex >= 0) {
-        var symbol = data.getItemGraphicEl(dataIndex);
-        if (symbol) {
-          if (symbol.__temp) {
-            data.setItemGraphicEl(dataIndex, null);
-            this.group.remove(symbol);
-          } else {
-            symbol.downplay();
-          }
+    Grid2.prototype.getAxes = function() {
+      return this._axesList.slice();
+    };
+    Grid2.prototype.getCartesian = function(xAxisIndex, yAxisIndex) {
+      if (xAxisIndex != null && yAxisIndex != null) {
+        var key = "x" + xAxisIndex + "y" + yAxisIndex;
+        return this._coordsMap[key];
+      }
+      if (isObject(xAxisIndex)) {
+        yAxisIndex = xAxisIndex.yAxisIndex;
+        xAxisIndex = xAxisIndex.xAxisIndex;
+      }
+      for (var i = 0, coordList = this._coordsList; i < coordList.length; i++) {
+        if (coordList[i].getAxis("x").index === xAxisIndex || coordList[i].getAxis("y").index === yAxisIndex) {
+          return coordList[i];
         }
-      } else {
-        ChartView.prototype.downplay.call(this, seriesModel, ecModel, api, payload);
       }
     };
-    LineView2.prototype._changePolyState = function(toState) {
-      var polygon = this._polygon;
-      setStatesFlag(this._polyline, toState);
-      polygon && setStatesFlag(polygon, toState);
+    Grid2.prototype.getCartesians = function() {
+      return this._coordsList.slice();
     };
-    LineView2.prototype._newPolyline = function(points) {
-      var polyline = this._polyline;
-      if (polyline) {
-        this._lineGroup.remove(polyline);
-      }
-      polyline = new ECPolyline({
-        shape: {
-          points
-        },
-        segmentIgnoreThreshold: 2,
-        z2: 10
-      });
-      this._lineGroup.add(polyline);
-      this._polyline = polyline;
-      return polyline;
+    Grid2.prototype.convertToPixel = function(ecModel, finder, value) {
+      var target = this._findConvertTarget(finder);
+      return target.cartesian ? target.cartesian.dataToPoint(value) : target.axis ? target.axis.toGlobalCoord(target.axis.dataToCoord(value)) : null;
+    };
+    Grid2.prototype.convertFromPixel = function(ecModel, finder, value) {
+      var target = this._findConvertTarget(finder);
+      return target.cartesian ? target.cartesian.pointToData(value) : target.axis ? target.axis.coordToData(target.axis.toLocalCoord(value)) : null;
     };
-    LineView2.prototype._newPolygon = function(points, stackedOnPoints) {
-      var polygon = this._polygon;
-      if (polygon) {
-        this._lineGroup.remove(polygon);
+    Grid2.prototype._findConvertTarget = function(finder) {
+      var seriesModel = finder.seriesModel;
+      var xAxisModel = finder.xAxisModel || seriesModel && seriesModel.getReferringComponents("xAxis", SINGLE_REFERRING).models[0];
+      var yAxisModel = finder.yAxisModel || seriesModel && seriesModel.getReferringComponents("yAxis", SINGLE_REFERRING).models[0];
+      var gridModel = finder.gridModel;
+      var coordsList = this._coordsList;
+      var cartesian;
+      var axis;
+      if (seriesModel) {
+        cartesian = seriesModel.coordinateSystem;
+        indexOf(coordsList, cartesian) < 0 && (cartesian = null);
+      } else if (xAxisModel && yAxisModel) {
+        cartesian = this.getCartesian(xAxisModel.componentIndex, yAxisModel.componentIndex);
+      } else if (xAxisModel) {
+        axis = this.getAxis("x", xAxisModel.componentIndex);
+      } else if (yAxisModel) {
+        axis = this.getAxis("y", yAxisModel.componentIndex);
+      } else if (gridModel) {
+        var grid = gridModel.coordinateSystem;
+        if (grid === this) {
+          cartesian = this._coordsList[0];
+        }
       }
-      polygon = new ECPolygon({
-        shape: {
-          points,
-          stackedOnPoints
-        },
-        segmentIgnoreThreshold: 2
-      });
-      this._lineGroup.add(polygon);
-      this._polygon = polygon;
-      return polygon;
+      return {
+        cartesian,
+        axis
+      };
     };
-    LineView2.prototype._initSymbolLabelAnimation = function(data, coordSys, clipShape) {
-      var isHorizontalOrRadial;
-      var isCoordSysPolar;
-      var baseAxis = coordSys.getBaseAxis();
-      var isAxisInverse = baseAxis.inverse;
-      if (coordSys.type === "cartesian2d") {
-        isHorizontalOrRadial = baseAxis.isHorizontal();
-        isCoordSysPolar = false;
-      } else if (coordSys.type === "polar") {
-        isHorizontalOrRadial = baseAxis.dim === "angle";
-        isCoordSysPolar = true;
+    Grid2.prototype.containPoint = function(point) {
+      var coord = this._coordsList[0];
+      if (coord) {
+        return coord.containPoint(point);
       }
-      var seriesModel = data.hostModel;
-      var seriesDuration = seriesModel.get("animationDuration");
-      if (isFunction(seriesDuration)) {
-        seriesDuration = seriesDuration(null);
+    };
+    Grid2.prototype._initCartesian = function(gridModel, ecModel, api) {
+      var _this = this;
+      var grid = this;
+      var axisPositionUsed = {
+        left: false,
+        right: false,
+        top: false,
+        bottom: false
+      };
+      var axesMap = {
+        x: {},
+        y: {}
+      };
+      var axesCount = {
+        x: 0,
+        y: 0
+      };
+      ecModel.eachComponent("xAxis", createAxisCreator("x"), this);
+      ecModel.eachComponent("yAxis", createAxisCreator("y"), this);
+      if (!axesCount.x || !axesCount.y) {
+        this._axesMap = {};
+        this._axesList = [];
+        return;
       }
-      var seriesDelay = seriesModel.get("animationDelay") || 0;
-      var seriesDelayValue = isFunction(seriesDelay) ? seriesDelay(null) : seriesDelay;
-      data.eachItemGraphicEl(function(symbol, idx) {
-        var el = symbol;
-        if (el) {
-          var point = [symbol.x, symbol.y];
-          var start = void 0;
-          var end = void 0;
-          var current = void 0;
-          if (clipShape) {
-            if (isCoordSysPolar) {
-              var polarClip = clipShape;
-              var coord = coordSys.pointToCoord(point);
-              if (isHorizontalOrRadial) {
-                start = polarClip.startAngle;
-                end = polarClip.endAngle;
-                current = -coord[1] / 180 * Math.PI;
-              } else {
-                start = polarClip.r0;
-                end = polarClip.r;
-                current = coord[0];
-              }
-            } else {
-              var gridClip = clipShape;
-              if (isHorizontalOrRadial) {
-                start = gridClip.x;
-                end = gridClip.x + gridClip.width;
-                current = symbol.x;
-              } else {
-                start = gridClip.y + gridClip.height;
-                end = gridClip.y;
-                current = symbol.y;
-              }
-            }
-          }
-          var ratio = end === start ? 0 : (current - start) / (end - start);
-          if (isAxisInverse) {
-            ratio = 1 - ratio;
+      this._axesMap = axesMap;
+      each(axesMap.x, function(xAxis, xAxisIndex) {
+        each(axesMap.y, function(yAxis, yAxisIndex) {
+          var key = "x" + xAxisIndex + "y" + yAxisIndex;
+          var cartesian = new Cartesian2D(key);
+          cartesian.master = _this;
+          cartesian.model = gridModel;
+          _this._coordsMap[key] = cartesian;
+          _this._coordsList.push(cartesian);
+          cartesian.addAxis(xAxis);
+          cartesian.addAxis(yAxis);
+        });
+      });
+      function createAxisCreator(dimName) {
+        return function(axisModel, idx) {
+          if (!isAxisUsedInTheGrid(axisModel, gridModel)) {
+            return;
           }
-          var delay = isFunction(seriesDelay) ? seriesDelay(idx) : seriesDuration * ratio + seriesDelayValue;
-          var symbolPath = el.getSymbolPath();
-          var text = symbolPath.getTextContent();
-          el.attr({
-            scaleX: 0,
-            scaleY: 0
-          });
-          el.animateTo({
-            scaleX: 1,
-            scaleY: 1
-          }, {
-            duration: 200,
-            setToFinal: true,
-            delay
-          });
-          if (text) {
-            text.animateFrom({
-              style: {
-                opacity: 0
-              }
-            }, {
-              duration: 300,
-              delay
-            });
+          var axisPosition = axisModel.get("position");
+          if (dimName === "x") {
+            if (axisPosition !== "top" && axisPosition !== "bottom") {
+              axisPosition = axisPositionUsed.bottom ? "top" : "bottom";
+            }
+          } else {
+            if (axisPosition !== "left" && axisPosition !== "right") {
+              axisPosition = axisPositionUsed.left ? "right" : "left";
+            }
           }
-          symbolPath.disableLabelAnimation = true;
-        }
-      });
-    };
-    LineView2.prototype._initOrUpdateEndLabel = function(seriesModel, coordSys, inheritColor) {
-      var endLabelModel = seriesModel.getModel("endLabel");
-      if (anyStateShowEndLabel(seriesModel)) {
-        var data_2 = seriesModel.getData();
-        var polyline = this._polyline;
-        var points = data_2.getLayout("points");
-        if (!points) {
-          polyline.removeTextContent();
-          this._endLabel = null;
-          return;
-        }
-        var endLabel = this._endLabel;
-        if (!endLabel) {
-          endLabel = this._endLabel = new ZRText({
-            z2: 200
-            // should be higher than item symbol
-          });
-          endLabel.ignoreClip = true;
-          polyline.setTextContent(this._endLabel);
-          polyline.disableLabelAnimation = true;
-        }
-        var dataIndex = getLastIndexNotNull(points);
-        if (dataIndex >= 0) {
-          setLabelStyle(polyline, getLabelStatesModels(seriesModel, "endLabel"), {
-            inheritColor,
-            labelFetcher: seriesModel,
-            labelDataIndex: dataIndex,
-            defaultText: function(dataIndex2, opt, interpolatedValue) {
-              return interpolatedValue != null ? getDefaultInterpolatedLabel(data_2, interpolatedValue) : getDefaultLabel(data_2, dataIndex2);
-            },
-            enableTextSetter: true
-          }, getEndLabelStateSpecified(endLabelModel, coordSys));
-          polyline.textConfig.position = null;
-        }
-      } else if (this._endLabel) {
-        this._polyline.removeTextContent();
-        this._endLabel = null;
+          axisPositionUsed[axisPosition] = true;
+          var axis = new Axis2D(dimName, createScaleByModel(axisModel), [0, 0], axisModel.get("type"), axisPosition);
+          var isCategory = axis.type === "category";
+          axis.onBand = isCategory && axisModel.get("boundaryGap");
+          axis.inverse = axisModel.get("inverse");
+          axisModel.axis = axis;
+          axis.model = axisModel;
+          axis.grid = grid;
+          axis.index = idx;
+          grid._axesList.push(axis);
+          axesMap[dimName][idx] = axis;
+          axesCount[dimName]++;
+        };
       }
     };
-    LineView2.prototype._endLabelOnDuring = function(percent, clipRect, data, animationRecord, valueAnimation, endLabelModel, coordSys) {
-      var endLabel = this._endLabel;
-      var polyline = this._polyline;
-      if (endLabel) {
-        if (percent < 1 && animationRecord.originalX == null) {
-          animationRecord.originalX = endLabel.x;
-          animationRecord.originalY = endLabel.y;
+    Grid2.prototype._updateScale = function(ecModel, gridModel) {
+      each(this._axesList, function(axis) {
+        axis.scale.setExtent(Infinity, -Infinity);
+        if (axis.type === "category") {
+          var categorySortInfo = axis.model.get("categorySortInfo");
+          axis.scale.setSortInfo(categorySortInfo);
         }
-        var points = data.getLayout("points");
-        var seriesModel = data.hostModel;
-        var connectNulls = seriesModel.get("connectNulls");
-        var precision = endLabelModel.get("precision");
-        var distance = endLabelModel.get("distance") || 0;
-        var baseAxis = coordSys.getBaseAxis();
-        var isHorizontal = baseAxis.isHorizontal();
-        var isBaseInversed = baseAxis.inverse;
-        var clipShape = clipRect.shape;
-        var xOrY = isBaseInversed ? isHorizontal ? clipShape.x : clipShape.y + clipShape.height : isHorizontal ? clipShape.x + clipShape.width : clipShape.y;
-        var distanceX = (isHorizontal ? distance : 0) * (isBaseInversed ? -1 : 1);
-        var distanceY = (isHorizontal ? 0 : -distance) * (isBaseInversed ? -1 : 1);
-        var dim = isHorizontal ? "x" : "y";
-        var dataIndexRange = getIndexRange(points, xOrY, dim);
-        var indices = dataIndexRange.range;
-        var diff = indices[1] - indices[0];
-        var value = void 0;
-        if (diff >= 1) {
-          if (diff > 1 && !connectNulls) {
-            var pt = getPointAtIndex(points, indices[0]);
-            endLabel.attr({
-              x: pt[0] + distanceX,
-              y: pt[1] + distanceY
-            });
-            valueAnimation && (value = seriesModel.getRawValue(indices[0]));
-          } else {
-            var pt = polyline.getPointOn(xOrY, dim);
-            pt && endLabel.attr({
-              x: pt[0] + distanceX,
-              y: pt[1] + distanceY
-            });
-            var startValue = seriesModel.getRawValue(indices[0]);
-            var endValue = seriesModel.getRawValue(indices[1]);
-            valueAnimation && (value = interpolateRawValues(data, precision, startValue, endValue, dataIndexRange.t));
-          }
-          animationRecord.lastFrameIndex = indices[0];
-        } else {
-          var idx = percent === 1 || animationRecord.lastFrameIndex > 0 ? indices[0] : 0;
-          var pt = getPointAtIndex(points, idx);
-          valueAnimation && (value = seriesModel.getRawValue(idx));
-          endLabel.attr({
-            x: pt[0] + distanceX,
-            y: pt[1] + distanceY
-          });
-        }
-        if (valueAnimation) {
-          var inner = labelInner(endLabel);
-          if (typeof inner.setLabelText === "function") {
-            inner.setLabelText(value);
+      });
+      ecModel.eachSeries(function(seriesModel) {
+        if (isCartesian2DSeries(seriesModel)) {
+          var axesModelMap = findAxisModels(seriesModel);
+          var xAxisModel = axesModelMap.xAxisModel;
+          var yAxisModel = axesModelMap.yAxisModel;
+          if (!isAxisUsedInTheGrid(xAxisModel, gridModel) || !isAxisUsedInTheGrid(yAxisModel, gridModel)) {
+            return;
           }
+          var cartesian = this.getCartesian(xAxisModel.componentIndex, yAxisModel.componentIndex);
+          var data = seriesModel.getData();
+          var xAxis = cartesian.getAxis("x");
+          var yAxis = cartesian.getAxis("y");
+          unionExtent(data, xAxis);
+          unionExtent(data, yAxis);
         }
-      }
-    };
-    LineView2.prototype._doUpdateAnimation = function(data, stackedOnPoints, coordSys, api, step, valueOrigin, connectNulls) {
-      var polyline = this._polyline;
-      var polygon = this._polygon;
-      var seriesModel = data.hostModel;
-      var diff = lineAnimationDiff(this._data, data, this._stackedOnPoints, stackedOnPoints, this._coordSys, coordSys, this._valueOrigin);
-      var current = diff.current;
-      var stackedOnCurrent = diff.stackedOnCurrent;
-      var next = diff.next;
-      var stackedOnNext = diff.stackedOnNext;
-      if (step) {
-        stackedOnCurrent = turnPointsIntoStep(diff.stackedOnCurrent, diff.current, coordSys, step, connectNulls);
-        current = turnPointsIntoStep(diff.current, null, coordSys, step, connectNulls);
-        stackedOnNext = turnPointsIntoStep(diff.stackedOnNext, diff.next, coordSys, step, connectNulls);
-        next = turnPointsIntoStep(diff.next, null, coordSys, step, connectNulls);
-      }
-      if (getBoundingDiff(current, next) > 3e3 || polygon && getBoundingDiff(stackedOnCurrent, stackedOnNext) > 3e3) {
-        polyline.stopAnimation();
-        polyline.setShape({
-          points: next
+      }, this);
+      function unionExtent(data, axis) {
+        each(getDataDimensionsOnAxis(data, axis.dim), function(dim) {
+          axis.scale.unionExtentFromData(data, dim);
         });
-        if (polygon) {
-          polygon.stopAnimation();
-          polygon.setShape({
-            points: next,
-            stackedOnPoints: stackedOnNext
-          });
-        }
-        return;
       }
-      polyline.shape.__points = diff.current;
-      polyline.shape.points = current;
-      var target = {
-        shape: {
-          points: next
-        }
+    };
+    Grid2.prototype.getTooltipAxes = function(dim) {
+      var baseAxes = [];
+      var otherAxes = [];
+      each(this.getCartesians(), function(cartesian) {
+        var baseAxis = dim != null && dim !== "auto" ? cartesian.getAxis(dim) : cartesian.getBaseAxis();
+        var otherAxis = cartesian.getOtherAxis(baseAxis);
+        indexOf(baseAxes, baseAxis) < 0 && baseAxes.push(baseAxis);
+        indexOf(otherAxes, otherAxis) < 0 && otherAxes.push(otherAxis);
+      });
+      return {
+        baseAxes,
+        otherAxes
       };
-      if (diff.current !== current) {
-        target.shape.__points = diff.next;
-      }
-      polyline.stopAnimation();
-      updateProps(polyline, target, seriesModel);
-      if (polygon) {
-        polygon.setShape({
-          // Reuse the points with polyline.
-          points: current,
-          stackedOnPoints: stackedOnCurrent
-        });
-        polygon.stopAnimation();
-        updateProps(polygon, {
-          shape: {
-            stackedOnPoints: stackedOnNext
-          }
-        }, seriesModel);
-        if (polyline.shape.points !== polygon.shape.points) {
-          polygon.shape.points = polyline.shape.points;
+    };
+    Grid2.create = function(ecModel, api) {
+      var grids = [];
+      ecModel.eachComponent("grid", function(gridModel, idx) {
+        var grid = new Grid2(gridModel, ecModel, api);
+        grid.name = "grid_" + idx;
+        grid.resize(gridModel, api, true);
+        gridModel.coordinateSystem = grid;
+        grids.push(grid);
+      });
+      ecModel.eachSeries(function(seriesModel) {
+        if (!isCartesian2DSeries(seriesModel)) {
+          return;
         }
-      }
-      var updatedDataInfo = [];
-      var diffStatus = diff.status;
-      for (var i = 0; i < diffStatus.length; i++) {
-        var cmd = diffStatus[i].cmd;
-        if (cmd === "=") {
-          var el = data.getItemGraphicEl(diffStatus[i].idx1);
-          if (el) {
-            updatedDataInfo.push({
-              el,
-              ptIdx: i
-              // Index of points
-            });
+        var axesModelMap = findAxisModels(seriesModel);
+        var xAxisModel = axesModelMap.xAxisModel;
+        var yAxisModel = axesModelMap.yAxisModel;
+        var gridModel = xAxisModel.getCoordSysModel();
+        if (process.env.NODE_ENV !== "production") {
+          if (!gridModel) {
+            throw new Error('Grid "' + retrieve3(xAxisModel.get("gridIndex"), xAxisModel.get("gridId"), 0) + '" not found');
           }
-        }
-      }
-      if (polyline.animators && polyline.animators.length) {
-        polyline.animators[0].during(function() {
-          polygon && polygon.dirtyShape();
-          var points = polyline.shape.__points;
-          for (var i2 = 0; i2 < updatedDataInfo.length; i2++) {
-            var el2 = updatedDataInfo[i2].el;
-            var offset = updatedDataInfo[i2].ptIdx * 2;
-            el2.x = points[offset];
-            el2.y = points[offset + 1];
-            el2.markRedraw();
+          if (xAxisModel.getCoordSysModel() !== yAxisModel.getCoordSysModel()) {
+            throw new Error("xAxis and yAxis must use the same grid");
           }
-        });
-      }
-    };
-    LineView2.prototype.remove = function(ecModel) {
-      var group = this.group;
-      var oldData = this._data;
-      this._lineGroup.removeAll();
-      this._symbolDraw.remove(true);
-      oldData && oldData.eachItemGraphicEl(function(el, idx) {
-        if (el.__temp) {
-          group.remove(el);
-          oldData.setItemGraphicEl(idx, null);
         }
+        var grid = gridModel.coordinateSystem;
+        seriesModel.coordinateSystem = grid.getCartesian(xAxisModel.componentIndex, yAxisModel.componentIndex);
       });
-      this._polyline = this._polygon = this._coordSys = this._points = this._stackedOnPoints = this._endLabel = this._data = null;
+      return grids;
     };
-    LineView2.type = "line";
-    return LineView2;
-  })(ChartView)
+    Grid2.dimensions = cartesian2DDimensions;
+    return Grid2;
+  })()
 );
+function isAxisUsedInTheGrid(axisModel, gridModel) {
+  return axisModel.getCoordSysModel() === gridModel;
+}
+function fixAxisOnZero(axesMap, otherAxisDim, axis, onZeroRecords) {
+  axis.getAxesOnZeroOf = function() {
+    return otherAxisOnZeroOf ? [otherAxisOnZeroOf] : [];
+  };
+  var otherAxes = axesMap[otherAxisDim];
+  var otherAxisOnZeroOf;
+  var axisModel = axis.model;
+  var onZero = axisModel.get(["axisLine", "onZero"]);
+  var onZeroAxisIndex = axisModel.get(["axisLine", "onZeroAxisIndex"]);
+  if (!onZero) {
+    return;
+  }
+  if (onZeroAxisIndex != null) {
+    if (canOnZeroToAxis(otherAxes[onZeroAxisIndex])) {
+      otherAxisOnZeroOf = otherAxes[onZeroAxisIndex];
+    }
+  } else {
+    for (var idx in otherAxes) {
+      if (otherAxes.hasOwnProperty(idx) && canOnZeroToAxis(otherAxes[idx]) && !onZeroRecords[getOnZeroRecordKey(otherAxes[idx])]) {
+        otherAxisOnZeroOf = otherAxes[idx];
+        break;
+      }
+    }
+  }
+  if (otherAxisOnZeroOf) {
+    onZeroRecords[getOnZeroRecordKey(otherAxisOnZeroOf)] = true;
+  }
+  function getOnZeroRecordKey(axis2) {
+    return axis2.dim + "_" + axis2.index;
+  }
+}
+function canOnZeroToAxis(axis) {
+  return axis && axis.type !== "category" && axis.type !== "time" && ifAxisCrossZero(axis);
+}
+function updateAxisTransform(axis, coordBase) {
+  var axisExtent = axis.getExtent();
+  var axisExtentSum = axisExtent[0] + axisExtent[1];
+  axis.toGlobalCoord = axis.dim === "x" ? function(coord) {
+    return coord + coordBase;
+  } : function(coord) {
+    return axisExtentSum - coord + coordBase;
+  };
+  axis.toLocalCoord = axis.dim === "x" ? function(coord) {
+    return coord - coordBase;
+  } : function(coord) {
+    return axisExtentSum - coord + coordBase;
+  };
+}
 export {
-  LineView as default
+  Grid as default
 };