first commit

node_modules/zrender/lib/graphic/CompoundPath.js

@@ -0,0 +1,56 @@
+var Path = require("./Path");
+
+// CompoundPath to improve performance
+var _default = Path.extend({
+  type: 'compound',
+  shape: {
+    paths: null
+  },
+  _updatePathDirty: function () {
+    var dirtyPath = this.__dirtyPath;
+    var paths = this.shape.paths;
+
+    for (var i = 0; i < paths.length; i++) {
+      // Mark as dirty if any subpath is dirty
+      dirtyPath = dirtyPath || paths[i].__dirtyPath;
+    }
+
+    this.__dirtyPath = dirtyPath;
+    this.__dirty = this.__dirty || dirtyPath;
+  },
+  beforeBrush: function () {
+    this._updatePathDirty();
+
+    var paths = this.shape.paths || [];
+    var scale = this.getGlobalScale(); // Update path scale
+
+    for (var i = 0; i < paths.length; i++) {
+      if (!paths[i].path) {
+        paths[i].createPathProxy();
+      }
+
+      paths[i].path.setScale(scale[0], scale[1], paths[i].segmentIgnoreThreshold);
+    }
+  },
+  buildPath: function (ctx, shape) {
+    var paths = shape.paths || [];
+
+    for (var i = 0; i < paths.length; i++) {
+      paths[i].buildPath(ctx, paths[i].shape, true);
+    }
+  },
+  afterBrush: function () {
+    var paths = this.shape.paths || [];
+
+    for (var i = 0; i < paths.length; i++) {
+      paths[i].__dirtyPath = false;
+    }
+  },
+  getBoundingRect: function () {
+    this._updatePathDirty();
+
+    return Path.prototype.getBoundingRect.call(this);
+  }
+});
+
+module.exports = _default;

node_modules/zrender/lib/graphic/Displayable.js

@@ -0,0 +1,277 @@
+var zrUtil = require("../core/util");
+
+var Style = require("./Style");
+
+var Element = require("../Element");
+
+var RectText = require("./mixin/RectText");
+
+/**
+ * Base class of all displayable graphic objects
+ * @module zrender/graphic/Displayable
+ */
+
+/**
+ * @alias module:zrender/graphic/Displayable
+ * @extends module:zrender/Element
+ * @extends module:zrender/graphic/mixin/RectText
+ */
+function Displayable(opts) {
+  opts = opts || {};
+  Element.call(this, opts); // Extend properties
+
+  for (var name in opts) {
+    if (opts.hasOwnProperty(name) && name !== 'style') {
+      this[name] = opts[name];
+    }
+  }
+  /**
+   * @type {module:zrender/graphic/Style}
+   */
+
+
+  this.style = new Style(opts.style, this);
+  this._rect = null; // Shapes for cascade clipping.
+  // Can only be `null`/`undefined` or an non-empty array, MUST NOT be an empty array.
+  // because it is easy to only using null to check whether clipPaths changed.
+
+  this.__clipPaths = null; // FIXME Stateful must be mixined after style is setted
+  // Stateful.call(this, opts);
+}
+
+Displayable.prototype = {
+  constructor: Displayable,
+  type: 'displayable',
+
+  /**
+   * Dirty flag. From which painter will determine if this displayable object needs brush.
+   * @name module:zrender/graphic/Displayable#__dirty
+   * @type {boolean}
+   */
+  __dirty: true,
+
+  /**
+   * Whether the displayable object is visible. when it is true, the displayable object
+   * is not drawn, but the mouse event can still trigger the object.
+   * @name module:/zrender/graphic/Displayable#invisible
+   * @type {boolean}
+   * @default false
+   */
+  invisible: false,
+
+  /**
+   * @name module:/zrender/graphic/Displayable#z
+   * @type {number}
+   * @default 0
+   */
+  z: 0,
+
+  /**
+   * @name module:/zrender/graphic/Displayable#z
+   * @type {number}
+   * @default 0
+   */
+  z2: 0,
+
+  /**
+   * The z level determines the displayable object can be drawn in which layer canvas.
+   * @name module:/zrender/graphic/Displayable#zlevel
+   * @type {number}
+   * @default 0
+   */
+  zlevel: 0,
+
+  /**
+   * Whether it can be dragged.
+   * @name module:/zrender/graphic/Displayable#draggable
+   * @type {boolean}
+   * @default false
+   */
+  draggable: false,
+
+  /**
+   * Whether is it dragging.
+   * @name module:/zrender/graphic/Displayable#draggable
+   * @type {boolean}
+   * @default false
+   */
+  dragging: false,
+
+  /**
+   * Whether to respond to mouse events.
+   * @name module:/zrender/graphic/Displayable#silent
+   * @type {boolean}
+   * @default false
+   */
+  silent: false,
+
+  /**
+   * If enable culling
+   * @type {boolean}
+   * @default false
+   */
+  culling: false,
+
+  /**
+   * Mouse cursor when hovered
+   * @name module:/zrender/graphic/Displayable#cursor
+   * @type {string}
+   */
+  cursor: 'pointer',
+
+  /**
+   * If hover area is bounding rect
+   * @name module:/zrender/graphic/Displayable#rectHover
+   * @type {string}
+   */
+  rectHover: false,
+
+  /**
+   * Render the element progressively when the value >= 0,
+   * usefull for large data.
+   * @type {boolean}
+   */
+  progressive: false,
+
+  /**
+   * @type {boolean}
+   */
+  incremental: false,
+
+  /**
+   * Scale ratio for global scale.
+   * @type {boolean}
+   */
+  globalScaleRatio: 1,
+  beforeBrush: function (ctx) {},
+  afterBrush: function (ctx) {},
+
+  /**
+   * Graphic drawing method.
+   * @param {CanvasRenderingContext2D} ctx
+   */
+  // Interface
+  brush: function (ctx, prevEl) {},
+
+  /**
+   * Get the minimum bounding box.
+   * @return {module:zrender/core/BoundingRect}
+   */
+  // Interface
+  getBoundingRect: function () {},
+
+  /**
+   * If displayable element contain coord x, y
+   * @param  {number} x
+   * @param  {number} y
+   * @return {boolean}
+   */
+  contain: function (x, y) {
+    return this.rectContain(x, y);
+  },
+
+  /**
+   * @param  {Function} cb
+   * @param  {}   context
+   */
+  traverse: function (cb, context) {
+    cb.call(context, this);
+  },
+
+  /**
+   * If bounding rect of element contain coord x, y
+   * @param  {number} x
+   * @param  {number} y
+   * @return {boolean}
+   */
+  rectContain: function (x, y) {
+    var coord = this.transformCoordToLocal(x, y);
+    var rect = this.getBoundingRect();
+    return rect.contain(coord[0], coord[1]);
+  },
+
+  /**
+   * Mark displayable element dirty and refresh next frame
+   */
+  dirty: function () {
+    this.__dirty = this.__dirtyText = true;
+    this._rect = null;
+    this.__zr && this.__zr.refresh();
+  },
+
+  /**
+   * If displayable object binded any event
+   * @return {boolean}
+   */
+  // TODO, events bound by bind
+  // isSilent: function () {
+  //     return !(
+  //         this.hoverable || this.draggable
+  //         || this.onmousemove || this.onmouseover || this.onmouseout
+  //         || this.onmousedown || this.onmouseup || this.onclick
+  //         || this.ondragenter || this.ondragover || this.ondragleave
+  //         || this.ondrop
+  //     );
+  // },
+
+  /**
+   * Alias for animate('style')
+   * @param {boolean} loop
+   */
+  animateStyle: function (loop) {
+    return this.animate('style', loop);
+  },
+  attrKV: function (key, value) {
+    if (key !== 'style') {
+      Element.prototype.attrKV.call(this, key, value);
+    } else {
+      this.style.set(value);
+    }
+  },
+
+  /**
+   * @param {Object|string} key
+   * @param {*} value
+   */
+  setStyle: function (key, value) {
+    this.style.set(key, value);
+    this.dirty(false);
+    return this;
+  },
+
+  /**
+   * Use given style object
+   * @param  {Object} obj
+   */
+  useStyle: function (obj) {
+    this.style = new Style(obj, this);
+    this.dirty(false);
+    return this;
+  },
+
+  /**
+   * The string value of `textPosition` needs to be calculated to a real postion.
+   * For example, `'inside'` is calculated to `[rect.width/2, rect.height/2]`
+   * by default. See `contain/text.js#calculateTextPosition` for more details.
+   * But some coutom shapes like "pin", "flag" have center that is not exactly
+   * `[width/2, height/2]`. So we provide this hook to customize the calculation
+   * for those shapes. It will be called if the `style.textPosition` is a string.
+   * @param {Obejct} [out] Prepared out object. If not provided, this method should
+   *        be responsible for creating one.
+   * @param {module:zrender/graphic/Style} style
+   * @param {Object} rect {x, y, width, height}
+   * @return {Obejct} out The same as the input out.
+   *         {
+   *             x: number. mandatory.
+   *             y: number. mandatory.
+   *             textAlign: string. optional. use style.textAlign by default.
+   *             textVerticalAlign: string. optional. use style.textVerticalAlign by default.
+   *         }
+   */
+  calculateTextPosition: null
+};
+zrUtil.inherits(Displayable, Element);
+zrUtil.mixin(Displayable, RectText); // zrUtil.mixin(Displayable, Stateful);
+
+var _default = Displayable;
+module.exports = _default;

node_modules/zrender/lib/graphic/Gradient.js

@@ -0,0 +1,18 @@
+/**
+ * @param {Array.<Object>} colorStops
+ */
+var Gradient = function (colorStops) {
+  this.colorStops = colorStops || [];
+};
+
+Gradient.prototype = {
+  constructor: Gradient,
+  addColorStop: function (offset, color) {
+    this.colorStops.push({
+      offset: offset,
+      color: color
+    });
+  }
+};
+var _default = Gradient;
+module.exports = _default;

node_modules/zrender/lib/graphic/Image.js

@@ -0,0 +1,92 @@
+var Displayable = require("./Displayable");
+
+var BoundingRect = require("../core/BoundingRect");
+
+var zrUtil = require("../core/util");
+
+var imageHelper = require("./helper/image");
+
+/**
+ * @alias zrender/graphic/Image
+ * @extends module:zrender/graphic/Displayable
+ * @constructor
+ * @param {Object} opts
+ */
+function ZImage(opts) {
+  Displayable.call(this, opts);
+}
+
+ZImage.prototype = {
+  constructor: ZImage,
+  type: 'image',
+  brush: function (ctx, prevEl) {
+    var style = this.style;
+    var src = style.image; // Must bind each time
+
+    style.bind(ctx, this, prevEl);
+    var image = this._image = imageHelper.createOrUpdateImage(src, this._image, this, this.onload);
+
+    if (!image || !imageHelper.isImageReady(image)) {
+      return;
+    } // 图片已经加载完成
+    // if (image.nodeName.toUpperCase() == 'IMG') {
+    //     if (!image.complete) {
+    //         return;
+    //     }
+    // }
+    // Else is canvas
+
+
+    var x = style.x || 0;
+    var y = style.y || 0;
+    var width = style.width;
+    var height = style.height;
+    var aspect = image.width / image.height;
+
+    if (width == null && height != null) {
+      // Keep image/height ratio
+      width = height * aspect;
+    } else if (height == null && width != null) {
+      height = width / aspect;
+    } else if (width == null && height == null) {
+      width = image.width;
+      height = image.height;
+    } // 设置transform
+
+
+    this.setTransform(ctx);
+
+    if (style.sWidth && style.sHeight) {
+      var sx = style.sx || 0;
+      var sy = style.sy || 0;
+      ctx.drawImage(image, sx, sy, style.sWidth, style.sHeight, x, y, width, height);
+    } else if (style.sx && style.sy) {
+      var sx = style.sx;
+      var sy = style.sy;
+      var sWidth = width - sx;
+      var sHeight = height - sy;
+      ctx.drawImage(image, sx, sy, sWidth, sHeight, x, y, width, height);
+    } else {
+      ctx.drawImage(image, x, y, width, height);
+    } // Draw rect text
+
+
+    if (style.text != null) {
+      // Only restore transform when needs draw text.
+      this.restoreTransform(ctx);
+      this.drawRectText(ctx, this.getBoundingRect());
+    }
+  },
+  getBoundingRect: function () {
+    var style = this.style;
+
+    if (!this._rect) {
+      this._rect = new BoundingRect(style.x || 0, style.y || 0, style.width || 0, style.height || 0);
+    }
+
+    return this._rect;
+  }
+};
+zrUtil.inherits(ZImage, Displayable);
+var _default = ZImage;
+module.exports = _default;

node_modules/zrender/lib/graphic/IncrementalDisplayable.js

@@ -0,0 +1,147 @@
+var _util = require("../core/util");
+
+var inherits = _util.inherits;
+
+var Displayble = require("./Displayable");
+
+var BoundingRect = require("../core/BoundingRect");
+
+/**
+ * Displayable for incremental rendering. It will be rendered in a separate layer
+ * IncrementalDisplay have two main methods. `clearDisplayables` and `addDisplayables`
+ * addDisplayables will render the added displayables incremetally.
+ *
+ * It use a not clearFlag to tell the painter don't clear the layer if it's the first element.
+ */
+// TODO Style override ?
+function IncrementalDisplayble(opts) {
+  Displayble.call(this, opts);
+  this._displayables = [];
+  this._temporaryDisplayables = [];
+  this._cursor = 0;
+  this.notClear = true;
+}
+
+IncrementalDisplayble.prototype.incremental = true;
+
+IncrementalDisplayble.prototype.clearDisplaybles = function () {
+  this._displayables = [];
+  this._temporaryDisplayables = [];
+  this._cursor = 0;
+  this.dirty();
+  this.notClear = false;
+};
+
+IncrementalDisplayble.prototype.addDisplayable = function (displayable, notPersistent) {
+  if (notPersistent) {
+    this._temporaryDisplayables.push(displayable);
+  } else {
+    this._displayables.push(displayable);
+  }
+
+  this.dirty();
+};
+
+IncrementalDisplayble.prototype.addDisplayables = function (displayables, notPersistent) {
+  notPersistent = notPersistent || false;
+
+  for (var i = 0; i < displayables.length; i++) {
+    this.addDisplayable(displayables[i], notPersistent);
+  }
+};
+
+IncrementalDisplayble.prototype.eachPendingDisplayable = function (cb) {
+  for (var i = this._cursor; i < this._displayables.length; i++) {
+    cb && cb(this._displayables[i]);
+  }
+
+  for (var i = 0; i < this._temporaryDisplayables.length; i++) {
+    cb && cb(this._temporaryDisplayables[i]);
+  }
+};
+
+IncrementalDisplayble.prototype.update = function () {
+  this.updateTransform();
+
+  for (var i = this._cursor; i < this._displayables.length; i++) {
+    var displayable = this._displayables[i]; // PENDING
+
+    displayable.parent = this;
+    displayable.update();
+    displayable.parent = null;
+  }
+
+  for (var i = 0; i < this._temporaryDisplayables.length; i++) {
+    var displayable = this._temporaryDisplayables[i]; // PENDING
+
+    displayable.parent = this;
+    displayable.update();
+    displayable.parent = null;
+  }
+};
+
+IncrementalDisplayble.prototype.brush = function (ctx, prevEl) {
+  // Render persistant displayables.
+  for (var i = this._cursor; i < this._displayables.length; i++) {
+    var displayable = this._displayables[i];
+    displayable.beforeBrush && displayable.beforeBrush(ctx);
+    displayable.brush(ctx, i === this._cursor ? null : this._displayables[i - 1]);
+    displayable.afterBrush && displayable.afterBrush(ctx);
+  }
+
+  this._cursor = i; // Render temporary displayables.
+
+  for (var i = 0; i < this._temporaryDisplayables.length; i++) {
+    var displayable = this._temporaryDisplayables[i];
+    displayable.beforeBrush && displayable.beforeBrush(ctx);
+    displayable.brush(ctx, i === 0 ? null : this._temporaryDisplayables[i - 1]);
+    displayable.afterBrush && displayable.afterBrush(ctx);
+  }
+
+  this._temporaryDisplayables = [];
+  this.notClear = true;
+};
+
+var m = [];
+
+IncrementalDisplayble.prototype.getBoundingRect = function () {
+  if (!this._rect) {
+    var rect = new BoundingRect(Infinity, Infinity, -Infinity, -Infinity);
+
+    for (var i = 0; i < this._displayables.length; i++) {
+      var displayable = this._displayables[i];
+      var childRect = displayable.getBoundingRect().clone();
+
+      if (displayable.needLocalTransform()) {
+        childRect.applyTransform(displayable.getLocalTransform(m));
+      }
+
+      rect.union(childRect);
+    }
+
+    this._rect = rect;
+  }
+
+  return this._rect;
+};
+
+IncrementalDisplayble.prototype.contain = function (x, y) {
+  var localPos = this.transformCoordToLocal(x, y);
+  var rect = this.getBoundingRect();
+
+  if (rect.contain(localPos[0], localPos[1])) {
+    for (var i = 0; i < this._displayables.length; i++) {
+      var displayable = this._displayables[i];
+
+      if (displayable.contain(x, y)) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+};
+
+inherits(IncrementalDisplayble, Displayble);
+var _default = IncrementalDisplayble;
+module.exports = _default;

node_modules/zrender/lib/graphic/LinearGradient.js

@@ -0,0 +1,34 @@
+var zrUtil = require("../core/util");
+
+var Gradient = require("./Gradient");
+
+/**
+ * x, y, x2, y2 are all percent from 0 to 1
+ * @param {number} [x=0]
+ * @param {number} [y=0]
+ * @param {number} [x2=1]
+ * @param {number} [y2=0]
+ * @param {Array.<Object>} colorStops
+ * @param {boolean} [globalCoord=false]
+ */
+var LinearGradient = function (x, y, x2, y2, colorStops, globalCoord) {
+  // Should do nothing more in this constructor. Because gradient can be
+  // declard by `color: {type: 'linear', colorStops: ...}`, where
+  // this constructor will not be called.
+  this.x = x == null ? 0 : x;
+  this.y = y == null ? 0 : y;
+  this.x2 = x2 == null ? 1 : x2;
+  this.y2 = y2 == null ? 0 : y2; // Can be cloned
+
+  this.type = 'linear'; // If use global coord
+
+  this.global = globalCoord || false;
+  Gradient.call(this, colorStops);
+};
+
+LinearGradient.prototype = {
+  constructor: LinearGradient
+};
+zrUtil.inherits(LinearGradient, Gradient);
+var _default = LinearGradient;
+module.exports = _default;

node_modules/zrender/lib/graphic/Path.js

@@ -0,0 +1,378 @@
+var Displayable = require("./Displayable");
+
+var zrUtil = require("../core/util");
+
+var PathProxy = require("../core/PathProxy");
+
+var pathContain = require("../contain/path");
+
+var Pattern = require("./Pattern");
+
+var getCanvasPattern = Pattern.prototype.getCanvasPattern;
+var abs = Math.abs;
+var pathProxyForDraw = new PathProxy(true);
+/**
+ * @alias module:zrender/graphic/Path
+ * @extends module:zrender/graphic/Displayable
+ * @constructor
+ * @param {Object} opts
+ */
+
+function Path(opts) {
+  Displayable.call(this, opts);
+  /**
+   * @type {module:zrender/core/PathProxy}
+   * @readOnly
+   */
+
+  this.path = null;
+}
+
+Path.prototype = {
+  constructor: Path,
+  type: 'path',
+  __dirtyPath: true,
+  strokeContainThreshold: 5,
+  // This item default to be false. But in map series in echarts,
+  // in order to improve performance, it should be set to true,
+  // so the shorty segment won't draw.
+  segmentIgnoreThreshold: 0,
+
+  /**
+   * See `module:zrender/src/graphic/helper/subPixelOptimize`.
+   * @type {boolean}
+   */
+  subPixelOptimize: false,
+  brush: function (ctx, prevEl) {
+    var style = this.style;
+    var path = this.path || pathProxyForDraw;
+    var hasStroke = style.hasStroke();
+    var hasFill = style.hasFill();
+    var fill = style.fill;
+    var stroke = style.stroke;
+    var hasFillGradient = hasFill && !!fill.colorStops;
+    var hasStrokeGradient = hasStroke && !!stroke.colorStops;
+    var hasFillPattern = hasFill && !!fill.image;
+    var hasStrokePattern = hasStroke && !!stroke.image;
+    style.bind(ctx, this, prevEl);
+    this.setTransform(ctx);
+
+    if (this.__dirty) {
+      var rect; // Update gradient because bounding rect may changed
+
+      if (hasFillGradient) {
+        rect = rect || this.getBoundingRect();
+        this._fillGradient = style.getGradient(ctx, fill, rect);
+      }
+
+      if (hasStrokeGradient) {
+        rect = rect || this.getBoundingRect();
+        this._strokeGradient = style.getGradient(ctx, stroke, rect);
+      }
+    } // Use the gradient or pattern
+
+
+    if (hasFillGradient) {
+      // PENDING If may have affect the state
+      ctx.fillStyle = this._fillGradient;
+    } else if (hasFillPattern) {
+      ctx.fillStyle = getCanvasPattern.call(fill, ctx);
+    }
+
+    if (hasStrokeGradient) {
+      ctx.strokeStyle = this._strokeGradient;
+    } else if (hasStrokePattern) {
+      ctx.strokeStyle = getCanvasPattern.call(stroke, ctx);
+    }
+
+    var lineDash = style.lineDash;
+    var lineDashOffset = style.lineDashOffset;
+    var ctxLineDash = !!ctx.setLineDash; // Update path sx, sy
+
+    var scale = this.getGlobalScale();
+    path.setScale(scale[0], scale[1], this.segmentIgnoreThreshold); // Proxy context
+    // Rebuild path in following 2 cases
+    // 1. Path is dirty
+    // 2. Path needs javascript implemented lineDash stroking.
+    //    In this case, lineDash information will not be saved in PathProxy
+
+    if (this.__dirtyPath || lineDash && !ctxLineDash && hasStroke) {
+      path.beginPath(ctx); // Setting line dash before build path
+
+      if (lineDash && !ctxLineDash) {
+        path.setLineDash(lineDash);
+        path.setLineDashOffset(lineDashOffset);
+      }
+
+      this.buildPath(path, this.shape, false); // Clear path dirty flag
+
+      if (this.path) {
+        this.__dirtyPath = false;
+      }
+    } else {
+      // Replay path building
+      ctx.beginPath();
+      this.path.rebuildPath(ctx);
+    }
+
+    if (hasFill) {
+      if (style.fillOpacity != null) {
+        var originalGlobalAlpha = ctx.globalAlpha;
+        ctx.globalAlpha = style.fillOpacity * style.opacity;
+        path.fill(ctx);
+        ctx.globalAlpha = originalGlobalAlpha;
+      } else {
+        path.fill(ctx);
+      }
+    }
+
+    if (lineDash && ctxLineDash) {
+      ctx.setLineDash(lineDash);
+      ctx.lineDashOffset = lineDashOffset;
+    }
+
+    if (hasStroke) {
+      if (style.strokeOpacity != null) {
+        var originalGlobalAlpha = ctx.globalAlpha;
+        ctx.globalAlpha = style.strokeOpacity * style.opacity;
+        path.stroke(ctx);
+        ctx.globalAlpha = originalGlobalAlpha;
+      } else {
+        path.stroke(ctx);
+      }
+    }
+
+    if (lineDash && ctxLineDash) {
+      // PENDING
+      // Remove lineDash
+      ctx.setLineDash([]);
+    } // Draw rect text
+
+
+    if (style.text != null) {
+      // Only restore transform when needs draw text.
+      this.restoreTransform(ctx);
+      this.drawRectText(ctx, this.getBoundingRect());
+    }
+  },
+  // When bundling path, some shape may decide if use moveTo to begin a new subpath or closePath
+  // Like in circle
+  buildPath: function (ctx, shapeCfg, inBundle) {},
+  createPathProxy: function () {
+    this.path = new PathProxy();
+  },
+  getBoundingRect: function () {
+    var rect = this._rect;
+    var style = this.style;
+    var needsUpdateRect = !rect;
+
+    if (needsUpdateRect) {
+      var path = this.path;
+
+      if (!path) {
+        // Create path on demand.
+        path = this.path = new PathProxy();
+      }
+
+      if (this.__dirtyPath) {
+        path.beginPath();
+        this.buildPath(path, this.shape, false);
+      }
+
+      rect = path.getBoundingRect();
+    }
+
+    this._rect = rect;
+
+    if (style.hasStroke()) {
+      // Needs update rect with stroke lineWidth when
+      // 1. Element changes scale or lineWidth
+      // 2. Shape is changed
+      var rectWithStroke = this._rectWithStroke || (this._rectWithStroke = rect.clone());
+
+      if (this.__dirty || needsUpdateRect) {
+        rectWithStroke.copy(rect); // FIXME Must after updateTransform
+
+        var w = style.lineWidth; // PENDING, Min line width is needed when line is horizontal or vertical
+
+        var lineScale = style.strokeNoScale ? this.getLineScale() : 1; // Only add extra hover lineWidth when there are no fill
+
+        if (!style.hasFill()) {
+          w = Math.max(w, this.strokeContainThreshold || 4);
+        } // Consider line width
+        // Line scale can't be 0;
+
+
+        if (lineScale > 1e-10) {
+          rectWithStroke.width += w / lineScale;
+          rectWithStroke.height += w / lineScale;
+          rectWithStroke.x -= w / lineScale / 2;
+          rectWithStroke.y -= w / lineScale / 2;
+        }
+      } // Return rect with stroke
+
+
+      return rectWithStroke;
+    }
+
+    return rect;
+  },
+  contain: function (x, y) {
+    var localPos = this.transformCoordToLocal(x, y);
+    var rect = this.getBoundingRect();
+    var style = this.style;
+    x = localPos[0];
+    y = localPos[1];
+
+    if (rect.contain(x, y)) {
+      var pathData = this.path.data;
+
+      if (style.hasStroke()) {
+        var lineWidth = style.lineWidth;
+        var lineScale = style.strokeNoScale ? this.getLineScale() : 1; // Line scale can't be 0;
+
+        if (lineScale > 1e-10) {
+          // Only add extra hover lineWidth when there are no fill
+          if (!style.hasFill()) {
+            lineWidth = Math.max(lineWidth, this.strokeContainThreshold);
+          }
+
+          if (pathContain.containStroke(pathData, lineWidth / lineScale, x, y)) {
+            return true;
+          }
+        }
+      }
+
+      if (style.hasFill()) {
+        return pathContain.contain(pathData, x, y);
+      }
+    }
+
+    return false;
+  },
+
+  /**
+   * @param  {boolean} dirtyPath
+   */
+  dirty: function (dirtyPath) {
+    if (dirtyPath == null) {
+      dirtyPath = true;
+    } // Only mark dirty, not mark clean
+
+
+    if (dirtyPath) {
+      this.__dirtyPath = dirtyPath;
+      this._rect = null;
+    }
+
+    this.__dirty = this.__dirtyText = true;
+    this.__zr && this.__zr.refresh(); // Used as a clipping path
+
+    if (this.__clipTarget) {
+      this.__clipTarget.dirty();
+    }
+  },
+
+  /**
+   * Alias for animate('shape')
+   * @param {boolean} loop
+   */
+  animateShape: function (loop) {
+    return this.animate('shape', loop);
+  },
+  // Overwrite attrKV
+  attrKV: function (key, value) {
+    // FIXME
+    if (key === 'shape') {
+      this.setShape(value);
+      this.__dirtyPath = true;
+      this._rect = null;
+    } else {
+      Displayable.prototype.attrKV.call(this, key, value);
+    }
+  },
+
+  /**
+   * @param {Object|string} key
+   * @param {*} value
+   */
+  setShape: function (key, value) {
+    var shape = this.shape; // Path from string may not have shape
+
+    if (shape) {
+      if (zrUtil.isObject(key)) {
+        for (var name in key) {
+          if (key.hasOwnProperty(name)) {
+            shape[name] = key[name];
+          }
+        }
+      } else {
+        shape[key] = value;
+      }
+
+      this.dirty(true);
+    }
+
+    return this;
+  },
+  getLineScale: function () {
+    var m = this.transform; // Get the line scale.
+    // Determinant of `m` means how much the area is enlarged by the
+    // transformation. So its square root can be used as a scale factor
+    // for width.
+
+    return m && abs(m[0] - 1) > 1e-10 && abs(m[3] - 1) > 1e-10 ? Math.sqrt(abs(m[0] * m[3] - m[2] * m[1])) : 1;
+  }
+};
+/**
+ * 扩展一个 Path element, 比如星形，圆等。
+ * Extend a path element
+ * @param {Object} props
+ * @param {string} props.type Path type
+ * @param {Function} props.init Initialize
+ * @param {Function} props.buildPath Overwrite buildPath method
+ * @param {Object} [props.style] Extended default style config
+ * @param {Object} [props.shape] Extended default shape config
+ */
+
+Path.extend = function (defaults) {
+  var Sub = function (opts) {
+    Path.call(this, opts);
+
+    if (defaults.style) {
+      // Extend default style
+      this.style.extendFrom(defaults.style, false);
+    } // Extend default shape
+
+
+    var defaultShape = defaults.shape;
+
+    if (defaultShape) {
+      this.shape = this.shape || {};
+      var thisShape = this.shape;
+
+      for (var name in defaultShape) {
+        if (!thisShape.hasOwnProperty(name) && defaultShape.hasOwnProperty(name)) {
+          thisShape[name] = defaultShape[name];
+        }
+      }
+    }
+
+    defaults.init && defaults.init.call(this, opts);
+  };
+
+  zrUtil.inherits(Sub, Path); // FIXME 不能 extend position, rotation 等引用对象
+
+  for (var name in defaults) {
+    // Extending prototype values and methods
+    if (name !== 'style' && name !== 'shape') {
+      Sub.prototype[name] = defaults[name];
+    }
+  }
+
+  return Sub;
+};
+
+zrUtil.inherits(Path, Displayable);
+var _default = Path;
+module.exports = _default;

node_modules/zrender/lib/graphic/Pattern.js

@@ -0,0 +1,15 @@
+var Pattern = function (image, repeat) {
+  // Should do nothing more in this constructor. Because gradient can be
+  // declard by `color: {image: ...}`, where this constructor will not be called.
+  this.image = image;
+  this.repeat = repeat; // Can be cloned
+
+  this.type = 'pattern';
+};
+
+Pattern.prototype.getCanvasPattern = function (ctx) {
+  return ctx.createPattern(this.image, this.repeat || 'repeat');
+};
+
+var _default = Pattern;
+module.exports = _default;

node_modules/zrender/lib/graphic/RadialGradient.js

@@ -0,0 +1,32 @@
+var zrUtil = require("../core/util");
+
+var Gradient = require("./Gradient");
+
+/**
+ * x, y, r are all percent from 0 to 1
+ * @param {number} [x=0.5]
+ * @param {number} [y=0.5]
+ * @param {number} [r=0.5]
+ * @param {Array.<Object>} [colorStops]
+ * @param {boolean} [globalCoord=false]
+ */
+var RadialGradient = function (x, y, r, colorStops, globalCoord) {
+  // Should do nothing more in this constructor. Because gradient can be
+  // declard by `color: {type: 'radial', colorStops: ...}`, where
+  // this constructor will not be called.
+  this.x = x == null ? 0.5 : x;
+  this.y = y == null ? 0.5 : y;
+  this.r = r == null ? 0.5 : r; // Can be cloned
+
+  this.type = 'radial'; // If use global coord
+
+  this.global = globalCoord || false;
+  Gradient.call(this, colorStops);
+};
+
+RadialGradient.prototype = {
+  constructor: RadialGradient
+};
+zrUtil.inherits(RadialGradient, Gradient);
+var _default = RadialGradient;
+module.exports = _default;

node_modules/zrender/lib/graphic/States.js

@@ -0,0 +1,400 @@
+var zrUtil = require("../core/util");
+
+var Style = require("./Style");
+
+var _vector = require("../core/vector");
+
+var vec2Copy = _vector.copy;
+
+/**
+ * States machine for managing graphic states
+ */
+
+/**
+ * @typedef {Object} IGraphicState
+ * @property {number} [zlevel]
+ * @property {number} [z]
+ * @property {Array.<number>} {position}
+ * @property {Array.<number>|number} {rotation}
+ * @property {Array.<number>} {scale}
+ * @property {Object} style
+ *
+ * @property {Function} onenter
+ * @property {Function} onleave
+ * @property {Function} ontransition
+ * @property {Array.<IGraphicStateTransition|string>} transition
+ *           Transition object or a string descriptor like '* 30 0 Linear'
+ */
+var transitionProperties = ['position', 'rotation', 'scale', 'style', 'shape'];
+/**
+ * @module zrender/graphic/States~TransitionObject
+ */
+
+var TransitionObject = function (opts) {
+  if (typeof opts === 'string') {
+    this._fromStr(opts);
+  } else if (opts) {
+    opts.property && (this.property = opts.property);
+    opts.duration != null && (this.duration = opts.duration);
+    opts.easing && (this.easing = opts.easing);
+    opts.delay && (this.delay = opts.delay);
+  }
+
+  if (this.property !== '*') {
+    this.property = this.property.split(',');
+  } else {
+    this.property = transitionProperties;
+  }
+};
+
+TransitionObject.prototype = {
+  constructor: TransitionObject,
+
+  /**
+   * List of all transition properties. Splitted by comma. Must not have spaces in the string.
+   * e.g. 'position,style.color'. '*' will match all the valid properties.
+   * @type {string}
+   * @default *
+   */
+  property: '*',
+
+  /**
+   * @type {string}
+   * @default 'Linear'
+   */
+  easing: 'Linear',
+
+  /**
+   * @type {number}
+   * @default 'number'
+   */
+  duration: 500,
+
+  /**
+   * @type {number}
+   */
+  delay: 0,
+  _fromStr: function (str) {
+    var arr = str.split(/\s+/g);
+    this.property = arr[0];
+    this.duration = +arr[1];
+    this.delay = +arr[2];
+    this.easing = arr[3];
+  }
+};
+/**
+ * @alias module:zrender/graphic/States
+ */
+
+var GraphicStates = function (opts) {
+  opts = opts || {};
+  this._states = {};
+  /**
+   * Target element
+   * @type {zrender/graphic/Displayable|zrender/container/Group}
+   */
+
+  this._el = opts.el;
+  this._subStates = [];
+  this._transitionAnimators = [];
+
+  if (opts.initialState) {
+    this._initialState = opts.initialState;
+  }
+
+  var optsStates = opts.states;
+
+  if (optsStates) {
+    for (var name in optsStates) {
+      if (optsStates.hasOwnProperty(name)) {
+        var state = optsStates[name];
+
+        this._addState(name, state);
+      }
+    }
+  }
+
+  this.setState(this._initialState);
+};
+
+GraphicStates.prototype = {
+  constructor: GraphicStates,
+
+  /**
+   * All other state will be extended from initial state
+   * @type {string}
+   * @private
+   */
+  _initialState: 'normal',
+
+  /**
+   * Current state
+   * @type {string}
+   * @private
+   */
+  _currentState: '',
+  el: function () {
+    return this._el;
+  },
+  _addState: function (name, state) {
+    this._states[name] = state;
+
+    if (state.transition) {
+      state.transition = new TransitionObject(state.transition);
+    } // Extend from initial state
+
+
+    if (name !== this._initialState) {
+      this._extendFromInitial(state);
+    } else {
+      var el = this._el; // setState 的时候自带的 style 和 shape 都会被直接覆盖
+      // 所以这边先把自带的 style 和 shape 扩展到初始状态中
+
+      zrUtil.merge(state.style, el.style, false, false);
+
+      if (state.shape) {
+        zrUtil.merge(state.shape, el.shape, false, true);
+      } else {
+        state.shape = zrUtil.clone(el.shape, true);
+      }
+
+      for (var name in this._states) {
+        if (this._states.hasOwnProperty(name)) {
+          this._extendFromInitial(this._states[name]);
+        }
+      }
+    }
+  },
+  _extendFromInitial: function (state) {
+    var initialState = this._states[this._initialState];
+
+    if (initialState && state !== initialState) {
+      zrUtil.merge(state, initialState, false, true);
+    }
+  },
+  setState: function (name, silent) {
+    if (name === this._currentState && !this.transiting()) {
+      return;
+    }
+
+    var state = this._states[name];
+
+    if (state) {
+      this._stopTransition();
+
+      if (!silent) {
+        var prevState = this._states[this._currentState];
+
+        if (prevState) {
+          prevState.onleave && prevState.onleave.call(this);
+        }
+
+        state.onenter && state.onenter.call(this);
+      }
+
+      this._currentState = name;
+
+      if (this._el) {
+        var el = this._el; // Setting attributes
+
+        if (state.zlevel != null) {
+          el.zlevel = state.zlevel;
+        }
+
+        if (state.z != null) {
+          el.z = state.z;
+        } // SRT
+
+
+        state.position && vec2Copy(el.position, state.position);
+        state.scale && vec2Copy(el.scale, state.scale);
+
+        if (state.rotation != null) {
+          el.rotation = state.rotation;
+        } // Style
+
+
+        if (state.style) {
+          var initialState = this._states[this._initialState];
+          el.style = new Style();
+
+          if (initialState) {
+            el.style.extendFrom(initialState.style, false);
+          }
+
+          if ( // Not initial state
+          name !== this._initialState // Not copied from initial state in _extendFromInitial method
+          && initialState.style !== state.style) {
+            el.style.extendFrom(state.style, true);
+          }
+        }
+
+        if (state.shape) {
+          el.shape = zrUtil.clone(state.shape, true);
+        }
+
+        el.dirty();
+      }
+    }
+
+    for (var i = 0; i < this._subStates.length; i++) {
+      this._subStates.setState(name);
+    }
+  },
+  getState: function () {
+    return this._currentState;
+  },
+  transitionState: function (target, done) {
+    if (target === this._currentState && !this.transiting()) {
+      return;
+    }
+
+    var state = this._states[target];
+    var styleShapeReg = /$[style|shape]\./;
+    var self = this; // Animation 去重
+
+    var propPathMap = {};
+
+    if (state) {
+      self._stopTransition();
+
+      var el = self._el;
+
+      if (state.transition && el && el.__zr) {
+        // El can be animated
+        var transitionCfg = state.transition;
+        var property = transitionCfg.property;
+        var animatingCount = 0;
+
+        var animationDone = function () {
+          animatingCount--;
+
+          if (animatingCount === 0) {
+            self.setState(target);
+            done && done();
+          }
+        };
+
+        for (var i = 0; i < property.length; i++) {
+          var propName = property[i]; // Animating all the properties in style or shape
+
+          if (propName === 'style' || propName === 'shape') {
+            if (state[propName]) {
+              for (var key in state[propName]) {
+                /* eslint-disable max-depth */
+                if (!state[propName].hasOwnProperty(key)) {
+                  continue;
+                }
+
+                var path = propName + '.' + key;
+
+                if (propPathMap[path]) {
+                  continue;
+                }
+                /* eslint-enable max-depth */
+
+
+                propPathMap[path] = 1;
+                animatingCount += self._animProp(state, propName, key, transitionCfg, animationDone);
+              }
+            }
+          } else {
+            if (propPathMap[propName]) {
+              continue;
+            }
+
+            propPathMap[propName] = 1; // Animating particular property in style or style
+
+            if (propName.match(styleShapeReg)) {
+              // remove 'style.', 'shape.' prefix
+              var subProp = propName.slice(0, 5);
+              propName = propName.slice(6);
+              animatingCount += self._animProp(state, subProp, propName, transitionCfg, animationDone);
+            } else {
+              animatingCount += self._animProp(state, '', propName, transitionCfg, animationDone);
+            }
+          }
+        } // No transition properties
+
+
+        if (animatingCount === 0) {
+          self.setState(target);
+          done && done();
+        }
+      } else {
+        self.setState(target);
+        done && done();
+      }
+    }
+
+    var subStates = self._subStates;
+
+    for (var i = 0; i < subStates.length; i++) {
+      subStates.transitionState(target);
+    }
+  },
+
+  /**
+   * Do transition animation of particular property
+   * @param {Object} state
+   * @param {string} subPropKey
+   * @param {string} key
+   * @param {Object} transitionCfg
+   * @param {Function} done
+   * @private
+   */
+  _animProp: function (state, subPropKey, key, transitionCfg, done) {
+    var el = this._el;
+    var stateObj = subPropKey ? state[subPropKey] : state;
+    var elObj = subPropKey ? el[subPropKey] : el;
+    var availableProp = stateObj && key in stateObj && elObj && key in elObj;
+    var transitionAnimators = this._transitionAnimators;
+
+    if (availableProp) {
+      var obj = {};
+
+      if (stateObj[key] === elObj[key]) {
+        return 0;
+      }
+
+      obj[key] = stateObj[key];
+      var animator = el.animate(subPropKey).when(transitionCfg.duration, obj).delay(transitionCfg.dealy).done(function () {
+        var idx = zrUtil.indexOf(transitionAnimators, 1);
+
+        if (idx > 0) {
+          transitionAnimators.splice(idx, 1);
+        }
+
+        done();
+      }).start(transitionCfg.easing);
+      transitionAnimators.push(animator);
+      return 1;
+    }
+
+    return 0;
+  },
+  _stopTransition: function () {
+    var transitionAnimators = this._transitionAnimators;
+
+    for (var i = 0; i < transitionAnimators.length; i++) {
+      transitionAnimators[i].stop();
+    }
+
+    transitionAnimators.length = 0;
+  },
+  transiting: function () {
+    return this._transitionAnimators.length > 0;
+  },
+  addSubStates: function (states) {
+    this._subStates.push(states);
+  },
+  removeSubStates: function (states) {
+    var idx = zrUtil.indexOf(this._subStates, states);
+
+    if (idx >= 0) {
+      this._subStates.splice(states, 1);
+    }
+  }
+};
+var _default = GraphicStates;
+module.exports = _default;

node_modules/zrender/lib/graphic/Style.js

@@ -0,0 +1,477 @@
+var fixShadow = require("./helper/fixShadow");
+
+var _constant = require("./constant");
+
+var ContextCachedBy = _constant.ContextCachedBy;
+var STYLE_COMMON_PROPS = [['shadowBlur', 0], ['shadowOffsetX', 0], ['shadowOffsetY', 0], ['shadowColor', '#000'], ['lineCap', 'butt'], ['lineJoin', 'miter'], ['miterLimit', 10]]; // var SHADOW_PROPS = STYLE_COMMON_PROPS.slice(0, 4);
+// var LINE_PROPS = STYLE_COMMON_PROPS.slice(4);
+
+var Style = function (opts) {
+  this.extendFrom(opts, false);
+};
+
+function createLinearGradient(ctx, obj, rect) {
+  var x = obj.x == null ? 0 : obj.x;
+  var x2 = obj.x2 == null ? 1 : obj.x2;
+  var y = obj.y == null ? 0 : obj.y;
+  var y2 = obj.y2 == null ? 0 : obj.y2;
+
+  if (!obj.global) {
+    x = x * rect.width + rect.x;
+    x2 = x2 * rect.width + rect.x;
+    y = y * rect.height + rect.y;
+    y2 = y2 * rect.height + rect.y;
+  } // Fix NaN when rect is Infinity
+
+
+  x = isNaN(x) ? 0 : x;
+  x2 = isNaN(x2) ? 1 : x2;
+  y = isNaN(y) ? 0 : y;
+  y2 = isNaN(y2) ? 0 : y2;
+  var canvasGradient = ctx.createLinearGradient(x, y, x2, y2);
+  return canvasGradient;
+}
+
+function createRadialGradient(ctx, obj, rect) {
+  var width = rect.width;
+  var height = rect.height;
+  var min = Math.min(width, height);
+  var x = obj.x == null ? 0.5 : obj.x;
+  var y = obj.y == null ? 0.5 : obj.y;
+  var r = obj.r == null ? 0.5 : obj.r;
+
+  if (!obj.global) {
+    x = x * width + rect.x;
+    y = y * height + rect.y;
+    r = r * min;
+  }
+
+  var canvasGradient = ctx.createRadialGradient(x, y, 0, x, y, r);
+  return canvasGradient;
+}
+
+Style.prototype = {
+  constructor: Style,
+
+  /**
+   * @type {string}
+   */
+  fill: '#000',
+
+  /**
+   * @type {string}
+   */
+  stroke: null,
+
+  /**
+   * @type {number}
+   */
+  opacity: 1,
+
+  /**
+   * @type {number}
+   */
+  fillOpacity: null,
+
+  /**
+   * @type {number}
+   */
+  strokeOpacity: null,
+
+  /**
+   * `true` is not supported.
+   * `false`/`null`/`undefined` are the same.
+   * `false` is used to remove lineDash in some
+   * case that `null`/`undefined` can not be set.
+   * (e.g., emphasis.lineStyle in echarts)
+   * @type {Array.<number>|boolean}
+   */
+  lineDash: null,
+
+  /**
+   * @type {number}
+   */
+  lineDashOffset: 0,
+
+  /**
+   * @type {number}
+   */
+  shadowBlur: 0,
+
+  /**
+   * @type {number}
+   */
+  shadowOffsetX: 0,
+
+  /**
+   * @type {number}
+   */
+  shadowOffsetY: 0,
+
+  /**
+   * @type {number}
+   */
+  lineWidth: 1,
+
+  /**
+   * If stroke ignore scale
+   * @type {Boolean}
+   */
+  strokeNoScale: false,
+  // Bounding rect text configuration
+  // Not affected by element transform
+
+  /**
+   * @type {string}
+   */
+  text: null,
+
+  /**
+   * If `fontSize` or `fontFamily` exists, `font` will be reset by
+   * `fontSize`, `fontStyle`, `fontWeight`, `fontFamily`.
+   * So do not visit it directly in upper application (like echarts),
+   * but use `contain/text#makeFont` instead.
+   * @type {string}
+   */
+  font: null,
+
+  /**
+   * The same as font. Use font please.
+   * @deprecated
+   * @type {string}
+   */
+  textFont: null,
+
+  /**
+   * It helps merging respectively, rather than parsing an entire font string.
+   * @type {string}
+   */
+  fontStyle: null,
+
+  /**
+   * It helps merging respectively, rather than parsing an entire font string.
+   * @type {string}
+   */
+  fontWeight: null,
+
+  /**
+   * It helps merging respectively, rather than parsing an entire font string.
+   * Should be 12 but not '12px'.
+   * @type {number}
+   */
+  fontSize: null,
+
+  /**
+   * It helps merging respectively, rather than parsing an entire font string.
+   * @type {string}
+   */
+  fontFamily: null,
+
+  /**
+   * Reserved for special functinality, like 'hr'.
+   * @type {string}
+   */
+  textTag: null,
+
+  /**
+   * @type {string}
+   */
+  textFill: '#000',
+
+  /**
+   * @type {string}
+   */
+  textStroke: null,
+
+  /**
+   * @type {number}
+   */
+  textWidth: null,
+
+  /**
+   * Only for textBackground.
+   * @type {number}
+   */
+  textHeight: null,
+
+  /**
+   * textStroke may be set as some color as a default
+   * value in upper applicaion, where the default value
+   * of textStrokeWidth should be 0 to make sure that
+   * user can choose to do not use text stroke.
+   * @type {number}
+   */
+  textStrokeWidth: 0,
+
+  /**
+   * @type {number}
+   */
+  textLineHeight: null,
+
+  /**
+   * 'inside', 'left', 'right', 'top', 'bottom'
+   * [x, y]
+   * Based on x, y of rect.
+   * @type {string|Array.<number>}
+   * @default 'inside'
+   */
+  textPosition: 'inside',
+
+  /**
+   * If not specified, use the boundingRect of a `displayable`.
+   * @type {Object}
+   */
+  textRect: null,
+
+  /**
+   * [x, y]
+   * @type {Array.<number>}
+   */
+  textOffset: null,
+
+  /**
+   * @type {string}
+   */
+  textAlign: null,
+
+  /**
+   * @type {string}
+   */
+  textVerticalAlign: null,
+
+  /**
+   * @type {number}
+   */
+  textDistance: 5,
+
+  /**
+   * @type {string}
+   */
+  textShadowColor: 'transparent',
+
+  /**
+   * @type {number}
+   */
+  textShadowBlur: 0,
+
+  /**
+   * @type {number}
+   */
+  textShadowOffsetX: 0,
+
+  /**
+   * @type {number}
+   */
+  textShadowOffsetY: 0,
+
+  /**
+   * @type {string}
+   */
+  textBoxShadowColor: 'transparent',
+
+  /**
+   * @type {number}
+   */
+  textBoxShadowBlur: 0,
+
+  /**
+   * @type {number}
+   */
+  textBoxShadowOffsetX: 0,
+
+  /**
+   * @type {number}
+   */
+  textBoxShadowOffsetY: 0,
+
+  /**
+   * Whether transform text.
+   * Only available in Path and Image element,
+   * where the text is called as `RectText`.
+   * @type {boolean}
+   */
+  transformText: false,
+
+  /**
+   * Text rotate around position of Path or Image.
+   * The origin of the rotation can be specified by `textOrigin`.
+   * Only available in Path and Image element,
+   * where the text is called as `RectText`.
+   */
+  textRotation: 0,
+
+  /**
+   * Text origin of text rotation.
+   * Useful in the case like label rotation of circular symbol.
+   * Only available in Path and Image element, where the text is called
+   * as `RectText` and the element is called as "host element".
+   * The value can be:
+   * + If specified as a coordinate like `[10, 40]`, it is the `[x, y]`
+   * base on the left-top corner of the rect of its host element.
+   * + If specified as a string `center`, it is the center of the rect of
+   * its host element.
+   * + By default, this origin is the `textPosition`.
+   * @type {string|Array.<number>}
+   */
+  textOrigin: null,
+
+  /**
+   * @type {string}
+   */
+  textBackgroundColor: null,
+
+  /**
+   * @type {string}
+   */
+  textBorderColor: null,
+
+  /**
+   * @type {number}
+   */
+  textBorderWidth: 0,
+
+  /**
+   * @type {number}
+   */
+  textBorderRadius: 0,
+
+  /**
+   * Can be `2` or `[2, 4]` or `[2, 3, 4, 5]`
+   * @type {number|Array.<number>}
+   */
+  textPadding: null,
+
+  /**
+   * Text styles for rich text.
+   * @type {Object}
+   */
+  rich: null,
+
+  /**
+   * {outerWidth, outerHeight, ellipsis, placeholder}
+   * @type {Object}
+   */
+  truncate: null,
+
+  /**
+   * https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation
+   * @type {string}
+   */
+  blend: null,
+
+  /**
+   * @param {CanvasRenderingContext2D} ctx
+   */
+  bind: function (ctx, el, prevEl) {
+    var style = this;
+    var prevStyle = prevEl && prevEl.style; // If no prevStyle, it means first draw.
+    // Only apply cache if the last time cachced by this function.
+
+    var notCheckCache = !prevStyle || ctx.__attrCachedBy !== ContextCachedBy.STYLE_BIND;
+    ctx.__attrCachedBy = ContextCachedBy.STYLE_BIND;
+
+    for (var i = 0; i < STYLE_COMMON_PROPS.length; i++) {
+      var prop = STYLE_COMMON_PROPS[i];
+      var styleName = prop[0];
+
+      if (notCheckCache || style[styleName] !== prevStyle[styleName]) {
+        // FIXME Invalid property value will cause style leak from previous element.
+        ctx[styleName] = fixShadow(ctx, styleName, style[styleName] || prop[1]);
+      }
+    }
+
+    if (notCheckCache || style.fill !== prevStyle.fill) {
+      ctx.fillStyle = style.fill;
+    }
+
+    if (notCheckCache || style.stroke !== prevStyle.stroke) {
+      ctx.strokeStyle = style.stroke;
+    }
+
+    if (notCheckCache || style.opacity !== prevStyle.opacity) {
+      ctx.globalAlpha = style.opacity == null ? 1 : style.opacity;
+    }
+
+    if (notCheckCache || style.blend !== prevStyle.blend) {
+      ctx.globalCompositeOperation = style.blend || 'source-over';
+    }
+
+    if (this.hasStroke()) {
+      var lineWidth = style.lineWidth;
+      ctx.lineWidth = lineWidth / (this.strokeNoScale && el && el.getLineScale ? el.getLineScale() : 1);
+    }
+  },
+  hasFill: function () {
+    var fill = this.fill;
+    return fill != null && fill !== 'none';
+  },
+  hasStroke: function () {
+    var stroke = this.stroke;
+    return stroke != null && stroke !== 'none' && this.lineWidth > 0;
+  },
+
+  /**
+   * Extend from other style
+   * @param {zrender/graphic/Style} otherStyle
+   * @param {boolean} overwrite true: overwrirte any way.
+   *                            false: overwrite only when !target.hasOwnProperty
+   *                            others: overwrite when property is not null/undefined.
+   */
+  extendFrom: function (otherStyle, overwrite) {
+    if (otherStyle) {
+      for (var name in otherStyle) {
+        if (otherStyle.hasOwnProperty(name) && (overwrite === true || (overwrite === false ? !this.hasOwnProperty(name) : otherStyle[name] != null))) {
+          this[name] = otherStyle[name];
+        }
+      }
+    }
+  },
+
+  /**
+   * Batch setting style with a given object
+   * @param {Object|string} obj
+   * @param {*} [obj]
+   */
+  set: function (obj, value) {
+    if (typeof obj === 'string') {
+      this[obj] = value;
+    } else {
+      this.extendFrom(obj, true);
+    }
+  },
+
+  /**
+   * Clone
+   * @return {zrender/graphic/Style} [description]
+   */
+  clone: function () {
+    var newStyle = new this.constructor();
+    newStyle.extendFrom(this, true);
+    return newStyle;
+  },
+  getGradient: function (ctx, obj, rect) {
+    var method = obj.type === 'radial' ? createRadialGradient : createLinearGradient;
+    var canvasGradient = method(ctx, obj, rect);
+    var colorStops = obj.colorStops;
+
+    for (var i = 0; i < colorStops.length; i++) {
+      canvasGradient.addColorStop(colorStops[i].offset, colorStops[i].color);
+    }
+
+    return canvasGradient;
+  }
+};
+var styleProto = Style.prototype;
+
+for (var i = 0; i < STYLE_COMMON_PROPS.length; i++) {
+  var prop = STYLE_COMMON_PROPS[i];
+
+  if (!(prop[0] in styleProto)) {
+    styleProto[prop[0]] = prop[1];
+  }
+} // Provide for others
+
+
+Style.getGradient = styleProto.getGradient;
+var _default = Style;
+module.exports = _default;

node_modules/zrender/lib/graphic/Text.js

@@ -0,0 +1,79 @@
+var Displayable = require("./Displayable");
+
+var zrUtil = require("../core/util");
+
+var textContain = require("../contain/text");
+
+var textHelper = require("./helper/text");
+
+var _constant = require("./constant");
+
+var ContextCachedBy = _constant.ContextCachedBy;
+
+/**
+ * @alias zrender/graphic/Text
+ * @extends module:zrender/graphic/Displayable
+ * @constructor
+ * @param {Object} opts
+ */
+var Text = function (opts) {
+  // jshint ignore:line
+  Displayable.call(this, opts);
+};
+
+Text.prototype = {
+  constructor: Text,
+  type: 'text',
+  brush: function (ctx, prevEl) {
+    var style = this.style; // Optimize, avoid normalize every time.
+
+    this.__dirty && textHelper.normalizeTextStyle(style, true); // Use props with prefix 'text'.
+
+    style.fill = style.stroke = style.shadowBlur = style.shadowColor = style.shadowOffsetX = style.shadowOffsetY = null;
+    var text = style.text; // Convert to string
+
+    text != null && (text += ''); // Do not apply style.bind in Text node. Because the real bind job
+    // is in textHelper.renderText, and performance of text render should
+    // be considered.
+    // style.bind(ctx, this, prevEl);
+
+    if (!textHelper.needDrawText(text, style)) {
+      // The current el.style is not applied
+      // and should not be used as cache.
+      ctx.__attrCachedBy = ContextCachedBy.NONE;
+      return;
+    }
+
+    this.setTransform(ctx);
+    textHelper.renderText(this, ctx, text, style, null, prevEl);
+    this.restoreTransform(ctx);
+  },
+  getBoundingRect: function () {
+    var style = this.style; // Optimize, avoid normalize every time.
+
+    this.__dirty && textHelper.normalizeTextStyle(style, true);
+
+    if (!this._rect) {
+      var text = style.text;
+      text != null ? text += '' : text = '';
+      var rect = textContain.getBoundingRect(style.text + '', style.font, style.textAlign, style.textVerticalAlign, style.textPadding, style.textLineHeight, style.rich);
+      rect.x += style.x || 0;
+      rect.y += style.y || 0;
+
+      if (textHelper.getStroke(style.textStroke, style.textStrokeWidth)) {
+        var w = style.textStrokeWidth;
+        rect.x -= w / 2;
+        rect.y -= w / 2;
+        rect.width += w;
+        rect.height += w;
+      }
+
+      this._rect = rect;
+    }
+
+    return this._rect;
+  }
+};
+zrUtil.inherits(Text, Displayable);
+var _default = Text;
+module.exports = _default;

node_modules/zrender/lib/graphic/constant.js

@@ -0,0 +1,9 @@
+var ContextCachedBy = {
+  NONE: 0,
+  STYLE_BIND: 1,
+  PLAIN_TEXT: 2
+}; // Avoid confused with 0/false.
+
+var WILL_BE_RESTORED = 9;
+exports.ContextCachedBy = ContextCachedBy;
+exports.WILL_BE_RESTORED = WILL_BE_RESTORED;

node_modules/zrender/lib/graphic/helper/fixClipWithShadow.js

@@ -0,0 +1,56 @@
+var env = require("../../core/env");
+
+// Fix weird bug in some version of IE11 (like 11.0.9600.178**),
+// where exception "unexpected call to method or property access"
+// might be thrown when calling ctx.fill or ctx.stroke after a path
+// whose area size is zero is drawn and ctx.clip() is called and
+// shadowBlur is set. See #4572, #3112, #5777.
+// (e.g.,
+//  ctx.moveTo(10, 10);
+//  ctx.lineTo(20, 10);
+//  ctx.closePath();
+//  ctx.clip();
+//  ctx.shadowBlur = 10;
+//  ...
+//  ctx.fill();
+// )
+var shadowTemp = [['shadowBlur', 0], ['shadowColor', '#000'], ['shadowOffsetX', 0], ['shadowOffsetY', 0]];
+
+function _default(orignalBrush) {
+  // version string can be: '11.0'
+  return env.browser.ie && env.browser.version >= 11 ? function () {
+    var clipPaths = this.__clipPaths;
+    var style = this.style;
+    var modified;
+
+    if (clipPaths) {
+      for (var i = 0; i < clipPaths.length; i++) {
+        var clipPath = clipPaths[i];
+        var shape = clipPath && clipPath.shape;
+        var type = clipPath && clipPath.type;
+
+        if (shape && (type === 'sector' && shape.startAngle === shape.endAngle || type === 'rect' && (!shape.width || !shape.height))) {
+          for (var j = 0; j < shadowTemp.length; j++) {
+            // It is save to put shadowTemp static, because shadowTemp
+            // will be all modified each item brush called.
+            shadowTemp[j][2] = style[shadowTemp[j][0]];
+            style[shadowTemp[j][0]] = shadowTemp[j][1];
+          }
+
+          modified = true;
+          break;
+        }
+      }
+    }
+
+    orignalBrush.apply(this, arguments);
+
+    if (modified) {
+      for (var j = 0; j < shadowTemp.length; j++) {
+        style[shadowTemp[j][0]] = shadowTemp[j][2];
+      }
+    }
+  } : orignalBrush;
+}
+
+module.exports = _default;

node_modules/zrender/lib/graphic/helper/fixShadow.js

@@ -0,0 +1,21 @@
+var SHADOW_PROPS = {
+  'shadowBlur': 1,
+  'shadowOffsetX': 1,
+  'shadowOffsetY': 1,
+  'textShadowBlur': 1,
+  'textShadowOffsetX': 1,
+  'textShadowOffsetY': 1,
+  'textBoxShadowBlur': 1,
+  'textBoxShadowOffsetX': 1,
+  'textBoxShadowOffsetY': 1
+};
+
+function _default(ctx, propName, value) {
+  if (SHADOW_PROPS.hasOwnProperty(propName)) {
+    return value *= ctx.dpr;
+  }
+
+  return value;
+}
+
+module.exports = _default;

node_modules/zrender/lib/graphic/helper/image.js

@@ -0,0 +1,88 @@
+var LRU = require("../../core/LRU");
+
+var globalImageCache = new LRU(50);
+/**
+ * @param {string|HTMLImageElement|HTMLCanvasElement|Canvas} newImageOrSrc
+ * @return {HTMLImageElement|HTMLCanvasElement|Canvas} image
+ */
+
+function findExistImage(newImageOrSrc) {
+  if (typeof newImageOrSrc === 'string') {
+    var cachedImgObj = globalImageCache.get(newImageOrSrc);
+    return cachedImgObj && cachedImgObj.image;
+  } else {
+    return newImageOrSrc;
+  }
+}
+/**
+ * Caution: User should cache loaded images, but not just count on LRU.
+ * Consider if required images more than LRU size, will dead loop occur?
+ *
+ * @param {string|HTMLImageElement|HTMLCanvasElement|Canvas} newImageOrSrc
+ * @param {HTMLImageElement|HTMLCanvasElement|Canvas} image Existent image.
+ * @param {module:zrender/Element} [hostEl] For calling `dirty`.
+ * @param {Function} [cb] params: (image, cbPayload)
+ * @param {Object} [cbPayload] Payload on cb calling.
+ * @return {HTMLImageElement|HTMLCanvasElement|Canvas} image
+ */
+
+
+function createOrUpdateImage(newImageOrSrc, image, hostEl, cb, cbPayload) {
+  if (!newImageOrSrc) {
+    return image;
+  } else if (typeof newImageOrSrc === 'string') {
+    // Image should not be loaded repeatly.
+    if (image && image.__zrImageSrc === newImageOrSrc || !hostEl) {
+      return image;
+    } // Only when there is no existent image or existent image src
+    // is different, this method is responsible for load.
+
+
+    var cachedImgObj = globalImageCache.get(newImageOrSrc);
+    var pendingWrap = {
+      hostEl: hostEl,
+      cb: cb,
+      cbPayload: cbPayload
+    };
+
+    if (cachedImgObj) {
+      image = cachedImgObj.image;
+      !isImageReady(image) && cachedImgObj.pending.push(pendingWrap);
+    } else {
+      image = new Image();
+      image.onload = image.onerror = imageOnLoad;
+      globalImageCache.put(newImageOrSrc, image.__cachedImgObj = {
+        image: image,
+        pending: [pendingWrap]
+      });
+      image.src = image.__zrImageSrc = newImageOrSrc;
+    }
+
+    return image;
+  } // newImageOrSrc is an HTMLImageElement or HTMLCanvasElement or Canvas
+  else {
+      return newImageOrSrc;
+    }
+}
+
+function imageOnLoad() {
+  var cachedImgObj = this.__cachedImgObj;
+  this.onload = this.onerror = this.__cachedImgObj = null;
+
+  for (var i = 0; i < cachedImgObj.pending.length; i++) {
+    var pendingWrap = cachedImgObj.pending[i];
+    var cb = pendingWrap.cb;
+    cb && cb(this, pendingWrap.cbPayload);
+    pendingWrap.hostEl.dirty();
+  }
+
+  cachedImgObj.pending.length = 0;
+}
+
+function isImageReady(image) {
+  return image && image.width && image.height;
+}
+
+exports.findExistImage = findExistImage;
+exports.createOrUpdateImage = createOrUpdateImage;
+exports.isImageReady = isImageReady;

node_modules/zrender/lib/graphic/helper/poly.js

@@ -0,0 +1,37 @@
+var smoothSpline = require("./smoothSpline");
+
+var smoothBezier = require("./smoothBezier");
+
+function buildPath(ctx, shape, closePath) {
+  var points = shape.points;
+  var smooth = shape.smooth;
+
+  if (points && points.length >= 2) {
+    if (smooth && smooth !== 'spline') {
+      var controlPoints = smoothBezier(points, smooth, closePath, shape.smoothConstraint);
+      ctx.moveTo(points[0][0], points[0][1]);
+      var len = points.length;
+
+      for (var i = 0; i < (closePath ? len : len - 1); i++) {
+        var cp1 = controlPoints[i * 2];
+        var cp2 = controlPoints[i * 2 + 1];
+        var p = points[(i + 1) % len];
+        ctx.bezierCurveTo(cp1[0], cp1[1], cp2[0], cp2[1], p[0], p[1]);
+      }
+    } else {
+      if (smooth === 'spline') {
+        points = smoothSpline(points, closePath);
+      }
+
+      ctx.moveTo(points[0][0], points[0][1]);
+
+      for (var i = 1, l = points.length; i < l; i++) {
+        ctx.lineTo(points[i][0], points[i][1]);
+      }
+    }
+
+    closePath && ctx.closePath();
+  }
+}
+
+exports.buildPath = buildPath;

node_modules/zrender/lib/graphic/helper/roundRect.js

@@ -0,0 +1,90 @@
+/**
+ * @param {Object} ctx
+ * @param {Object} shape
+ * @param {number} shape.x
+ * @param {number} shape.y
+ * @param {number} shape.width
+ * @param {number} shape.height
+ * @param {number} shape.r
+ */
+function buildPath(ctx, shape) {
+  var x = shape.x;
+  var y = shape.y;
+  var width = shape.width;
+  var height = shape.height;
+  var r = shape.r;
+  var r1;
+  var r2;
+  var r3;
+  var r4; // Convert width and height to positive for better borderRadius
+
+  if (width < 0) {
+    x = x + width;
+    width = -width;
+  }
+
+  if (height < 0) {
+    y = y + height;
+    height = -height;
+  }
+
+  if (typeof r === 'number') {
+    r1 = r2 = r3 = r4 = r;
+  } else if (r instanceof Array) {
+    if (r.length === 1) {
+      r1 = r2 = r3 = r4 = r[0];
+    } else if (r.length === 2) {
+      r1 = r3 = r[0];
+      r2 = r4 = r[1];
+    } else if (r.length === 3) {
+      r1 = r[0];
+      r2 = r4 = r[1];
+      r3 = r[2];
+    } else {
+      r1 = r[0];
+      r2 = r[1];
+      r3 = r[2];
+      r4 = r[3];
+    }
+  } else {
+    r1 = r2 = r3 = r4 = 0;
+  }
+
+  var total;
+
+  if (r1 + r2 > width) {
+    total = r1 + r2;
+    r1 *= width / total;
+    r2 *= width / total;
+  }
+
+  if (r3 + r4 > width) {
+    total = r3 + r4;
+    r3 *= width / total;
+    r4 *= width / total;
+  }
+
+  if (r2 + r3 > height) {
+    total = r2 + r3;
+    r2 *= height / total;
+    r3 *= height / total;
+  }
+
+  if (r1 + r4 > height) {
+    total = r1 + r4;
+    r1 *= height / total;
+    r4 *= height / total;
+  }
+
+  ctx.moveTo(x + r1, y);
+  ctx.lineTo(x + width - r2, y);
+  r2 !== 0 && ctx.arc(x + width - r2, y + r2, r2, -Math.PI / 2, 0);
+  ctx.lineTo(x + width, y + height - r3);
+  r3 !== 0 && ctx.arc(x + width - r3, y + height - r3, r3, 0, Math.PI / 2);
+  ctx.lineTo(x + r4, y + height);
+  r4 !== 0 && ctx.arc(x + r4, y + height - r4, r4, Math.PI / 2, Math.PI);
+  ctx.lineTo(x, y + r1);
+  r1 !== 0 && ctx.arc(x + r1, y + r1, r1, Math.PI, Math.PI * 1.5);
+}
+
+exports.buildPath = buildPath;

node_modules/zrender/lib/graphic/helper/smoothBezier.js

@@ -0,0 +1,105 @@
+var _vector = require("../../core/vector");
+
+var v2Min = _vector.min;
+var v2Max = _vector.max;
+var v2Scale = _vector.scale;
+var v2Distance = _vector.distance;
+var v2Add = _vector.add;
+var v2Clone = _vector.clone;
+var v2Sub = _vector.sub;
+
+/**
+ * 贝塞尔平滑曲线
+ * @module zrender/shape/util/smoothBezier
+ * @author pissang (https://www.github.com/pissang)
+ *         Kener (@Kener-林峰, kener.linfeng@gmail.com)
+ *         errorrik (errorrik@gmail.com)
+ */
+
+/**
+ * 贝塞尔平滑曲线
+ * @alias module:zrender/shape/util/smoothBezier
+ * @param {Array} points 线段顶点数组
+ * @param {number} smooth 平滑等级, 0-1
+ * @param {boolean} isLoop
+ * @param {Array} constraint 将计算出来的控制点约束在一个包围盒内
+ *                           比如 [[0, 0], [100, 100]], 这个包围盒会与
+ *                           整个折线的包围盒做一个并集用来约束控制点。
+ * @param {Array} 计算出来的控制点数组
+ */
+function _default(points, smooth, isLoop, constraint) {
+  var cps = [];
+  var v = [];
+  var v1 = [];
+  var v2 = [];
+  var prevPoint;
+  var nextPoint;
+  var min;
+  var max;
+
+  if (constraint) {
+    min = [Infinity, Infinity];
+    max = [-Infinity, -Infinity];
+
+    for (var i = 0, len = points.length; i < len; i++) {
+      v2Min(min, min, points[i]);
+      v2Max(max, max, points[i]);
+    } // 与指定的包围盒做并集
+
+
+    v2Min(min, min, constraint[0]);
+    v2Max(max, max, constraint[1]);
+  }
+
+  for (var i = 0, len = points.length; i < len; i++) {
+    var point = points[i];
+
+    if (isLoop) {
+      prevPoint = points[i ? i - 1 : len - 1];
+      nextPoint = points[(i + 1) % len];
+    } else {
+      if (i === 0 || i === len - 1) {
+        cps.push(v2Clone(points[i]));
+        continue;
+      } else {
+        prevPoint = points[i - 1];
+        nextPoint = points[i + 1];
+      }
+    }
+
+    v2Sub(v, nextPoint, prevPoint); // use degree to scale the handle length
+
+    v2Scale(v, v, smooth);
+    var d0 = v2Distance(point, prevPoint);
+    var d1 = v2Distance(point, nextPoint);
+    var sum = d0 + d1;
+
+    if (sum !== 0) {
+      d0 /= sum;
+      d1 /= sum;
+    }
+
+    v2Scale(v1, v, -d0);
+    v2Scale(v2, v, d1);
+    var cp0 = v2Add([], point, v1);
+    var cp1 = v2Add([], point, v2);
+
+    if (constraint) {
+      v2Max(cp0, cp0, min);
+      v2Min(cp0, cp0, max);
+      v2Max(cp1, cp1, min);
+      v2Min(cp1, cp1, max);
+    }
+
+    cps.push(cp0);
+    cps.push(cp1);
+  }
+
+  if (isLoop) {
+    cps.push(cps.shift());
+  }
+
+  return cps;
+}
+
+module.exports = _default;

node_modules/zrender/lib/graphic/helper/smoothSpline.js

@@ -0,0 +1,68 @@
+var _vector = require("../../core/vector");
+
+var v2Distance = _vector.distance;
+
+/**
+ * Catmull-Rom spline 插值折线
+ * @module zrender/shape/util/smoothSpline
+ * @author pissang (https://www.github.com/pissang)
+ *         Kener (@Kener-林峰, kener.linfeng@gmail.com)
+ *         errorrik (errorrik@gmail.com)
+ */
+
+/**
+ * @inner
+ */
+function interpolate(p0, p1, p2, p3, t, t2, t3) {
+  var v0 = (p2 - p0) * 0.5;
+  var v1 = (p3 - p1) * 0.5;
+  return (2 * (p1 - p2) + v0 + v1) * t3 + (-3 * (p1 - p2) - 2 * v0 - v1) * t2 + v0 * t + p1;
+}
+/**
+ * @alias module:zrender/shape/util/smoothSpline
+ * @param {Array} points 线段顶点数组
+ * @param {boolean} isLoop
+ * @return {Array}
+ */
+
+
+function _default(points, isLoop) {
+  var len = points.length;
+  var ret = [];
+  var distance = 0;
+
+  for (var i = 1; i < len; i++) {
+    distance += v2Distance(points[i - 1], points[i]);
+  }
+
+  var segs = distance / 2;
+  segs = segs < len ? len : segs;
+
+  for (var i = 0; i < segs; i++) {
+    var pos = i / (segs - 1) * (isLoop ? len : len - 1);
+    var idx = Math.floor(pos);
+    var w = pos - idx;
+    var p0;
+    var p1 = points[idx % len];
+    var p2;
+    var p3;
+
+    if (!isLoop) {
+      p0 = points[idx === 0 ? idx : idx - 1];
+      p2 = points[idx > len - 2 ? len - 1 : idx + 1];
+      p3 = points[idx > len - 3 ? len - 1 : idx + 2];
+    } else {
+      p0 = points[(idx - 1 + len) % len];
+      p2 = points[(idx + 1) % len];
+      p3 = points[(idx + 2) % len];
+    }
+
+    var w2 = w * w;
+    var w3 = w * w2;
+    ret.push([interpolate(p0[0], p1[0], p2[0], p3[0], w, w2, w3), interpolate(p0[1], p1[1], p2[1], p3[1], w, w2, w3)]);
+  }
+
+  return ret;
+}
+
+module.exports = _default;

node_modules/zrender/lib/graphic/helper/subPixelOptimize.js

@@ -0,0 +1,113 @@
+/**
+ * Sub-pixel optimize for canvas rendering, prevent from blur
+ * when rendering a thin vertical/horizontal line.
+ */
+var round = Math.round;
+/**
+ * Sub pixel optimize line for canvas
+ *
+ * @param {Object} outputShape The modification will be performed on `outputShape`.
+ *                 `outputShape` and `inputShape` can be the same object.
+ *                 `outputShape` object can be used repeatly, because all of
+ *                 the `x1`, `x2`, `y1`, `y2` will be assigned in this method.
+ * @param {Object} [inputShape]
+ * @param {number} [inputShape.x1]
+ * @param {number} [inputShape.y1]
+ * @param {number} [inputShape.x2]
+ * @param {number} [inputShape.y2]
+ * @param {Object} [style]
+ * @param {number} [style.lineWidth] If `null`/`undefined`/`0`, do not optimize.
+ */
+
+function subPixelOptimizeLine(outputShape, inputShape, style) {
+  if (!inputShape) {
+    return;
+  }
+
+  var x1 = inputShape.x1;
+  var x2 = inputShape.x2;
+  var y1 = inputShape.y1;
+  var y2 = inputShape.y2;
+  outputShape.x1 = x1;
+  outputShape.x2 = x2;
+  outputShape.y1 = y1;
+  outputShape.y2 = y2;
+  var lineWidth = style && style.lineWidth;
+
+  if (!lineWidth) {
+    return;
+  }
+
+  if (round(x1 * 2) === round(x2 * 2)) {
+    outputShape.x1 = outputShape.x2 = subPixelOptimize(x1, lineWidth, true);
+  }
+
+  if (round(y1 * 2) === round(y2 * 2)) {
+    outputShape.y1 = outputShape.y2 = subPixelOptimize(y1, lineWidth, true);
+  }
+}
+/**
+ * Sub pixel optimize rect for canvas
+ *
+ * @param {Object} outputShape The modification will be performed on `outputShape`.
+ *                 `outputShape` and `inputShape` can be the same object.
+ *                 `outputShape` object can be used repeatly, because all of
+ *                 the `x`, `y`, `width`, `height` will be assigned in this method.
+ * @param {Object} [inputShape]
+ * @param {number} [inputShape.x]
+ * @param {number} [inputShape.y]
+ * @param {number} [inputShape.width]
+ * @param {number} [inputShape.height]
+ * @param {Object} [style]
+ * @param {number} [style.lineWidth] If `null`/`undefined`/`0`, do not optimize.
+ */
+
+
+function subPixelOptimizeRect(outputShape, inputShape, style) {
+  if (!inputShape) {
+    return;
+  }
+
+  var originX = inputShape.x;
+  var originY = inputShape.y;
+  var originWidth = inputShape.width;
+  var originHeight = inputShape.height;
+  outputShape.x = originX;
+  outputShape.y = originY;
+  outputShape.width = originWidth;
+  outputShape.height = originHeight;
+  var lineWidth = style && style.lineWidth;
+
+  if (!lineWidth) {
+    return;
+  }
+
+  outputShape.x = subPixelOptimize(originX, lineWidth, true);
+  outputShape.y = subPixelOptimize(originY, lineWidth, true);
+  outputShape.width = Math.max(subPixelOptimize(originX + originWidth, lineWidth, false) - outputShape.x, originWidth === 0 ? 0 : 1);
+  outputShape.height = Math.max(subPixelOptimize(originY + originHeight, lineWidth, false) - outputShape.y, originHeight === 0 ? 0 : 1);
+}
+/**
+ * Sub pixel optimize for canvas
+ *
+ * @param {number} position Coordinate, such as x, y
+ * @param {number} lineWidth If `null`/`undefined`/`0`, do not optimize.
+ * @param {boolean=} positiveOrNegative Default false (negative).
+ * @return {number} Optimized position.
+ */
+
+
+function subPixelOptimize(position, lineWidth, positiveOrNegative) {
+  if (!lineWidth) {
+    return position;
+  } // Assure that (position + lineWidth / 2) is near integer edge,
+  // otherwise line will be fuzzy in canvas.
+
+
+  var doubledPosition = round(position * 2);
+  return (doubledPosition + round(lineWidth)) % 2 === 0 ? doubledPosition / 2 : (doubledPosition + (positiveOrNegative ? 1 : -1)) / 2;
+}
+
+exports.subPixelOptimizeLine = subPixelOptimizeLine;
+exports.subPixelOptimizeRect = subPixelOptimizeRect;
+exports.subPixelOptimize = subPixelOptimize;

node_modules/zrender/lib/graphic/helper/text.js

@@ -0,0 +1,547 @@
+var _util = require("../../core/util");
+
+var retrieve2 = _util.retrieve2;
+var retrieve3 = _util.retrieve3;
+var each = _util.each;
+var normalizeCssArray = _util.normalizeCssArray;
+var isString = _util.isString;
+var isObject = _util.isObject;
+
+var textContain = require("../../contain/text");
+
+var roundRectHelper = require("./roundRect");
+
+var imageHelper = require("./image");
+
+var fixShadow = require("./fixShadow");
+
+var _constant = require("../constant");
+
+var ContextCachedBy = _constant.ContextCachedBy;
+var WILL_BE_RESTORED = _constant.WILL_BE_RESTORED;
+var DEFAULT_FONT = textContain.DEFAULT_FONT; // TODO: Have not support 'start', 'end' yet.
+
+var VALID_TEXT_ALIGN = {
+  left: 1,
+  right: 1,
+  center: 1
+};
+var VALID_TEXT_VERTICAL_ALIGN = {
+  top: 1,
+  bottom: 1,
+  middle: 1
+}; // Different from `STYLE_COMMON_PROPS` of `graphic/Style`,
+// the default value of shadowColor is `'transparent'`.
+
+var SHADOW_STYLE_COMMON_PROPS = [['textShadowBlur', 'shadowBlur', 0], ['textShadowOffsetX', 'shadowOffsetX', 0], ['textShadowOffsetY', 'shadowOffsetY', 0], ['textShadowColor', 'shadowColor', 'transparent']];
+var _tmpTextPositionResult = {};
+var _tmpBoxPositionResult = {};
+/**
+ * @param {module:zrender/graphic/Style} style
+ * @return {module:zrender/graphic/Style} The input style.
+ */
+
+function normalizeTextStyle(style) {
+  normalizeStyle(style);
+  each(style.rich, normalizeStyle);
+  return style;
+}
+
+function normalizeStyle(style) {
+  if (style) {
+    style.font = textContain.makeFont(style);
+    var textAlign = style.textAlign;
+    textAlign === 'middle' && (textAlign = 'center');
+    style.textAlign = textAlign == null || VALID_TEXT_ALIGN[textAlign] ? textAlign : 'left'; // Compatible with textBaseline.
+
+    var textVerticalAlign = style.textVerticalAlign || style.textBaseline;
+    textVerticalAlign === 'center' && (textVerticalAlign = 'middle');
+    style.textVerticalAlign = textVerticalAlign == null || VALID_TEXT_VERTICAL_ALIGN[textVerticalAlign] ? textVerticalAlign : 'top';
+    var textPadding = style.textPadding;
+
+    if (textPadding) {
+      style.textPadding = normalizeCssArray(style.textPadding);
+    }
+  }
+}
+/**
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {string} text
+ * @param {module:zrender/graphic/Style} style
+ * @param {Object|boolean} [rect] {x, y, width, height}
+ *                  If set false, rect text is not used.
+ * @param {Element|module:zrender/graphic/helper/constant.WILL_BE_RESTORED} [prevEl] For ctx prop cache.
+ */
+
+
+function renderText(hostEl, ctx, text, style, rect, prevEl) {
+  style.rich ? renderRichText(hostEl, ctx, text, style, rect, prevEl) : renderPlainText(hostEl, ctx, text, style, rect, prevEl);
+} // Avoid setting to ctx according to prevEl if possible for
+// performance in scenarios of large amount text.
+
+
+function renderPlainText(hostEl, ctx, text, style, rect, prevEl) {
+  'use strict';
+
+  var needDrawBg = needDrawBackground(style);
+  var prevStyle;
+  var checkCache = false;
+  var cachedByMe = ctx.__attrCachedBy === ContextCachedBy.PLAIN_TEXT; // Only take and check cache for `Text` el, but not RectText.
+
+  if (prevEl !== WILL_BE_RESTORED) {
+    if (prevEl) {
+      prevStyle = prevEl.style;
+      checkCache = !needDrawBg && cachedByMe && prevStyle;
+    } // Prevent from using cache in `Style::bind`, because of the case:
+    // ctx property is modified by other properties than `Style::bind`
+    // used, and Style::bind is called next.
+
+
+    ctx.__attrCachedBy = needDrawBg ? ContextCachedBy.NONE : ContextCachedBy.PLAIN_TEXT;
+  } // Since this will be restored, prevent from using these props to check cache in the next
+  // entering of this method. But do not need to clear other cache like `Style::bind`.
+  else if (cachedByMe) {
+      ctx.__attrCachedBy = ContextCachedBy.NONE;
+    }
+
+  var styleFont = style.font || DEFAULT_FONT; // PENDING
+  // Only `Text` el set `font` and keep it (`RectText` will restore). So theoretically
+  // we can make font cache on ctx, which can cache for text el that are discontinuous.
+  // But layer save/restore needed to be considered.
+  // if (styleFont !== ctx.__fontCache) {
+  //     ctx.font = styleFont;
+  //     if (prevEl !== WILL_BE_RESTORED) {
+  //         ctx.__fontCache = styleFont;
+  //     }
+  // }
+
+  if (!checkCache || styleFont !== (prevStyle.font || DEFAULT_FONT)) {
+    ctx.font = styleFont;
+  } // Use the final font from context-2d, because the final
+  // font might not be the style.font when it is illegal.
+  // But get `ctx.font` might be time consuming.
+
+
+  var computedFont = hostEl.__computedFont;
+
+  if (hostEl.__styleFont !== styleFont) {
+    hostEl.__styleFont = styleFont;
+    computedFont = hostEl.__computedFont = ctx.font;
+  }
+
+  var textPadding = style.textPadding;
+  var textLineHeight = style.textLineHeight;
+  var contentBlock = hostEl.__textCotentBlock;
+
+  if (!contentBlock || hostEl.__dirtyText) {
+    contentBlock = hostEl.__textCotentBlock = textContain.parsePlainText(text, computedFont, textPadding, textLineHeight, style.truncate);
+  }
+
+  var outerHeight = contentBlock.outerHeight;
+  var textLines = contentBlock.lines;
+  var lineHeight = contentBlock.lineHeight;
+  var boxPos = getBoxPosition(_tmpBoxPositionResult, hostEl, style, rect);
+  var baseX = boxPos.baseX;
+  var baseY = boxPos.baseY;
+  var textAlign = boxPos.textAlign || 'left';
+  var textVerticalAlign = boxPos.textVerticalAlign; // Origin of textRotation should be the base point of text drawing.
+
+  applyTextRotation(ctx, style, rect, baseX, baseY);
+  var boxY = textContain.adjustTextY(baseY, outerHeight, textVerticalAlign);
+  var textX = baseX;
+  var textY = boxY;
+
+  if (needDrawBg || textPadding) {
+    // Consider performance, do not call getTextWidth util necessary.
+    var textWidth = textContain.getWidth(text, computedFont);
+    var outerWidth = textWidth;
+    textPadding && (outerWidth += textPadding[1] + textPadding[3]);
+    var boxX = textContain.adjustTextX(baseX, outerWidth, textAlign);
+    needDrawBg && drawBackground(hostEl, ctx, style, boxX, boxY, outerWidth, outerHeight);
+
+    if (textPadding) {
+      textX = getTextXForPadding(baseX, textAlign, textPadding);
+      textY += textPadding[0];
+    }
+  } // Always set textAlign and textBase line, because it is difficute to calculate
+  // textAlign from prevEl, and we dont sure whether textAlign will be reset if
+  // font set happened.
+
+
+  ctx.textAlign = textAlign; // Force baseline to be "middle". Otherwise, if using "top", the
+  // text will offset downward a little bit in font "Microsoft YaHei".
+
+  ctx.textBaseline = 'middle'; // Set text opacity
+
+  ctx.globalAlpha = style.opacity || 1; // Always set shadowBlur and shadowOffset to avoid leak from displayable.
+
+  for (var i = 0; i < SHADOW_STYLE_COMMON_PROPS.length; i++) {
+    var propItem = SHADOW_STYLE_COMMON_PROPS[i];
+    var styleProp = propItem[0];
+    var ctxProp = propItem[1];
+    var val = style[styleProp];
+
+    if (!checkCache || val !== prevStyle[styleProp]) {
+      ctx[ctxProp] = fixShadow(ctx, ctxProp, val || propItem[2]);
+    }
+  } // `textBaseline` is set as 'middle'.
+
+
+  textY += lineHeight / 2;
+  var textStrokeWidth = style.textStrokeWidth;
+  var textStrokeWidthPrev = checkCache ? prevStyle.textStrokeWidth : null;
+  var strokeWidthChanged = !checkCache || textStrokeWidth !== textStrokeWidthPrev;
+  var strokeChanged = !checkCache || strokeWidthChanged || style.textStroke !== prevStyle.textStroke;
+  var textStroke = getStroke(style.textStroke, textStrokeWidth);
+  var textFill = getFill(style.textFill);
+
+  if (textStroke) {
+    if (strokeWidthChanged) {
+      ctx.lineWidth = textStrokeWidth;
+    }
+
+    if (strokeChanged) {
+      ctx.strokeStyle = textStroke;
+    }
+  }
+
+  if (textFill) {
+    if (!checkCache || style.textFill !== prevStyle.textFill) {
+      ctx.fillStyle = textFill;
+    }
+  } // Optimize simply, in most cases only one line exists.
+
+
+  if (textLines.length === 1) {
+    // Fill after stroke so the outline will not cover the main part.
+    textStroke && ctx.strokeText(textLines[0], textX, textY);
+    textFill && ctx.fillText(textLines[0], textX, textY);
+  } else {
+    for (var i = 0; i < textLines.length; i++) {
+      // Fill after stroke so the outline will not cover the main part.
+      textStroke && ctx.strokeText(textLines[i], textX, textY);
+      textFill && ctx.fillText(textLines[i], textX, textY);
+      textY += lineHeight;
+    }
+  }
+}
+
+function renderRichText(hostEl, ctx, text, style, rect, prevEl) {
+  // Do not do cache for rich text because of the complexity.
+  // But `RectText` this will be restored, do not need to clear other cache like `Style::bind`.
+  if (prevEl !== WILL_BE_RESTORED) {
+    ctx.__attrCachedBy = ContextCachedBy.NONE;
+  }
+
+  var contentBlock = hostEl.__textCotentBlock;
+
+  if (!contentBlock || hostEl.__dirtyText) {
+    contentBlock = hostEl.__textCotentBlock = textContain.parseRichText(text, style);
+  }
+
+  drawRichText(hostEl, ctx, contentBlock, style, rect);
+}
+
+function drawRichText(hostEl, ctx, contentBlock, style, rect) {
+  var contentWidth = contentBlock.width;
+  var outerWidth = contentBlock.outerWidth;
+  var outerHeight = contentBlock.outerHeight;
+  var textPadding = style.textPadding;
+  var boxPos = getBoxPosition(_tmpBoxPositionResult, hostEl, style, rect);
+  var baseX = boxPos.baseX;
+  var baseY = boxPos.baseY;
+  var textAlign = boxPos.textAlign;
+  var textVerticalAlign = boxPos.textVerticalAlign; // Origin of textRotation should be the base point of text drawing.
+
+  applyTextRotation(ctx, style, rect, baseX, baseY);
+  var boxX = textContain.adjustTextX(baseX, outerWidth, textAlign);
+  var boxY = textContain.adjustTextY(baseY, outerHeight, textVerticalAlign);
+  var xLeft = boxX;
+  var lineTop = boxY;
+
+  if (textPadding) {
+    xLeft += textPadding[3];
+    lineTop += textPadding[0];
+  }
+
+  var xRight = xLeft + contentWidth;
+  needDrawBackground(style) && drawBackground(hostEl, ctx, style, boxX, boxY, outerWidth, outerHeight);
+
+  for (var i = 0; i < contentBlock.lines.length; i++) {
+    var line = contentBlock.lines[i];
+    var tokens = line.tokens;
+    var tokenCount = tokens.length;
+    var lineHeight = line.lineHeight;
+    var usedWidth = line.width;
+    var leftIndex = 0;
+    var lineXLeft = xLeft;
+    var lineXRight = xRight;
+    var rightIndex = tokenCount - 1;
+    var token;
+
+    while (leftIndex < tokenCount && (token = tokens[leftIndex], !token.textAlign || token.textAlign === 'left')) {
+      placeToken(hostEl, ctx, token, style, lineHeight, lineTop, lineXLeft, 'left');
+      usedWidth -= token.width;
+      lineXLeft += token.width;
+      leftIndex++;
+    }
+
+    while (rightIndex >= 0 && (token = tokens[rightIndex], token.textAlign === 'right')) {
+      placeToken(hostEl, ctx, token, style, lineHeight, lineTop, lineXRight, 'right');
+      usedWidth -= token.width;
+      lineXRight -= token.width;
+      rightIndex--;
+    } // The other tokens are placed as textAlign 'center' if there is enough space.
+
+
+    lineXLeft += (contentWidth - (lineXLeft - xLeft) - (xRight - lineXRight) - usedWidth) / 2;
+
+    while (leftIndex <= rightIndex) {
+      token = tokens[leftIndex]; // Consider width specified by user, use 'center' rather than 'left'.
+
+      placeToken(hostEl, ctx, token, style, lineHeight, lineTop, lineXLeft + token.width / 2, 'center');
+      lineXLeft += token.width;
+      leftIndex++;
+    }
+
+    lineTop += lineHeight;
+  }
+}
+
+function applyTextRotation(ctx, style, rect, x, y) {
+  // textRotation only apply in RectText.
+  if (rect && style.textRotation) {
+    var origin = style.textOrigin;
+
+    if (origin === 'center') {
+      x = rect.width / 2 + rect.x;
+      y = rect.height / 2 + rect.y;
+    } else if (origin) {
+      x = origin[0] + rect.x;
+      y = origin[1] + rect.y;
+    }
+
+    ctx.translate(x, y); // Positive: anticlockwise
+
+    ctx.rotate(-style.textRotation);
+    ctx.translate(-x, -y);
+  }
+}
+
+function placeToken(hostEl, ctx, token, style, lineHeight, lineTop, x, textAlign) {
+  var tokenStyle = style.rich[token.styleName] || {};
+  tokenStyle.text = token.text; // 'ctx.textBaseline' is always set as 'middle', for sake of
+  // the bias of "Microsoft YaHei".
+
+  var textVerticalAlign = token.textVerticalAlign;
+  var y = lineTop + lineHeight / 2;
+
+  if (textVerticalAlign === 'top') {
+    y = lineTop + token.height / 2;
+  } else if (textVerticalAlign === 'bottom') {
+    y = lineTop + lineHeight - token.height / 2;
+  }
+
+  !token.isLineHolder && needDrawBackground(tokenStyle) && drawBackground(hostEl, ctx, tokenStyle, textAlign === 'right' ? x - token.width : textAlign === 'center' ? x - token.width / 2 : x, y - token.height / 2, token.width, token.height);
+  var textPadding = token.textPadding;
+
+  if (textPadding) {
+    x = getTextXForPadding(x, textAlign, textPadding);
+    y -= token.height / 2 - textPadding[2] - token.textHeight / 2;
+  }
+
+  setCtx(ctx, 'shadowBlur', retrieve3(tokenStyle.textShadowBlur, style.textShadowBlur, 0));
+  setCtx(ctx, 'shadowColor', tokenStyle.textShadowColor || style.textShadowColor || 'transparent');
+  setCtx(ctx, 'shadowOffsetX', retrieve3(tokenStyle.textShadowOffsetX, style.textShadowOffsetX, 0));
+  setCtx(ctx, 'shadowOffsetY', retrieve3(tokenStyle.textShadowOffsetY, style.textShadowOffsetY, 0));
+  setCtx(ctx, 'textAlign', textAlign); // Force baseline to be "middle". Otherwise, if using "top", the
+  // text will offset downward a little bit in font "Microsoft YaHei".
+
+  setCtx(ctx, 'textBaseline', 'middle');
+  setCtx(ctx, 'font', token.font || DEFAULT_FONT);
+  var textStroke = getStroke(tokenStyle.textStroke || style.textStroke, textStrokeWidth);
+  var textFill = getFill(tokenStyle.textFill || style.textFill);
+  var textStrokeWidth = retrieve2(tokenStyle.textStrokeWidth, style.textStrokeWidth); // Fill after stroke so the outline will not cover the main part.
+
+  if (textStroke) {
+    setCtx(ctx, 'lineWidth', textStrokeWidth);
+    setCtx(ctx, 'strokeStyle', textStroke);
+    ctx.strokeText(token.text, x, y);
+  }
+
+  if (textFill) {
+    setCtx(ctx, 'fillStyle', textFill);
+    ctx.fillText(token.text, x, y);
+  }
+}
+
+function needDrawBackground(style) {
+  return !!(style.textBackgroundColor || style.textBorderWidth && style.textBorderColor);
+} // style: {textBackgroundColor, textBorderWidth, textBorderColor, textBorderRadius, text}
+// shape: {x, y, width, height}
+
+
+function drawBackground(hostEl, ctx, style, x, y, width, height) {
+  var textBackgroundColor = style.textBackgroundColor;
+  var textBorderWidth = style.textBorderWidth;
+  var textBorderColor = style.textBorderColor;
+  var isPlainBg = isString(textBackgroundColor);
+  setCtx(ctx, 'shadowBlur', style.textBoxShadowBlur || 0);
+  setCtx(ctx, 'shadowColor', style.textBoxShadowColor || 'transparent');
+  setCtx(ctx, 'shadowOffsetX', style.textBoxShadowOffsetX || 0);
+  setCtx(ctx, 'shadowOffsetY', style.textBoxShadowOffsetY || 0);
+
+  if (isPlainBg || textBorderWidth && textBorderColor) {
+    ctx.beginPath();
+    var textBorderRadius = style.textBorderRadius;
+
+    if (!textBorderRadius) {
+      ctx.rect(x, y, width, height);
+    } else {
+      roundRectHelper.buildPath(ctx, {
+        x: x,
+        y: y,
+        width: width,
+        height: height,
+        r: textBorderRadius
+      });
+    }
+
+    ctx.closePath();
+  }
+
+  if (isPlainBg) {
+    setCtx(ctx, 'fillStyle', textBackgroundColor);
+
+    if (style.fillOpacity != null) {
+      var originalGlobalAlpha = ctx.globalAlpha;
+      ctx.globalAlpha = style.fillOpacity * style.opacity;
+      ctx.fill();
+      ctx.globalAlpha = originalGlobalAlpha;
+    } else {
+      ctx.fill();
+    }
+  } else if (isObject(textBackgroundColor)) {
+    var image = textBackgroundColor.image;
+    image = imageHelper.createOrUpdateImage(image, null, hostEl, onBgImageLoaded, textBackgroundColor);
+
+    if (image && imageHelper.isImageReady(image)) {
+      ctx.drawImage(image, x, y, width, height);
+    }
+  }
+
+  if (textBorderWidth && textBorderColor) {
+    setCtx(ctx, 'lineWidth', textBorderWidth);
+    setCtx(ctx, 'strokeStyle', textBorderColor);
+
+    if (style.strokeOpacity != null) {
+      var originalGlobalAlpha = ctx.globalAlpha;
+      ctx.globalAlpha = style.strokeOpacity * style.opacity;
+      ctx.stroke();
+      ctx.globalAlpha = originalGlobalAlpha;
+    } else {
+      ctx.stroke();
+    }
+  }
+}
+
+function onBgImageLoaded(image, textBackgroundColor) {
+  // Replace image, so that `contain/text.js#parseRichText`
+  // will get correct result in next tick.
+  textBackgroundColor.image = image;
+}
+
+function getBoxPosition(out, hostEl, style, rect) {
+  var baseX = style.x || 0;
+  var baseY = style.y || 0;
+  var textAlign = style.textAlign;
+  var textVerticalAlign = style.textVerticalAlign; // Text position represented by coord
+
+  if (rect) {
+    var textPosition = style.textPosition;
+
+    if (textPosition instanceof Array) {
+      // Percent
+      baseX = rect.x + parsePercent(textPosition[0], rect.width);
+      baseY = rect.y + parsePercent(textPosition[1], rect.height);
+    } else {
+      var res = hostEl && hostEl.calculateTextPosition ? hostEl.calculateTextPosition(_tmpTextPositionResult, style, rect) : textContain.calculateTextPosition(_tmpTextPositionResult, style, rect);
+      baseX = res.x;
+      baseY = res.y; // Default align and baseline when has textPosition
+
+      textAlign = textAlign || res.textAlign;
+      textVerticalAlign = textVerticalAlign || res.textVerticalAlign;
+    } // textOffset is only support in RectText, otherwise
+    // we have to adjust boundingRect for textOffset.
+
+
+    var textOffset = style.textOffset;
+
+    if (textOffset) {
+      baseX += textOffset[0];
+      baseY += textOffset[1];
+    }
+  }
+
+  out = out || {};
+  out.baseX = baseX;
+  out.baseY = baseY;
+  out.textAlign = textAlign;
+  out.textVerticalAlign = textVerticalAlign;
+  return out;
+}
+
+function setCtx(ctx, prop, value) {
+  ctx[prop] = fixShadow(ctx, prop, value);
+  return ctx[prop];
+}
+/**
+ * @param {string} [stroke] If specified, do not check style.textStroke.
+ * @param {string} [lineWidth] If specified, do not check style.textStroke.
+ * @param {number} style
+ */
+
+
+function getStroke(stroke, lineWidth) {
+  return stroke == null || lineWidth <= 0 || stroke === 'transparent' || stroke === 'none' ? null // TODO pattern and gradient?
+  : stroke.image || stroke.colorStops ? '#000' : stroke;
+}
+
+function getFill(fill) {
+  return fill == null || fill === 'none' ? null // TODO pattern and gradient?
+  : fill.image || fill.colorStops ? '#000' : fill;
+}
+
+function parsePercent(value, maxValue) {
+  if (typeof value === 'string') {
+    if (value.lastIndexOf('%') >= 0) {
+      return parseFloat(value) / 100 * maxValue;
+    }
+
+    return parseFloat(value);
+  }
+
+  return value;
+}
+
+function getTextXForPadding(x, textAlign, textPadding) {
+  return textAlign === 'right' ? x - textPadding[1] : textAlign === 'center' ? x + textPadding[3] / 2 - textPadding[1] / 2 : x + textPadding[3];
+}
+/**
+ * @param {string} text
+ * @param {module:zrender/Style} style
+ * @return {boolean}
+ */
+
+
+function needDrawText(text, style) {
+  return text != null && (text || style.textBackgroundColor || style.textBorderWidth && style.textBorderColor || style.textPadding);
+}
+
+exports.normalizeTextStyle = normalizeTextStyle;
+exports.renderText = renderText;
+exports.getBoxPosition = getBoxPosition;
+exports.getStroke = getStroke;
+exports.getFill = getFill;
+exports.parsePercent = parsePercent;
+exports.needDrawText = needDrawText;

node_modules/zrender/lib/graphic/mixin/RectText.js

@@ -0,0 +1,62 @@
+var textHelper = require("../helper/text");
+
+var BoundingRect = require("../../core/BoundingRect");
+
+var _constant = require("../constant");
+
+var WILL_BE_RESTORED = _constant.WILL_BE_RESTORED;
+
+/**
+ * Mixin for drawing text in a element bounding rect
+ * @module zrender/mixin/RectText
+ */
+var tmpRect = new BoundingRect();
+
+var RectText = function () {};
+
+RectText.prototype = {
+  constructor: RectText,
+
+  /**
+   * Draw text in a rect with specified position.
+   * @param  {CanvasRenderingContext2D} ctx
+   * @param  {Object} rect Displayable rect
+   */
+  drawRectText: function (ctx, rect) {
+    var style = this.style;
+    rect = style.textRect || rect; // Optimize, avoid normalize every time.
+
+    this.__dirty && textHelper.normalizeTextStyle(style, true);
+    var text = style.text; // Convert to string
+
+    text != null && (text += '');
+
+    if (!textHelper.needDrawText(text, style)) {
+      return;
+    } // FIXME
+    // Do not provide prevEl to `textHelper.renderText` for ctx prop cache,
+    // but use `ctx.save()` and `ctx.restore()`. Because the cache for rect
+    // text propably break the cache for its host elements.
+
+
+    ctx.save(); // Transform rect to view space
+
+    var transform = this.transform;
+
+    if (!style.transformText) {
+      if (transform) {
+        tmpRect.copy(rect);
+        tmpRect.applyTransform(transform);
+        rect = tmpRect;
+      }
+    } else {
+      this.setTransform(ctx);
+    } // transformText and textRotation can not be used at the same time.
+
+
+    textHelper.renderText(this, ctx, text, style, rect, WILL_BE_RESTORED);
+    ctx.restore();
+  }
+};
+var _default = RectText;
+module.exports = _default;

node_modules/zrender/lib/graphic/mixin/Stateful.js

@@ -0,0 +1,30 @@
+var States = require("../States");
+
+/**
+ * Stateful mixin for graphic object
+ */
+var Stateful = function (opts) {
+  if (opts.states) {
+    this.initStates(opts.states);
+  }
+};
+
+Stateful.prototype = {
+  initStates: function (states) {
+    this._states = new States({
+      el: this,
+      states: states
+    });
+  },
+  setState: function (name) {
+    this._states && this._states.setState(name);
+  },
+  getState: function () {
+    return this._states && this._states.getState();
+  },
+  transitionState: function (name, done) {
+    this._states && this._states.transitionState(name, done);
+  }
+};
+var _default = Stateful;
+module.exports = _default;

node_modules/zrender/lib/graphic/shape/Arc.js

@@ -0,0 +1,35 @@
+var Path = require("../Path");
+
+/**
+ * 圆弧
+ * @module zrender/graphic/shape/Arc
+ */
+var _default = Path.extend({
+  type: 'arc',
+  shape: {
+    cx: 0,
+    cy: 0,
+    r: 0,
+    startAngle: 0,
+    endAngle: Math.PI * 2,
+    clockwise: true
+  },
+  style: {
+    stroke: '#000',
+    fill: null
+  },
+  buildPath: function (ctx, shape) {
+    var x = shape.cx;
+    var y = shape.cy;
+    var r = Math.max(shape.r, 0);
+    var startAngle = shape.startAngle;
+    var endAngle = shape.endAngle;
+    var clockwise = shape.clockwise;
+    var unitX = Math.cos(startAngle);
+    var unitY = Math.sin(startAngle);
+    ctx.moveTo(unitX * r + x, unitY * r + y);
+    ctx.arc(x, y, r, startAngle, endAngle, !clockwise);
+  }
+});
+
+module.exports = _default;

node_modules/zrender/lib/graphic/shape/BezierCurve.js

@@ -0,0 +1,113 @@
+var Path = require("../Path");
+
+var vec2 = require("../../core/vector");
+
+var _curve = require("../../core/curve");
+
+var quadraticSubdivide = _curve.quadraticSubdivide;
+var cubicSubdivide = _curve.cubicSubdivide;
+var quadraticAt = _curve.quadraticAt;
+var cubicAt = _curve.cubicAt;
+var quadraticDerivativeAt = _curve.quadraticDerivativeAt;
+var cubicDerivativeAt = _curve.cubicDerivativeAt;
+
+/**
+ * 贝塞尔曲线
+ * @module zrender/shape/BezierCurve
+ */
+var out = [];
+
+function someVectorAt(shape, t, isTangent) {
+  var cpx2 = shape.cpx2;
+  var cpy2 = shape.cpy2;
+
+  if (cpx2 === null || cpy2 === null) {
+    return [(isTangent ? cubicDerivativeAt : cubicAt)(shape.x1, shape.cpx1, shape.cpx2, shape.x2, t), (isTangent ? cubicDerivativeAt : cubicAt)(shape.y1, shape.cpy1, shape.cpy2, shape.y2, t)];
+  } else {
+    return [(isTangent ? quadraticDerivativeAt : quadraticAt)(shape.x1, shape.cpx1, shape.x2, t), (isTangent ? quadraticDerivativeAt : quadraticAt)(shape.y1, shape.cpy1, shape.y2, t)];
+  }
+}
+
+var _default = Path.extend({
+  type: 'bezier-curve',
+  shape: {
+    x1: 0,
+    y1: 0,
+    x2: 0,
+    y2: 0,
+    cpx1: 0,
+    cpy1: 0,
+    // cpx2: 0,
+    // cpy2: 0
+    // Curve show percent, for animating
+    percent: 1
+  },
+  style: {
+    stroke: '#000',
+    fill: null
+  },
+  buildPath: function (ctx, shape) {
+    var x1 = shape.x1;
+    var y1 = shape.y1;
+    var x2 = shape.x2;
+    var y2 = shape.y2;
+    var cpx1 = shape.cpx1;
+    var cpy1 = shape.cpy1;
+    var cpx2 = shape.cpx2;
+    var cpy2 = shape.cpy2;
+    var percent = shape.percent;
+
+    if (percent === 0) {
+      return;
+    }
+
+    ctx.moveTo(x1, y1);
+
+    if (cpx2 == null || cpy2 == null) {
+      if (percent < 1) {
+        quadraticSubdivide(x1, cpx1, x2, percent, out);
+        cpx1 = out[1];
+        x2 = out[2];
+        quadraticSubdivide(y1, cpy1, y2, percent, out);
+        cpy1 = out[1];
+        y2 = out[2];
+      }
+
+      ctx.quadraticCurveTo(cpx1, cpy1, x2, y2);
+    } else {
+      if (percent < 1) {
+        cubicSubdivide(x1, cpx1, cpx2, x2, percent, out);
+        cpx1 = out[1];
+        cpx2 = out[2];
+        x2 = out[3];
+        cubicSubdivide(y1, cpy1, cpy2, y2, percent, out);
+        cpy1 = out[1];
+        cpy2 = out[2];
+        y2 = out[3];
+      }
+
+      ctx.bezierCurveTo(cpx1, cpy1, cpx2, cpy2, x2, y2);
+    }
+  },
+
+  /**
+   * Get point at percent
+   * @param  {number} t
+   * @return {Array.<number>}
+   */
+  pointAt: function (t) {
+    return someVectorAt(this.shape, t, false);
+  },
+
+  /**
+   * Get tangent at percent
+   * @param  {number} t
+   * @return {Array.<number>}
+   */
+  tangentAt: function (t) {
+    var p = someVectorAt(this.shape, t, true);
+    return vec2.normalize(p, p);
+  }
+});
+
+module.exports = _default;

node_modules/zrender/lib/graphic/shape/Circle.js

@@ -0,0 +1,32 @@
+var Path = require("../Path");
+
+/**
+ * 圆形
+ * @module zrender/shape/Circle
+ */
+var _default = Path.extend({
+  type: 'circle',
+  shape: {
+    cx: 0,
+    cy: 0,
+    r: 0
+  },
+  buildPath: function (ctx, shape, inBundle) {
+    // Better stroking in ShapeBundle
+    // Always do it may have performence issue ( fill may be 2x more cost)
+    if (inBundle) {
+      ctx.moveTo(shape.cx + shape.r, shape.cy);
+    } // else {
+    //     if (ctx.allocate && !ctx.data.length) {
+    //         ctx.allocate(ctx.CMD_MEM_SIZE.A);
+    //     }
+    // }
+    // Better stroking in ShapeBundle
+    // ctx.moveTo(shape.cx + shape.r, shape.cy);
+
+
+    ctx.arc(shape.cx, shape.cy, shape.r, 0, Math.PI * 2, true);
+  }
+});
+
+module.exports = _default;

node_modules/zrender/lib/graphic/shape/Droplet.js

@@ -0,0 +1,27 @@
+var Path = require("../Path");
+
+/**
+ * 水滴形状
+ * @module zrender/graphic/shape/Droplet
+ */
+var _default = Path.extend({
+  type: 'droplet',
+  shape: {
+    cx: 0,
+    cy: 0,
+    width: 0,
+    height: 0
+  },
+  buildPath: function (ctx, shape) {
+    var x = shape.cx;
+    var y = shape.cy;
+    var a = shape.width;
+    var b = shape.height;
+    ctx.moveTo(x, y + a);
+    ctx.bezierCurveTo(x + a, y + a, x + a * 3 / 2, y - a / 3, x, y - b);
+    ctx.bezierCurveTo(x - a * 3 / 2, y - a / 3, x - a, y + a, x, y + a);
+    ctx.closePath();
+  }
+});
+
+module.exports = _default;

node_modules/zrender/lib/graphic/shape/Ellipse.js

@@ -0,0 +1,35 @@
+var Path = require("../Path");
+
+/**
+ * 椭圆形状
+ * @module zrender/graphic/shape/Ellipse
+ */
+var _default = Path.extend({
+  type: 'ellipse',
+  shape: {
+    cx: 0,
+    cy: 0,
+    rx: 0,
+    ry: 0
+  },
+  buildPath: function (ctx, shape) {
+    var k = 0.5522848;
+    var x = shape.cx;
+    var y = shape.cy;
+    var a = shape.rx;
+    var b = shape.ry;
+    var ox = a * k; // 水平控制点偏移量
+
+    var oy = b * k; // 垂直控制点偏移量
+    // 从椭圆的左端点开始顺时针绘制四条三次贝塞尔曲线
+
+    ctx.moveTo(x - a, y);
+    ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b);
+    ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y);
+    ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b);
+    ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y);
+    ctx.closePath();
+  }
+});
+
+module.exports = _default;

node_modules/zrender/lib/graphic/shape/Heart.js

@@ -0,0 +1,26 @@
+var Path = require("../Path");
+
+/**
+ * 心形
+ * @module zrender/graphic/shape/Heart
+ */
+var _default = Path.extend({
+  type: 'heart',
+  shape: {
+    cx: 0,
+    cy: 0,
+    width: 0,
+    height: 0
+  },
+  buildPath: function (ctx, shape) {
+    var x = shape.cx;
+    var y = shape.cy;
+    var a = shape.width;
+    var b = shape.height;
+    ctx.moveTo(x, y);
+    ctx.bezierCurveTo(x + a / 2, y - b * 2 / 3, x + a * 2, y + b / 3, x, y + b);
+    ctx.bezierCurveTo(x - a * 2, y + b / 3, x - a / 2, y - b * 2 / 3, x, y);
+  }
+});
+
+module.exports = _default;

node_modules/zrender/lib/graphic/shape/Isogon.js

@@ -0,0 +1,43 @@
+var Path = require("../Path");
+
+/**
+ * 正多边形
+ * @module zrender/shape/Isogon
+ */
+var PI = Math.PI;
+var sin = Math.sin;
+var cos = Math.cos;
+
+var _default = Path.extend({
+  type: 'isogon',
+  shape: {
+    x: 0,
+    y: 0,
+    r: 0,
+    n: 0
+  },
+  buildPath: function (ctx, shape) {
+    var n = shape.n;
+
+    if (!n || n < 2) {
+      return;
+    }
+
+    var x = shape.x;
+    var y = shape.y;
+    var r = shape.r;
+    var dStep = 2 * PI / n;
+    var deg = -PI / 2;
+    ctx.moveTo(x + r * cos(deg), y + r * sin(deg));
+
+    for (var i = 0, end = n - 1; i < end; i++) {
+      deg += dStep;
+      ctx.lineTo(x + r * cos(deg), y + r * sin(deg));
+    }
+
+    ctx.closePath();
+    return;
+  }
+});
+
+module.exports = _default;

node_modules/zrender/lib/graphic/shape/Line.js

@@ -0,0 +1,75 @@
+var Path = require("../Path");
+
+var _subPixelOptimize = require("../helper/subPixelOptimize");
+
+var subPixelOptimizeLine = _subPixelOptimize.subPixelOptimizeLine;
+
+/**
+ * 直线
+ * @module zrender/graphic/shape/Line
+ */
+// Avoid create repeatly.
+var subPixelOptimizeOutputShape = {};
+
+var _default = Path.extend({
+  type: 'line',
+  shape: {
+    // Start point
+    x1: 0,
+    y1: 0,
+    // End point
+    x2: 0,
+    y2: 0,
+    percent: 1
+  },
+  style: {
+    stroke: '#000',
+    fill: null
+  },
+  buildPath: function (ctx, shape) {
+    var x1;
+    var y1;
+    var x2;
+    var y2;
+
+    if (this.subPixelOptimize) {
+      subPixelOptimizeLine(subPixelOptimizeOutputShape, shape, this.style);
+      x1 = subPixelOptimizeOutputShape.x1;
+      y1 = subPixelOptimizeOutputShape.y1;
+      x2 = subPixelOptimizeOutputShape.x2;
+      y2 = subPixelOptimizeOutputShape.y2;
+    } else {
+      x1 = shape.x1;
+      y1 = shape.y1;
+      x2 = shape.x2;
+      y2 = shape.y2;
+    }
+
+    var percent = shape.percent;
+
+    if (percent === 0) {
+      return;
+    }
+
+    ctx.moveTo(x1, y1);
+
+    if (percent < 1) {
+      x2 = x1 * (1 - percent) + x2 * percent;
+      y2 = y1 * (1 - percent) + y2 * percent;
+    }
+
+    ctx.lineTo(x2, y2);
+  },
+
+  /**
+   * Get point at percent
+   * @param  {number} percent
+   * @return {Array.<number>}
+   */
+  pointAt: function (p) {
+    var shape = this.shape;
+    return [shape.x1 * (1 - p) + shape.x2 * p, shape.y1 * (1 - p) + shape.y2 * p];
+  }
+});
+
+module.exports = _default;

node_modules/zrender/lib/graphic/shape/Polygon.js

@@ -0,0 +1,21 @@
+var Path = require("../Path");
+
+var polyHelper = require("../helper/poly");
+
+/**
+ * 多边形
+ * @module zrender/shape/Polygon
+ */
+var _default = Path.extend({
+  type: 'polygon',
+  shape: {
+    points: null,
+    smooth: false,
+    smoothConstraint: null
+  },
+  buildPath: function (ctx, shape) {
+    polyHelper.buildPath(ctx, shape, true);
+  }
+});
+
+module.exports = _default;

node_modules/zrender/lib/graphic/shape/Polyline.js

@@ -0,0 +1,24 @@
+var Path = require("../Path");
+
+var polyHelper = require("../helper/poly");
+
+/**
+ * @module zrender/graphic/shape/Polyline
+ */
+var _default = Path.extend({
+  type: 'polyline',
+  shape: {
+    points: null,
+    smooth: false,
+    smoothConstraint: null
+  },
+  style: {
+    stroke: '#000',
+    fill: null
+  },
+  buildPath: function (ctx, shape) {
+    polyHelper.buildPath(ctx, shape, false);
+  }
+});
+
+module.exports = _default;

node_modules/zrender/lib/graphic/shape/Rect.js

@@ -0,0 +1,62 @@
+var Path = require("../Path");
+
+var roundRectHelper = require("../helper/roundRect");
+
+var _subPixelOptimize = require("../helper/subPixelOptimize");
+
+var subPixelOptimizeRect = _subPixelOptimize.subPixelOptimizeRect;
+
+/**
+ * 矩形
+ * @module zrender/graphic/shape/Rect
+ */
+// Avoid create repeatly.
+var subPixelOptimizeOutputShape = {};
+
+var _default = Path.extend({
+  type: 'rect',
+  shape: {
+    // 左上、右上、右下、左下角的半径依次为r1、r2、r3、r4
+    // r缩写为1         相当于 [1, 1, 1, 1]
+    // r缩写为[1]       相当于 [1, 1, 1, 1]
+    // r缩写为[1, 2]    相当于 [1, 2, 1, 2]
+    // r缩写为[1, 2, 3] 相当于 [1, 2, 3, 2]
+    r: 0,
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0
+  },
+  buildPath: function (ctx, shape) {
+    var x;
+    var y;
+    var width;
+    var height;
+
+    if (this.subPixelOptimize) {
+      subPixelOptimizeRect(subPixelOptimizeOutputShape, shape, this.style);
+      x = subPixelOptimizeOutputShape.x;
+      y = subPixelOptimizeOutputShape.y;
+      width = subPixelOptimizeOutputShape.width;
+      height = subPixelOptimizeOutputShape.height;
+      subPixelOptimizeOutputShape.r = shape.r;
+      shape = subPixelOptimizeOutputShape;
+    } else {
+      x = shape.x;
+      y = shape.y;
+      width = shape.width;
+      height = shape.height;
+    }
+
+    if (!shape.r) {
+      ctx.rect(x, y, width, height);
+    } else {
+      roundRectHelper.buildPath(ctx, shape);
+    }
+
+    ctx.closePath();
+    return;
+  }
+});
+
+module.exports = _default;

node_modules/zrender/lib/graphic/shape/Ring.js

@@ -0,0 +1,26 @@
+var Path = require("../Path");
+
+/**
+ * 圆环
+ * @module zrender/graphic/shape/Ring
+ */
+var _default = Path.extend({
+  type: 'ring',
+  shape: {
+    cx: 0,
+    cy: 0,
+    r: 0,
+    r0: 0
+  },
+  buildPath: function (ctx, shape) {
+    var x = shape.cx;
+    var y = shape.cy;
+    var PI2 = Math.PI * 2;
+    ctx.moveTo(x + shape.r, y);
+    ctx.arc(x, y, shape.r, 0, PI2, false);
+    ctx.moveTo(x + shape.r0, y);
+    ctx.arc(x, y, shape.r0, 0, PI2, true);
+  }
+});
+
+module.exports = _default;

node_modules/zrender/lib/graphic/shape/Rose.js

@@ -0,0 +1,47 @@
+var Path = require("../Path");
+
+/**
+ * 玫瑰线
+ * @module zrender/graphic/shape/Rose
+ */
+var sin = Math.sin;
+var cos = Math.cos;
+var radian = Math.PI / 180;
+
+var _default = Path.extend({
+  type: 'rose',
+  shape: {
+    cx: 0,
+    cy: 0,
+    r: [],
+    k: 0,
+    n: 1
+  },
+  style: {
+    stroke: '#000',
+    fill: null
+  },
+  buildPath: function (ctx, shape) {
+    var x;
+    var y;
+    var R = shape.r;
+    var r;
+    var k = shape.k;
+    var n = shape.n;
+    var x0 = shape.cx;
+    var y0 = shape.cy;
+    ctx.moveTo(x0, y0);
+
+    for (var i = 0, len = R.length; i < len; i++) {
+      r = R[i];
+
+      for (var j = 0; j <= 360 * n; j++) {
+        x = r * sin(k / n * j % 360 * radian) * cos(j * radian) + x0;
+        y = r * sin(k / n * j % 360 * radian) * sin(j * radian) + y0;
+        ctx.lineTo(x, y);
+      }
+    }
+  }
+});
+
+module.exports = _default;

node_modules/zrender/lib/graphic/shape/Sector.js

@@ -0,0 +1,44 @@
+var Path = require("../Path");
+
+var fixClipWithShadow = require("../helper/fixClipWithShadow");
+
+/**
+ * 扇形
+ * @module zrender/graphic/shape/Sector
+ */
+var _default = Path.extend({
+  type: 'sector',
+  shape: {
+    cx: 0,
+    cy: 0,
+    r0: 0,
+    r: 0,
+    startAngle: 0,
+    endAngle: Math.PI * 2,
+    clockwise: true
+  },
+  brush: fixClipWithShadow(Path.prototype.brush),
+  buildPath: function (ctx, shape) {
+    var x = shape.cx;
+    var y = shape.cy;
+    var r0 = Math.max(shape.r0 || 0, 0);
+    var r = Math.max(shape.r, 0);
+    var startAngle = shape.startAngle;
+    var endAngle = shape.endAngle;
+    var clockwise = shape.clockwise;
+    var unitX = Math.cos(startAngle);
+    var unitY = Math.sin(startAngle);
+    ctx.moveTo(unitX * r0 + x, unitY * r0 + y);
+    ctx.lineTo(unitX * r + x, unitY * r + y);
+    ctx.arc(x, y, r, startAngle, endAngle, !clockwise);
+    ctx.lineTo(Math.cos(endAngle) * r0 + x, Math.sin(endAngle) * r0 + y);
+
+    if (r0 !== 0) {
+      ctx.arc(x, y, r0, endAngle, startAngle, clockwise);
+    }
+
+    ctx.closePath();
+  }
+});
+
+module.exports = _default;

node_modules/zrender/lib/graphic/shape/Star.js

@@ -0,0 +1,57 @@
+var Path = require("../Path");
+
+/**
+ * n角星（n>3）
+ * @module zrender/graphic/shape/Star
+ */
+var PI = Math.PI;
+var cos = Math.cos;
+var sin = Math.sin;
+
+var _default = Path.extend({
+  type: 'star',
+  shape: {
+    cx: 0,
+    cy: 0,
+    n: 3,
+    r0: null,
+    r: 0
+  },
+  buildPath: function (ctx, shape) {
+    var n = shape.n;
+
+    if (!n || n < 2) {
+      return;
+    }
+
+    var x = shape.cx;
+    var y = shape.cy;
+    var r = shape.r;
+    var r0 = shape.r0; // 如果未指定内部顶点外接圆半径，则自动计算
+
+    if (r0 == null) {
+      r0 = n > 4 // 相隔的外部顶点的连线的交点，
+      // 被取为内部交点，以此计算r0
+      ? r * cos(2 * PI / n) / cos(PI / n) // 二三四角星的特殊处理
+      : r / 3;
+    }
+
+    var dStep = PI / n;
+    var deg = -PI / 2;
+    var xStart = x + r * cos(deg);
+    var yStart = y + r * sin(deg);
+    deg += dStep; // 记录边界点，用于判断inside
+
+    ctx.moveTo(xStart, yStart);
+
+    for (var i = 0, end = n * 2 - 1, ri; i < end; i++) {
+      ri = i % 2 === 0 ? r0 : r;
+      ctx.lineTo(x + ri * cos(deg), y + ri * sin(deg));
+      deg += dStep;
+    }
+
+    ctx.closePath();
+  }
+});
+
+module.exports = _default;

node_modules/zrender/lib/graphic/shape/Trochoid.js

@@ -0,0 +1,61 @@
+var Path = require("../Path");
+
+/**
+ * 内外旋轮曲线
+ * @module zrender/graphic/shape/Trochold
+ */
+var cos = Math.cos;
+var sin = Math.sin;
+
+var _default = Path.extend({
+  type: 'trochoid',
+  shape: {
+    cx: 0,
+    cy: 0,
+    r: 0,
+    r0: 0,
+    d: 0,
+    location: 'out'
+  },
+  style: {
+    stroke: '#000',
+    fill: null
+  },
+  buildPath: function (ctx, shape) {
+    var x1;
+    var y1;
+    var x2;
+    var y2;
+    var R = shape.r;
+    var r = shape.r0;
+    var d = shape.d;
+    var offsetX = shape.cx;
+    var offsetY = shape.cy;
+    var delta = shape.location === 'out' ? 1 : -1;
+
+    if (shape.location && R <= r) {
+      return;
+    }
+
+    var num = 0;
+    var i = 1;
+    var theta;
+    x1 = (R + delta * r) * cos(0) - delta * d * cos(0) + offsetX;
+    y1 = (R + delta * r) * sin(0) - d * sin(0) + offsetY;
+    ctx.moveTo(x1, y1); // 计算结束时的i
+
+    do {
+      num++;
+    } while (r * num % (R + delta * r) !== 0);
+
+    do {
+      theta = Math.PI / 180 * i;
+      x2 = (R + delta * r) * cos(theta) - delta * d * cos((R / r + delta) * theta) + offsetX;
+      y2 = (R + delta * r) * sin(theta) - d * sin((R / r + delta) * theta) + offsetY;
+      ctx.lineTo(x2, y2);
+      i++;
+    } while (i <= r * num / (R + delta * r) * 360);
+  }
+});
+
+module.exports = _default;