q2-tecton-elements 1.23.0-alpha.0 → 1.24.0

package/dist/components/q2-chart-area.js

@@ -0,0 +1,4604 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { o as overrideFocus, l as loc } from './index15.js';
+import { g as getDefaultLabel, c as createSeriesData, a as getDefaultInterpolatedLabel, i as isCoordinateSystemType, b as createGridClipPath, d as createPolarClipPath, e as dataSample, f as install$3, h as install$4, j as getCSSProperty, k as isValidColor, l as formatValue } from './charting.js';
+import { _ as __extends, c as createSymbol, e as enterEmphasis, l as leaveEmphasis, u as updateProps, s as saveOldStyle, i as initProps, g as getLabelStatesModels, n as normalizeSymbolOffset, Z as ZRImage, a as extend, b as setLabelStyle, t as toggleHoverEmphasis, d as getECData, r as removeElement, f as normalizeSymbolSize, G as Group, h as traverseElements, j as isObject, S as SeriesModel, m as map, k as isDimensionStacked, o as isNumber, p as createFloat32Array, q as cubicRootAt, P as Path, v as PathProxy, w as cubicAt, x as convertToColorString, y as defaults, z as setStatesStylesFromModel, A as queryDataIndex, C as ChartView, B as setStatesFlag, D as isFunction, E as ZRText, F as interpolateRawValues, H as labelInner, I as each, L as LinearGradient, J as SPECIAL_STATES, K as lerp, M as createRenderPlanner, N as cubicSubdivide, O as fromPoints, Q as BoundingRect, R as clonePath, T as Polygon, U as Sector, V as Rect, W as Point, X as Transformable, Y as lerp$1, $ as getAnimationConfig, a0 as isArray, a1 as normalizeToArray, a2 as SERIES_UNIVERSAL_TRANSITION_PROP, a3 as makeInner, a4 as DataDiffer, a5 as filter, a6 as createHashMap, a7 as Displayable, a8 as getOldStyle, a9 as use, aa as install$1, ab as install$2, ac as init } from './installCanvasRenderer.js';
+
+var Symbol =
+/** @class */
+function (_super) {
+  __extends(Symbol, _super);
+
+  function Symbol(data, idx, seriesScope, opts) {
+    var _this = _super.call(this) || this;
+
+    _this.updateData(data, idx, seriesScope, opts);
+
+    return _this;
+  }
+
+  Symbol.prototype._createSymbol = function (symbolType, data, idx, symbolSize, keepAspect) {
+    // Remove paths created before
+    this.removeAll(); // let symbolPath = createSymbol(
+    //     symbolType, -0.5, -0.5, 1, 1, color
+    // );
+    // If width/height are set too small (e.g., set to 1) on ios10
+    // and macOS Sierra, a circle stroke become a rect, no matter what
+    // the scale is set. So we set width/height as 2. See #4150.
+
+    var symbolPath = createSymbol(symbolType, -1, -1, 2, 2, null, keepAspect);
+    symbolPath.attr({
+      z2: 100,
+      culling: true,
+      scaleX: symbolSize[0] / 2,
+      scaleY: symbolSize[1] / 2
+    }); // Rewrite drift method
+
+    symbolPath.drift = driftSymbol;
+    this._symbolType = symbolType;
+    this.add(symbolPath);
+  };
+  /**
+   * Stop animation
+   * @param {boolean} toLastFrame
+   */
+
+
+  Symbol.prototype.stopSymbolAnimation = function (toLastFrame) {
+    this.childAt(0).stopAnimation(null, toLastFrame);
+  };
+
+  Symbol.prototype.getSymbolType = function () {
+    return this._symbolType;
+  };
+  /**
+   * FIXME:
+   * Caution: This method breaks the encapsulation of this module,
+   * but it indeed brings convenience. So do not use the method
+   * unless you detailedly know all the implements of `Symbol`,
+   * especially animation.
+   *
+   * Get symbol path element.
+   */
+
+
+  Symbol.prototype.getSymbolPath = function () {
+    return this.childAt(0);
+  };
+  /**
+   * Highlight symbol
+   */
+
+
+  Symbol.prototype.highlight = function () {
+    enterEmphasis(this.childAt(0));
+  };
+  /**
+   * Downplay symbol
+   */
+
+
+  Symbol.prototype.downplay = function () {
+    leaveEmphasis(this.childAt(0));
+  };
+  /**
+   * @param {number} zlevel
+   * @param {number} z
+   */
+
+
+  Symbol.prototype.setZ = function (zlevel, z) {
+    var symbolPath = this.childAt(0);
+    symbolPath.zlevel = zlevel;
+    symbolPath.z = z;
+  };
+
+  Symbol.prototype.setDraggable = function (draggable, hasCursorOption) {
+    var symbolPath = this.childAt(0);
+    symbolPath.draggable = draggable;
+    symbolPath.cursor = !hasCursorOption && draggable ? 'move' : symbolPath.cursor;
+  };
+  /**
+   * Update symbol properties
+   */
+
+
+  Symbol.prototype.updateData = function (data, idx, seriesScope, opts) {
+    this.silent = false;
+    var symbolType = data.getItemVisual(idx, 'symbol') || 'circle';
+    var seriesModel = data.hostModel;
+    var symbolSize = Symbol.getSymbolSize(data, idx);
+    var isInit = symbolType !== this._symbolType;
+    var disableAnimation = opts && opts.disableAnimation;
+
+    if (isInit) {
+      var keepAspect = data.getItemVisual(idx, 'symbolKeepAspect');
+
+      this._createSymbol(symbolType, data, idx, symbolSize, keepAspect);
+    } else {
+      var symbolPath = this.childAt(0);
+      symbolPath.silent = false;
+      var target = {
+        scaleX: symbolSize[0] / 2,
+        scaleY: symbolSize[1] / 2
+      };
+      disableAnimation ? symbolPath.attr(target) : updateProps(symbolPath, target, seriesModel, idx);
+      saveOldStyle(symbolPath);
+    }
+
+    this._updateCommon(data, idx, symbolSize, seriesScope, opts);
+
+    if (isInit) {
+      var symbolPath = this.childAt(0);
+
+      if (!disableAnimation) {
+        var target = {
+          scaleX: this._sizeX,
+          scaleY: this._sizeY,
+          style: {
+            // Always fadeIn. Because it has fadeOut animation when symbol is removed..
+            opacity: symbolPath.style.opacity
+          }
+        };
+        symbolPath.scaleX = symbolPath.scaleY = 0;
+        symbolPath.style.opacity = 0;
+        initProps(symbolPath, target, seriesModel, idx);
+      }
+    }
+
+    if (disableAnimation) {
+      // Must stop leave transition manually if don't call initProps or updateProps.
+      this.childAt(0).stopAnimation('leave');
+    }
+  };
+
+  Symbol.prototype._updateCommon = function (data, idx, symbolSize, seriesScope, opts) {
+    var symbolPath = this.childAt(0);
+    var seriesModel = data.hostModel;
+    var emphasisItemStyle;
+    var blurItemStyle;
+    var selectItemStyle;
+    var focus;
+    var blurScope;
+    var emphasisDisabled;
+    var labelStatesModels;
+    var hoverScale;
+    var cursorStyle;
+
+    if (seriesScope) {
+      emphasisItemStyle = seriesScope.emphasisItemStyle;
+      blurItemStyle = seriesScope.blurItemStyle;
+      selectItemStyle = seriesScope.selectItemStyle;
+      focus = seriesScope.focus;
+      blurScope = seriesScope.blurScope;
+      labelStatesModels = seriesScope.labelStatesModels;
+      hoverScale = seriesScope.hoverScale;
+      cursorStyle = seriesScope.cursorStyle;
+      emphasisDisabled = seriesScope.emphasisDisabled;
+    }
+
+    if (!seriesScope || data.hasItemOption) {
+      var itemModel = seriesScope && seriesScope.itemModel ? seriesScope.itemModel : data.getItemModel(idx);
+      var emphasisModel = itemModel.getModel('emphasis');
+      emphasisItemStyle = emphasisModel.getModel('itemStyle').getItemStyle();
+      selectItemStyle = itemModel.getModel(['select', 'itemStyle']).getItemStyle();
+      blurItemStyle = itemModel.getModel(['blur', 'itemStyle']).getItemStyle();
+      focus = emphasisModel.get('focus');
+      blurScope = emphasisModel.get('blurScope');
+      emphasisDisabled = emphasisModel.get('disabled');
+      labelStatesModels = getLabelStatesModels(itemModel);
+      hoverScale = emphasisModel.getShallow('scale');
+      cursorStyle = itemModel.getShallow('cursor');
+    }
+
+    var symbolRotate = data.getItemVisual(idx, 'symbolRotate');
+    symbolPath.attr('rotation', (symbolRotate || 0) * Math.PI / 180 || 0);
+    var symbolOffset = normalizeSymbolOffset(data.getItemVisual(idx, 'symbolOffset'), symbolSize);
+
+    if (symbolOffset) {
+      symbolPath.x = symbolOffset[0];
+      symbolPath.y = symbolOffset[1];
+    }
+
+    cursorStyle && symbolPath.attr('cursor', cursorStyle);
+    var symbolStyle = data.getItemVisual(idx, 'style');
+    var visualColor = symbolStyle.fill;
+
+    if (symbolPath instanceof ZRImage) {
+      var pathStyle = symbolPath.style;
+      symbolPath.useStyle(extend({
+        // TODO other properties like x, y ?
+        image: pathStyle.image,
+        x: pathStyle.x,
+        y: pathStyle.y,
+        width: pathStyle.width,
+        height: pathStyle.height
+      }, symbolStyle));
+    } else {
+      if (symbolPath.__isEmptyBrush) {
+        // fill and stroke will be swapped if it's empty.
+        // So we cloned a new style to avoid it affecting the original style in visual storage.
+        // TODO Better implementation. No empty logic!
+        symbolPath.useStyle(extend({}, symbolStyle));
+      } else {
+        symbolPath.useStyle(symbolStyle);
+      } // Disable decal because symbol scale will been applied on the decal.
+
+
+      symbolPath.style.decal = null;
+      symbolPath.setColor(visualColor, opts && opts.symbolInnerColor);
+      symbolPath.style.strokeNoScale = true;
+    }
+
+    var liftZ = data.getItemVisual(idx, 'liftZ');
+    var z2Origin = this._z2;
+
+    if (liftZ != null) {
+      if (z2Origin == null) {
+        this._z2 = symbolPath.z2;
+        symbolPath.z2 += liftZ;
+      }
+    } else if (z2Origin != null) {
+      symbolPath.z2 = z2Origin;
+      this._z2 = null;
+    }
+
+    var useNameLabel = opts && opts.useNameLabel;
+    setLabelStyle(symbolPath, labelStatesModels, {
+      labelFetcher: seriesModel,
+      labelDataIndex: idx,
+      defaultText: getLabelDefaultText,
+      inheritColor: visualColor,
+      defaultOpacity: symbolStyle.opacity
+    }); // Do not execute util needed.
+
+    function getLabelDefaultText(idx) {
+      return useNameLabel ? data.getName(idx) : getDefaultLabel(data, idx);
+    }
+
+    this._sizeX = symbolSize[0] / 2;
+    this._sizeY = symbolSize[1] / 2;
+    var emphasisState = symbolPath.ensureState('emphasis');
+    emphasisState.style = emphasisItemStyle;
+    symbolPath.ensureState('select').style = selectItemStyle;
+    symbolPath.ensureState('blur').style = blurItemStyle; // null / undefined / true means to use default strategy.
+    // 0 / false / negative number / NaN / Infinity means no scale.
+
+    var scaleRatio = hoverScale == null || hoverScale === true ? Math.max(1.1, 3 / this._sizeY) // PENDING: restrict hoverScale > 1? It seems unreasonable to scale down
+    : isFinite(hoverScale) && hoverScale > 0 ? +hoverScale : 1; // always set scale to allow resetting
+
+    emphasisState.scaleX = this._sizeX * scaleRatio;
+    emphasisState.scaleY = this._sizeY * scaleRatio;
+    this.setSymbolScale(1);
+    toggleHoverEmphasis(this, focus, blurScope, emphasisDisabled);
+  };
+
+  Symbol.prototype.setSymbolScale = function (scale) {
+    this.scaleX = this.scaleY = scale;
+  };
+
+  Symbol.prototype.fadeOut = function (cb, seriesModel, opt) {
+    var symbolPath = this.childAt(0);
+    var dataIndex = getECData(this).dataIndex;
+    var animationOpt = opt && opt.animation; // Avoid mistaken hover when fading out
+
+    this.silent = symbolPath.silent = true; // Not show text when animating
+
+    if (opt && opt.fadeLabel) {
+      var textContent = symbolPath.getTextContent();
+
+      if (textContent) {
+        removeElement(textContent, {
+          style: {
+            opacity: 0
+          }
+        }, seriesModel, {
+          dataIndex: dataIndex,
+          removeOpt: animationOpt,
+          cb: function () {
+            symbolPath.removeTextContent();
+          }
+        });
+      }
+    } else {
+      symbolPath.removeTextContent();
+    }
+
+    removeElement(symbolPath, {
+      style: {
+        opacity: 0
+      },
+      scaleX: 0,
+      scaleY: 0
+    }, seriesModel, {
+      dataIndex: dataIndex,
+      cb: cb,
+      removeOpt: animationOpt
+    });
+  };
+
+  Symbol.getSymbolSize = function (data, idx) {
+    return normalizeSymbolSize(data.getItemVisual(idx, 'symbolSize'));
+  };
+
+  return Symbol;
+}(Group);
+
+function driftSymbol(dx, dy) {
+  this.parent.drift(dx, dy);
+}
+
+function symbolNeedsDraw(data, point, idx, opt) {
+  return point && !isNaN(point[0]) && !isNaN(point[1]) && !(opt.isIgnore && opt.isIgnore(idx)) // We do not set clipShape on group, because it will cut part of
+  // the symbol element shape. We use the same clip shape here as
+  // the line clip.
+  && !(opt.clipShape && !opt.clipShape.contain(point[0], point[1])) && data.getItemVisual(idx, 'symbol') !== 'none';
+}
+
+function normalizeUpdateOpt(opt) {
+  if (opt != null && !isObject(opt)) {
+    opt = {
+      isIgnore: opt
+    };
+  }
+
+  return opt || {};
+}
+
+function makeSeriesScope(data) {
+  var seriesModel = data.hostModel;
+  var emphasisModel = seriesModel.getModel('emphasis');
+  return {
+    emphasisItemStyle: emphasisModel.getModel('itemStyle').getItemStyle(),
+    blurItemStyle: seriesModel.getModel(['blur', 'itemStyle']).getItemStyle(),
+    selectItemStyle: seriesModel.getModel(['select', 'itemStyle']).getItemStyle(),
+    focus: emphasisModel.get('focus'),
+    blurScope: emphasisModel.get('blurScope'),
+    emphasisDisabled: emphasisModel.get('disabled'),
+    hoverScale: emphasisModel.get('scale'),
+    labelStatesModels: getLabelStatesModels(seriesModel),
+    cursorStyle: seriesModel.get('cursor')
+  };
+}
+
+var SymbolDraw =
+/** @class */
+function () {
+  function SymbolDraw(SymbolCtor) {
+    this.group = new Group();
+    this._SymbolCtor = SymbolCtor || Symbol;
+  }
+  /**
+   * Update symbols draw by new data
+   */
+
+
+  SymbolDraw.prototype.updateData = function (data, opt) {
+    // Remove progressive els.
+    this._progressiveEls = null;
+    opt = normalizeUpdateOpt(opt);
+    var group = this.group;
+    var seriesModel = data.hostModel;
+    var oldData = this._data;
+    var SymbolCtor = this._SymbolCtor;
+    var disableAnimation = opt.disableAnimation;
+    var seriesScope = makeSeriesScope(data);
+    var symbolUpdateOpt = {
+      disableAnimation: disableAnimation
+    };
+
+    var getSymbolPoint = opt.getSymbolPoint || function (idx) {
+      return data.getItemLayout(idx);
+    }; // There is no oldLineData only when first rendering or switching from
+    // stream mode to normal mode, where previous elements should be removed.
+
+
+    if (!oldData) {
+      group.removeAll();
+    }
+
+    data.diff(oldData).add(function (newIdx) {
+      var point = getSymbolPoint(newIdx);
+
+      if (symbolNeedsDraw(data, point, newIdx, opt)) {
+        var symbolEl = new SymbolCtor(data, newIdx, seriesScope, symbolUpdateOpt);
+        symbolEl.setPosition(point);
+        data.setItemGraphicEl(newIdx, symbolEl);
+        group.add(symbolEl);
+      }
+    }).update(function (newIdx, oldIdx) {
+      var symbolEl = oldData.getItemGraphicEl(oldIdx);
+      var point = getSymbolPoint(newIdx);
+
+      if (!symbolNeedsDraw(data, point, newIdx, opt)) {
+        group.remove(symbolEl);
+        return;
+      }
+
+      var newSymbolType = data.getItemVisual(newIdx, 'symbol') || 'circle';
+      var oldSymbolType = symbolEl && symbolEl.getSymbolType && symbolEl.getSymbolType();
+
+      if (!symbolEl // Create a new if symbol type changed.
+      || oldSymbolType && oldSymbolType !== newSymbolType) {
+        group.remove(symbolEl);
+        symbolEl = new SymbolCtor(data, newIdx, seriesScope, symbolUpdateOpt);
+        symbolEl.setPosition(point);
+      } else {
+        symbolEl.updateData(data, newIdx, seriesScope, symbolUpdateOpt);
+        var target = {
+          x: point[0],
+          y: point[1]
+        };
+        disableAnimation ? symbolEl.attr(target) : updateProps(symbolEl, target, seriesModel);
+      } // Add back
+
+
+      group.add(symbolEl);
+      data.setItemGraphicEl(newIdx, symbolEl);
+    }).remove(function (oldIdx) {
+      var el = oldData.getItemGraphicEl(oldIdx);
+      el && el.fadeOut(function () {
+        group.remove(el);
+      }, seriesModel);
+    }).execute();
+    this._getSymbolPoint = getSymbolPoint;
+    this._data = data;
+  };
+
+  SymbolDraw.prototype.updateLayout = function () {
+    var _this = this;
+
+    var data = this._data;
+
+    if (data) {
+      // Not use animation
+      data.eachItemGraphicEl(function (el, idx) {
+        var point = _this._getSymbolPoint(idx);
+
+        el.setPosition(point);
+        el.markRedraw();
+      });
+    }
+  };
+
+  SymbolDraw.prototype.incrementalPrepareUpdate = function (data) {
+    this._seriesScope = makeSeriesScope(data);
+    this._data = null;
+    this.group.removeAll();
+  };
+  /**
+   * Update symbols draw by new data
+   */
+
+  SymbolDraw.prototype.incrementalUpdate = function (taskParams, data, opt) {
+    // Clear
+    this._progressiveEls = [];
+    opt = normalizeUpdateOpt(opt);
+
+    function updateIncrementalAndHover(el) {
+      if (!el.isGroup) {
+        el.incremental = true;
+        el.ensureState('emphasis').hoverLayer = true;
+      }
+    }
+
+    for (var idx = taskParams.start; idx < taskParams.end; idx++) {
+      var point = data.getItemLayout(idx);
+
+      if (symbolNeedsDraw(data, point, idx, opt)) {
+        var el = new this._SymbolCtor(data, idx, this._seriesScope);
+        el.traverse(updateIncrementalAndHover);
+        el.setPosition(point);
+        this.group.add(el);
+        data.setItemGraphicEl(idx, el);
+
+        this._progressiveEls.push(el);
+      }
+    }
+  };
+
+  SymbolDraw.prototype.eachRendered = function (cb) {
+    traverseElements(this._progressiveEls || this.group, cb);
+  };
+
+  SymbolDraw.prototype.remove = function (enableAnimation) {
+    var group = this.group;
+    var data = this._data; // Incremental model do not have this._data.
+
+    if (data && enableAnimation) {
+      data.eachItemGraphicEl(function (el) {
+        el.fadeOut(function () {
+          group.remove(el);
+        }, data.hostModel);
+      });
+    } else {
+      group.removeAll();
+    }
+  };
+  return SymbolDraw;
+}();
+
+var LineSeriesModel =
+/** @class */
+function (_super) {
+  __extends(LineSeriesModel, _super);
+
+  function LineSeriesModel() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.type = LineSeriesModel.type;
+    _this.hasSymbolVisual = true;
+    return _this;
+  }
+
+  LineSeriesModel.prototype.getInitialData = function (option) {
+
+    return createSeriesData(null, this, {
+      useEncodeDefaulter: true
+    });
+  };
+
+  LineSeriesModel.prototype.getLegendIcon = function (opt) {
+    var group = new Group();
+    var line = createSymbol('line', 0, opt.itemHeight / 2, opt.itemWidth, 0, opt.lineStyle.stroke, false);
+    group.add(line);
+    line.setStyle(opt.lineStyle);
+    var visualType = this.getData().getVisual('symbol');
+    var visualRotate = this.getData().getVisual('symbolRotate');
+    var symbolType = visualType === 'none' ? 'circle' : visualType; // Symbol size is 80% when there is a line
+
+    var size = opt.itemHeight * 0.8;
+    var symbol = createSymbol(symbolType, (opt.itemWidth - size) / 2, (opt.itemHeight - size) / 2, size, size, opt.itemStyle.fill);
+    group.add(symbol);
+    symbol.setStyle(opt.itemStyle);
+    var symbolRotate = opt.iconRotate === 'inherit' ? visualRotate : opt.iconRotate || 0;
+    symbol.rotation = symbolRotate * Math.PI / 180;
+    symbol.setOrigin([opt.itemWidth / 2, opt.itemHeight / 2]);
+
+    if (symbolType.indexOf('empty') > -1) {
+      symbol.style.stroke = symbol.style.fill;
+      symbol.style.fill = '#fff';
+      symbol.style.lineWidth = 2;
+    }
+
+    return group;
+  };
+
+  LineSeriesModel.type = 'series.line';
+  LineSeriesModel.dependencies = ['grid', 'polar'];
+  LineSeriesModel.defaultOption = {
+    // zlevel: 0,
+    z: 3,
+    coordinateSystem: 'cartesian2d',
+    legendHoverLink: true,
+    clip: true,
+    label: {
+      position: 'top'
+    },
+    // itemStyle: {
+    // },
+    endLabel: {
+      show: false,
+      valueAnimation: true,
+      distance: 8
+    },
+    lineStyle: {
+      width: 2,
+      type: 'solid'
+    },
+    emphasis: {
+      scale: true
+    },
+    // areaStyle: {
+    // origin of areaStyle. Valid values:
+    // `'auto'/null/undefined`: from axisLine to data
+    // `'start'`: from min to data
+    // `'end'`: from data to max
+    // origin: 'auto'
+    // },
+    // false, 'start', 'end', 'middle'
+    step: false,
+    // Disabled if step is true
+    smooth: false,
+    smoothMonotone: null,
+    symbol: 'emptyCircle',
+    symbolSize: 4,
+    symbolRotate: null,
+    showSymbol: true,
+    // `false`: follow the label interval strategy.
+    // `true`: show all symbols.
+    // `'auto'`: If possible, show all symbols, otherwise
+    //           follow the label interval strategy.
+    showAllSymbol: 'auto',
+    // Whether to connect break point.
+    connectNulls: false,
+    // Sampling for large data. Can be: 'average', 'max', 'min', 'sum', 'lttb'.
+    sampling: 'none',
+    animationEasing: 'linear',
+    // Disable progressive
+    progressive: 0,
+    hoverLayerThreshold: Infinity,
+    universalTransition: {
+      divideShape: 'clone'
+    },
+    triggerLineEvent: false
+  };
+  return LineSeriesModel;
+}(SeriesModel);
+
+function prepareDataCoordInfo(coordSys, data, valueOrigin) {
+  var baseAxis = coordSys.getBaseAxis();
+  var valueAxis = coordSys.getOtherAxis(baseAxis);
+  var valueStart = getValueStart(valueAxis, valueOrigin);
+  var baseAxisDim = baseAxis.dim;
+  var valueAxisDim = valueAxis.dim;
+  var valueDim = data.mapDimension(valueAxisDim);
+  var baseDim = data.mapDimension(baseAxisDim);
+  var baseDataOffset = valueAxisDim === 'x' || valueAxisDim === 'radius' ? 1 : 0;
+  var dims = map(coordSys.dimensions, function (coordDim) {
+    return data.mapDimension(coordDim);
+  });
+  var stacked = false;
+  var stackResultDim = data.getCalculationInfo('stackResultDimension');
+
+  if (isDimensionStacked(data, dims[0]
+  /* , dims[1] */
+  )) {
+    // jshint ignore:line
+    stacked = true;
+    dims[0] = stackResultDim;
+  }
+
+  if (isDimensionStacked(data, dims[1]
+  /* , dims[0] */
+  )) {
+    // jshint ignore:line
+    stacked = true;
+    dims[1] = stackResultDim;
+  }
+
+  return {
+    dataDimsForPoint: dims,
+    valueStart: valueStart,
+    valueAxisDim: valueAxisDim,
+    baseAxisDim: baseAxisDim,
+    stacked: !!stacked,
+    valueDim: valueDim,
+    baseDim: baseDim,
+    baseDataOffset: baseDataOffset,
+    stackedOverDimension: data.getCalculationInfo('stackedOverDimension')
+  };
+}
+
+function getValueStart(valueAxis, valueOrigin) {
+  var valueStart = 0;
+  var extent = valueAxis.scale.getExtent();
+
+  if (valueOrigin === 'start') {
+    valueStart = extent[0];
+  } else if (valueOrigin === 'end') {
+    valueStart = extent[1];
+  } // If origin is specified as a number, use it as
+  // valueStart directly
+  else if (isNumber(valueOrigin) && !isNaN(valueOrigin)) {
+      valueStart = valueOrigin;
+    } // auto
+    else {
+        // Both positive
+        if (extent[0] > 0) {
+          valueStart = extent[0];
+        } // Both negative
+        else if (extent[1] < 0) {
+            valueStart = extent[1];
+          } // If is one positive, and one negative, onZero shall be true
+
+      }
+
+  return valueStart;
+}
+
+function getStackedOnPoint(dataCoordInfo, coordSys, data, idx) {
+  var value = NaN;
+
+  if (dataCoordInfo.stacked) {
+    value = data.get(data.getCalculationInfo('stackedOverDimension'), idx);
+  }
+
+  if (isNaN(value)) {
+    value = dataCoordInfo.valueStart;
+  }
+
+  var baseDataOffset = dataCoordInfo.baseDataOffset;
+  var stackedData = [];
+  stackedData[baseDataOffset] = data.get(dataCoordInfo.baseDim, idx);
+  stackedData[1 - baseDataOffset] = value;
+  return coordSys.dataToPoint(stackedData);
+}
+
+function diffData(oldData, newData) {
+  var diffResult = [];
+  newData.diff(oldData).add(function (idx) {
+    diffResult.push({
+      cmd: '+',
+      idx: idx
+    });
+  }).update(function (newIdx, oldIdx) {
+    diffResult.push({
+      cmd: '=',
+      idx: oldIdx,
+      idx1: newIdx
+    });
+  }).remove(function (idx) {
+    diffResult.push({
+      cmd: '-',
+      idx: idx
+    });
+  }).execute();
+  return diffResult;
+}
+
+function lineAnimationDiff(oldData, newData, oldStackedOnPoints, newStackedOnPoints, oldCoordSys, newCoordSys, oldValueOrigin, newValueOrigin) {
+  var diff = diffData(oldData, newData); // let newIdList = newData.mapArray(newData.getId);
+  // let oldIdList = oldData.mapArray(oldData.getId);
+  // convertToIntId(newIdList, oldIdList);
+  // // FIXME One data ?
+  // diff = arrayDiff(oldIdList, newIdList);
+
+  var currPoints = [];
+  var nextPoints = []; // Points for stacking base line
+
+  var currStackedPoints = [];
+  var nextStackedPoints = [];
+  var status = [];
+  var sortedIndices = [];
+  var rawIndices = [];
+  var newDataOldCoordInfo = prepareDataCoordInfo(oldCoordSys, newData, oldValueOrigin); // const oldDataNewCoordInfo = prepareDataCoordInfo(newCoordSys, oldData, newValueOrigin);
+
+  var oldPoints = oldData.getLayout('points') || [];
+  var newPoints = newData.getLayout('points') || [];
+
+  for (var i = 0; i < diff.length; i++) {
+    var diffItem = diff[i];
+    var pointAdded = true;
+    var oldIdx2 = void 0;
+    var newIdx2 = void 0; // FIXME, animation is not so perfect when dataZoom window moves fast
+    // Which is in case remvoing or add more than one data in the tail or head
+
+    switch (diffItem.cmd) {
+      case '=':
+        oldIdx2 = diffItem.idx * 2;
+        newIdx2 = diffItem.idx1 * 2;
+        var currentX = oldPoints[oldIdx2];
+        var currentY = oldPoints[oldIdx2 + 1];
+        var nextX = newPoints[newIdx2];
+        var nextY = newPoints[newIdx2 + 1]; // If previous data is NaN, use next point directly
+
+        if (isNaN(currentX) || isNaN(currentY)) {
+          currentX = nextX;
+          currentY = nextY;
+        }
+
+        currPoints.push(currentX, currentY);
+        nextPoints.push(nextX, nextY);
+        currStackedPoints.push(oldStackedOnPoints[oldIdx2], oldStackedOnPoints[oldIdx2 + 1]);
+        nextStackedPoints.push(newStackedOnPoints[newIdx2], newStackedOnPoints[newIdx2 + 1]);
+        rawIndices.push(newData.getRawIndex(diffItem.idx1));
+        break;
+
+      case '+':
+        var newIdx = diffItem.idx;
+        var newDataDimsForPoint = newDataOldCoordInfo.dataDimsForPoint;
+        var oldPt = oldCoordSys.dataToPoint([newData.get(newDataDimsForPoint[0], newIdx), newData.get(newDataDimsForPoint[1], newIdx)]);
+        newIdx2 = newIdx * 2;
+        currPoints.push(oldPt[0], oldPt[1]);
+        nextPoints.push(newPoints[newIdx2], newPoints[newIdx2 + 1]);
+        var stackedOnPoint = getStackedOnPoint(newDataOldCoordInfo, oldCoordSys, newData, newIdx);
+        currStackedPoints.push(stackedOnPoint[0], stackedOnPoint[1]);
+        nextStackedPoints.push(newStackedOnPoints[newIdx2], newStackedOnPoints[newIdx2 + 1]);
+        rawIndices.push(newData.getRawIndex(newIdx));
+        break;
+
+      case '-':
+        pointAdded = false;
+    } // Original indices
+
+
+    if (pointAdded) {
+      status.push(diffItem);
+      sortedIndices.push(sortedIndices.length);
+    }
+  } // Diff result may be crossed if all items are changed
+  // Sort by data index
+
+
+  sortedIndices.sort(function (a, b) {
+    return rawIndices[a] - rawIndices[b];
+  });
+  var len = currPoints.length;
+  var sortedCurrPoints = createFloat32Array(len);
+  var sortedNextPoints = createFloat32Array(len);
+  var sortedCurrStackedPoints = createFloat32Array(len);
+  var sortedNextStackedPoints = createFloat32Array(len);
+  var sortedStatus = [];
+
+  for (var i = 0; i < sortedIndices.length; i++) {
+    var idx = sortedIndices[i];
+    var i2 = i * 2;
+    var idx2 = idx * 2;
+    sortedCurrPoints[i2] = currPoints[idx2];
+    sortedCurrPoints[i2 + 1] = currPoints[idx2 + 1];
+    sortedNextPoints[i2] = nextPoints[idx2];
+    sortedNextPoints[i2 + 1] = nextPoints[idx2 + 1];
+    sortedCurrStackedPoints[i2] = currStackedPoints[idx2];
+    sortedCurrStackedPoints[i2 + 1] = currStackedPoints[idx2 + 1];
+    sortedNextStackedPoints[i2] = nextStackedPoints[idx2];
+    sortedNextStackedPoints[i2 + 1] = nextStackedPoints[idx2 + 1];
+    sortedStatus[i] = status[idx];
+  }
+
+  return {
+    current: sortedCurrPoints,
+    next: sortedNextPoints,
+    stackedOnCurrent: sortedCurrStackedPoints,
+    stackedOnNext: sortedNextStackedPoints,
+    status: sortedStatus
+  };
+}
+
+var mathMin = Math.min;
+var mathMax = Math.max;
+
+function isPointNull$1(x, y) {
+  return isNaN(x) || isNaN(y);
+}
+/**
+ * Draw smoothed line in non-monotone, in may cause undesired curve in extreme
+ * situations. This should be used when points are non-monotone neither in x or
+ * y dimension.
+ */
+
+
+function drawSegment(ctx, points, start, segLen, allLen, dir, smooth, smoothMonotone, connectNulls) {
+  var prevX;
+  var prevY;
+  var cpx0;
+  var cpy0;
+  var cpx1;
+  var cpy1;
+  var idx = start;
+  var k = 0;
+
+  for (; k < segLen; k++) {
+    var x = points[idx * 2];
+    var y = points[idx * 2 + 1];
+
+    if (idx >= allLen || idx < 0) {
+      break;
+    }
+
+    if (isPointNull$1(x, y)) {
+      if (connectNulls) {
+        idx += dir;
+        continue;
+      }
+
+      break;
+    }
+
+    if (idx === start) {
+      ctx[dir > 0 ? 'moveTo' : 'lineTo'](x, y);
+      cpx0 = x;
+      cpy0 = y;
+    } else {
+      var dx = x - prevX;
+      var dy = y - prevY; // Ignore tiny segment.
+
+      if (dx * dx + dy * dy < 0.5) {
+        idx += dir;
+        continue;
+      }
+
+      if (smooth > 0) {
+        var nextIdx = idx + dir;
+        var nextX = points[nextIdx * 2];
+        var nextY = points[nextIdx * 2 + 1]; // Ignore duplicate point
+
+        while (nextX === x && nextY === y && k < segLen) {
+          k++;
+          nextIdx += dir;
+          idx += dir;
+          nextX = points[nextIdx * 2];
+          nextY = points[nextIdx * 2 + 1];
+          x = points[idx * 2];
+          y = points[idx * 2 + 1];
+          dx = x - prevX;
+          dy = y - prevY;
+        }
+
+        var tmpK = k + 1;
+
+        if (connectNulls) {
+          // Find next point not null
+          while (isPointNull$1(nextX, nextY) && tmpK < segLen) {
+            tmpK++;
+            nextIdx += dir;
+            nextX = points[nextIdx * 2];
+            nextY = points[nextIdx * 2 + 1];
+          }
+        }
+
+        var ratioNextSeg = 0.5;
+        var vx = 0;
+        var vy = 0;
+        var nextCpx0 = void 0;
+        var nextCpy0 = void 0; // Is last point
+
+        if (tmpK >= segLen || isPointNull$1(nextX, nextY)) {
+          cpx1 = x;
+          cpy1 = y;
+        } else {
+          vx = nextX - prevX;
+          vy = nextY - prevY;
+          var dx0 = x - prevX;
+          var dx1 = nextX - x;
+          var dy0 = y - prevY;
+          var dy1 = nextY - y;
+          var lenPrevSeg = void 0;
+          var lenNextSeg = void 0;
+
+          if (smoothMonotone === 'x') {
+            lenPrevSeg = Math.abs(dx0);
+            lenNextSeg = Math.abs(dx1);
+            var dir_1 = vx > 0 ? 1 : -1;
+            cpx1 = x - dir_1 * lenPrevSeg * smooth;
+            cpy1 = y;
+            nextCpx0 = x + dir_1 * lenNextSeg * smooth;
+            nextCpy0 = y;
+          } else if (smoothMonotone === 'y') {
+            lenPrevSeg = Math.abs(dy0);
+            lenNextSeg = Math.abs(dy1);
+            var dir_2 = vy > 0 ? 1 : -1;
+            cpx1 = x;
+            cpy1 = y - dir_2 * lenPrevSeg * smooth;
+            nextCpx0 = x;
+            nextCpy0 = y + dir_2 * lenNextSeg * smooth;
+          } else {
+            lenPrevSeg = Math.sqrt(dx0 * dx0 + dy0 * dy0);
+            lenNextSeg = Math.sqrt(dx1 * dx1 + dy1 * dy1); // Use ratio of seg length
+
+            ratioNextSeg = lenNextSeg / (lenNextSeg + lenPrevSeg);
+            cpx1 = x - vx * smooth * (1 - ratioNextSeg);
+            cpy1 = y - vy * smooth * (1 - ratioNextSeg); // cp0 of next segment
+
+            nextCpx0 = x + vx * smooth * ratioNextSeg;
+            nextCpy0 = y + vy * smooth * ratioNextSeg; // Smooth constraint between point and next point.
+            // Avoid exceeding extreme after smoothing.
+
+            nextCpx0 = mathMin(nextCpx0, mathMax(nextX, x));
+            nextCpy0 = mathMin(nextCpy0, mathMax(nextY, y));
+            nextCpx0 = mathMax(nextCpx0, mathMin(nextX, x));
+            nextCpy0 = mathMax(nextCpy0, mathMin(nextY, y)); // Reclaculate cp1 based on the adjusted cp0 of next seg.
+
+            vx = nextCpx0 - x;
+            vy = nextCpy0 - y;
+            cpx1 = x - vx * lenPrevSeg / lenNextSeg;
+            cpy1 = y - vy * lenPrevSeg / lenNextSeg; // Smooth constraint between point and prev point.
+            // Avoid exceeding extreme after smoothing.
+
+            cpx1 = mathMin(cpx1, mathMax(prevX, x));
+            cpy1 = mathMin(cpy1, mathMax(prevY, y));
+            cpx1 = mathMax(cpx1, mathMin(prevX, x));
+            cpy1 = mathMax(cpy1, mathMin(prevY, y)); // Adjust next cp0 again.
+
+            vx = x - cpx1;
+            vy = y - cpy1;
+            nextCpx0 = x + vx * lenNextSeg / lenPrevSeg;
+            nextCpy0 = y + vy * lenNextSeg / lenPrevSeg;
+          }
+        }
+
+        ctx.bezierCurveTo(cpx0, cpy0, cpx1, cpy1, x, y);
+        cpx0 = nextCpx0;
+        cpy0 = nextCpy0;
+      } else {
+        ctx.lineTo(x, y);
+      }
+    }
+
+    prevX = x;
+    prevY = y;
+    idx += dir;
+  }
+
+  return k;
+}
+
+var ECPolylineShape =
+/** @class */
+function () {
+  function ECPolylineShape() {
+    this.smooth = 0;
+    this.smoothConstraint = true;
+  }
+
+  return ECPolylineShape;
+}();
+
+var ECPolyline =
+/** @class */
+function (_super) {
+  __extends(ECPolyline, _super);
+
+  function ECPolyline(opts) {
+    var _this = _super.call(this, opts) || this;
+
+    _this.type = 'ec-polyline';
+    return _this;
+  }
+
+  ECPolyline.prototype.getDefaultStyle = function () {
+    return {
+      stroke: '#000',
+      fill: null
+    };
+  };
+
+  ECPolyline.prototype.getDefaultShape = function () {
+    return new ECPolylineShape();
+  };
+
+  ECPolyline.prototype.buildPath = function (ctx, shape) {
+    var points = shape.points;
+    var i = 0;
+    var len = points.length / 2; // const result = getBoundingBox(points, shape.smoothConstraint);
+
+    if (shape.connectNulls) {
+      // Must remove first and last null values avoid draw error in polygon
+      for (; len > 0; len--) {
+        if (!isPointNull$1(points[len * 2 - 2], points[len * 2 - 1])) {
+          break;
+        }
+      }
+
+      for (; i < len; i++) {
+        if (!isPointNull$1(points[i * 2], points[i * 2 + 1])) {
+          break;
+        }
+      }
+    }
+
+    while (i < len) {
+      i += drawSegment(ctx, points, i, len, len, 1, shape.smooth, shape.smoothMonotone, shape.connectNulls) + 1;
+    }
+  };
+
+  ECPolyline.prototype.getPointOn = function (xOrY, dim) {
+    if (!this.path) {
+      this.createPathProxy();
+      this.buildPath(this.path, this.shape);
+    }
+
+    var path = this.path;
+    var data = path.data;
+    var CMD = PathProxy.CMD;
+    var x0;
+    var y0;
+    var isDimX = dim === 'x';
+    var roots = [];
+
+    for (var i = 0; i < data.length;) {
+      var cmd = data[i++];
+      var x = void 0;
+      var y = void 0;
+      var x2 = void 0;
+      var y2 = void 0;
+      var x3 = void 0;
+      var y3 = void 0;
+      var t = void 0;
+
+      switch (cmd) {
+        case CMD.M:
+          x0 = data[i++];
+          y0 = data[i++];
+          break;
+
+        case CMD.L:
+          x = data[i++];
+          y = data[i++];
+          t = isDimX ? (xOrY - x0) / (x - x0) : (xOrY - y0) / (y - y0);
+
+          if (t <= 1 && t >= 0) {
+            var val = isDimX ? (y - y0) * t + y0 : (x - x0) * t + x0;
+            return isDimX ? [xOrY, val] : [val, xOrY];
+          }
+
+          x0 = x;
+          y0 = y;
+          break;
+
+        case CMD.C:
+          x = data[i++];
+          y = data[i++];
+          x2 = data[i++];
+          y2 = data[i++];
+          x3 = data[i++];
+          y3 = data[i++];
+          var nRoot = isDimX ? cubicRootAt(x0, x, x2, x3, xOrY, roots) : cubicRootAt(y0, y, y2, y3, xOrY, roots);
+
+          if (nRoot > 0) {
+            for (var i_1 = 0; i_1 < nRoot; i_1++) {
+              var t_1 = roots[i_1];
+
+              if (t_1 <= 1 && t_1 >= 0) {
+                var val = isDimX ? cubicAt(y0, y, y2, y3, t_1) : cubicAt(x0, x, x2, x3, t_1);
+                return isDimX ? [xOrY, val] : [val, xOrY];
+              }
+            }
+          }
+
+          x0 = x3;
+          y0 = y3;
+          break;
+      }
+    }
+  };
+
+  return ECPolyline;
+}(Path);
+
+var ECPolygonShape =
+/** @class */
+function (_super) {
+  __extends(ECPolygonShape, _super);
+
+  function ECPolygonShape() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  return ECPolygonShape;
+}(ECPolylineShape);
+
+var ECPolygon =
+/** @class */
+function (_super) {
+  __extends(ECPolygon, _super);
+
+  function ECPolygon(opts) {
+    var _this = _super.call(this, opts) || this;
+
+    _this.type = 'ec-polygon';
+    return _this;
+  }
+
+  ECPolygon.prototype.getDefaultShape = function () {
+    return new ECPolygonShape();
+  };
+
+  ECPolygon.prototype.buildPath = function (ctx, shape) {
+    var points = shape.points;
+    var stackedOnPoints = shape.stackedOnPoints;
+    var i = 0;
+    var len = points.length / 2;
+    var smoothMonotone = shape.smoothMonotone;
+
+    if (shape.connectNulls) {
+      // Must remove first and last null values avoid draw error in polygon
+      for (; len > 0; len--) {
+        if (!isPointNull$1(points[len * 2 - 2], points[len * 2 - 1])) {
+          break;
+        }
+      }
+
+      for (; i < len; i++) {
+        if (!isPointNull$1(points[i * 2], points[i * 2 + 1])) {
+          break;
+        }
+      }
+    }
+
+    while (i < len) {
+      var k = drawSegment(ctx, points, i, len, len, 1, shape.smooth, smoothMonotone, shape.connectNulls);
+      drawSegment(ctx, stackedOnPoints, i + k - 1, k, len, -1, shape.stackedOnSmooth, smoothMonotone, shape.connectNulls);
+      i += k + 1;
+      ctx.closePath();
+    }
+  };
+
+  return ECPolygon;
+}(Path);
+
+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]; // Get a max value from each corner of two boundings.
+
+
+  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, 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) {
+      if (!isNaN(points[i]) && !isNaN(points[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:
+        // default is start
+        stepPt[baseIndex] = pt[baseIndex];
+        stepPt[1 - baseIndex] = nextPt[1 - baseIndex];
+        stepPoints.push(stepPt[0], stepPt[1]);
+    }
+  } // Last points
+
+
+  stepPoints.push(points[i++], points[i++]);
+  return stepPoints;
+}
+/**
+ * Clip color stops to edge. Avoid creating too large gradients.
+ * Which may lead to blurry when GPU acceleration is enabled. See #15680
+ *
+ * The stops has been sorted from small to large.
+ */
+
+
+function clipColorStops(colorStops, maxSize) {
+  var newColorStops = [];
+  var len = colorStops.length; // coord will always < 0 in prevOutOfRangeColorStop.
+
+  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: 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) {
+        // If there are two stops and coord range is between these two stops
+        newColorStops.push(lerpStop(prevOutOfRangeColorStop, stop_1, 0), lerpStop(prevOutOfRangeColorStop, stop_1, maxSize));
+      } // All following stop will be out of range. So just ignore them.
+
+
+      break;
+    } else {
+      if (prevOutOfRangeColorStop) {
+        newColorStops.push(lerpStop(prevOutOfRangeColorStop, stop_1, 0)); // Reset
+
+        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()) {
+    // When data.count() is 0, gradient range can not be calculated.
+    return;
+  }
+
+  if (coordSys.type !== '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; // Can only be x or y
+
+    if (coordDim === 'x' || coordDim === 'y') {
+      visualMeta = visualMetaList[i];
+      break;
+    }
+  }
+
+  if (!visualMeta) {
+
+    return;
+  } // If the area to be rendered is bigger than area defined by LinearGradient,
+  // the canvas spec prescribes that the color of the first stop and the last
+  // stop should be used. But if two stops are added at offset 0, in effect
+  // browsers use the color of the second stop to render area outside
+  // LinearGradient. So we can only infinitesimally extend area defined in
+  // LinearGradient to render `outerColors`.
+
+
+  var axis = coordSys.getAxis(coordDim); // dataToCoord mapping may not be linear, but must be monotonic.
+
+  var colorStops = map(visualMeta.stops, function (stop) {
+    // offset will be calculated later.
+    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) {
+    // All stops are out of range. All will be the same color.
+    return colorStops[0].coord < 0 ? outerColors[1] ? outerColors[1] : colorStops[stopLen - 1].color : outerColors[0] ? outerColors[0] : colorStops[0].color;
+  }
+
+  var tinyExtent = 10; // Arbitrary value: 10px
+
+  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;
+  } // Note that category label interval strategy might bring some weird effect
+  // in some scenario: users may wonder why some of the symbols are not
+  // displayed. So we show all symbols as possible as we can.
+
+
+  if (isAuto // Simplify the logic, do not determine label overlap here.
+  && canShowAllSymbolForCategory(categoryAxis, data)) {
+    return;
+  } // Otherwise follow the label interval strategy on category axis.
+
+
+  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) {
+  // In most cases, line is monotonous on category axis, and the label size
+  // is close with each other. So we check the symbol size and some of the
+  // label size alone with the category axis to estimate whether all symbol
+  // can be shown without overlap.
+  var axisExtent = categoryAxis.getExtent();
+  var availSize = Math.abs(axisExtent[1] - axisExtent[0]) / categoryAxis.scale.count();
+  isNaN(availSize) && (availSize = 0); // 0/0 is NaN.
+  // Sampling some points, max 5.
+
+  var dataLen = data.count();
+  var step = Math.max(1, Math.round(dataLen / 5));
+
+  for (var dataIndex = 0; dataIndex < dataLen; dataIndex += step) {
+    if (Symbol.getSymbolSize(data, dataIndex // Only for cartesian, where `isHorizontal` exists.
+    )[categoryAxis.isHorizontal() ? 1 : 0] // Empirical number
+    * 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); // Expand clip shape to avoid clipping when line value exceeds axis
+
+    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;
+      }
+    } // Set to the final frame. To make sure label layout is right.
+
+
+    if (during) {
+      during(1, clipPath);
+    }
+
+    return clipPath;
+  } else {
+
+    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 =
+/** @class */
+function (_super) {
+  __extends(LineView, _super);
+
+  function LineView() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+
+  LineView.prototype.init = function () {
+    var lineGroup = new Group();
+    var symbolDraw = new SymbolDraw();
+    this.group.add(symbolDraw.group);
+    this._symbolDraw = symbolDraw;
+    this._lineGroup = lineGroup;
+  };
+
+  LineView.prototype.render = function (seriesModel, ecModel, api) {
+    var _this = this;
+
+    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 = 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); // Remove temporary symbols
+
+    var oldData = this._data;
+    oldData && oldData.eachItemGraphicEl(function (el, idx) {
+      if (el.__temp) {
+        group.remove(el);
+        oldData.setItemGraphicEl(idx, null);
+      }
+    }); // Remove previous created symbols if showSymbol changed to false
+
+    if (!showSymbol) {
+      symbolDraw.remove();
+    }
+
+    group.add(lineGroup); // FIXME step not support polar
+
+    var step = !isCoordSysPolar ? seriesModel.get('step') : false;
+    var clipShapeForSymbol;
+
+    if (coordSys && coordSys.getArea && seriesModel.get('clip', true)) {
+      clipShapeForSymbol = coordSys.getArea(); // Avoid float number rounding error for symbol on the edge of axis extent.
+      // See #7913 and `test/dataZoom-clip.html`.
+
+      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')]; // Initialization animation or coordinate system changed
+
+    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) {
+        // TODO If stacked series is not step
+        points = turnPointsIntoStep(points, coordSys, step, connectNulls);
+
+        if (stackedOnPoints) {
+          stackedOnPoints = turnPointsIntoStep(stackedOnPoints, coordSys, step, connectNulls);
+        }
+      }
+
+      polyline = this._newPolyline(points);
+
+      if (isAreaChart) {
+        polygon = this._newPolygon(points, stackedOnPoints);
+      } // If areaStyle is removed
+      else if (polygon) {
+          lineGroup.remove(polygon);
+          polygon = this._polygon = null;
+        } // NOTE: Must update _endLabel before setClipPath.
+
+
+      if (!isCoordSysPolar) {
+        this._initOrUpdateEndLabel(seriesModel, coordSys, convertToColorString(visualColor));
+      }
+
+      lineGroup.setClipPath(createLineClipPath(this, coordSys, true, seriesModel));
+    } else {
+      if (isAreaChart && !polygon) {
+        // If areaStyle is added
+        polygon = this._newPolygon(points, stackedOnPoints);
+      } else if (polygon && !isAreaChart) {
+        // If areaStyle is removed
+        lineGroup.remove(polygon);
+        polygon = this._polygon = null;
+      } // NOTE: Must update _endLabel before setClipPath.
+
+
+      if (!isCoordSysPolar) {
+        this._initOrUpdateEndLabel(seriesModel, coordSys, convertToColorString(visualColor));
+      } // Update clipPath
+
+
+      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));
+      } // Always update, or it is wrong in the case turning on legend
+      // because points are not changed.
+
+
+      showSymbol && symbolDraw.updateData(data, {
+        isIgnore: isIgnoreFunc,
+        clipShape: clipShapeForSymbol,
+        disableAnimation: true,
+        getSymbolPoint: function (idx) {
+          return [points[idx * 2], points[idx * 2 + 1]];
+        }
+      }); // In the case data zoom triggered refreshing frequently
+      // Data may not change if line has a category axis. So it should animate nothing.
+
+      if (!isPointsSame(this._stackedOnPoints, stackedOnPoints) || !isPointsSame(this._points, points)) {
+        if (hasAnimation) {
+          this._doUpdateAnimation(data, stackedOnPoints, coordSys, api, step, valueOrigin, connectNulls);
+        } else {
+          // Not do it in update with animation
+          if (step) {
+            // TODO If stacked series is not step
+            points = turnPointsIntoStep(points, coordSys, step, connectNulls);
+
+            if (stackedOnPoints) {
+              stackedOnPoints = turnPointsIntoStep(stackedOnPoints, coordSys, step, connectNulls);
+            }
+          }
+
+          polyline.setShape({
+            points: points
+          });
+          polygon && polygon.setShape({
+            points: points,
+            stackedOnPoints: 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'
+    }));
+    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;
+    } // Needs seriesIndex for focus
+
+
+    getECData(polyline).seriesIndex = seriesModel.seriesIndex;
+    toggleHoverEmphasis(polyline, focus, blurScope, emphasisDisabled);
+    var smooth = getSmooth(seriesModel.get('smooth'));
+    var smoothMonotone = seriesModel.get('smoothMonotone');
+    polyline.setShape({
+      smooth: smooth,
+      smoothMonotone: smoothMonotone,
+      connectNulls: connectNulls
+    });
+
+    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: smooth,
+        stackedOnSmooth: stackedOnSmooth,
+        smoothMonotone: smoothMonotone,
+        connectNulls: connectNulls
+      });
+      setStatesStylesFromModel(polygon, seriesModel, 'areaStyle'); // Needs seriesIndex for focus
+
+      getECData(polygon).seriesIndex = seriesModel.seriesIndex;
+      toggleHoverEmphasis(polygon, focus, blurScope, emphasisDisabled);
+    }
+
+    var changePolyState = function (toState) {
+      _this._changePolyState(toState);
+    };
+
+    data.eachItemGraphicEl(function (el) {
+      // Switch polyline / polygon state if element changed its state.
+      el && (el.onHoverStateChange = changePolyState);
+    });
+    this._polyline.onHoverStateChange = changePolyState;
+    this._data = data; // Save the coordinate system for transition animation when data changed
+
+    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);
+    }
+  };
+
+  LineView.prototype.packEventData = function (seriesModel, el) {
+    getECData(el).eventData = {
+      componentType: 'series',
+      componentSubType: 'line',
+      componentIndex: seriesModel.componentIndex,
+      seriesIndex: seriesModel.seriesIndex,
+      seriesName: seriesModel.name,
+      seriesType: 'line'
+    };
+  };
+
+  LineView.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) {
+        // Create a temporary symbol if it is not exists
+        var x = points[dataIndex * 2];
+        var y = points[dataIndex * 2 + 1];
+
+        if (isNaN(x) || isNaN(y)) {
+          // Null data
+          return;
+        } // fix #11360: shouldn't draw symbol outside clipShapeForSymbol
+
+
+        if (this._clipShapeForSymbol && !this._clipShapeForSymbol.contain(x, y)) {
+          return;
+        }
+
+        var zlevel = seriesModel.get('zlevel') || 0;
+        var z = seriesModel.get('z') || 0;
+        symbol = new Symbol(data, dataIndex);
+        symbol.x = x;
+        symbol.y = y;
+        symbol.setZ(zlevel, z); // ensure label text of the temporary symbol is in front of line and area polygon
+
+        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); // Stop scale animation
+
+        symbol.stopSymbolAnimation(true);
+        this.group.add(symbol);
+      }
+
+      symbol.highlight();
+    } else {
+      // Highlight whole series
+      ChartView.prototype.highlight.call(this, seriesModel, ecModel, api, payload);
+    }
+  };
+
+  LineView.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();
+        }
+      }
+    } else {
+      // FIXME
+      // can not downplay completely.
+      // Downplay whole series
+      ChartView.prototype.downplay.call(this, seriesModel, ecModel, api, payload);
+    }
+  };
+
+  LineView.prototype._changePolyState = function (toState) {
+    var polygon = this._polygon;
+    setStatesFlag(this._polyline, toState);
+    polygon && setStatesFlag(polygon, toState);
+  };
+
+  LineView.prototype._newPolyline = function (points) {
+    var polyline = this._polyline; // Remove previous created polyline
+
+    if (polyline) {
+      this._lineGroup.remove(polyline);
+    }
+
+    polyline = new ECPolyline({
+      shape: {
+        points: points
+      },
+      segmentIgnoreThreshold: 2,
+      z2: 10
+    });
+
+    this._lineGroup.add(polyline);
+
+    this._polyline = polyline;
+    return polyline;
+  };
+
+  LineView.prototype._newPolygon = function (points, stackedOnPoints) {
+    var polygon = this._polygon; // Remove previous created polygon
+
+    if (polygon) {
+      this._lineGroup.remove(polygon);
+    }
+
+    polygon = new ECPolygon({
+      shape: {
+        points: points,
+        stackedOnPoints: stackedOnPoints
+      },
+      segmentIgnoreThreshold: 2
+    });
+
+    this._lineGroup.add(polygon);
+
+    this._polygon = polygon;
+    return polygon;
+  };
+
+  LineView.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;
+    }
+
+    var seriesModel = data.hostModel;
+    var seriesDuration = seriesModel.get('animationDuration');
+
+    if (isFunction(seriesDuration)) {
+      seriesDuration = seriesDuration(null);
+    }
+
+    var seriesDalay = seriesModel.get('animationDelay') || 0;
+    var seriesDalayValue = isFunction(seriesDalay) ? seriesDalay(null) : seriesDalay;
+    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;
+        }
+
+        var delay = isFunction(seriesDalay) ? seriesDalay(idx) : seriesDuration * ratio + seriesDalayValue;
+        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: delay
+        });
+
+        if (text) {
+          text.animateFrom({
+            style: {
+              opacity: 0
+            }
+          }, {
+            duration: 300,
+            delay: delay
+          });
+        }
+
+        symbolPath.disableLabelAnimation = true;
+      }
+    });
+  };
+
+  LineView.prototype._initOrUpdateEndLabel = function (seriesModel, coordSys, inheritColor) {
+    var endLabelModel = seriesModel.getModel('endLabel');
+
+    if (anyStateShowEndLabel(seriesModel)) {
+      var data_2 = seriesModel.getData();
+      var polyline = this._polyline; // series may be filtered.
+
+      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;
+      } // Find last non-NaN data to display data
+
+
+      var dataIndex = getLastIndexNotNull(points);
+
+      if (dataIndex >= 0) {
+        setLabelStyle(polyline, getLabelStatesModels(seriesModel, 'endLabel'), {
+          inheritColor: inheritColor,
+          labelFetcher: seriesModel,
+          labelDataIndex: dataIndex,
+          defaultText: function (dataIndex, opt, interpolatedValue) {
+            return interpolatedValue != null ? getDefaultInterpolatedLabel(data_2, interpolatedValue) : getDefaultLabel(data_2, dataIndex);
+          },
+          enableTextSetter: true
+        }, getEndLabelStateSpecified(endLabelModel, coordSys));
+        polyline.textConfig.position = null;
+      }
+    } else if (this._endLabel) {
+      this._polyline.removeTextContent();
+
+      this._endLabel = null;
+    }
+  };
+
+  LineView.prototype._endLabelOnDuring = function (percent, clipRect, data, animationRecord, valueAnimation, endLabelModel, coordSys) {
+    var endLabel = this._endLabel;
+    var polyline = this._polyline;
+
+    if (endLabel) {
+      // NOTE: Don't remove percent < 1. percent === 1 means the first frame during render.
+      // The label is not prepared at this time.
+      if (percent < 1 && animationRecord.originalX == null) {
+        animationRecord.originalX = endLabel.x;
+        animationRecord.originalY = endLabel.y;
+      }
+
+      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) {
+        // diff > 1 && connectNulls, which is on the null data.
+        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 {
+        // If diff <= 0, which is the range is not found(Include NaN)
+        // Choose the first point or last point.
+        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) {
+        labelInner(endLabel).setLabelText(value);
+      }
+    }
+  };
+  /**
+   * @private
+   */
+  // FIXME Two value axis
+
+
+  LineView.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) {
+      // TODO If stacked series is not step
+      current = turnPointsIntoStep(diff.current, coordSys, step, connectNulls);
+      stackedOnCurrent = turnPointsIntoStep(diff.stackedOnCurrent, coordSys, step, connectNulls);
+      next = turnPointsIntoStep(diff.next, coordSys, step, connectNulls);
+      stackedOnNext = turnPointsIntoStep(diff.stackedOnNext, coordSys, step, connectNulls);
+    } // Don't apply animation if diff is large.
+    // For better result and avoid memory explosion problems like
+    // https://github.com/apache/incubator-echarts/issues/12229
+
+
+    if (getBoundingDiff(current, next) > 3000 || polygon && getBoundingDiff(stackedOnCurrent, stackedOnNext) > 3000) {
+      polyline.stopAnimation();
+      polyline.setShape({
+        points: next
+      });
+
+      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
+      }
+    }; // Also animate the original points.
+    // If points reference is changed when turning into step line.
+
+    if (diff.current !== current) {
+      target.shape.__points = diff.next;
+    } // Stop previous animation.
+
+
+    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 use attr directly in updateProps.
+
+      if (polyline.shape.points !== polygon.shape.points) {
+        polygon.shape.points = polyline.shape.points;
+      }
+    }
+
+    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: el,
+            ptIdx: i // Index of points
+
+          });
+        }
+      }
+    }
+
+    if (polyline.animators && polyline.animators.length) {
+      polyline.animators[0].during(function () {
+        polygon && polygon.dirtyShape();
+        var points = polyline.shape.__points;
+
+        for (var i = 0; i < updatedDataInfo.length; i++) {
+          var el = updatedDataInfo[i].el;
+          var offset = updatedDataInfo[i].ptIdx * 2;
+          el.x = points[offset];
+          el.y = points[offset + 1];
+          el.markRedraw();
+        }
+      });
+    }
+  };
+
+  LineView.prototype.remove = function (ecModel) {
+    var group = this.group;
+    var oldData = this._data;
+
+    this._lineGroup.removeAll();
+
+    this._symbolDraw.remove(true); // Remove temporary created elements when highlighting
+
+
+    oldData && oldData.eachItemGraphicEl(function (el, idx) {
+      if (el.__temp) {
+        group.remove(el);
+        oldData.setItemGraphicEl(idx, null);
+      }
+    });
+    this._polyline = this._polygon = this._coordSys = this._points = this._stackedOnPoints = this._endLabel = this._data = null;
+  };
+
+  LineView.type = 'line';
+  return LineView;
+}(ChartView);
+
+function pointsLayout(seriesType, forceStoreInTypedArray) {
+  return {
+    seriesType: seriesType,
+    plan: createRenderPlanner(),
+    reset: function (seriesModel) {
+      var data = seriesModel.getData();
+      var coordSys = seriesModel.coordinateSystem;
+      var pipelineContext = seriesModel.pipelineContext;
+      var useTypedArray = forceStoreInTypedArray || pipelineContext.large;
+
+      if (!coordSys) {
+        return;
+      }
+
+      var dims = map(coordSys.dimensions, function (dim) {
+        return data.mapDimension(dim);
+      }).slice(0, 2);
+      var dimLen = dims.length;
+      var stackResultDim = data.getCalculationInfo('stackResultDimension');
+
+      if (isDimensionStacked(data, dims[0])) {
+        dims[0] = stackResultDim;
+      }
+
+      if (isDimensionStacked(data, dims[1])) {
+        dims[1] = stackResultDim;
+      }
+
+      var store = data.getStore();
+      var dimIdx0 = data.getDimensionIndex(dims[0]);
+      var dimIdx1 = data.getDimensionIndex(dims[1]);
+      return dimLen && {
+        progress: function (params, data) {
+          var segCount = params.end - params.start;
+          var points = useTypedArray && createFloat32Array(segCount * dimLen);
+          var tmpIn = [];
+          var tmpOut = [];
+
+          for (var i = params.start, offset = 0; i < params.end; i++) {
+            var point = void 0;
+
+            if (dimLen === 1) {
+              var x = store.get(dimIdx0, i); // NOTE: Make sure the second parameter is null to use default strategy.
+
+              point = coordSys.dataToPoint(x, null, tmpOut);
+            } else {
+              tmpIn[0] = store.get(dimIdx0, i);
+              tmpIn[1] = store.get(dimIdx1, i); // Let coordinate system to handle the NaN data.
+
+              point = coordSys.dataToPoint(tmpIn, null, tmpOut);
+            }
+
+            if (useTypedArray) {
+              points[offset++] = point[0];
+              points[offset++] = point[1];
+            } else {
+              data.setItemLayout(i, point.slice());
+            }
+          }
+
+          useTypedArray && data.setLayout('points', points);
+        }
+      };
+    }
+  };
+}
+
+function install(registers) {
+  registers.registerChartView(LineView);
+  registers.registerSeriesModel(LineSeriesModel);
+  registers.registerLayout(pointsLayout('line', true));
+  registers.registerVisual({
+    seriesType: 'line',
+    reset: function (seriesModel) {
+      var data = seriesModel.getData(); // Visual coding for legend
+
+      var lineStyle = seriesModel.getModel('lineStyle').getLineStyle();
+
+      if (lineStyle && !lineStyle.stroke) {
+        // Fill in visual should be palette color if
+        // has color callback
+        lineStyle.stroke = data.getVisual('style').fill;
+      }
+
+      data.setVisual('legendLineStyle', lineStyle);
+    }
+  }); // Down sample after filter
+
+  registers.registerProcessor(registers.PRIORITY.PROCESSOR.STATISTIC, dataSample('line'));
+}
+
+var CMD = PathProxy.CMD;
+function aroundEqual(a, b) {
+    return Math.abs(a - b) < 1e-5;
+}
+function pathToBezierCurves(path) {
+    var data = path.data;
+    var len = path.len();
+    var bezierArrayGroups = [];
+    var currentSubpath;
+    var xi = 0;
+    var yi = 0;
+    var x0 = 0;
+    var y0 = 0;
+    function createNewSubpath(x, y) {
+        if (currentSubpath && currentSubpath.length > 2) {
+            bezierArrayGroups.push(currentSubpath);
+        }
+        currentSubpath = [x, y];
+    }
+    function addLine(x0, y0, x1, y1) {
+        if (!(aroundEqual(x0, x1) && aroundEqual(y0, y1))) {
+            currentSubpath.push(x0, y0, x1, y1, x1, y1);
+        }
+    }
+    function addArc(startAngle, endAngle, cx, cy, rx, ry) {
+        var delta = Math.abs(endAngle - startAngle);
+        var len = Math.tan(delta / 4) * 4 / 3;
+        var dir = endAngle < startAngle ? -1 : 1;
+        var c1 = Math.cos(startAngle);
+        var s1 = Math.sin(startAngle);
+        var c2 = Math.cos(endAngle);
+        var s2 = Math.sin(endAngle);
+        var x1 = c1 * rx + cx;
+        var y1 = s1 * ry + cy;
+        var x4 = c2 * rx + cx;
+        var y4 = s2 * ry + cy;
+        var hx = rx * len * dir;
+        var hy = ry * len * dir;
+        currentSubpath.push(x1 - hx * s1, y1 + hy * c1, x4 + hx * s2, y4 - hy * c2, x4, y4);
+    }
+    var x1;
+    var y1;
+    var x2;
+    var y2;
+    for (var i = 0; i < len;) {
+        var cmd = data[i++];
+        var isFirst = i === 1;
+        if (isFirst) {
+            xi = data[i];
+            yi = data[i + 1];
+            x0 = xi;
+            y0 = yi;
+            if (cmd === CMD.L || cmd === CMD.C || cmd === CMD.Q) {
+                currentSubpath = [x0, y0];
+            }
+        }
+        switch (cmd) {
+            case CMD.M:
+                xi = x0 = data[i++];
+                yi = y0 = data[i++];
+                createNewSubpath(x0, y0);
+                break;
+            case CMD.L:
+                x1 = data[i++];
+                y1 = data[i++];
+                addLine(xi, yi, x1, y1);
+                xi = x1;
+                yi = y1;
+                break;
+            case CMD.C:
+                currentSubpath.push(data[i++], data[i++], data[i++], data[i++], xi = data[i++], yi = data[i++]);
+                break;
+            case CMD.Q:
+                x1 = data[i++];
+                y1 = data[i++];
+                x2 = data[i++];
+                y2 = data[i++];
+                currentSubpath.push(xi + 2 / 3 * (x1 - xi), yi + 2 / 3 * (y1 - yi), x2 + 2 / 3 * (x1 - x2), y2 + 2 / 3 * (y1 - y2), x2, y2);
+                xi = x2;
+                yi = y2;
+                break;
+            case CMD.A:
+                var cx = data[i++];
+                var cy = data[i++];
+                var rx = data[i++];
+                var ry = data[i++];
+                var startAngle = data[i++];
+                var endAngle = data[i++] + startAngle;
+                i += 1;
+                var anticlockwise = !data[i++];
+                x1 = Math.cos(startAngle) * rx + cx;
+                y1 = Math.sin(startAngle) * ry + cy;
+                if (isFirst) {
+                    x0 = x1;
+                    y0 = y1;
+                    createNewSubpath(x0, y0);
+                }
+                else {
+                    addLine(xi, yi, x1, y1);
+                }
+                xi = Math.cos(endAngle) * rx + cx;
+                yi = Math.sin(endAngle) * ry + cy;
+                var step = (anticlockwise ? -1 : 1) * Math.PI / 2;
+                for (var angle = startAngle; anticlockwise ? angle > endAngle : angle < endAngle; angle += step) {
+                    var nextAngle = anticlockwise ? Math.max(angle + step, endAngle)
+                        : Math.min(angle + step, endAngle);
+                    addArc(angle, nextAngle, cx, cy, rx, ry);
+                }
+                break;
+            case CMD.R:
+                x0 = xi = data[i++];
+                y0 = yi = data[i++];
+                x1 = x0 + data[i++];
+                y1 = y0 + data[i++];
+                createNewSubpath(x1, y0);
+                addLine(x1, y0, x1, y1);
+                addLine(x1, y1, x0, y1);
+                addLine(x0, y1, x0, y0);
+                addLine(x0, y0, x1, y0);
+                break;
+            case CMD.Z:
+                currentSubpath && addLine(xi, yi, x0, y0);
+                xi = x0;
+                yi = y0;
+                break;
+        }
+    }
+    if (currentSubpath && currentSubpath.length > 2) {
+        bezierArrayGroups.push(currentSubpath);
+    }
+    return bezierArrayGroups;
+}
+function adpativeBezier(x0, y0, x1, y1, x2, y2, x3, y3, out, scale) {
+    if (aroundEqual(x0, x1) && aroundEqual(y0, y1) && aroundEqual(x2, x3) && aroundEqual(y2, y3)) {
+        out.push(x3, y3);
+        return;
+    }
+    var PIXEL_DISTANCE = 2 / scale;
+    var PIXEL_DISTANCE_SQR = PIXEL_DISTANCE * PIXEL_DISTANCE;
+    var dx = x3 - x0;
+    var dy = y3 - y0;
+    var d = Math.sqrt(dx * dx + dy * dy);
+    dx /= d;
+    dy /= d;
+    var dx1 = x1 - x0;
+    var dy1 = y1 - y0;
+    var dx2 = x2 - x3;
+    var dy2 = y2 - y3;
+    var cp1LenSqr = dx1 * dx1 + dy1 * dy1;
+    var cp2LenSqr = dx2 * dx2 + dy2 * dy2;
+    if (cp1LenSqr < PIXEL_DISTANCE_SQR && cp2LenSqr < PIXEL_DISTANCE_SQR) {
+        out.push(x3, y3);
+        return;
+    }
+    var projLen1 = dx * dx1 + dy * dy1;
+    var projLen2 = -dx * dx2 - dy * dy2;
+    var d1Sqr = cp1LenSqr - projLen1 * projLen1;
+    var d2Sqr = cp2LenSqr - projLen2 * projLen2;
+    if (d1Sqr < PIXEL_DISTANCE_SQR && projLen1 >= 0
+        && d2Sqr < PIXEL_DISTANCE_SQR && projLen2 >= 0) {
+        out.push(x3, y3);
+        return;
+    }
+    var tmpSegX = [];
+    var tmpSegY = [];
+    cubicSubdivide(x0, x1, x2, x3, 0.5, tmpSegX);
+    cubicSubdivide(y0, y1, y2, y3, 0.5, tmpSegY);
+    adpativeBezier(tmpSegX[0], tmpSegY[0], tmpSegX[1], tmpSegY[1], tmpSegX[2], tmpSegY[2], tmpSegX[3], tmpSegY[3], out, scale);
+    adpativeBezier(tmpSegX[4], tmpSegY[4], tmpSegX[5], tmpSegY[5], tmpSegX[6], tmpSegY[6], tmpSegX[7], tmpSegY[7], out, scale);
+}
+function pathToPolygons(path, scale) {
+    var bezierArrayGroups = pathToBezierCurves(path);
+    var polygons = [];
+    scale = scale || 1;
+    for (var i = 0; i < bezierArrayGroups.length; i++) {
+        var beziers = bezierArrayGroups[i];
+        var polygon = [];
+        var x0 = beziers[0];
+        var y0 = beziers[1];
+        polygon.push(x0, y0);
+        for (var k = 2; k < beziers.length;) {
+            var x1 = beziers[k++];
+            var y1 = beziers[k++];
+            var x2 = beziers[k++];
+            var y2 = beziers[k++];
+            var x3 = beziers[k++];
+            var y3 = beziers[k++];
+            adpativeBezier(x0, y0, x1, y1, x2, y2, x3, y3, polygon, scale);
+            x0 = x3;
+            y0 = y3;
+        }
+        polygons.push(polygon);
+    }
+    return polygons;
+}
+
+function getDividingGrids(dimSize, rowDim, count) {
+    var rowSize = dimSize[rowDim];
+    var columnSize = dimSize[1 - rowDim];
+    var ratio = Math.abs(rowSize / columnSize);
+    var rowCount = Math.ceil(Math.sqrt(ratio * count));
+    var columnCount = Math.floor(count / rowCount);
+    if (columnCount === 0) {
+        columnCount = 1;
+        rowCount = count;
+    }
+    var grids = [];
+    for (var i = 0; i < rowCount; i++) {
+        grids.push(columnCount);
+    }
+    var currentCount = rowCount * columnCount;
+    var remained = count - currentCount;
+    if (remained > 0) {
+        for (var i = 0; i < remained; i++) {
+            grids[i % rowCount] += 1;
+        }
+    }
+    return grids;
+}
+function divideSector(sectorShape, count, outShapes) {
+    var r0 = sectorShape.r0;
+    var r = sectorShape.r;
+    var startAngle = sectorShape.startAngle;
+    var endAngle = sectorShape.endAngle;
+    var angle = Math.abs(endAngle - startAngle);
+    var arcLen = angle * r;
+    var deltaR = r - r0;
+    var isAngleRow = arcLen > Math.abs(deltaR);
+    var grids = getDividingGrids([arcLen, deltaR], isAngleRow ? 0 : 1, count);
+    var rowSize = (isAngleRow ? angle : deltaR) / grids.length;
+    for (var row = 0; row < grids.length; row++) {
+        var columnSize = (isAngleRow ? deltaR : angle) / grids[row];
+        for (var column = 0; column < grids[row]; column++) {
+            var newShape = {};
+            if (isAngleRow) {
+                newShape.startAngle = startAngle + rowSize * row;
+                newShape.endAngle = startAngle + rowSize * (row + 1);
+                newShape.r0 = r0 + columnSize * column;
+                newShape.r = r0 + columnSize * (column + 1);
+            }
+            else {
+                newShape.startAngle = startAngle + columnSize * column;
+                newShape.endAngle = startAngle + columnSize * (column + 1);
+                newShape.r0 = r0 + rowSize * row;
+                newShape.r = r0 + rowSize * (row + 1);
+            }
+            newShape.clockwise = sectorShape.clockwise;
+            newShape.cx = sectorShape.cx;
+            newShape.cy = sectorShape.cy;
+            outShapes.push(newShape);
+        }
+    }
+}
+function divideRect(rectShape, count, outShapes) {
+    var width = rectShape.width;
+    var height = rectShape.height;
+    var isHorizontalRow = width > height;
+    var grids = getDividingGrids([width, height], isHorizontalRow ? 0 : 1, count);
+    var rowSizeDim = isHorizontalRow ? 'width' : 'height';
+    var columnSizeDim = isHorizontalRow ? 'height' : 'width';
+    var rowDim = isHorizontalRow ? 'x' : 'y';
+    var columnDim = isHorizontalRow ? 'y' : 'x';
+    var rowSize = rectShape[rowSizeDim] / grids.length;
+    for (var row = 0; row < grids.length; row++) {
+        var columnSize = rectShape[columnSizeDim] / grids[row];
+        for (var column = 0; column < grids[row]; column++) {
+            var newShape = {};
+            newShape[rowDim] = row * rowSize;
+            newShape[columnDim] = column * columnSize;
+            newShape[rowSizeDim] = rowSize;
+            newShape[columnSizeDim] = columnSize;
+            newShape.x += rectShape.x;
+            newShape.y += rectShape.y;
+            outShapes.push(newShape);
+        }
+    }
+}
+function crossProduct2d(x1, y1, x2, y2) {
+    return x1 * y2 - x2 * y1;
+}
+function lineLineIntersect(a1x, a1y, a2x, a2y, b1x, b1y, b2x, b2y) {
+    var mx = a2x - a1x;
+    var my = a2y - a1y;
+    var nx = b2x - b1x;
+    var ny = b2y - b1y;
+    var nmCrossProduct = crossProduct2d(nx, ny, mx, my);
+    if (Math.abs(nmCrossProduct) < 1e-6) {
+        return null;
+    }
+    var b1a1x = a1x - b1x;
+    var b1a1y = a1y - b1y;
+    var p = crossProduct2d(b1a1x, b1a1y, nx, ny) / nmCrossProduct;
+    if (p < 0 || p > 1) {
+        return null;
+    }
+    return new Point(p * mx + a1x, p * my + a1y);
+}
+function projPtOnLine(pt, lineA, lineB) {
+    var dir = new Point();
+    Point.sub(dir, lineB, lineA);
+    dir.normalize();
+    var dir2 = new Point();
+    Point.sub(dir2, pt, lineA);
+    var len = dir2.dot(dir);
+    return len;
+}
+function addToPoly(poly, pt) {
+    var last = poly[poly.length - 1];
+    if (last && last[0] === pt[0] && last[1] === pt[1]) {
+        return;
+    }
+    poly.push(pt);
+}
+function splitPolygonByLine(points, lineA, lineB) {
+    var len = points.length;
+    var intersections = [];
+    for (var i = 0; i < len; i++) {
+        var p0 = points[i];
+        var p1 = points[(i + 1) % len];
+        var intersectionPt = lineLineIntersect(p0[0], p0[1], p1[0], p1[1], lineA.x, lineA.y, lineB.x, lineB.y);
+        if (intersectionPt) {
+            intersections.push({
+                projPt: projPtOnLine(intersectionPt, lineA, lineB),
+                pt: intersectionPt,
+                idx: i
+            });
+        }
+    }
+    if (intersections.length < 2) {
+        return [{ points: points }, { points: points }];
+    }
+    intersections.sort(function (a, b) {
+        return a.projPt - b.projPt;
+    });
+    var splitPt0 = intersections[0];
+    var splitPt1 = intersections[intersections.length - 1];
+    if (splitPt1.idx < splitPt0.idx) {
+        var tmp = splitPt0;
+        splitPt0 = splitPt1;
+        splitPt1 = tmp;
+    }
+    var splitPt0Arr = [splitPt0.pt.x, splitPt0.pt.y];
+    var splitPt1Arr = [splitPt1.pt.x, splitPt1.pt.y];
+    var newPolyA = [splitPt0Arr];
+    var newPolyB = [splitPt1Arr];
+    for (var i = splitPt0.idx + 1; i <= splitPt1.idx; i++) {
+        addToPoly(newPolyA, points[i].slice());
+    }
+    addToPoly(newPolyA, splitPt1Arr);
+    addToPoly(newPolyA, splitPt0Arr);
+    for (var i = splitPt1.idx + 1; i <= splitPt0.idx + len; i++) {
+        addToPoly(newPolyB, points[i % len].slice());
+    }
+    addToPoly(newPolyB, splitPt0Arr);
+    addToPoly(newPolyB, splitPt1Arr);
+    return [{
+            points: newPolyA
+        }, {
+            points: newPolyB
+        }];
+}
+function binaryDividePolygon(polygonShape) {
+    var points = polygonShape.points;
+    var min = [];
+    var max = [];
+    fromPoints(points, min, max);
+    var boundingRect = new BoundingRect(min[0], min[1], max[0] - min[0], max[1] - min[1]);
+    var width = boundingRect.width;
+    var height = boundingRect.height;
+    var x = boundingRect.x;
+    var y = boundingRect.y;
+    var pt0 = new Point();
+    var pt1 = new Point();
+    if (width > height) {
+        pt0.x = pt1.x = x + width / 2;
+        pt0.y = y;
+        pt1.y = y + height;
+    }
+    else {
+        pt0.y = pt1.y = y + height / 2;
+        pt0.x = x;
+        pt1.x = x + width;
+    }
+    return splitPolygonByLine(points, pt0, pt1);
+}
+function binaryDivideRecursive(divider, shape, count, out) {
+    if (count === 1) {
+        out.push(shape);
+    }
+    else {
+        var mid = Math.floor(count / 2);
+        var sub = divider(shape);
+        binaryDivideRecursive(divider, sub[0], mid, out);
+        binaryDivideRecursive(divider, sub[1], count - mid, out);
+    }
+    return out;
+}
+function clone(path, count) {
+    var paths = [];
+    for (var i = 0; i < count; i++) {
+        paths.push(clonePath(path));
+    }
+    return paths;
+}
+function copyPathProps(source, target) {
+    target.setStyle(source.style);
+    target.z = source.z;
+    target.z2 = source.z2;
+    target.zlevel = source.zlevel;
+}
+function polygonConvert(points) {
+    var out = [];
+    for (var i = 0; i < points.length;) {
+        out.push([points[i++], points[i++]]);
+    }
+    return out;
+}
+function split(path, count) {
+    var outShapes = [];
+    var shape = path.shape;
+    var OutShapeCtor;
+    switch (path.type) {
+        case 'rect':
+            divideRect(shape, count, outShapes);
+            OutShapeCtor = Rect;
+            break;
+        case 'sector':
+            divideSector(shape, count, outShapes);
+            OutShapeCtor = Sector;
+            break;
+        case 'circle':
+            divideSector({
+                r0: 0, r: shape.r, startAngle: 0, endAngle: Math.PI * 2,
+                cx: shape.cx, cy: shape.cy
+            }, count, outShapes);
+            OutShapeCtor = Sector;
+            break;
+        default:
+            var m = path.getComputedTransform();
+            var scale = m ? Math.sqrt(Math.max(m[0] * m[0] + m[1] * m[1], m[2] * m[2] + m[3] * m[3])) : 1;
+            var polygons = map(pathToPolygons(path.getUpdatedPathProxy(), scale), function (poly) { return polygonConvert(poly); });
+            var polygonCount = polygons.length;
+            if (polygonCount === 0) {
+                binaryDivideRecursive(binaryDividePolygon, {
+                    points: polygons[0]
+                }, count, outShapes);
+            }
+            else if (polygonCount === count) {
+                for (var i = 0; i < polygonCount; i++) {
+                    outShapes.push({
+                        points: polygons[i]
+                    });
+                }
+            }
+            else {
+                var totalArea_1 = 0;
+                var items = map(polygons, function (poly) {
+                    var min = [];
+                    var max = [];
+                    fromPoints(poly, min, max);
+                    var area = (max[1] - min[1]) * (max[0] - min[0]);
+                    totalArea_1 += area;
+                    return { poly: poly, area: area };
+                });
+                items.sort(function (a, b) { return b.area - a.area; });
+                var left = count;
+                for (var i = 0; i < polygonCount; i++) {
+                    var item = items[i];
+                    if (left <= 0) {
+                        break;
+                    }
+                    var selfCount = i === polygonCount - 1
+                        ? left
+                        : Math.ceil(item.area / totalArea_1 * count);
+                    if (selfCount < 0) {
+                        continue;
+                    }
+                    binaryDivideRecursive(binaryDividePolygon, {
+                        points: item.poly
+                    }, selfCount, outShapes);
+                    left -= selfCount;
+                }
+            }
+            OutShapeCtor = Polygon;
+            break;
+    }
+    if (!OutShapeCtor) {
+        return clone(path, count);
+    }
+    var out = [];
+    for (var i = 0; i < outShapes.length; i++) {
+        var subPath = new OutShapeCtor();
+        subPath.setShape(outShapes[i]);
+        copyPathProps(path, subPath);
+        out.push(subPath);
+    }
+    return out;
+}
+
+function alignSubpath(subpath1, subpath2) {
+    var len1 = subpath1.length;
+    var len2 = subpath2.length;
+    if (len1 === len2) {
+        return [subpath1, subpath2];
+    }
+    var tmpSegX = [];
+    var tmpSegY = [];
+    var shorterPath = len1 < len2 ? subpath1 : subpath2;
+    var shorterLen = Math.min(len1, len2);
+    var diff = Math.abs(len2 - len1) / 6;
+    var shorterBezierCount = (shorterLen - 2) / 6;
+    var eachCurveSubDivCount = Math.ceil(diff / shorterBezierCount) + 1;
+    var newSubpath = [shorterPath[0], shorterPath[1]];
+    var remained = diff;
+    for (var i = 2; i < shorterLen;) {
+        var x0 = shorterPath[i - 2];
+        var y0 = shorterPath[i - 1];
+        var x1 = shorterPath[i++];
+        var y1 = shorterPath[i++];
+        var x2 = shorterPath[i++];
+        var y2 = shorterPath[i++];
+        var x3 = shorterPath[i++];
+        var y3 = shorterPath[i++];
+        if (remained <= 0) {
+            newSubpath.push(x1, y1, x2, y2, x3, y3);
+            continue;
+        }
+        var actualSubDivCount = Math.min(remained, eachCurveSubDivCount - 1) + 1;
+        for (var k = 1; k <= actualSubDivCount; k++) {
+            var p = k / actualSubDivCount;
+            cubicSubdivide(x0, x1, x2, x3, p, tmpSegX);
+            cubicSubdivide(y0, y1, y2, y3, p, tmpSegY);
+            x0 = tmpSegX[3];
+            y0 = tmpSegY[3];
+            newSubpath.push(tmpSegX[1], tmpSegY[1], tmpSegX[2], tmpSegY[2], x0, y0);
+            x1 = tmpSegX[5];
+            y1 = tmpSegY[5];
+            x2 = tmpSegX[6];
+            y2 = tmpSegY[6];
+        }
+        remained -= actualSubDivCount - 1;
+    }
+    return shorterPath === subpath1 ? [newSubpath, subpath2] : [subpath1, newSubpath];
+}
+function createSubpath(lastSubpathSubpath, otherSubpath) {
+    var len = lastSubpathSubpath.length;
+    var lastX = lastSubpathSubpath[len - 2];
+    var lastY = lastSubpathSubpath[len - 1];
+    var newSubpath = [];
+    for (var i = 0; i < otherSubpath.length;) {
+        newSubpath[i++] = lastX;
+        newSubpath[i++] = lastY;
+    }
+    return newSubpath;
+}
+function alignBezierCurves(array1, array2) {
+    var _a;
+    var lastSubpath1;
+    var lastSubpath2;
+    var newArray1 = [];
+    var newArray2 = [];
+    for (var i = 0; i < Math.max(array1.length, array2.length); i++) {
+        var subpath1 = array1[i];
+        var subpath2 = array2[i];
+        var newSubpath1 = void 0;
+        var newSubpath2 = void 0;
+        if (!subpath1) {
+            newSubpath1 = createSubpath(lastSubpath1 || subpath2, subpath2);
+            newSubpath2 = subpath2;
+        }
+        else if (!subpath2) {
+            newSubpath2 = createSubpath(lastSubpath2 || subpath1, subpath1);
+            newSubpath1 = subpath1;
+        }
+        else {
+            _a = alignSubpath(subpath1, subpath2), newSubpath1 = _a[0], newSubpath2 = _a[1];
+            lastSubpath1 = newSubpath1;
+            lastSubpath2 = newSubpath2;
+        }
+        newArray1.push(newSubpath1);
+        newArray2.push(newSubpath2);
+    }
+    return [newArray1, newArray2];
+}
+function centroid(array) {
+    var signedArea = 0;
+    var cx = 0;
+    var cy = 0;
+    var len = array.length;
+    for (var i = 0, j = len - 2; i < len; j = i, i += 2) {
+        var x0 = array[j];
+        var y0 = array[j + 1];
+        var x1 = array[i];
+        var y1 = array[i + 1];
+        var a = x0 * y1 - x1 * y0;
+        signedArea += a;
+        cx += (x0 + x1) * a;
+        cy += (y0 + y1) * a;
+    }
+    if (signedArea === 0) {
+        return [array[0] || 0, array[1] || 0];
+    }
+    return [cx / signedArea / 3, cy / signedArea / 3, signedArea];
+}
+function findBestRingOffset(fromSubBeziers, toSubBeziers, fromCp, toCp) {
+    var bezierCount = (fromSubBeziers.length - 2) / 6;
+    var bestScore = Infinity;
+    var bestOffset = 0;
+    var len = fromSubBeziers.length;
+    var len2 = len - 2;
+    for (var offset = 0; offset < bezierCount; offset++) {
+        var cursorOffset = offset * 6;
+        var score = 0;
+        for (var k = 0; k < len; k += 2) {
+            var idx = k === 0 ? cursorOffset : ((cursorOffset + k - 2) % len2 + 2);
+            var x0 = fromSubBeziers[idx] - fromCp[0];
+            var y0 = fromSubBeziers[idx + 1] - fromCp[1];
+            var x1 = toSubBeziers[k] - toCp[0];
+            var y1 = toSubBeziers[k + 1] - toCp[1];
+            var dx = x1 - x0;
+            var dy = y1 - y0;
+            score += dx * dx + dy * dy;
+        }
+        if (score < bestScore) {
+            bestScore = score;
+            bestOffset = offset;
+        }
+    }
+    return bestOffset;
+}
+function reverse(array) {
+    var newArr = [];
+    var len = array.length;
+    for (var i = 0; i < len; i += 2) {
+        newArr[i] = array[len - i - 2];
+        newArr[i + 1] = array[len - i - 1];
+    }
+    return newArr;
+}
+function findBestMorphingRotation(fromArr, toArr, searchAngleIteration, searchAngleRange) {
+    var result = [];
+    var fromNeedsReverse;
+    for (var i = 0; i < fromArr.length; i++) {
+        var fromSubpathBezier = fromArr[i];
+        var toSubpathBezier = toArr[i];
+        var fromCp = centroid(fromSubpathBezier);
+        var toCp = centroid(toSubpathBezier);
+        if (fromNeedsReverse == null) {
+            fromNeedsReverse = fromCp[2] < 0 !== toCp[2] < 0;
+        }
+        var newFromSubpathBezier = [];
+        var newToSubpathBezier = [];
+        var bestAngle = 0;
+        var bestScore = Infinity;
+        var tmpArr = [];
+        var len = fromSubpathBezier.length;
+        if (fromNeedsReverse) {
+            fromSubpathBezier = reverse(fromSubpathBezier);
+        }
+        var offset = findBestRingOffset(fromSubpathBezier, toSubpathBezier, fromCp, toCp) * 6;
+        var len2 = len - 2;
+        for (var k = 0; k < len2; k += 2) {
+            var idx = (offset + k) % len2 + 2;
+            newFromSubpathBezier[k + 2] = fromSubpathBezier[idx] - fromCp[0];
+            newFromSubpathBezier[k + 3] = fromSubpathBezier[idx + 1] - fromCp[1];
+        }
+        newFromSubpathBezier[0] = fromSubpathBezier[offset] - fromCp[0];
+        newFromSubpathBezier[1] = fromSubpathBezier[offset + 1] - fromCp[1];
+        if (searchAngleIteration > 0) {
+            var step = searchAngleRange / searchAngleIteration;
+            for (var angle = -searchAngleRange / 2; angle <= searchAngleRange / 2; angle += step) {
+                var sa = Math.sin(angle);
+                var ca = Math.cos(angle);
+                var score = 0;
+                for (var k = 0; k < fromSubpathBezier.length; k += 2) {
+                    var x0 = newFromSubpathBezier[k];
+                    var y0 = newFromSubpathBezier[k + 1];
+                    var x1 = toSubpathBezier[k] - toCp[0];
+                    var y1 = toSubpathBezier[k + 1] - toCp[1];
+                    var newX1 = x1 * ca - y1 * sa;
+                    var newY1 = x1 * sa + y1 * ca;
+                    tmpArr[k] = newX1;
+                    tmpArr[k + 1] = newY1;
+                    var dx = newX1 - x0;
+                    var dy = newY1 - y0;
+                    score += dx * dx + dy * dy;
+                }
+                if (score < bestScore) {
+                    bestScore = score;
+                    bestAngle = angle;
+                    for (var m = 0; m < tmpArr.length; m++) {
+                        newToSubpathBezier[m] = tmpArr[m];
+                    }
+                }
+            }
+        }
+        else {
+            for (var i_1 = 0; i_1 < len; i_1 += 2) {
+                newToSubpathBezier[i_1] = toSubpathBezier[i_1] - toCp[0];
+                newToSubpathBezier[i_1 + 1] = toSubpathBezier[i_1 + 1] - toCp[1];
+            }
+        }
+        result.push({
+            from: newFromSubpathBezier,
+            to: newToSubpathBezier,
+            fromCp: fromCp,
+            toCp: toCp,
+            rotation: -bestAngle
+        });
+    }
+    return result;
+}
+function isCombineMorphing(path) {
+    return path.__isCombineMorphing;
+}
+var SAVED_METHOD_PREFIX = '__mOriginal_';
+function saveAndModifyMethod(obj, methodName, modifiers) {
+    var savedMethodName = SAVED_METHOD_PREFIX + methodName;
+    var originalMethod = obj[savedMethodName] || obj[methodName];
+    if (!obj[savedMethodName]) {
+        obj[savedMethodName] = obj[methodName];
+    }
+    var replace = modifiers.replace;
+    var after = modifiers.after;
+    var before = modifiers.before;
+    obj[methodName] = function () {
+        var args = arguments;
+        var res;
+        before && before.apply(this, args);
+        if (replace) {
+            res = replace.apply(this, args);
+        }
+        else {
+            res = originalMethod.apply(this, args);
+        }
+        after && after.apply(this, args);
+        return res;
+    };
+}
+function restoreMethod(obj, methodName) {
+    var savedMethodName = SAVED_METHOD_PREFIX + methodName;
+    if (obj[savedMethodName]) {
+        obj[methodName] = obj[savedMethodName];
+        obj[savedMethodName] = null;
+    }
+}
+function applyTransformOnBeziers(bezierCurves, mm) {
+    for (var i = 0; i < bezierCurves.length; i++) {
+        var subBeziers = bezierCurves[i];
+        for (var k = 0; k < subBeziers.length;) {
+            var x = subBeziers[k];
+            var y = subBeziers[k + 1];
+            subBeziers[k++] = mm[0] * x + mm[2] * y + mm[4];
+            subBeziers[k++] = mm[1] * x + mm[3] * y + mm[5];
+        }
+    }
+}
+function prepareMorphPath(fromPath, toPath) {
+    var fromPathProxy = fromPath.getUpdatedPathProxy();
+    var toPathProxy = toPath.getUpdatedPathProxy();
+    var _a = alignBezierCurves(pathToBezierCurves(fromPathProxy), pathToBezierCurves(toPathProxy)), fromBezierCurves = _a[0], toBezierCurves = _a[1];
+    var fromPathTransform = fromPath.getComputedTransform();
+    var toPathTransform = toPath.getComputedTransform();
+    function updateIdentityTransform() {
+        this.transform = null;
+    }
+    fromPathTransform && applyTransformOnBeziers(fromBezierCurves, fromPathTransform);
+    toPathTransform && applyTransformOnBeziers(toBezierCurves, toPathTransform);
+    saveAndModifyMethod(toPath, 'updateTransform', { replace: updateIdentityTransform });
+    toPath.transform = null;
+    var morphingData = findBestMorphingRotation(fromBezierCurves, toBezierCurves, 10, Math.PI);
+    var tmpArr = [];
+    saveAndModifyMethod(toPath, 'buildPath', { replace: function (path) {
+            var t = toPath.__morphT;
+            var onet = 1 - t;
+            var newCp = [];
+            for (var i = 0; i < morphingData.length; i++) {
+                var item = morphingData[i];
+                var from = item.from;
+                var to = item.to;
+                var angle = item.rotation * t;
+                var fromCp = item.fromCp;
+                var toCp = item.toCp;
+                var sa = Math.sin(angle);
+                var ca = Math.cos(angle);
+                lerp$1(newCp, fromCp, toCp, t);
+                for (var m = 0; m < from.length; m += 2) {
+                    var x0_1 = from[m];
+                    var y0_1 = from[m + 1];
+                    var x1 = to[m];
+                    var y1 = to[m + 1];
+                    var x = x0_1 * onet + x1 * t;
+                    var y = y0_1 * onet + y1 * t;
+                    tmpArr[m] = (x * ca - y * sa) + newCp[0];
+                    tmpArr[m + 1] = (x * sa + y * ca) + newCp[1];
+                }
+                var x0 = tmpArr[0];
+                var y0 = tmpArr[1];
+                path.moveTo(x0, y0);
+                for (var m = 2; m < from.length;) {
+                    var x1 = tmpArr[m++];
+                    var y1 = tmpArr[m++];
+                    var x2 = tmpArr[m++];
+                    var y2 = tmpArr[m++];
+                    var x3 = tmpArr[m++];
+                    var y3 = tmpArr[m++];
+                    if (x0 === x1 && y0 === y1 && x2 === x3 && y2 === y3) {
+                        path.lineTo(x3, y3);
+                    }
+                    else {
+                        path.bezierCurveTo(x1, y1, x2, y2, x3, y3);
+                    }
+                    x0 = x3;
+                    y0 = y3;
+                }
+            }
+        } });
+}
+function morphPath(fromPath, toPath, animationOpts) {
+    if (!fromPath || !toPath) {
+        return toPath;
+    }
+    var oldDone = animationOpts.done;
+    var oldDuring = animationOpts.during;
+    prepareMorphPath(fromPath, toPath);
+    toPath.__morphT = 0;
+    function restoreToPath() {
+        restoreMethod(toPath, 'buildPath');
+        restoreMethod(toPath, 'updateTransform');
+        toPath.__morphT = -1;
+        toPath.createPathProxy();
+        toPath.dirtyShape();
+    }
+    toPath.animateTo({
+        __morphT: 1
+    }, defaults({
+        during: function (p) {
+            toPath.dirtyShape();
+            oldDuring && oldDuring(p);
+        },
+        done: function () {
+            restoreToPath();
+            oldDone && oldDone();
+        }
+    }, animationOpts));
+    return toPath;
+}
+function hilbert(x, y, minX, minY, maxX, maxY) {
+    var bits = 16;
+    x = (maxX === minX) ? 0 : Math.round(32767 * (x - minX) / (maxX - minX));
+    y = (maxY === minY) ? 0 : Math.round(32767 * (y - minY) / (maxY - minY));
+    var d = 0;
+    var tmp;
+    for (var s = (1 << bits) / 2; s > 0; s /= 2) {
+        var rx = 0;
+        var ry = 0;
+        if ((x & s) > 0) {
+            rx = 1;
+        }
+        if ((y & s) > 0) {
+            ry = 1;
+        }
+        d += s * s * ((3 * rx) ^ ry);
+        if (ry === 0) {
+            if (rx === 1) {
+                x = s - 1 - x;
+                y = s - 1 - y;
+            }
+            tmp = x;
+            x = y;
+            y = tmp;
+        }
+    }
+    return d;
+}
+function sortPaths(pathList) {
+    var xMin = Infinity;
+    var yMin = Infinity;
+    var xMax = -Infinity;
+    var yMax = -Infinity;
+    var cps = map(pathList, function (path) {
+        var rect = path.getBoundingRect();
+        var m = path.getComputedTransform();
+        var x = rect.x + rect.width / 2 + (m ? m[4] : 0);
+        var y = rect.y + rect.height / 2 + (m ? m[5] : 0);
+        xMin = Math.min(x, xMin);
+        yMin = Math.min(y, yMin);
+        xMax = Math.max(x, xMax);
+        yMax = Math.max(y, yMax);
+        return [x, y];
+    });
+    var items = map(cps, function (cp, idx) {
+        return {
+            cp: cp,
+            z: hilbert(cp[0], cp[1], xMin, yMin, xMax, yMax),
+            path: pathList[idx]
+        };
+    });
+    return items.sort(function (a, b) { return a.z - b.z; }).map(function (item) { return item.path; });
+}
+function defaultDividePath(param) {
+    return split(param.path, param.count);
+}
+function createEmptyReturn() {
+    return {
+        fromIndividuals: [],
+        toIndividuals: [],
+        count: 0
+    };
+}
+function combineMorph(fromList, toPath, animationOpts) {
+    var fromPathList = [];
+    function addFromPath(fromList) {
+        for (var i = 0; i < fromList.length; i++) {
+            var from = fromList[i];
+            if (isCombineMorphing(from)) {
+                addFromPath(from.childrenRef());
+            }
+            else if (from instanceof Path) {
+                fromPathList.push(from);
+            }
+        }
+    }
+    addFromPath(fromList);
+    var separateCount = fromPathList.length;
+    if (!separateCount) {
+        return createEmptyReturn();
+    }
+    var dividePath = animationOpts.dividePath || defaultDividePath;
+    var toSubPathList = dividePath({
+        path: toPath, count: separateCount
+    });
+    if (toSubPathList.length !== separateCount) {
+        console.error('Invalid morphing: unmatched splitted path');
+        return createEmptyReturn();
+    }
+    fromPathList = sortPaths(fromPathList);
+    toSubPathList = sortPaths(toSubPathList);
+    var oldDone = animationOpts.done;
+    var oldDuring = animationOpts.during;
+    var individualDelay = animationOpts.individualDelay;
+    var identityTransform = new Transformable();
+    for (var i = 0; i < separateCount; i++) {
+        var from = fromPathList[i];
+        var to = toSubPathList[i];
+        to.parent = toPath;
+        to.copyTransform(identityTransform);
+        if (!individualDelay) {
+            prepareMorphPath(from, to);
+        }
+    }
+    toPath.__isCombineMorphing = true;
+    toPath.childrenRef = function () {
+        return toSubPathList;
+    };
+    function addToSubPathListToZr(zr) {
+        for (var i = 0; i < toSubPathList.length; i++) {
+            toSubPathList[i].addSelfToZr(zr);
+        }
+    }
+    saveAndModifyMethod(toPath, 'addSelfToZr', {
+        after: function (zr) {
+            addToSubPathListToZr(zr);
+        }
+    });
+    saveAndModifyMethod(toPath, 'removeSelfFromZr', {
+        after: function (zr) {
+            for (var i = 0; i < toSubPathList.length; i++) {
+                toSubPathList[i].removeSelfFromZr(zr);
+            }
+        }
+    });
+    function restoreToPath() {
+        toPath.__isCombineMorphing = false;
+        toPath.__morphT = -1;
+        toPath.childrenRef = null;
+        restoreMethod(toPath, 'addSelfToZr');
+        restoreMethod(toPath, 'removeSelfFromZr');
+    }
+    var toLen = toSubPathList.length;
+    if (individualDelay) {
+        var animating_1 = toLen;
+        var eachDone = function () {
+            animating_1--;
+            if (animating_1 === 0) {
+                restoreToPath();
+                oldDone && oldDone();
+            }
+        };
+        for (var i = 0; i < toLen; i++) {
+            var indivdualAnimationOpts = individualDelay ? defaults({
+                delay: (animationOpts.delay || 0) + individualDelay(i, toLen, fromPathList[i], toSubPathList[i]),
+                done: eachDone
+            }, animationOpts) : animationOpts;
+            morphPath(fromPathList[i], toSubPathList[i], indivdualAnimationOpts);
+        }
+    }
+    else {
+        toPath.__morphT = 0;
+        toPath.animateTo({
+            __morphT: 1
+        }, defaults({
+            during: function (p) {
+                for (var i = 0; i < toLen; i++) {
+                    var child = toSubPathList[i];
+                    child.__morphT = toPath.__morphT;
+                    child.dirtyShape();
+                }
+                oldDuring && oldDuring(p);
+            },
+            done: function () {
+                restoreToPath();
+                for (var i = 0; i < fromList.length; i++) {
+                    restoreMethod(fromList[i], 'updateTransform');
+                }
+                oldDone && oldDone();
+            }
+        }, animationOpts));
+    }
+    if (toPath.__zr) {
+        addToSubPathListToZr(toPath.__zr);
+    }
+    return {
+        fromIndividuals: fromPathList,
+        toIndividuals: toSubPathList,
+        count: toLen
+    };
+}
+function separateMorph(fromPath, toPathList, animationOpts) {
+    var toLen = toPathList.length;
+    var fromPathList = [];
+    var dividePath = animationOpts.dividePath || defaultDividePath;
+    function addFromPath(fromList) {
+        for (var i = 0; i < fromList.length; i++) {
+            var from = fromList[i];
+            if (isCombineMorphing(from)) {
+                addFromPath(from.childrenRef());
+            }
+            else if (from instanceof Path) {
+                fromPathList.push(from);
+            }
+        }
+    }
+    if (isCombineMorphing(fromPath)) {
+        addFromPath(fromPath.childrenRef());
+        var fromLen = fromPathList.length;
+        if (fromLen < toLen) {
+            var k = 0;
+            for (var i = fromLen; i < toLen; i++) {
+                fromPathList.push(clonePath(fromPathList[k++ % fromLen]));
+            }
+        }
+        fromPathList.length = toLen;
+    }
+    else {
+        fromPathList = dividePath({ path: fromPath, count: toLen });
+        var fromPathTransform = fromPath.getComputedTransform();
+        for (var i = 0; i < fromPathList.length; i++) {
+            fromPathList[i].setLocalTransform(fromPathTransform);
+        }
+        if (fromPathList.length !== toLen) {
+            console.error('Invalid morphing: unmatched splitted path');
+            return createEmptyReturn();
+        }
+    }
+    fromPathList = sortPaths(fromPathList);
+    toPathList = sortPaths(toPathList);
+    var individualDelay = animationOpts.individualDelay;
+    for (var i = 0; i < toLen; i++) {
+        var indivdualAnimationOpts = individualDelay ? defaults({
+            delay: (animationOpts.delay || 0) + individualDelay(i, toLen, fromPathList[i], toPathList[i])
+        }, animationOpts) : animationOpts;
+        morphPath(fromPathList[i], toPathList[i], indivdualAnimationOpts);
+    }
+    return {
+        fromIndividuals: fromPathList,
+        toIndividuals: toPathList,
+        count: toPathList.length
+    };
+}
+
+function isMultiple(elements) {
+  return isArray(elements[0]);
+}
+
+function prepareMorphBatches(one, many) {
+  var batches = [];
+  var batchCount = one.length;
+
+  for (var i = 0; i < batchCount; i++) {
+    batches.push({
+      one: one[i],
+      many: []
+    });
+  }
+
+  for (var i = 0; i < many.length; i++) {
+    var len = many[i].length;
+    var k = void 0;
+
+    for (k = 0; k < len; k++) {
+      batches[k % batchCount].many.push(many[i][k]);
+    }
+  }
+
+  var off = 0; // If one has more paths than each one of many. average them.
+
+  for (var i = batchCount - 1; i >= 0; i--) {
+    if (!batches[i].many.length) {
+      var moveFrom = batches[off].many;
+
+      if (moveFrom.length <= 1) {
+        // Not enough
+        // Start from the first one.
+        if (off) {
+          off = 0;
+        } else {
+          return batches;
+        }
+      }
+
+      var len = moveFrom.length;
+      var mid = Math.ceil(len / 2);
+      batches[i].many = moveFrom.slice(mid, len);
+      batches[off].many = moveFrom.slice(0, mid);
+      off++;
+    }
+  }
+
+  return batches;
+}
+
+var pathDividers = {
+  clone: function (params) {
+    var ret = []; // Fitting the alpha
+
+    var approxOpacity = 1 - Math.pow(1 - params.path.style.opacity, 1 / params.count);
+
+    for (var i = 0; i < params.count; i++) {
+      var cloned = clonePath(params.path);
+      cloned.setStyle('opacity', approxOpacity);
+      ret.push(cloned);
+    }
+
+    return ret;
+  },
+  // Use the default divider
+  split: null
+};
+function applyMorphAnimation(from, to, divideShape, seriesModel, dataIndex, animateOtherProps) {
+  if (!from.length || !to.length) {
+    return;
+  }
+
+  var updateAnimationCfg = getAnimationConfig('update', seriesModel, dataIndex);
+
+  if (!(updateAnimationCfg && updateAnimationCfg.duration > 0)) {
+    return;
+  }
+
+  var animationDelay = seriesModel.getModel('universalTransition').get('delay');
+  var animationCfg = Object.assign({
+    // Need to setToFinal so the further calculation based on the style can be correct.
+    // Like emphasis color.
+    setToFinal: true
+  }, updateAnimationCfg);
+  var many;
+  var one;
+
+  if (isMultiple(from)) {
+    // manyToOne
+    many = from;
+    one = to;
+  }
+
+  if (isMultiple(to)) {
+    // oneToMany
+    many = to;
+    one = from;
+  }
+
+  function morphOneBatch(batch, fromIsMany, animateIndex, animateCount, forceManyOne) {
+    var batchMany = batch.many;
+    var batchOne = batch.one;
+
+    if (batchMany.length === 1 && !forceManyOne) {
+      // Is one to one
+      var batchFrom = fromIsMany ? batchMany[0] : batchOne;
+      var batchTo = fromIsMany ? batchOne : batchMany[0];
+
+      if (isCombineMorphing(batchFrom)) {
+        // Keep doing combine animation.
+        morphOneBatch({
+          many: [batchFrom],
+          one: batchTo
+        }, true, animateIndex, animateCount, true);
+      } else {
+        var individualAnimationCfg = animationDelay ? defaults({
+          delay: animationDelay(animateIndex, animateCount)
+        }, animationCfg) : animationCfg;
+        morphPath(batchFrom, batchTo, individualAnimationCfg);
+        animateOtherProps(batchFrom, batchTo, batchFrom, batchTo, individualAnimationCfg);
+      }
+    } else {
+      var separateAnimationCfg = defaults({
+        dividePath: pathDividers[divideShape],
+        individualDelay: animationDelay && function (idx, count, fromPath, toPath) {
+          return animationDelay(idx + animateIndex, animateCount);
+        }
+      }, animationCfg);
+
+      var _a = fromIsMany ? combineMorph(batchMany, batchOne, separateAnimationCfg) : separateMorph(batchOne, batchMany, separateAnimationCfg),
+          fromIndividuals = _a.fromIndividuals,
+          toIndividuals = _a.toIndividuals;
+
+      var count = fromIndividuals.length;
+
+      for (var k = 0; k < count; k++) {
+        var individualAnimationCfg = animationDelay ? defaults({
+          delay: animationDelay(k, count)
+        }, animationCfg) : animationCfg;
+        animateOtherProps(fromIndividuals[k], toIndividuals[k], fromIsMany ? batchMany[k] : batch.one, fromIsMany ? batch.one : batchMany[k], individualAnimationCfg);
+      }
+    }
+  }
+
+  var fromIsMany = many ? many === from // Is one to one. If the path number not match. also needs do merge and separate morphing.
+  : from.length > to.length;
+  var morphBatches = many ? prepareMorphBatches(one, many) : prepareMorphBatches(fromIsMany ? to : from, [fromIsMany ? from : to]);
+  var animateCount = 0;
+
+  for (var i = 0; i < morphBatches.length; i++) {
+    animateCount += morphBatches[i].many.length;
+  }
+
+  var animateIndex = 0;
+
+  for (var i = 0; i < morphBatches.length; i++) {
+    morphOneBatch(morphBatches[i], fromIsMany, animateIndex, animateCount);
+    animateIndex += morphBatches[i].many.length;
+  }
+}
+function getPathList(elements) {
+  if (!elements) {
+    return [];
+  }
+
+  if (isArray(elements)) {
+    var pathList_1 = [];
+
+    for (var i = 0; i < elements.length; i++) {
+      pathList_1.push(getPathList(elements[i]));
+    }
+
+    return pathList_1;
+  }
+
+  var pathList = [];
+  elements.traverse(function (el) {
+    if (el instanceof Path && !el.disableMorphing && !el.invisible && !el.ignore) {
+      pathList.push(el);
+    }
+  });
+  return pathList;
+}
+
+var DATA_COUNT_THRESHOLD = 1e4;
+var getUniversalTransitionGlobalStore = makeInner();
+
+function getGroupIdDimension(data) {
+  var dimensions = data.dimensions;
+
+  for (var i = 0; i < dimensions.length; i++) {
+    var dimInfo = data.getDimensionInfo(dimensions[i]);
+
+    if (dimInfo && dimInfo.otherDims.itemGroupId === 0) {
+      return dimensions[i];
+    }
+  }
+}
+
+function flattenDataDiffItems(list) {
+  var items = [];
+  each(list, function (seriesInfo) {
+    var data = seriesInfo.data;
+
+    if (data.count() > DATA_COUNT_THRESHOLD) {
+
+      return;
+    }
+
+    var indices = data.getIndices();
+    var groupDim = getGroupIdDimension(data);
+
+    for (var dataIndex = 0; dataIndex < indices.length; dataIndex++) {
+      items.push({
+        dataGroupId: seriesInfo.dataGroupId,
+        data: data,
+        dim: seriesInfo.dim || groupDim,
+        divide: seriesInfo.divide,
+        dataIndex: dataIndex
+      });
+    }
+  });
+  return items;
+}
+
+function fadeInElement(newEl, newSeries, newIndex) {
+  newEl.traverse(function (el) {
+    if (el instanceof Path) {
+      // TODO use fade in animation for target element.
+      initProps(el, {
+        style: {
+          opacity: 0
+        }
+      }, newSeries, {
+        dataIndex: newIndex,
+        isFrom: true
+      });
+    }
+  });
+}
+
+function removeEl(el) {
+  if (el.parent) {
+    // Bake parent transform to element.
+    // So it can still have proper transform to transition after it's removed.
+    var computedTransform = el.getComputedTransform();
+    el.setLocalTransform(computedTransform);
+    el.parent.remove(el);
+  }
+}
+
+function stopAnimation(el) {
+  el.stopAnimation();
+
+  if (el.isGroup) {
+    el.traverse(function (child) {
+      child.stopAnimation();
+    });
+  }
+}
+
+function animateElementStyles(el, dataIndex, seriesModel) {
+  var animationConfig = getAnimationConfig('update', seriesModel, dataIndex);
+  animationConfig && el.traverse(function (child) {
+    if (child instanceof Displayable) {
+      var oldStyle = getOldStyle(child);
+
+      if (oldStyle) {
+        child.animateFrom({
+          style: oldStyle
+        }, animationConfig);
+      }
+    }
+  });
+}
+
+function isAllIdSame(oldDiffItems, newDiffItems) {
+  var len = oldDiffItems.length;
+
+  if (len !== newDiffItems.length) {
+    return false;
+  }
+
+  for (var i = 0; i < len; i++) {
+    var oldItem = oldDiffItems[i];
+    var newItem = newDiffItems[i];
+
+    if (oldItem.data.getId(oldItem.dataIndex) !== newItem.data.getId(newItem.dataIndex)) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+function transitionBetween(oldList, newList, api) {
+  var oldDiffItems = flattenDataDiffItems(oldList);
+  var newDiffItems = flattenDataDiffItems(newList);
+
+  function updateMorphingPathProps(from, to, rawFrom, rawTo, animationCfg) {
+    if (rawFrom || from) {
+      to.animateFrom({
+        style: rawFrom && rawFrom !== from ? // dividingMethod like clone may override the style(opacity)
+        // So extend it to raw style.
+        extend(extend({}, rawFrom.style), from.style) : from.style
+      }, animationCfg);
+    }
+  }
+
+  function findKeyDim(items) {
+    for (var i = 0; i < items.length; i++) {
+      if (items[i].dim) {
+        return items[i].dim;
+      }
+    }
+  }
+
+  var oldKeyDim = findKeyDim(oldDiffItems);
+  var newKeyDim = findKeyDim(newDiffItems);
+  var hasMorphAnimation = false;
+
+  function createKeyGetter(isOld, onlyGetId) {
+    return function (diffItem) {
+      var data = diffItem.data;
+      var dataIndex = diffItem.dataIndex; // TODO if specified dim
+
+      if (onlyGetId) {
+        return data.getId(dataIndex);
+      } // Use group id as transition key by default.
+      // So we can achieve multiple to multiple animation like drilldown / up naturally.
+      // If group id not exits. Use id instead. If so, only one to one transition will be applied.
+
+
+      var dataGroupId = diffItem.dataGroupId; // If specified key dimension(itemGroupId by default). Use this same dimension from other data.
+      // PENDING: If only use key dimension of newData.
+
+      var keyDim = isOld ? oldKeyDim || newKeyDim : newKeyDim || oldKeyDim;
+      var dimInfo = keyDim && data.getDimensionInfo(keyDim);
+      var dimOrdinalMeta = dimInfo && dimInfo.ordinalMeta;
+
+      if (dimInfo) {
+        // Get from encode.itemGroupId.
+        var key = data.get(dimInfo.name, dataIndex);
+
+        if (dimOrdinalMeta) {
+          return dimOrdinalMeta.categories[key] || key + '';
+        }
+
+        return key + '';
+      } // Get groupId from raw item. { groupId: '' }
+
+
+      var itemVal = data.getRawDataItem(dataIndex);
+
+      if (itemVal && itemVal.groupId) {
+        return itemVal.groupId + '';
+      }
+
+      return dataGroupId || data.getId(dataIndex);
+    };
+  } // Use id if it's very likely to be an one to one animation
+  // It's more robust than groupId
+  // TODO Check if key dimension is specified.
+
+
+  var useId = isAllIdSame(oldDiffItems, newDiffItems);
+  var isElementStillInChart = {};
+
+  if (!useId) {
+    // We may have different diff strategy with basicTransition if we use other dimension as key.
+    // If so, we can't simply check if oldEl is same with newEl. We need a map to check if oldEl is still being used in the new chart.
+    // We can't use the elements that already being morphed. Let it keep it's original basic transition.
+    for (var i = 0; i < newDiffItems.length; i++) {
+      var newItem = newDiffItems[i];
+      var el = newItem.data.getItemGraphicEl(newItem.dataIndex);
+
+      if (el) {
+        isElementStillInChart[el.id] = true;
+      }
+    }
+  }
+
+  function updateOneToOne(newIndex, oldIndex) {
+    var oldItem = oldDiffItems[oldIndex];
+    var newItem = newDiffItems[newIndex];
+    var newSeries = newItem.data.hostModel; // TODO Mark this elements is morphed and don't morph them anymore
+
+    var oldEl = oldItem.data.getItemGraphicEl(oldItem.dataIndex);
+    var newEl = newItem.data.getItemGraphicEl(newItem.dataIndex); // Can't handle same elements.
+
+    if (oldEl === newEl) {
+      newEl && animateElementStyles(newEl, newItem.dataIndex, newSeries);
+      return;
+    }
+
+    if ( // We can't use the elements that already being morphed
+    oldEl && isElementStillInChart[oldEl.id]) {
+      return;
+    }
+
+    if (newEl) {
+      // TODO: If keep animating the group in case
+      // some of the elements don't want to be morphed.
+      // TODO Label?
+      stopAnimation(newEl);
+
+      if (oldEl) {
+        stopAnimation(oldEl); // If old element is doing leaving animation. stop it and remove it immediately.
+
+        removeEl(oldEl);
+        hasMorphAnimation = true;
+        applyMorphAnimation(getPathList(oldEl), getPathList(newEl), newItem.divide, newSeries, newIndex, updateMorphingPathProps);
+      } else {
+        fadeInElement(newEl, newSeries, newIndex);
+      }
+    } // else keep oldEl leaving animation.
+
+  }
+
+  new DataDiffer(oldDiffItems, newDiffItems, createKeyGetter(true, useId), createKeyGetter(false, useId), null, 'multiple').update(updateOneToOne).updateManyToOne(function (newIndex, oldIndices) {
+    var newItem = newDiffItems[newIndex];
+    var newData = newItem.data;
+    var newSeries = newData.hostModel;
+    var newEl = newData.getItemGraphicEl(newItem.dataIndex);
+    var oldElsList = filter(map(oldIndices, function (idx) {
+      return oldDiffItems[idx].data.getItemGraphicEl(oldDiffItems[idx].dataIndex);
+    }), function (oldEl) {
+      return oldEl && oldEl !== newEl && !isElementStillInChart[oldEl.id];
+    });
+
+    if (newEl) {
+      stopAnimation(newEl);
+
+      if (oldElsList.length) {
+        // If old element is doing leaving animation. stop it and remove it immediately.
+        each(oldElsList, function (oldEl) {
+          stopAnimation(oldEl);
+          removeEl(oldEl);
+        });
+        hasMorphAnimation = true;
+        applyMorphAnimation(getPathList(oldElsList), getPathList(newEl), newItem.divide, newSeries, newIndex, updateMorphingPathProps);
+      } else {
+        fadeInElement(newEl, newSeries, newItem.dataIndex);
+      }
+    } // else keep oldEl leaving animation.
+
+  }).updateOneToMany(function (newIndices, oldIndex) {
+    var oldItem = oldDiffItems[oldIndex];
+    var oldEl = oldItem.data.getItemGraphicEl(oldItem.dataIndex); // We can't use the elements that already being morphed
+
+    if (oldEl && isElementStillInChart[oldEl.id]) {
+      return;
+    }
+
+    var newElsList = filter(map(newIndices, function (idx) {
+      return newDiffItems[idx].data.getItemGraphicEl(newDiffItems[idx].dataIndex);
+    }), function (el) {
+      return el && el !== oldEl;
+    });
+    var newSeris = newDiffItems[newIndices[0]].data.hostModel;
+
+    if (newElsList.length) {
+      each(newElsList, function (newEl) {
+        return stopAnimation(newEl);
+      });
+
+      if (oldEl) {
+        stopAnimation(oldEl); // If old element is doing leaving animation. stop it and remove it immediately.
+
+        removeEl(oldEl);
+        hasMorphAnimation = true;
+        applyMorphAnimation(getPathList(oldEl), getPathList(newElsList), oldItem.divide, // Use divide on old.
+        newSeris, newIndices[0], updateMorphingPathProps);
+      } else {
+        each(newElsList, function (newEl) {
+          return fadeInElement(newEl, newSeris, newIndices[0]);
+        });
+      }
+    } // else keep oldEl leaving animation.
+
+  }).updateManyToMany(function (newIndices, oldIndices) {
+    // If two data are same and both have groupId.
+    // Normally they should be diff by id.
+    new DataDiffer(oldIndices, newIndices, function (rawIdx) {
+      return oldDiffItems[rawIdx].data.getId(oldDiffItems[rawIdx].dataIndex);
+    }, function (rawIdx) {
+      return newDiffItems[rawIdx].data.getId(newDiffItems[rawIdx].dataIndex);
+    }).update(function (newIndex, oldIndex) {
+      // Use the original index
+      updateOneToOne(newIndices[newIndex], oldIndices[oldIndex]);
+    }).execute();
+  }).execute();
+
+  if (hasMorphAnimation) {
+    each(newList, function (_a) {
+      var data = _a.data;
+      var seriesModel = data.hostModel;
+      var view = seriesModel && api.getViewOfSeriesModel(seriesModel);
+      var animationCfg = getAnimationConfig('update', seriesModel, 0); // use 0 index.
+
+      if (view && seriesModel.isAnimationEnabled() && animationCfg && animationCfg.duration > 0) {
+        view.group.traverse(function (el) {
+          if (el instanceof Path && !el.animators.length) {
+            // We can't accept there still exists element that has no animation
+            // if universalTransition is enabled
+            el.animateFrom({
+              style: {
+                opacity: 0
+              }
+            }, animationCfg);
+          }
+        });
+      }
+    });
+  }
+}
+
+function getSeriesTransitionKey(series) {
+  var seriesKey = series.getModel('universalTransition').get('seriesKey');
+
+  if (!seriesKey) {
+    // Use series id by default.
+    return series.id;
+  }
+
+  return seriesKey;
+}
+
+function convertArraySeriesKeyToString(seriesKey) {
+  if (isArray(seriesKey)) {
+    // Order independent.
+    return seriesKey.sort().join(',');
+  }
+
+  return seriesKey;
+}
+
+function getDivideShapeFromData(data) {
+  if (data.hostModel) {
+    return data.hostModel.getModel('universalTransition').get('divideShape');
+  }
+}
+
+function findTransitionSeriesBatches(globalStore, params) {
+  var updateBatches = createHashMap();
+  var oldDataMap = createHashMap(); // Map that only store key in array seriesKey.
+  // Which is used to query the old data when transition from one to multiple series.
+
+  var oldDataMapForSplit = createHashMap();
+  each(globalStore.oldSeries, function (series, idx) {
+    var oldDataGroupId = globalStore.oldDataGroupIds[idx];
+    var oldData = globalStore.oldData[idx];
+    var transitionKey = getSeriesTransitionKey(series);
+    var transitionKeyStr = convertArraySeriesKeyToString(transitionKey);
+    oldDataMap.set(transitionKeyStr, {
+      dataGroupId: oldDataGroupId,
+      data: oldData
+    });
+
+    if (isArray(transitionKey)) {
+      // Same key can't in different array seriesKey.
+      each(transitionKey, function (key) {
+        oldDataMapForSplit.set(key, {
+          key: transitionKeyStr,
+          dataGroupId: oldDataGroupId,
+          data: oldData
+        });
+      });
+    }
+  });
+
+  each(params.updatedSeries, function (series) {
+    if (series.isUniversalTransitionEnabled() && series.isAnimationEnabled()) {
+      var newDataGroupId = series.get('dataGroupId');
+      var newData = series.getData();
+      var transitionKey = getSeriesTransitionKey(series);
+      var transitionKeyStr = convertArraySeriesKeyToString(transitionKey); // Only transition between series with same id.
+
+      var oldData = oldDataMap.get(transitionKeyStr); // string transition key is the best match.
+
+      if (oldData) {
+
+
+        updateBatches.set(transitionKeyStr, {
+          oldSeries: [{
+            dataGroupId: oldData.dataGroupId,
+            divide: getDivideShapeFromData(oldData.data),
+            data: oldData.data
+          }],
+          newSeries: [{
+            dataGroupId: newDataGroupId,
+            divide: getDivideShapeFromData(newData),
+            data: newData
+          }]
+        });
+      } else {
+        // Transition from multiple series.
+        if (isArray(transitionKey)) {
+
+          var oldSeries_1 = [];
+          each(transitionKey, function (key) {
+            var oldData = oldDataMap.get(key);
+
+            if (oldData.data) {
+              oldSeries_1.push({
+                dataGroupId: oldData.dataGroupId,
+                divide: getDivideShapeFromData(oldData.data),
+                data: oldData.data
+              });
+            }
+          });
+
+          if (oldSeries_1.length) {
+            updateBatches.set(transitionKeyStr, {
+              oldSeries: oldSeries_1,
+              newSeries: [{
+                dataGroupId: newDataGroupId,
+                data: newData,
+                divide: getDivideShapeFromData(newData)
+              }]
+            });
+          }
+        } else {
+          // Try transition to multiple series.
+          var oldData_1 = oldDataMapForSplit.get(transitionKey);
+
+          if (oldData_1) {
+            var batch = updateBatches.get(oldData_1.key);
+
+            if (!batch) {
+              batch = {
+                oldSeries: [{
+                  dataGroupId: oldData_1.dataGroupId,
+                  data: oldData_1.data,
+                  divide: getDivideShapeFromData(oldData_1.data)
+                }],
+                newSeries: []
+              };
+              updateBatches.set(oldData_1.key, batch);
+            }
+
+            batch.newSeries.push({
+              dataGroupId: newDataGroupId,
+              data: newData,
+              divide: getDivideShapeFromData(newData)
+            });
+          }
+        }
+      }
+    }
+  });
+  return updateBatches;
+}
+
+function querySeries(series, finder) {
+  for (var i = 0; i < series.length; i++) {
+    var found = finder.seriesIndex != null && finder.seriesIndex === series[i].seriesIndex || finder.seriesId != null && finder.seriesId === series[i].id;
+
+    if (found) {
+      return i;
+    }
+  }
+}
+
+function transitionSeriesFromOpt(transitionOpt, globalStore, params, api) {
+  var from = [];
+  var to = [];
+  each(normalizeToArray(transitionOpt.from), function (finder) {
+    var idx = querySeries(globalStore.oldSeries, finder);
+
+    if (idx >= 0) {
+      from.push({
+        dataGroupId: globalStore.oldDataGroupIds[idx],
+        data: globalStore.oldData[idx],
+        // TODO can specify divideShape in transition.
+        divide: getDivideShapeFromData(globalStore.oldData[idx]),
+        dim: finder.dimension
+      });
+    }
+  });
+  each(normalizeToArray(transitionOpt.to), function (finder) {
+    var idx = querySeries(params.updatedSeries, finder);
+
+    if (idx >= 0) {
+      var data = params.updatedSeries[idx].getData();
+      to.push({
+        dataGroupId: globalStore.oldDataGroupIds[idx],
+        data: data,
+        divide: getDivideShapeFromData(data),
+        dim: finder.dimension
+      });
+    }
+  });
+
+  if (from.length > 0 && to.length > 0) {
+    transitionBetween(from, to, api);
+  }
+}
+
+function installUniversalTransition(registers) {
+  registers.registerUpdateLifecycle('series:beforeupdate', function (ecMOdel, api, params) {
+    each(normalizeToArray(params.seriesTransition), function (transOpt) {
+      each(normalizeToArray(transOpt.to), function (finder) {
+        var series = params.updatedSeries;
+
+        for (var i = 0; i < series.length; i++) {
+          if (finder.seriesIndex != null && finder.seriesIndex === series[i].seriesIndex || finder.seriesId != null && finder.seriesId === series[i].id) {
+            series[i][SERIES_UNIVERSAL_TRANSITION_PROP] = true;
+          }
+        }
+      });
+    });
+  });
+  registers.registerUpdateLifecycle('series:transition', function (ecModel, api, params) {
+    // TODO api provide an namespace that can save stuff per instance
+    var globalStore = getUniversalTransitionGlobalStore(api); // TODO multiple to multiple series.
+
+    if (globalStore.oldSeries && params.updatedSeries && params.optionChanged) {
+      // Use give transition config if its' give;
+      var transitionOpt = params.seriesTransition;
+
+      if (transitionOpt) {
+        each(normalizeToArray(transitionOpt), function (opt) {
+          transitionSeriesFromOpt(opt, globalStore, params, api);
+        });
+      } else {
+        // Else guess from series based on transition series key.
+        var updateBatches_1 = findTransitionSeriesBatches(globalStore, params);
+        each(updateBatches_1.keys(), function (key) {
+          var batch = updateBatches_1.get(key);
+          transitionBetween(batch.oldSeries, batch.newSeries, api);
+        });
+      } // Reset
+
+
+      each(params.updatedSeries, function (series) {
+        // Reset;
+        if (series[SERIES_UNIVERSAL_TRANSITION_PROP]) {
+          series[SERIES_UNIVERSAL_TRANSITION_PROP] = false;
+        }
+      });
+    } // Save all series of current update. Not only the updated one.
+
+
+    var allSeries = ecModel.getSeries();
+    var savedSeries = globalStore.oldSeries = [];
+    var savedDataGroupIds = globalStore.oldDataGroupIds = [];
+    var savedData = globalStore.oldData = [];
+
+    for (var i = 0; i < allSeries.length; i++) {
+      var data = allSeries[i].getData(); // Only save the data that can have transition.
+      // Avoid large data costing too much extra memory
+
+      if (data.count() < DATA_COUNT_THRESHOLD) {
+        savedSeries.push(allSeries[i]);
+        savedDataGroupIds.push(allSeries[i].get('dataGroupId'));
+        savedData.push(data);
+      }
+    }
+  });
+}
+
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{width:var(--tct-area-chart-width, 100%);height:var(--tct-area-chart-height, 100%);display:block}.container{width:100%;height:100%}.chart-container{width:100%;height:100%}";
+
+use([install$1, install, install$2, installUniversalTransition, install$3, install$4]);
+const Q2ChartArea$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.change = createEvent(this, "change", 7);
+    this.data = [];
+    this.alignChartName = undefined;
+    this.chartName = undefined;
+    this.lineColor = undefined;
+    this.pointerLineColor = undefined;
+    this.pointerLineStyle = undefined;
+    this.areaColor = undefined;
+    this.dataNamesOverflow = undefined;
+    this.dataNamesWidth = undefined;
+    this.format = undefined;
+    this.formatModifier = undefined;
+    this.hideNameAxisLabels = false;
+    this.hideValueAxisLabels = false;
+    this.offsetDataNames = false;
+    this.offsetDataValues = false;
+    this.showChartName = false;
+    this.showDatapointLabels = false;
+    this.showGradient = false;
+    this.gridLines = undefined;
+  }
+  componentDidLoad() {
+    const chart = init(this.chartContainer);
+    this.chart = chart;
+    this.resizeEventListener = () => this.resizeChart();
+    window.addEventListener('resize', this.resizeEventListener);
+    this.cacheComputedStyles();
+    this.updateChart(chart);
+    overrideFocus(this.hostElement);
+  }
+  disconnectedCallback() {
+    window.removeEventListener('resize', this.resizeEventListener);
+  }
+  cacheComputedStyles() {
+    this.chartContainerStyles = getComputedStyle(this.chartContainer);
+    this.hostElementStyles = getComputedStyle(this.hostElement);
+  }
+  getAreaFill() {
+    if (this.showGradient) {
+      return {
+        type: 'linear',
+        x: 0,
+        y: 0,
+        x2: 0,
+        y2: 1,
+        colorStops: [
+          {
+            offset: 0,
+            color: this.getColor(this.areaColor),
+          },
+          {
+            offset: 1,
+            color: 'white',
+          },
+        ],
+        global: false,
+      };
+    }
+    return this.getColor(this.areaColor);
+  }
+  getColor(color) {
+    const primaryColor = getCSSProperty('var(--t-primary)', this.chartContainerStyles, this.hostElementStyles);
+    const cssColorProp = getCSSProperty(color, this.chartContainerStyles, this.hostElementStyles);
+    if (cssColorProp)
+      return cssColorProp;
+    if (isValidColor(color))
+      return color;
+    return primaryColor;
+  }
+  updateChart(chart) {
+    var _a;
+    const decimals = ((_a = this.formatModifier) === null || _a === void 0 ? void 0 : _a.includes('dec')) ? this.formatModifier.replace('dec', '') : 0;
+    const valueAxis = {
+      type: 'value',
+      axisLabel: {
+        formatter: (value) => formatValue(value, {
+          type: this.format,
+          decimals,
+        }),
+        rotate: this.offsetDataValues ? 45 : 0,
+        margin: this.offsetDataValues ? 15 : 8,
+        show: !this.hideValueAxisLabels,
+      },
+      splitLine: {
+        show: this.gridLines === 'horizontal' || !this.gridLines,
+      },
+    };
+    const categoryAxis = {
+      type: 'category',
+      boundaryGap: false,
+      data: this.data.map(datum => loc(datum.name) || ''),
+      axisLabel: {
+        rotate: this.offsetDataNames ? 45 : 0,
+        margin: this.offsetDataNames ? 15 : 8,
+        width: this.dataNamesWidth || 50,
+        overflow: this.dataNamesOverflow || 'none',
+        truncate: 'ellipsis',
+        show: !this.hideNameAxisLabels,
+      },
+      axisLine: {
+        show: !this.hideNameAxisLabels,
+      },
+      axisTick: {
+        show: !this.hideNameAxisLabels,
+      },
+      axisPointer: {
+        show: true,
+        type: 'line',
+        label: {
+          show: false,
+          formatter: (params) => {
+            const dataIndex = params.seriesData[0].dataIndex;
+            this.change.emit({
+              index: dataIndex,
+              data: this.data[dataIndex],
+            });
+          },
+        },
+        lineStyle: {
+          color: this.getColor(this.pointerLineColor || 'var(--t-gray-10)'),
+          type: this.pointerLineStyle || 'solid',
+          width: 1.5,
+        },
+        z: 1,
+      },
+      splitLine: {
+        show: this.gridLines === 'vertical',
+      },
+    };
+    return chart.setOption({
+      aria: {
+        enabled: true,
+      },
+      title: {
+        text: this.chartName,
+        show: this.showChartName,
+        left: this.alignChartName,
+      },
+      grid: {
+        containLabel: true,
+      },
+      xAxis: categoryAxis,
+      yAxis: valueAxis,
+      series: [
+        {
+          data: this.data.map(datum => datum.value || 0),
+          id: 'area',
+          type: 'line',
+          lineStyle: {
+            color: this.getColor(this.lineColor),
+          },
+          itemStyle: {
+            color: this.getColor(this.lineColor),
+          },
+          areaStyle: {
+            color: this.getAreaFill(),
+          },
+          symbolSize: 10,
+          showSymbol: false,
+          label: {
+            show: this.showDatapointLabels,
+            position: 'right',
+            formatter: (params) => {
+              return formatValue(params.value, {
+                type: this.format,
+                decimals,
+              });
+            },
+          },
+        },
+      ],
+    });
+  }
+  resizeChart() {
+    this.chart.resize();
+  }
+  propsUpdates() {
+    this.updateChart(this.chart);
+  }
+  render() {
+    return (h("div", { class: "container" }, h("div", { ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "areaChartContainer" })));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "data": ["propsUpdates"],
+    "alignChartName": ["propsUpdates"],
+    "chartName": ["propsUpdates"],
+    "lineColor": ["propsUpdates"],
+    "pointerLineColor": ["propsUpdates"],
+    "pointerLineStyle": ["propsUpdates"],
+    "areaColor": ["propsUpdates"],
+    "dataNamesOverflow": ["propsUpdates"],
+    "dataNamesWidth": ["propsUpdates"],
+    "format": ["propsUpdates"],
+    "formatModifier": ["propsUpdates"],
+    "hideNameAxisLabels": ["propsUpdates"],
+    "hideValueAxisLabels": ["propsUpdates"],
+    "offsetDataNames": ["propsUpdates"],
+    "offsetDataValues": ["propsUpdates"],
+    "showChartName": ["propsUpdates"],
+    "showDatapointLabels": ["propsUpdates"],
+    "showGradient": ["propsUpdates"],
+    "gridLines": ["propsUpdates"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "q2-chart-area", {
+    "data": [16],
+    "alignChartName": [513, "align-chart-name"],
+    "chartName": [513, "chart-name"],
+    "lineColor": [513, "line-color"],
+    "pointerLineColor": [513, "pointer-line-color"],
+    "pointerLineStyle": [513, "pointer-line-style"],
+    "areaColor": [513, "area-color"],
+    "dataNamesOverflow": [513, "data-names-overflow"],
+    "dataNamesWidth": [514, "data-names-width"],
+    "format": [513],
+    "formatModifier": [513, "format-modifier"],
+    "hideNameAxisLabels": [516, "hide-name-axis-labels"],
+    "hideValueAxisLabels": [516, "hide-value-axis-labels"],
+    "offsetDataNames": [516, "offset-data-names"],
+    "offsetDataValues": [516, "offset-data-values"],
+    "showChartName": [516, "show-chart-name"],
+    "showDatapointLabels": [516, "show-datapoint-labels"],
+    "showGradient": [516, "show-gradient"],
+    "gridLines": [513, "grid-lines"]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-chart-area"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-chart-area":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2ChartArea$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const Q2ChartArea = Q2ChartArea$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2ChartArea, defineCustomElement };