q2-tecton-elements 1.21.1 → 1.22.0

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

@@ -0,0 +1,4887 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { o as overrideFocus, l as loc, i as isEventFromElement } from './index13.js';
+import { d as defineCustomElement$3 } from './index2.js';
+import { d as defineCustomElement$2 } from './index7.js';
+import { aG as normalizeCssArray, Z as Rect, _ as __extends, w as ComponentModel, aH as toCamelCase, aI as env, aJ as normalizeEvent, aK as convertToColorString, ai as isString, j as isArray, aL as isDom, e as each$1, aM as bind, P as indexOf, aN as getPaddingFromTooltipModel, aO as transformLocalCoord, N as isObject, aP as throwError, ab as ZRText, aQ as getTooltipRenderMode, aR as createOrUpdate, aS as clear, aT as register, ae as getECData, aU as findPointFromSeries, aV as findEventDispatcher, aW as createTooltipMarkup, aX as getValueLabel, aY as trim, aZ as getAxisRawValue, a_ as normalizeTooltipFormatResult, a$ as buildTooltipMarkup, b0 as clone, b1 as format, b2 as formatTpl, i as isFunction, b3 as parsePercent, L as getLayoutRect, b4 as unregister, a7 as ComponentView, b5 as Model, b6 as preParseFinder, b7 as queryReferringComponents, b8 as TooltipMarkupStyleCreator, a2 as extend, a8 as use, a9 as install$5, b9 as noop, y as merge, ba as isNameSpecified, c as createHashMap, g as map, E as filter, an as isNumber, z as defaults, bb as parse, bc as stringify, av as setLabelStyle, bd as enableHoverEmphasis, ac as createTextStyle, be as setTooltipConfig, bf as box, bg as createOrUpdatePatternFromDecal, bh as createSymbol, b as curry$1, $ as Group$2, A as getLayoutParams, ak as inheritDefaultOption, B as mergeLayoutParam, bi as createIcon, aa as retrieve2, ap as updateProps, u as linearMap, bj as Point, bk as limitTurnAngle, bl as limitSurfaceAngle, bm as shiftLayoutOnY, bn as parsePercent$1, ag as initProps, aq as saveOldStyle, ay as setStatesStylesFromModel, ax as toggleHoverEmphasis, au as getLabelStatesModels, bo as Polyline, bp as setLabelLineStyle, bq as retrieve3, br as getLabelLineStatesModels, ah as Sector, as as removeElementWithFadeOut, at as ChartView, p as prepareSeriesDataSchema, f as SeriesData, n as makeInner, bs as makeSeriesEncodeForNameBased, bt as getPercentSeats, bu as defaultEmphasis, aj as SeriesModel, bv as createLegacyDataSelectAction, aD as install$6, aC as install$7, aE as installLabelLayout, aF as init } from './installCanvasRenderer.js';
+
+function makeBackground(rect, componentModel) {
+  var padding = normalizeCssArray(componentModel.get('padding'));
+  var style = componentModel.getItemStyle(['color', 'opacity']);
+  style.fill = componentModel.get('backgroundColor');
+  rect = new Rect({
+    shape: {
+      x: rect.x - padding[3],
+      y: rect.y - padding[0],
+      width: rect.width + padding[1] + padding[3],
+      height: rect.height + padding[0] + padding[2],
+      r: componentModel.get('borderRadius')
+    },
+    style: style,
+    silent: true,
+    z2: -1
+  }); // FIXME
+  // `subPixelOptimizeRect` may bring some gap between edge of viewpart
+  // and background rect when setting like `left: 0`, `top: 0`.
+  // graphic.subPixelOptimizeRect(rect);
+
+  return rect;
+}
+
+var TooltipModel =
+/** @class */
+function (_super) {
+  __extends(TooltipModel, _super);
+
+  function TooltipModel() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.type = TooltipModel.type;
+    return _this;
+  }
+
+  TooltipModel.type = 'tooltip';
+  TooltipModel.dependencies = ['axisPointer'];
+  TooltipModel.defaultOption = {
+    // zlevel: 0,
+    z: 60,
+    show: true,
+    // tooltip main content
+    showContent: true,
+    // 'trigger' only works on coordinate system.
+    // 'item' | 'axis' | 'none'
+    trigger: 'item',
+    // 'click' | 'mousemove' | 'none'
+    triggerOn: 'mousemove|click',
+    alwaysShowContent: false,
+    displayMode: 'single',
+    renderMode: 'auto',
+    // whether restraint content inside viewRect.
+    // If renderMode: 'richText', default true.
+    // If renderMode: 'html', defaut false (for backward compat).
+    confine: null,
+    showDelay: 0,
+    hideDelay: 100,
+    // Animation transition time, unit is second
+    transitionDuration: 0.4,
+    enterable: false,
+    backgroundColor: '#fff',
+    // box shadow
+    shadowBlur: 10,
+    shadowColor: 'rgba(0, 0, 0, .2)',
+    shadowOffsetX: 1,
+    shadowOffsetY: 2,
+    // tooltip border radius, unit is px, default is 4
+    borderRadius: 4,
+    // tooltip border width, unit is px, default is 0 (no border)
+    borderWidth: 1,
+    // Tooltip inside padding, default is 5 for all direction
+    // Array is allowed to set up, right, bottom, left, same with css
+    // The default value: See `tooltip/tooltipMarkup.ts#getPaddingFromTooltipModel`.
+    padding: null,
+    // Extra css text
+    extraCssText: '',
+    // axis indicator, trigger by axis
+    axisPointer: {
+      // default is line
+      // legal values: 'line' | 'shadow' | 'cross'
+      type: 'line',
+      // Valid when type is line, appoint tooltip line locate on which line. Optional
+      // legal values: 'x' | 'y' | 'angle' | 'radius' | 'auto'
+      // default is 'auto', chose the axis which type is category.
+      // for multiply y axis, cartesian coord chose x axis, polar chose angle axis
+      axis: 'auto',
+      animation: 'auto',
+      animationDurationUpdate: 200,
+      animationEasingUpdate: 'exponentialOut',
+      crossStyle: {
+        color: '#999',
+        width: 1,
+        type: 'dashed',
+        // TODO formatter
+        textStyle: {}
+      } // lineStyle and shadowStyle should not be specified here,
+      // otherwise it will always override those styles on option.axisPointer.
+
+    },
+    textStyle: {
+      color: '#666',
+      fontSize: 14
+    }
+  };
+  return TooltipModel;
+}(ComponentModel);
+
+/* global document */
+
+function shouldTooltipConfine(tooltipModel) {
+  var confineOption = tooltipModel.get('confine');
+  return confineOption != null ? !!confineOption // In richText mode, the outside part can not be visible.
+  : tooltipModel.get('renderMode') === 'richText';
+}
+
+function testStyle(styleProps) {
+  if (!env.domSupported) {
+    return;
+  }
+
+  var style = document.documentElement.style;
+
+  for (var i = 0, len = styleProps.length; i < len; i++) {
+    if (styleProps[i] in style) {
+      return styleProps[i];
+    }
+  }
+}
+
+var TRANSFORM_VENDOR = testStyle(['transform', 'webkitTransform', 'OTransform', 'MozTransform', 'msTransform']);
+var TRANSITION_VENDOR = testStyle(['webkitTransition', 'transition', 'OTransition', 'MozTransition', 'msTransition']);
+function toCSSVendorPrefix(styleVendor, styleProp) {
+  if (!styleVendor) {
+    return styleProp;
+  }
+
+  styleProp = toCamelCase(styleProp, true);
+  var idx = styleVendor.indexOf(styleProp);
+  styleVendor = idx === -1 ? styleProp : "-" + styleVendor.slice(0, idx) + "-" + styleProp;
+  return styleVendor.toLowerCase();
+}
+function getComputedStyle$1(el, style) {
+  var stl = el.currentStyle || document.defaultView && document.defaultView.getComputedStyle(el);
+  return stl ? style ? stl[style] : stl : null;
+}
+
+/* global document, window */
+
+var CSS_TRANSITION_VENDOR = toCSSVendorPrefix(TRANSITION_VENDOR, 'transition');
+var CSS_TRANSFORM_VENDOR = toCSSVendorPrefix(TRANSFORM_VENDOR, 'transform'); // eslint-disable-next-line
+
+var gCssText = "position:absolute;display:block;border-style:solid;white-space:nowrap;z-index:9999999;" + (env.transform3dSupported ? 'will-change:transform;' : '');
+
+function mirrorPos(pos) {
+  pos = pos === 'left' ? 'right' : pos === 'right' ? 'left' : pos === 'top' ? 'bottom' : 'top';
+  return pos;
+}
+
+function assembleArrow(tooltipModel, borderColor, arrowPosition) {
+  if (!isString(arrowPosition) || arrowPosition === 'inside') {
+    return '';
+  }
+
+  var backgroundColor = tooltipModel.get('backgroundColor');
+  var borderWidth = tooltipModel.get('borderWidth');
+  borderColor = convertToColorString(borderColor);
+  var arrowPos = mirrorPos(arrowPosition);
+  var arrowSize = Math.max(Math.round(borderWidth) * 1.5, 6);
+  var positionStyle = '';
+  var transformStyle = CSS_TRANSFORM_VENDOR + ':';
+  var rotateDeg;
+
+  if (indexOf(['left', 'right'], arrowPos) > -1) {
+    positionStyle += 'top:50%';
+    transformStyle += "translateY(-50%) rotate(" + (rotateDeg = arrowPos === 'left' ? -225 : -45) + "deg)";
+  } else {
+    positionStyle += 'left:50%';
+    transformStyle += "translateX(-50%) rotate(" + (rotateDeg = arrowPos === 'top' ? 225 : 45) + "deg)";
+  }
+
+  var rotateRadian = rotateDeg * Math.PI / 180;
+  var arrowWH = arrowSize + borderWidth;
+  var rotatedWH = arrowWH * Math.abs(Math.cos(rotateRadian)) + arrowWH * Math.abs(Math.sin(rotateRadian));
+  var arrowOffset = Math.round(((rotatedWH - Math.SQRT2 * borderWidth) / 2 + Math.SQRT2 * borderWidth - (rotatedWH - arrowWH) / 2) * 100) / 100;
+  positionStyle += ";" + arrowPos + ":-" + arrowOffset + "px";
+  var borderStyle = borderColor + " solid " + borderWidth + "px;";
+  var styleCss = ["position:absolute;width:" + arrowSize + "px;height:" + arrowSize + "px;z-index:-1;", positionStyle + ";" + transformStyle + ";", "border-bottom:" + borderStyle, "border-right:" + borderStyle, "background-color:" + backgroundColor + ";"];
+  return "<div style=\"" + styleCss.join('') + "\"></div>";
+}
+
+function assembleTransition(duration, onlyFade) {
+  var transitionCurve = 'cubic-bezier(0.23,1,0.32,1)';
+  var transitionOption = " " + duration / 2 + "s " + transitionCurve;
+  var transitionText = "opacity" + transitionOption + ",visibility" + transitionOption;
+
+  if (!onlyFade) {
+    transitionOption = " " + duration + "s " + transitionCurve;
+    transitionText += env.transformSupported ? "," + CSS_TRANSFORM_VENDOR + transitionOption : ",left" + transitionOption + ",top" + transitionOption;
+  }
+
+  return CSS_TRANSITION_VENDOR + ':' + transitionText;
+}
+
+function assembleTransform(x, y, toString) {
+  // If using float on style, the final width of the dom might
+  // keep changing slightly while mouse move. So `toFixed(0)` them.
+  var x0 = x.toFixed(0) + 'px';
+  var y0 = y.toFixed(0) + 'px'; // not support transform, use `left` and `top` instead.
+
+  if (!env.transformSupported) {
+    return toString ? "top:" + y0 + ";left:" + x0 + ";" : [['top', y0], ['left', x0]];
+  } // support transform
+
+
+  var is3d = env.transform3dSupported;
+  var translate = "translate" + (is3d ? '3d' : '') + "(" + x0 + "," + y0 + (is3d ? ',0' : '') + ")";
+  return toString ? 'top:0;left:0;' + CSS_TRANSFORM_VENDOR + ':' + translate + ';' : [['top', 0], ['left', 0], [TRANSFORM_VENDOR, translate]];
+}
+/**
+ * @param {Object} textStyle
+ * @return {string}
+ * @inner
+ */
+
+
+function assembleFont(textStyleModel) {
+  var cssText = [];
+  var fontSize = textStyleModel.get('fontSize');
+  var color = textStyleModel.getTextColor();
+  color && cssText.push('color:' + color);
+  cssText.push('font:' + textStyleModel.getFont());
+  fontSize // @ts-ignore, leave it to the tooltip refactor.
+  && cssText.push('line-height:' + Math.round(fontSize * 3 / 2) + 'px');
+  var shadowColor = textStyleModel.get('textShadowColor');
+  var shadowBlur = textStyleModel.get('textShadowBlur') || 0;
+  var shadowOffsetX = textStyleModel.get('textShadowOffsetX') || 0;
+  var shadowOffsetY = textStyleModel.get('textShadowOffsetY') || 0;
+  shadowColor && shadowBlur && cssText.push('text-shadow:' + shadowOffsetX + 'px ' + shadowOffsetY + 'px ' + shadowBlur + 'px ' + shadowColor);
+  each$1(['decoration', 'align'], function (name) {
+    var val = textStyleModel.get(name);
+    val && cssText.push('text-' + name + ':' + val);
+  });
+  return cssText.join(';');
+}
+
+function assembleCssText(tooltipModel, enableTransition, onlyFade) {
+  var cssText = [];
+  var transitionDuration = tooltipModel.get('transitionDuration');
+  var backgroundColor = tooltipModel.get('backgroundColor');
+  var shadowBlur = tooltipModel.get('shadowBlur');
+  var shadowColor = tooltipModel.get('shadowColor');
+  var shadowOffsetX = tooltipModel.get('shadowOffsetX');
+  var shadowOffsetY = tooltipModel.get('shadowOffsetY');
+  var textStyleModel = tooltipModel.getModel('textStyle');
+  var padding = getPaddingFromTooltipModel(tooltipModel, 'html');
+  var boxShadow = shadowOffsetX + "px " + shadowOffsetY + "px " + shadowBlur + "px " + shadowColor;
+  cssText.push('box-shadow:' + boxShadow); // Animation transition. Do not animate when transitionDuration is 0.
+
+  enableTransition && transitionDuration && cssText.push(assembleTransition(transitionDuration, onlyFade));
+
+  if (backgroundColor) {
+    cssText.push('background-color:' + backgroundColor);
+  } // Border style
+
+
+  each$1(['width', 'color', 'radius'], function (name) {
+    var borderName = 'border-' + name;
+    var camelCase = toCamelCase(borderName);
+    var val = tooltipModel.get(camelCase);
+    val != null && cssText.push(borderName + ':' + val + (name === 'color' ? '' : 'px'));
+  }); // Text style
+
+  cssText.push(assembleFont(textStyleModel)); // Padding
+
+  if (padding != null) {
+    cssText.push('padding:' + normalizeCssArray(padding).join('px ') + 'px');
+  }
+
+  return cssText.join(';') + ';';
+} // If not able to make, do not modify the input `out`.
+
+
+function makeStyleCoord$1(out, zr, appendToBody, zrX, zrY) {
+  var zrPainter = zr && zr.painter;
+
+  if (appendToBody) {
+    var zrViewportRoot = zrPainter && zrPainter.getViewportRoot();
+
+    if (zrViewportRoot) {
+      // Some APPs might use scale on body, so we support CSS transform here.
+      transformLocalCoord(out, zrViewportRoot, document.body, zrX, zrY);
+    }
+  } else {
+    out[0] = zrX;
+    out[1] = zrY; // xy should be based on canvas root. But tooltipContent is
+    // the sibling of canvas root. So padding of ec container
+    // should be considered here.
+
+    var viewportRootOffset = zrPainter && zrPainter.getViewportRootOffset();
+
+    if (viewportRootOffset) {
+      out[0] += viewportRootOffset.offsetLeft;
+      out[1] += viewportRootOffset.offsetTop;
+    }
+  }
+
+  out[2] = out[0] / zr.getWidth();
+  out[3] = out[1] / zr.getHeight();
+}
+
+var TooltipHTMLContent =
+/** @class */
+function () {
+  function TooltipHTMLContent(container, api, opt) {
+    this._show = false;
+    this._styleCoord = [0, 0, 0, 0];
+    this._enterable = true;
+    this._firstShow = true;
+    this._longHide = true;
+
+    if (env.wxa) {
+      return null;
+    }
+
+    var el = document.createElement('div'); // TODO: TYPE
+
+    el.domBelongToZr = true;
+    this.el = el;
+    var zr = this._zr = api.getZr();
+    var appendToBody = this._appendToBody = opt && opt.appendToBody;
+    makeStyleCoord$1(this._styleCoord, zr, appendToBody, api.getWidth() / 2, api.getHeight() / 2);
+
+    if (appendToBody) {
+      document.body.appendChild(el);
+    } else {
+      container.appendChild(el);
+    }
+
+    this._container = container; // FIXME
+    // Is it needed to trigger zr event manually if
+    // the browser do not support `pointer-events: none`.
+
+    var self = this;
+
+    el.onmouseenter = function () {
+      // clear the timeout in hideLater and keep showing tooltip
+      if (self._enterable) {
+        clearTimeout(self._hideTimeout);
+        self._show = true;
+      }
+
+      self._inContent = true;
+    };
+
+    el.onmousemove = function (e) {
+      e = e || window.event;
+
+      if (!self._enterable) {
+        // `pointer-events: none` is set to tooltip content div
+        // if `enterable` is set as `false`, and `el.onmousemove`
+        // can not be triggered. But in browser that do not
+        // support `pointer-events`, we need to do this:
+        // Try trigger zrender event to avoid mouse
+        // in and out shape too frequently
+        var handler = zr.handler;
+        var zrViewportRoot = zr.painter.getViewportRoot();
+        normalizeEvent(zrViewportRoot, e, true);
+        handler.dispatch('mousemove', e);
+      }
+    };
+
+    el.onmouseleave = function () {
+      // set `_inContent` to `false` before `hideLater`
+      self._inContent = false;
+
+      if (self._enterable) {
+        if (self._show) {
+          self.hideLater(self._hideDelay);
+        }
+      }
+    };
+  }
+  /**
+   * Update when tooltip is rendered
+   */
+
+
+  TooltipHTMLContent.prototype.update = function (tooltipModel) {
+    // FIXME
+    // Move this logic to ec main?
+    var container = this._container;
+    var position = getComputedStyle$1(container, 'position');
+    var domStyle = container.style;
+
+    if (domStyle.position !== 'absolute' && position !== 'absolute') {
+      domStyle.position = 'relative';
+    } // move tooltip if chart resized
+
+
+    var alwaysShowContent = tooltipModel.get('alwaysShowContent');
+    alwaysShowContent && this._moveIfResized(); // update className
+
+    this.el.className = tooltipModel.get('className') || ''; // Hide the tooltip
+    // PENDING
+    // this.hide();
+  };
+
+  TooltipHTMLContent.prototype.show = function (tooltipModel, nearPointColor) {
+    clearTimeout(this._hideTimeout);
+    clearTimeout(this._longHideTimeout);
+    var el = this.el;
+    var style = el.style;
+    var styleCoord = this._styleCoord;
+
+    if (!el.innerHTML) {
+      style.display = 'none';
+    } else {
+      style.cssText = gCssText + assembleCssText(tooltipModel, !this._firstShow, this._longHide) // initial transform
+      + assembleTransform(styleCoord[0], styleCoord[1], true) + ("border-color:" + convertToColorString(nearPointColor) + ";") + (tooltipModel.get('extraCssText') || '') // If mouse occasionally move over the tooltip, a mouseout event will be
+      // triggered by canvas, and cause some unexpectable result like dragging
+      // stop, "unfocusAdjacency". Here `pointer-events: none` is used to solve
+      // it. Although it is not supported by IE8~IE10, fortunately it is a rare
+      // scenario.
+      + (";pointer-events:" + (this._enterable ? 'auto' : 'none'));
+    }
+
+    this._show = true;
+    this._firstShow = false;
+    this._longHide = false;
+  };
+
+  TooltipHTMLContent.prototype.setContent = function (content, markers, tooltipModel, borderColor, arrowPosition) {
+    var el = this.el;
+
+    if (content == null) {
+      el.innerHTML = '';
+      return;
+    }
+
+    var arrow = '';
+
+    if (isString(arrowPosition) && tooltipModel.get('trigger') === 'item' && !shouldTooltipConfine(tooltipModel)) {
+      arrow = assembleArrow(tooltipModel, borderColor, arrowPosition);
+    }
+
+    if (isString(content)) {
+      el.innerHTML = content + arrow;
+    } else if (content) {
+      // Clear previous
+      el.innerHTML = '';
+
+      if (!isArray(content)) {
+        content = [content];
+      }
+
+      for (var i = 0; i < content.length; i++) {
+        if (isDom(content[i]) && content[i].parentNode !== el) {
+          el.appendChild(content[i]);
+        }
+      } // no arrow if empty
+
+
+      if (arrow && el.childNodes.length) {
+        // no need to create a new parent element, but it's not supported by IE 10 and older.
+        // const arrowEl = document.createRange().createContextualFragment(arrow);
+        var arrowEl = document.createElement('div');
+        arrowEl.innerHTML = arrow;
+        el.appendChild(arrowEl);
+      }
+    }
+  };
+
+  TooltipHTMLContent.prototype.setEnterable = function (enterable) {
+    this._enterable = enterable;
+  };
+
+  TooltipHTMLContent.prototype.getSize = function () {
+    var el = this.el;
+    return [el.offsetWidth, el.offsetHeight];
+  };
+
+  TooltipHTMLContent.prototype.moveTo = function (zrX, zrY) {
+    var styleCoord = this._styleCoord;
+    makeStyleCoord$1(styleCoord, this._zr, this._appendToBody, zrX, zrY);
+
+    if (styleCoord[0] != null && styleCoord[1] != null) {
+      var style_1 = this.el.style;
+      var transforms = assembleTransform(styleCoord[0], styleCoord[1]);
+      each$1(transforms, function (transform) {
+        style_1[transform[0]] = transform[1];
+      });
+    }
+  };
+  /**
+   * when `alwaysShowContent` is true,
+   * move the tooltip after chart resized
+   */
+
+
+  TooltipHTMLContent.prototype._moveIfResized = function () {
+    // The ratio of left to width
+    var ratioX = this._styleCoord[2]; // The ratio of top to height
+
+    var ratioY = this._styleCoord[3];
+    this.moveTo(ratioX * this._zr.getWidth(), ratioY * this._zr.getHeight());
+  };
+
+  TooltipHTMLContent.prototype.hide = function () {
+    var _this = this;
+
+    var style = this.el.style;
+    style.visibility = 'hidden';
+    style.opacity = '0';
+    env.transform3dSupported && (style.willChange = '');
+    this._show = false;
+    this._longHideTimeout = setTimeout(function () {
+      return _this._longHide = true;
+    }, 500);
+  };
+
+  TooltipHTMLContent.prototype.hideLater = function (time) {
+    if (this._show && !(this._inContent && this._enterable)) {
+      if (time) {
+        this._hideDelay = time; // Set show false to avoid invoke hideLater multiple times
+
+        this._show = false;
+        this._hideTimeout = setTimeout(bind(this.hide, this), time);
+      } else {
+        this.hide();
+      }
+    }
+  };
+
+  TooltipHTMLContent.prototype.isShow = function () {
+    return this._show;
+  };
+
+  TooltipHTMLContent.prototype.dispose = function () {
+    this.el.parentNode.removeChild(this.el);
+  };
+
+  return TooltipHTMLContent;
+}();
+
+var TooltipRichContent =
+/** @class */
+function () {
+  function TooltipRichContent(api) {
+    this._show = false;
+    this._styleCoord = [0, 0, 0, 0];
+    this._enterable = true;
+    this._zr = api.getZr();
+    makeStyleCoord(this._styleCoord, this._zr, api.getWidth() / 2, api.getHeight() / 2);
+  }
+  /**
+   * Update when tooltip is rendered
+   */
+
+
+  TooltipRichContent.prototype.update = function (tooltipModel) {
+    var alwaysShowContent = tooltipModel.get('alwaysShowContent');
+    alwaysShowContent && this._moveIfResized();
+  };
+
+  TooltipRichContent.prototype.show = function () {
+    if (this._hideTimeout) {
+      clearTimeout(this._hideTimeout);
+    }
+
+    this.el.show();
+    this._show = true;
+  };
+  /**
+   * Set tooltip content
+   */
+
+
+  TooltipRichContent.prototype.setContent = function (content, markupStyleCreator, tooltipModel, borderColor, arrowPosition) {
+    var _this = this;
+
+    if (isObject(content)) {
+      throwError('');
+    }
+
+    if (this.el) {
+      this._zr.remove(this.el);
+    }
+
+    var textStyleModel = tooltipModel.getModel('textStyle');
+    this.el = new ZRText({
+      style: {
+        rich: markupStyleCreator.richTextStyles,
+        text: content,
+        lineHeight: 22,
+        borderWidth: 1,
+        borderColor: borderColor,
+        textShadowColor: textStyleModel.get('textShadowColor'),
+        fill: tooltipModel.get(['textStyle', 'color']),
+        padding: getPaddingFromTooltipModel(tooltipModel, 'richText'),
+        verticalAlign: 'top',
+        align: 'left'
+      },
+      z: tooltipModel.get('z')
+    });
+    each$1(['backgroundColor', 'borderRadius', 'shadowColor', 'shadowBlur', 'shadowOffsetX', 'shadowOffsetY'], function (propName) {
+      _this.el.style[propName] = tooltipModel.get(propName);
+    });
+    each$1(['textShadowBlur', 'textShadowOffsetX', 'textShadowOffsetY'], function (propName) {
+      _this.el.style[propName] = textStyleModel.get(propName) || 0;
+    });
+
+    this._zr.add(this.el);
+
+    var self = this;
+    this.el.on('mouseover', function () {
+      // clear the timeout in hideLater and keep showing tooltip
+      if (self._enterable) {
+        clearTimeout(self._hideTimeout);
+        self._show = true;
+      }
+
+      self._inContent = true;
+    });
+    this.el.on('mouseout', function () {
+      if (self._enterable) {
+        if (self._show) {
+          self.hideLater(self._hideDelay);
+        }
+      }
+
+      self._inContent = false;
+    });
+  };
+
+  TooltipRichContent.prototype.setEnterable = function (enterable) {
+    this._enterable = enterable;
+  };
+
+  TooltipRichContent.prototype.getSize = function () {
+    var el = this.el;
+    var bounding = this.el.getBoundingRect(); // bounding rect does not include shadow. For renderMode richText,
+    // if overflow, it will be cut. So calculate them accurately.
+
+    var shadowOuterSize = calcShadowOuterSize(el.style);
+    return [bounding.width + shadowOuterSize.left + shadowOuterSize.right, bounding.height + shadowOuterSize.top + shadowOuterSize.bottom];
+  };
+
+  TooltipRichContent.prototype.moveTo = function (x, y) {
+    var el = this.el;
+
+    if (el) {
+      var styleCoord = this._styleCoord;
+      makeStyleCoord(styleCoord, this._zr, x, y);
+      x = styleCoord[0];
+      y = styleCoord[1];
+      var style = el.style;
+      var borderWidth = mathMaxWith0(style.borderWidth || 0);
+      var shadowOuterSize = calcShadowOuterSize(style); // rich text x, y do not include border.
+
+      el.x = x + borderWidth + shadowOuterSize.left;
+      el.y = y + borderWidth + shadowOuterSize.top;
+      el.markRedraw();
+    }
+  };
+  /**
+   * when `alwaysShowContent` is true,
+   * move the tooltip after chart resized
+   */
+
+
+  TooltipRichContent.prototype._moveIfResized = function () {
+    // The ratio of left to width
+    var ratioX = this._styleCoord[2]; // The ratio of top to height
+
+    var ratioY = this._styleCoord[3];
+    this.moveTo(ratioX * this._zr.getWidth(), ratioY * this._zr.getHeight());
+  };
+
+  TooltipRichContent.prototype.hide = function () {
+    if (this.el) {
+      this.el.hide();
+    }
+
+    this._show = false;
+  };
+
+  TooltipRichContent.prototype.hideLater = function (time) {
+    if (this._show && !(this._inContent && this._enterable)) {
+      if (time) {
+        this._hideDelay = time; // Set show false to avoid invoke hideLater multiple times
+
+        this._show = false;
+        this._hideTimeout = setTimeout(bind(this.hide, this), time);
+      } else {
+        this.hide();
+      }
+    }
+  };
+
+  TooltipRichContent.prototype.isShow = function () {
+    return this._show;
+  };
+
+  TooltipRichContent.prototype.dispose = function () {
+    this._zr.remove(this.el);
+  };
+
+  return TooltipRichContent;
+}();
+
+function mathMaxWith0(val) {
+  return Math.max(0, val);
+}
+
+function calcShadowOuterSize(style) {
+  var shadowBlur = mathMaxWith0(style.shadowBlur || 0);
+  var shadowOffsetX = mathMaxWith0(style.shadowOffsetX || 0);
+  var shadowOffsetY = mathMaxWith0(style.shadowOffsetY || 0);
+  return {
+    left: mathMaxWith0(shadowBlur - shadowOffsetX),
+    right: mathMaxWith0(shadowBlur + shadowOffsetX),
+    top: mathMaxWith0(shadowBlur - shadowOffsetY),
+    bottom: mathMaxWith0(shadowBlur + shadowOffsetY)
+  };
+}
+
+function makeStyleCoord(out, zr, zrX, zrY) {
+  out[0] = zrX;
+  out[1] = zrY;
+  out[2] = out[0] / zr.getWidth();
+  out[3] = out[1] / zr.getHeight();
+}
+
+var proxyRect = new Rect({
+  shape: {
+    x: -1,
+    y: -1,
+    width: 2,
+    height: 2
+  }
+});
+
+var TooltipView =
+/** @class */
+function (_super) {
+  __extends(TooltipView, _super);
+
+  function TooltipView() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.type = TooltipView.type;
+    return _this;
+  }
+
+  TooltipView.prototype.init = function (ecModel, api) {
+    if (env.node || !api.getDom()) {
+      return;
+    }
+
+    var tooltipModel = ecModel.getComponent('tooltip');
+    var renderMode = this._renderMode = getTooltipRenderMode(tooltipModel.get('renderMode'));
+    this._tooltipContent = renderMode === 'richText' ? new TooltipRichContent(api) : new TooltipHTMLContent(api.getDom(), api, {
+      appendToBody: tooltipModel.get('appendToBody', true)
+    });
+  };
+
+  TooltipView.prototype.render = function (tooltipModel, ecModel, api) {
+    if (env.node || !api.getDom()) {
+      return;
+    } // Reset
+
+
+    this.group.removeAll();
+    this._tooltipModel = tooltipModel;
+    this._ecModel = ecModel;
+    this._api = api;
+    /**
+     * @private
+     * @type {boolean}
+     */
+
+    this._alwaysShowContent = tooltipModel.get('alwaysShowContent');
+    var tooltipContent = this._tooltipContent;
+    tooltipContent.update(tooltipModel);
+    tooltipContent.setEnterable(tooltipModel.get('enterable'));
+
+    this._initGlobalListener();
+
+    this._keepShow(); // PENDING
+    // `mousemove` event will be triggered very frequently when the mouse moves fast,
+    // which causes that the `updatePosition` function was also called frequently.
+    // In Chrome with devtools open and Firefox, tooltip looks laggy and shakes. See #14695 #16101
+    // To avoid frequent triggering,
+    // consider throttling it in 50ms when transition is enabled
+
+
+    if (this._renderMode !== 'richText' && tooltipModel.get('transitionDuration')) {
+      createOrUpdate(this, '_updatePosition', 50, 'fixRate');
+    } else {
+      clear(this, '_updatePosition');
+    }
+  };
+
+  TooltipView.prototype._initGlobalListener = function () {
+    var tooltipModel = this._tooltipModel;
+    var triggerOn = tooltipModel.get('triggerOn');
+    register('itemTooltip', this._api, bind(function (currTrigger, e, dispatchAction) {
+      // If 'none', it is not controlled by mouse totally.
+      if (triggerOn !== 'none') {
+        if (triggerOn.indexOf(currTrigger) >= 0) {
+          this._tryShow(e, dispatchAction);
+        } else if (currTrigger === 'leave') {
+          this._hide(dispatchAction);
+        }
+      }
+    }, this));
+  };
+
+  TooltipView.prototype._keepShow = function () {
+    var tooltipModel = this._tooltipModel;
+    var ecModel = this._ecModel;
+    var api = this._api;
+    var triggerOn = tooltipModel.get('triggerOn'); // Try to keep the tooltip show when refreshing
+
+    if (this._lastX != null && this._lastY != null // When user is willing to control tooltip totally using API,
+    // self.manuallyShowTip({x, y}) might cause tooltip hide,
+    // which is not expected.
+    && triggerOn !== 'none' && triggerOn !== 'click') {
+      var self_1 = this;
+      clearTimeout(this._refreshUpdateTimeout);
+      this._refreshUpdateTimeout = setTimeout(function () {
+        // Show tip next tick after other charts are rendered
+        // In case highlight action has wrong result
+        // FIXME
+        !api.isDisposed() && self_1.manuallyShowTip(tooltipModel, ecModel, api, {
+          x: self_1._lastX,
+          y: self_1._lastY,
+          dataByCoordSys: self_1._lastDataByCoordSys
+        });
+      });
+    }
+  };
+  /**
+   * Show tip manually by
+   * dispatchAction({
+   *     type: 'showTip',
+   *     x: 10,
+   *     y: 10
+   * });
+   * Or
+   * dispatchAction({
+   *      type: 'showTip',
+   *      seriesIndex: 0,
+   *      dataIndex or dataIndexInside or name
+   * });
+   *
+   *  TODO Batch
+   */
+
+
+  TooltipView.prototype.manuallyShowTip = function (tooltipModel, ecModel, api, payload) {
+    if (payload.from === this.uid || env.node || !api.getDom()) {
+      return;
+    }
+
+    var dispatchAction = makeDispatchAction(payload, api); // Reset ticket
+
+    this._ticket = ''; // When triggered from axisPointer.
+
+    var dataByCoordSys = payload.dataByCoordSys;
+    var cmptRef = findComponentReference(payload, ecModel, api);
+
+    if (cmptRef) {
+      var rect = cmptRef.el.getBoundingRect().clone();
+      rect.applyTransform(cmptRef.el.transform);
+
+      this._tryShow({
+        offsetX: rect.x + rect.width / 2,
+        offsetY: rect.y + rect.height / 2,
+        target: cmptRef.el,
+        position: payload.position,
+        // When manully trigger, the mouse is not on the el, so we'd better to
+        // position tooltip on the bottom of the el and display arrow is possible.
+        positionDefault: 'bottom'
+      }, dispatchAction);
+    } else if (payload.tooltip && payload.x != null && payload.y != null) {
+      var el = proxyRect;
+      el.x = payload.x;
+      el.y = payload.y;
+      el.update();
+      getECData(el).tooltipConfig = {
+        name: null,
+        option: payload.tooltip
+      }; // Manually show tooltip while view is not using zrender elements.
+
+      this._tryShow({
+        offsetX: payload.x,
+        offsetY: payload.y,
+        target: el
+      }, dispatchAction);
+    } else if (dataByCoordSys) {
+      this._tryShow({
+        offsetX: payload.x,
+        offsetY: payload.y,
+        position: payload.position,
+        dataByCoordSys: dataByCoordSys,
+        tooltipOption: payload.tooltipOption
+      }, dispatchAction);
+    } else if (payload.seriesIndex != null) {
+      if (this._manuallyAxisShowTip(tooltipModel, ecModel, api, payload)) {
+        return;
+      }
+
+      var pointInfo = findPointFromSeries(payload, ecModel);
+      var cx = pointInfo.point[0];
+      var cy = pointInfo.point[1];
+
+      if (cx != null && cy != null) {
+        this._tryShow({
+          offsetX: cx,
+          offsetY: cy,
+          target: pointInfo.el,
+          position: payload.position,
+          // When manully trigger, the mouse is not on the el, so we'd better to
+          // position tooltip on the bottom of the el and display arrow is possible.
+          positionDefault: 'bottom'
+        }, dispatchAction);
+      }
+    } else if (payload.x != null && payload.y != null) {
+      // FIXME
+      // should wrap dispatchAction like `axisPointer/globalListener` ?
+      api.dispatchAction({
+        type: 'updateAxisPointer',
+        x: payload.x,
+        y: payload.y
+      });
+
+      this._tryShow({
+        offsetX: payload.x,
+        offsetY: payload.y,
+        position: payload.position,
+        target: api.getZr().findHover(payload.x, payload.y).target
+      }, dispatchAction);
+    }
+  };
+
+  TooltipView.prototype.manuallyHideTip = function (tooltipModel, ecModel, api, payload) {
+    var tooltipContent = this._tooltipContent;
+
+    if (!this._alwaysShowContent && this._tooltipModel) {
+      tooltipContent.hideLater(this._tooltipModel.get('hideDelay'));
+    }
+
+    this._lastX = this._lastY = this._lastDataByCoordSys = null;
+
+    if (payload.from !== this.uid) {
+      this._hide(makeDispatchAction(payload, api));
+    }
+  }; // Be compatible with previous design, that is, when tooltip.type is 'axis' and
+  // dispatchAction 'showTip' with seriesIndex and dataIndex will trigger axis pointer
+  // and tooltip.
+
+
+  TooltipView.prototype._manuallyAxisShowTip = function (tooltipModel, ecModel, api, payload) {
+    var seriesIndex = payload.seriesIndex;
+    var dataIndex = payload.dataIndex; // @ts-ignore
+
+    var coordSysAxesInfo = ecModel.getComponent('axisPointer').coordSysAxesInfo;
+
+    if (seriesIndex == null || dataIndex == null || coordSysAxesInfo == null) {
+      return;
+    }
+
+    var seriesModel = ecModel.getSeriesByIndex(seriesIndex);
+
+    if (!seriesModel) {
+      return;
+    }
+
+    var data = seriesModel.getData();
+    var tooltipCascadedModel = buildTooltipModel([data.getItemModel(dataIndex), seriesModel, (seriesModel.coordinateSystem || {}).model], this._tooltipModel);
+
+    if (tooltipCascadedModel.get('trigger') !== 'axis') {
+      return;
+    }
+
+    api.dispatchAction({
+      type: 'updateAxisPointer',
+      seriesIndex: seriesIndex,
+      dataIndex: dataIndex,
+      position: payload.position
+    });
+    return true;
+  };
+
+  TooltipView.prototype._tryShow = function (e, dispatchAction) {
+    var el = e.target;
+    var tooltipModel = this._tooltipModel;
+
+    if (!tooltipModel) {
+      return;
+    } // Save mouse x, mouse y. So we can try to keep showing the tip if chart is refreshed
+
+
+    this._lastX = e.offsetX;
+    this._lastY = e.offsetY;
+    var dataByCoordSys = e.dataByCoordSys;
+
+    if (dataByCoordSys && dataByCoordSys.length) {
+      this._showAxisTooltip(dataByCoordSys, e);
+    } else if (el) {
+      this._lastDataByCoordSys = null;
+      var seriesDispatcher_1;
+      var cmptDispatcher_1;
+      findEventDispatcher(el, function (target) {
+        // Always show item tooltip if mouse is on the element with dataIndex
+        if (getECData(target).dataIndex != null) {
+          seriesDispatcher_1 = target;
+          return true;
+        } // Tooltip provided directly. Like legend.
+
+
+        if (getECData(target).tooltipConfig != null) {
+          cmptDispatcher_1 = target;
+          return true;
+        }
+      }, true);
+
+      if (seriesDispatcher_1) {
+        this._showSeriesItemTooltip(e, seriesDispatcher_1, dispatchAction);
+      } else if (cmptDispatcher_1) {
+        this._showComponentItemTooltip(e, cmptDispatcher_1, dispatchAction);
+      } else {
+        this._hide(dispatchAction);
+      }
+    } else {
+      this._lastDataByCoordSys = null;
+
+      this._hide(dispatchAction);
+    }
+  };
+
+  TooltipView.prototype._showOrMove = function (tooltipModel, cb) {
+    // showDelay is used in this case: tooltip.enterable is set
+    // as true. User intent to move mouse into tooltip and click
+    // something. `showDelay` makes it easier to enter the content
+    // but tooltip do not move immediately.
+    var delay = tooltipModel.get('showDelay');
+    cb = bind(cb, this);
+    clearTimeout(this._showTimout);
+    delay > 0 ? this._showTimout = setTimeout(cb, delay) : cb();
+  };
+
+  TooltipView.prototype._showAxisTooltip = function (dataByCoordSys, e) {
+    var ecModel = this._ecModel;
+    var globalTooltipModel = this._tooltipModel;
+    var point = [e.offsetX, e.offsetY];
+    var singleTooltipModel = buildTooltipModel([e.tooltipOption], globalTooltipModel);
+    var renderMode = this._renderMode;
+    var cbParamsList = [];
+    var articleMarkup = createTooltipMarkup('section', {
+      blocks: [],
+      noHeader: true
+    }); // Only for legacy: `Serise['formatTooltip']` returns a string.
+
+    var markupTextArrLegacy = [];
+    var markupStyleCreator = new TooltipMarkupStyleCreator();
+    each$1(dataByCoordSys, function (itemCoordSys) {
+      each$1(itemCoordSys.dataByAxis, function (axisItem) {
+        var axisModel = ecModel.getComponent(axisItem.axisDim + 'Axis', axisItem.axisIndex);
+        var axisValue = axisItem.value;
+
+        if (!axisModel || axisValue == null) {
+          return;
+        }
+
+        var axisValueLabel = getValueLabel(axisValue, axisModel.axis, ecModel, axisItem.seriesDataIndices, axisItem.valueLabelOpt);
+        var axisSectionMarkup = createTooltipMarkup('section', {
+          header: axisValueLabel,
+          noHeader: !trim(axisValueLabel),
+          sortBlocks: true,
+          blocks: []
+        });
+        articleMarkup.blocks.push(axisSectionMarkup);
+        each$1(axisItem.seriesDataIndices, function (idxItem) {
+          var series = ecModel.getSeriesByIndex(idxItem.seriesIndex);
+          var dataIndex = idxItem.dataIndexInside;
+          var cbParams = series.getDataParams(dataIndex); // Can't find data.
+
+          if (cbParams.dataIndex < 0) {
+            return;
+          }
+
+          cbParams.axisDim = axisItem.axisDim;
+          cbParams.axisIndex = axisItem.axisIndex;
+          cbParams.axisType = axisItem.axisType;
+          cbParams.axisId = axisItem.axisId;
+          cbParams.axisValue = getAxisRawValue(axisModel.axis, {
+            value: axisValue
+          });
+          cbParams.axisValueLabel = axisValueLabel; // Pre-create marker style for makers. Users can assemble richText
+          // text in `formatter` callback and use those markers style.
+
+          cbParams.marker = markupStyleCreator.makeTooltipMarker('item', convertToColorString(cbParams.color), renderMode);
+          var seriesTooltipResult = normalizeTooltipFormatResult(series.formatTooltip(dataIndex, true, null));
+          var frag = seriesTooltipResult.frag;
+
+          if (frag) {
+            var valueFormatter = buildTooltipModel([series], globalTooltipModel).get('valueFormatter');
+            axisSectionMarkup.blocks.push(valueFormatter ? extend({
+              valueFormatter: valueFormatter
+            }, frag) : frag);
+          }
+
+          if (seriesTooltipResult.text) {
+            markupTextArrLegacy.push(seriesTooltipResult.text);
+          }
+
+          cbParamsList.push(cbParams);
+        });
+      });
+    }); // In most cases, the second axis is displays upper on the first one.
+    // So we reverse it to look better.
+
+    articleMarkup.blocks.reverse();
+    markupTextArrLegacy.reverse();
+    var positionExpr = e.position;
+    var orderMode = singleTooltipModel.get('order');
+    var builtMarkupText = buildTooltipMarkup(articleMarkup, markupStyleCreator, renderMode, orderMode, ecModel.get('useUTC'), singleTooltipModel.get('textStyle'));
+    builtMarkupText && markupTextArrLegacy.unshift(builtMarkupText);
+    var blockBreak = renderMode === 'richText' ? '\n\n' : '<br/>';
+    var allMarkupText = markupTextArrLegacy.join(blockBreak);
+
+    this._showOrMove(singleTooltipModel, function () {
+      if (this._updateContentNotChangedOnAxis(dataByCoordSys, cbParamsList)) {
+        this._updatePosition(singleTooltipModel, positionExpr, point[0], point[1], this._tooltipContent, cbParamsList);
+      } else {
+        this._showTooltipContent(singleTooltipModel, allMarkupText, cbParamsList, Math.random() + '', point[0], point[1], positionExpr, null, markupStyleCreator);
+      }
+    }); // Do not trigger events here, because this branch only be entered
+    // from dispatchAction.
+
+  };
+
+  TooltipView.prototype._showSeriesItemTooltip = function (e, dispatcher, dispatchAction) {
+    var ecModel = this._ecModel;
+    var ecData = getECData(dispatcher); // Use dataModel in element if possible
+    // Used when mouseover on a element like markPoint or edge
+    // In which case, the data is not main data in series.
+
+    var seriesIndex = ecData.seriesIndex;
+    var seriesModel = ecModel.getSeriesByIndex(seriesIndex); // For example, graph link.
+
+    var dataModel = ecData.dataModel || seriesModel;
+    var dataIndex = ecData.dataIndex;
+    var dataType = ecData.dataType;
+    var data = dataModel.getData(dataType);
+    var renderMode = this._renderMode;
+    var positionDefault = e.positionDefault;
+    var tooltipModel = buildTooltipModel([data.getItemModel(dataIndex), dataModel, seriesModel && (seriesModel.coordinateSystem || {}).model], this._tooltipModel, positionDefault ? {
+      position: positionDefault
+    } : null);
+    var tooltipTrigger = tooltipModel.get('trigger');
+
+    if (tooltipTrigger != null && tooltipTrigger !== 'item') {
+      return;
+    }
+
+    var params = dataModel.getDataParams(dataIndex, dataType);
+    var markupStyleCreator = new TooltipMarkupStyleCreator(); // Pre-create marker style for makers. Users can assemble richText
+    // text in `formatter` callback and use those markers style.
+
+    params.marker = markupStyleCreator.makeTooltipMarker('item', convertToColorString(params.color), renderMode);
+    var seriesTooltipResult = normalizeTooltipFormatResult(dataModel.formatTooltip(dataIndex, false, dataType));
+    var orderMode = tooltipModel.get('order');
+    var valueFormatter = tooltipModel.get('valueFormatter');
+    var frag = seriesTooltipResult.frag;
+    var markupText = frag ? buildTooltipMarkup(valueFormatter ? extend({
+      valueFormatter: valueFormatter
+    }, frag) : frag, markupStyleCreator, renderMode, orderMode, ecModel.get('useUTC'), tooltipModel.get('textStyle')) : seriesTooltipResult.text;
+    var asyncTicket = 'item_' + dataModel.name + '_' + dataIndex;
+
+    this._showOrMove(tooltipModel, function () {
+      this._showTooltipContent(tooltipModel, markupText, params, asyncTicket, e.offsetX, e.offsetY, e.position, e.target, markupStyleCreator);
+    }); // FIXME
+    // duplicated showtip if manuallyShowTip is called from dispatchAction.
+
+
+    dispatchAction({
+      type: 'showTip',
+      dataIndexInside: dataIndex,
+      dataIndex: data.getRawIndex(dataIndex),
+      seriesIndex: seriesIndex,
+      from: this.uid
+    });
+  };
+
+  TooltipView.prototype._showComponentItemTooltip = function (e, el, dispatchAction) {
+    var ecData = getECData(el);
+    var tooltipConfig = ecData.tooltipConfig;
+    var tooltipOpt = tooltipConfig.option || {};
+
+    if (isString(tooltipOpt)) {
+      var content = tooltipOpt;
+      tooltipOpt = {
+        content: content,
+        // Fixed formatter
+        formatter: content
+      };
+    }
+
+    var tooltipModelCascade = [tooltipOpt];
+
+    var cmpt = this._ecModel.getComponent(ecData.componentMainType, ecData.componentIndex);
+
+    if (cmpt) {
+      tooltipModelCascade.push(cmpt);
+    } // In most cases, component tooltip formatter has different params with series tooltip formatter,
+    // so that they can not share the same formatter. Since the global tooltip formatter is used for series
+    // by convension, we do not use it as the default formatter for component.
+
+
+    tooltipModelCascade.push({
+      formatter: tooltipOpt.content
+    });
+    var positionDefault = e.positionDefault;
+    var subTooltipModel = buildTooltipModel(tooltipModelCascade, this._tooltipModel, positionDefault ? {
+      position: positionDefault
+    } : null);
+    var defaultHtml = subTooltipModel.get('content');
+    var asyncTicket = Math.random() + ''; // PENDING: this case do not support richText style yet.
+
+    var markupStyleCreator = new TooltipMarkupStyleCreator(); // Do not check whether `trigger` is 'none' here, because `trigger`
+    // only works on coordinate system. In fact, we have not found case
+    // that requires setting `trigger` nothing on component yet.
+
+    this._showOrMove(subTooltipModel, function () {
+      // Use formatterParams from element defined in component
+      // Avoid users modify it.
+      var formatterParams = clone(subTooltipModel.get('formatterParams') || {});
+
+      this._showTooltipContent(subTooltipModel, defaultHtml, formatterParams, asyncTicket, e.offsetX, e.offsetY, e.position, el, markupStyleCreator);
+    }); // If not dispatch showTip, tip may be hide triggered by axis.
+
+
+    dispatchAction({
+      type: 'showTip',
+      from: this.uid
+    });
+  };
+
+  TooltipView.prototype._showTooltipContent = function ( // Use Model<TooltipOption> insteadof TooltipModel because this model may be from series or other options.
+  // Instead of top level tooltip.
+  tooltipModel, defaultHtml, params, asyncTicket, x, y, positionExpr, el, markupStyleCreator) {
+    // Reset ticket
+    this._ticket = '';
+
+    if (!tooltipModel.get('showContent') || !tooltipModel.get('show')) {
+      return;
+    }
+
+    var tooltipContent = this._tooltipContent;
+    tooltipContent.setEnterable(tooltipModel.get('enterable'));
+    var formatter = tooltipModel.get('formatter');
+    positionExpr = positionExpr || tooltipModel.get('position');
+    var html = defaultHtml;
+
+    var nearPoint = this._getNearestPoint([x, y], params, tooltipModel.get('trigger'), tooltipModel.get('borderColor'));
+
+    var nearPointColor = nearPoint.color;
+
+    if (formatter) {
+      if (isString(formatter)) {
+        var useUTC = tooltipModel.ecModel.get('useUTC');
+        var params0 = isArray(params) ? params[0] : params;
+        var isTimeAxis = params0 && params0.axisType && params0.axisType.indexOf('time') >= 0;
+        html = formatter;
+
+        if (isTimeAxis) {
+          html = format(params0.axisValue, html, useUTC);
+        }
+
+        html = formatTpl(html, params, true);
+      } else if (isFunction(formatter)) {
+        var callback = bind(function (cbTicket, html) {
+          if (cbTicket === this._ticket) {
+            tooltipContent.setContent(html, markupStyleCreator, tooltipModel, nearPointColor, positionExpr);
+
+            this._updatePosition(tooltipModel, positionExpr, x, y, tooltipContent, params, el);
+          }
+        }, this);
+        this._ticket = asyncTicket;
+        html = formatter(params, asyncTicket, callback);
+      } else {
+        html = formatter;
+      }
+    }
+
+    tooltipContent.setContent(html, markupStyleCreator, tooltipModel, nearPointColor, positionExpr);
+    tooltipContent.show(tooltipModel, nearPointColor);
+
+    this._updatePosition(tooltipModel, positionExpr, x, y, tooltipContent, params, el);
+  };
+
+  TooltipView.prototype._getNearestPoint = function (point, tooltipDataParams, trigger, borderColor) {
+    if (trigger === 'axis' || isArray(tooltipDataParams)) {
+      return {
+        color: borderColor || (this._renderMode === 'html' ? '#fff' : 'none')
+      };
+    }
+
+    if (!isArray(tooltipDataParams)) {
+      return {
+        color: borderColor || tooltipDataParams.color || tooltipDataParams.borderColor
+      };
+    }
+  };
+
+  TooltipView.prototype._updatePosition = function (tooltipModel, positionExpr, x, // Mouse x
+  y, // Mouse y
+  content, params, el) {
+    var viewWidth = this._api.getWidth();
+
+    var viewHeight = this._api.getHeight();
+
+    positionExpr = positionExpr || tooltipModel.get('position');
+    var contentSize = content.getSize();
+    var align = tooltipModel.get('align');
+    var vAlign = tooltipModel.get('verticalAlign');
+    var rect = el && el.getBoundingRect().clone();
+    el && rect.applyTransform(el.transform);
+
+    if (isFunction(positionExpr)) {
+      // Callback of position can be an array or a string specify the position
+      positionExpr = positionExpr([x, y], params, content.el, rect, {
+        viewSize: [viewWidth, viewHeight],
+        contentSize: contentSize.slice()
+      });
+    }
+
+    if (isArray(positionExpr)) {
+      x = parsePercent(positionExpr[0], viewWidth);
+      y = parsePercent(positionExpr[1], viewHeight);
+    } else if (isObject(positionExpr)) {
+      var boxLayoutPosition = positionExpr;
+      boxLayoutPosition.width = contentSize[0];
+      boxLayoutPosition.height = contentSize[1];
+      var layoutRect = getLayoutRect(boxLayoutPosition, {
+        width: viewWidth,
+        height: viewHeight
+      });
+      x = layoutRect.x;
+      y = layoutRect.y;
+      align = null; // When positionExpr is left/top/right/bottom,
+      // align and verticalAlign will not work.
+
+      vAlign = null;
+    } // Specify tooltip position by string 'top' 'bottom' 'left' 'right' around graphic element
+    else if (isString(positionExpr) && el) {
+        var pos = calcTooltipPosition(positionExpr, rect, contentSize, tooltipModel.get('borderWidth'));
+        x = pos[0];
+        y = pos[1];
+      } else {
+        var pos = refixTooltipPosition(x, y, content, viewWidth, viewHeight, align ? null : 20, vAlign ? null : 20);
+        x = pos[0];
+        y = pos[1];
+      }
+
+    align && (x -= isCenterAlign(align) ? contentSize[0] / 2 : align === 'right' ? contentSize[0] : 0);
+    vAlign && (y -= isCenterAlign(vAlign) ? contentSize[1] / 2 : vAlign === 'bottom' ? contentSize[1] : 0);
+
+    if (shouldTooltipConfine(tooltipModel)) {
+      var pos = confineTooltipPosition(x, y, content, viewWidth, viewHeight);
+      x = pos[0];
+      y = pos[1];
+    }
+
+    content.moveTo(x, y);
+  }; // FIXME
+  // Should we remove this but leave this to user?
+
+
+  TooltipView.prototype._updateContentNotChangedOnAxis = function (dataByCoordSys, cbParamsList) {
+    var lastCoordSys = this._lastDataByCoordSys;
+    var lastCbParamsList = this._cbParamsList;
+    var contentNotChanged = !!lastCoordSys && lastCoordSys.length === dataByCoordSys.length;
+    contentNotChanged && each$1(lastCoordSys, function (lastItemCoordSys, indexCoordSys) {
+      var lastDataByAxis = lastItemCoordSys.dataByAxis || [];
+      var thisItemCoordSys = dataByCoordSys[indexCoordSys] || {};
+      var thisDataByAxis = thisItemCoordSys.dataByAxis || [];
+      contentNotChanged = contentNotChanged && lastDataByAxis.length === thisDataByAxis.length;
+      contentNotChanged && each$1(lastDataByAxis, function (lastItem, indexAxis) {
+        var thisItem = thisDataByAxis[indexAxis] || {};
+        var lastIndices = lastItem.seriesDataIndices || [];
+        var newIndices = thisItem.seriesDataIndices || [];
+        contentNotChanged = contentNotChanged && lastItem.value === thisItem.value && lastItem.axisType === thisItem.axisType && lastItem.axisId === thisItem.axisId && lastIndices.length === newIndices.length;
+        contentNotChanged && each$1(lastIndices, function (lastIdxItem, j) {
+          var newIdxItem = newIndices[j];
+          contentNotChanged = contentNotChanged && lastIdxItem.seriesIndex === newIdxItem.seriesIndex && lastIdxItem.dataIndex === newIdxItem.dataIndex;
+        }); // check is cbParams data value changed
+
+        lastCbParamsList && each$1(lastItem.seriesDataIndices, function (idxItem) {
+          var seriesIdx = idxItem.seriesIndex;
+          var cbParams = cbParamsList[seriesIdx];
+          var lastCbParams = lastCbParamsList[seriesIdx];
+
+          if (cbParams && lastCbParams && lastCbParams.data !== cbParams.data) {
+            contentNotChanged = false;
+          }
+        });
+      });
+    });
+    this._lastDataByCoordSys = dataByCoordSys;
+    this._cbParamsList = cbParamsList;
+    return !!contentNotChanged;
+  };
+
+  TooltipView.prototype._hide = function (dispatchAction) {
+    // Do not directly hideLater here, because this behavior may be prevented
+    // in dispatchAction when showTip is dispatched.
+    // FIXME
+    // duplicated hideTip if manuallyHideTip is called from dispatchAction.
+    this._lastDataByCoordSys = null;
+    dispatchAction({
+      type: 'hideTip',
+      from: this.uid
+    });
+  };
+
+  TooltipView.prototype.dispose = function (ecModel, api) {
+    if (env.node || !api.getDom()) {
+      return;
+    }
+
+    clear(this, '_updatePosition');
+
+    this._tooltipContent.dispose();
+
+    unregister('itemTooltip', api);
+  };
+
+  TooltipView.type = 'tooltip';
+  return TooltipView;
+}(ComponentView);
+/**
+ * From top to bottom. (the last one should be globalTooltipModel);
+ */
+
+
+function buildTooltipModel(modelCascade, globalTooltipModel, defaultTooltipOption) {
+  // Last is always tooltip model.
+  var ecModel = globalTooltipModel.ecModel;
+  var resultModel;
+
+  if (defaultTooltipOption) {
+    resultModel = new Model(defaultTooltipOption, ecModel, ecModel);
+    resultModel = new Model(globalTooltipModel.option, resultModel, ecModel);
+  } else {
+    resultModel = globalTooltipModel;
+  }
+
+  for (var i = modelCascade.length - 1; i >= 0; i--) {
+    var tooltipOpt = modelCascade[i];
+
+    if (tooltipOpt) {
+      if (tooltipOpt instanceof Model) {
+        tooltipOpt = tooltipOpt.get('tooltip', true);
+      } // In each data item tooltip can be simply write:
+      // {
+      //  value: 10,
+      //  tooltip: 'Something you need to know'
+      // }
+
+
+      if (isString(tooltipOpt)) {
+        tooltipOpt = {
+          formatter: tooltipOpt
+        };
+      }
+
+      if (tooltipOpt) {
+        resultModel = new Model(tooltipOpt, resultModel, ecModel);
+      }
+    }
+  }
+
+  return resultModel;
+}
+
+function makeDispatchAction(payload, api) {
+  return payload.dispatchAction || bind(api.dispatchAction, api);
+}
+
+function refixTooltipPosition(x, y, content, viewWidth, viewHeight, gapH, gapV) {
+  var size = content.getSize();
+  var width = size[0];
+  var height = size[1];
+
+  if (gapH != null) {
+    // Add extra 2 pixels for this case:
+    // At present the "values" in defaut tooltip are using CSS `float: right`.
+    // When the right edge of the tooltip box is on the right side of the
+    // viewport, the `float` layout might push the "values" to the second line.
+    if (x + width + gapH + 2 > viewWidth) {
+      x -= width + gapH;
+    } else {
+      x += gapH;
+    }
+  }
+
+  if (gapV != null) {
+    if (y + height + gapV > viewHeight) {
+      y -= height + gapV;
+    } else {
+      y += gapV;
+    }
+  }
+
+  return [x, y];
+}
+
+function confineTooltipPosition(x, y, content, viewWidth, viewHeight) {
+  var size = content.getSize();
+  var width = size[0];
+  var height = size[1];
+  x = Math.min(x + width, viewWidth) - width;
+  y = Math.min(y + height, viewHeight) - height;
+  x = Math.max(x, 0);
+  y = Math.max(y, 0);
+  return [x, y];
+}
+
+function calcTooltipPosition(position, rect, contentSize, borderWidth) {
+  var domWidth = contentSize[0];
+  var domHeight = contentSize[1];
+  var offset = Math.ceil(Math.SQRT2 * borderWidth) + 8;
+  var x = 0;
+  var y = 0;
+  var rectWidth = rect.width;
+  var rectHeight = rect.height;
+
+  switch (position) {
+    case 'inside':
+      x = rect.x + rectWidth / 2 - domWidth / 2;
+      y = rect.y + rectHeight / 2 - domHeight / 2;
+      break;
+
+    case 'top':
+      x = rect.x + rectWidth / 2 - domWidth / 2;
+      y = rect.y - domHeight - offset;
+      break;
+
+    case 'bottom':
+      x = rect.x + rectWidth / 2 - domWidth / 2;
+      y = rect.y + rectHeight + offset;
+      break;
+
+    case 'left':
+      x = rect.x - domWidth - offset;
+      y = rect.y + rectHeight / 2 - domHeight / 2;
+      break;
+
+    case 'right':
+      x = rect.x + rectWidth + offset;
+      y = rect.y + rectHeight / 2 - domHeight / 2;
+  }
+
+  return [x, y];
+}
+
+function isCenterAlign(align) {
+  return align === 'center' || align === 'middle';
+}
+/**
+ * Find target component by payload like:
+ * ```js
+ * { legendId: 'some_id', name: 'xxx' }
+ * { toolboxIndex: 1, name: 'xxx' }
+ * { geoName: 'some_name', name: 'xxx' }
+ * ```
+ * PENDING: at present only
+ *
+ * If not found, return null/undefined.
+ */
+
+
+function findComponentReference(payload, ecModel, api) {
+  var queryOptionMap = preParseFinder(payload).queryOptionMap;
+  var componentMainType = queryOptionMap.keys()[0];
+
+  if (!componentMainType || componentMainType === 'series') {
+    return;
+  }
+
+  var queryResult = queryReferringComponents(ecModel, componentMainType, queryOptionMap.get(componentMainType), {
+    useDefault: false,
+    enableAll: false,
+    enableNone: false
+  });
+  var model = queryResult.models[0];
+
+  if (!model) {
+    return;
+  }
+
+  var view = api.getViewOfComponentModel(model);
+  var el;
+  view.group.traverse(function (subEl) {
+    var tooltipConfig = getECData(subEl).tooltipConfig;
+
+    if (tooltipConfig && tooltipConfig.name === payload.name) {
+      el = subEl;
+      return true; // stop
+    }
+  });
+
+  if (el) {
+    return {
+      componentMainType: componentMainType,
+      componentIndex: model.componentIndex,
+      el: el
+    };
+  }
+}
+
+function install$4(registers) {
+  use(install$5);
+  registers.registerComponentModel(TooltipModel);
+  registers.registerComponentView(TooltipView);
+  /**
+   * @action
+   * @property {string} type
+   * @property {number} seriesIndex
+   * @property {number} dataIndex
+   * @property {number} [x]
+   * @property {number} [y]
+   */
+
+  registers.registerAction({
+    type: 'showTip',
+    event: 'showTip',
+    update: 'tooltip:manuallyShowTip'
+  }, noop);
+  registers.registerAction({
+    type: 'hideTip',
+    event: 'hideTip',
+    update: 'tooltip:manuallyHideTip'
+  }, noop);
+}
+
+var getDefaultSelectorOptions = function (ecModel, type) {
+  if (type === 'all') {
+    return {
+      type: 'all',
+      title: ecModel.getLocaleModel().get(['legend', 'selector', 'all'])
+    };
+  } else if (type === 'inverse') {
+    return {
+      type: 'inverse',
+      title: ecModel.getLocaleModel().get(['legend', 'selector', 'inverse'])
+    };
+  }
+};
+
+var LegendModel =
+/** @class */
+function (_super) {
+  __extends(LegendModel, _super);
+
+  function LegendModel() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.type = LegendModel.type;
+    _this.layoutMode = {
+      type: 'box',
+      // legend.width/height are maxWidth/maxHeight actually,
+      // whereas real width/height is calculated by its content.
+      // (Setting {left: 10, right: 10} does not make sense).
+      // So consider the case:
+      // `setOption({legend: {left: 10});`
+      // then `setOption({legend: {right: 10});`
+      // The previous `left` should be cleared by setting `ignoreSize`.
+      ignoreSize: true
+    };
+    return _this;
+  }
+
+  LegendModel.prototype.init = function (option, parentModel, ecModel) {
+    this.mergeDefaultAndTheme(option, ecModel);
+    option.selected = option.selected || {};
+
+    this._updateSelector(option);
+  };
+
+  LegendModel.prototype.mergeOption = function (option, ecModel) {
+    _super.prototype.mergeOption.call(this, option, ecModel);
+
+    this._updateSelector(option);
+  };
+
+  LegendModel.prototype._updateSelector = function (option) {
+    var selector = option.selector;
+    var ecModel = this.ecModel;
+
+    if (selector === true) {
+      selector = option.selector = ['all', 'inverse'];
+    }
+
+    if (isArray(selector)) {
+      each$1(selector, function (item, index) {
+        isString(item) && (item = {
+          type: item
+        });
+        selector[index] = merge(item, getDefaultSelectorOptions(ecModel, item.type));
+      });
+    }
+  };
+
+  LegendModel.prototype.optionUpdated = function () {
+    this._updateData(this.ecModel);
+
+    var legendData = this._data; // If selectedMode is single, try to select one
+
+    if (legendData[0] && this.get('selectedMode') === 'single') {
+      var hasSelected = false; // If has any selected in option.selected
+
+      for (var i = 0; i < legendData.length; i++) {
+        var name_1 = legendData[i].get('name');
+
+        if (this.isSelected(name_1)) {
+          // Force to unselect others
+          this.select(name_1);
+          hasSelected = true;
+          break;
+        }
+      } // Try select the first if selectedMode is single
+
+
+      !hasSelected && this.select(legendData[0].get('name'));
+    }
+  };
+
+  LegendModel.prototype._updateData = function (ecModel) {
+    var potentialData = [];
+    var availableNames = [];
+    ecModel.eachRawSeries(function (seriesModel) {
+      var seriesName = seriesModel.name;
+      availableNames.push(seriesName);
+      var isPotential;
+
+      if (seriesModel.legendVisualProvider) {
+        var provider = seriesModel.legendVisualProvider;
+        var names = provider.getAllNames();
+
+        if (!ecModel.isSeriesFiltered(seriesModel)) {
+          availableNames = availableNames.concat(names);
+        }
+
+        if (names.length) {
+          potentialData = potentialData.concat(names);
+        } else {
+          isPotential = true;
+        }
+      } else {
+        isPotential = true;
+      }
+
+      if (isPotential && isNameSpecified(seriesModel)) {
+        potentialData.push(seriesModel.name);
+      }
+    });
+    /**
+     * @type {Array.<string>}
+     * @private
+     */
+
+    this._availableNames = availableNames; // If legend.data is not specified in option, use availableNames as data,
+    // which is convenient for user preparing option.
+
+    var rawData = this.get('data') || potentialData;
+    var legendNameMap = createHashMap();
+    var legendData = map(rawData, function (dataItem) {
+      // Can be string or number
+      if (isString(dataItem) || isNumber(dataItem)) {
+        dataItem = {
+          name: dataItem
+        };
+      }
+
+      if (legendNameMap.get(dataItem.name)) {
+        // remove legend name duplicate
+        return null;
+      }
+
+      legendNameMap.set(dataItem.name, true);
+      return new Model(dataItem, this, this.ecModel);
+    }, this);
+    /**
+     * @type {Array.<module:echarts/model/Model>}
+     * @private
+     */
+
+    this._data = filter(legendData, function (item) {
+      return !!item;
+    });
+  };
+
+  LegendModel.prototype.getData = function () {
+    return this._data;
+  };
+
+  LegendModel.prototype.select = function (name) {
+    var selected = this.option.selected;
+    var selectedMode = this.get('selectedMode');
+
+    if (selectedMode === 'single') {
+      var data = this._data;
+      each$1(data, function (dataItem) {
+        selected[dataItem.get('name')] = false;
+      });
+    }
+
+    selected[name] = true;
+  };
+
+  LegendModel.prototype.unSelect = function (name) {
+    if (this.get('selectedMode') !== 'single') {
+      this.option.selected[name] = false;
+    }
+  };
+
+  LegendModel.prototype.toggleSelected = function (name) {
+    var selected = this.option.selected; // Default is true
+
+    if (!selected.hasOwnProperty(name)) {
+      selected[name] = true;
+    }
+
+    this[selected[name] ? 'unSelect' : 'select'](name);
+  };
+
+  LegendModel.prototype.allSelect = function () {
+    var data = this._data;
+    var selected = this.option.selected;
+    each$1(data, function (dataItem) {
+      selected[dataItem.get('name', true)] = true;
+    });
+  };
+
+  LegendModel.prototype.inverseSelect = function () {
+    var data = this._data;
+    var selected = this.option.selected;
+    each$1(data, function (dataItem) {
+      var name = dataItem.get('name', true); // Initially, default value is true
+
+      if (!selected.hasOwnProperty(name)) {
+        selected[name] = true;
+      }
+
+      selected[name] = !selected[name];
+    });
+  };
+
+  LegendModel.prototype.isSelected = function (name) {
+    var selected = this.option.selected;
+    return !(selected.hasOwnProperty(name) && !selected[name]) && indexOf(this._availableNames, name) >= 0;
+  };
+
+  LegendModel.prototype.getOrient = function () {
+    return this.get('orient') === 'vertical' ? {
+      index: 1,
+      name: 'vertical'
+    } : {
+      index: 0,
+      name: 'horizontal'
+    };
+  };
+
+  LegendModel.type = 'legend.plain';
+  LegendModel.dependencies = ['series'];
+  LegendModel.defaultOption = {
+    // zlevel: 0,
+    z: 4,
+    show: true,
+    orient: 'horizontal',
+    left: 'center',
+    // right: 'center',
+    top: 0,
+    // bottom: null,
+    align: 'auto',
+    backgroundColor: 'rgba(0,0,0,0)',
+    borderColor: '#ccc',
+    borderRadius: 0,
+    borderWidth: 0,
+    padding: 5,
+    itemGap: 10,
+    itemWidth: 25,
+    itemHeight: 14,
+    symbolRotate: 'inherit',
+    symbolKeepAspect: true,
+    inactiveColor: '#ccc',
+    inactiveBorderColor: '#ccc',
+    inactiveBorderWidth: 'auto',
+    itemStyle: {
+      color: 'inherit',
+      opacity: 'inherit',
+      borderColor: 'inherit',
+      borderWidth: 'auto',
+      borderCap: 'inherit',
+      borderJoin: 'inherit',
+      borderDashOffset: 'inherit',
+      borderMiterLimit: 'inherit'
+    },
+    lineStyle: {
+      width: 'auto',
+      color: 'inherit',
+      inactiveColor: '#ccc',
+      inactiveWidth: 2,
+      opacity: 'inherit',
+      type: 'inherit',
+      cap: 'inherit',
+      join: 'inherit',
+      dashOffset: 'inherit',
+      miterLimit: 'inherit'
+    },
+    textStyle: {
+      color: '#333'
+    },
+    selectedMode: true,
+    selector: false,
+    selectorLabel: {
+      show: true,
+      borderRadius: 10,
+      padding: [3, 5, 3, 5],
+      fontSize: 12,
+      fontFamily: 'sans-serif',
+      color: '#666',
+      borderWidth: 1,
+      borderColor: '#666'
+    },
+    emphasis: {
+      selectorLabel: {
+        show: true,
+        color: '#eee',
+        backgroundColor: '#666'
+      }
+    },
+    selectorPosition: 'auto',
+    selectorItemGap: 7,
+    selectorButtonGap: 10,
+    tooltip: {
+      show: false
+    }
+  };
+  return LegendModel;
+}(ComponentModel);
+
+var curry = curry$1;
+var each = each$1;
+var Group$1 = Group$2;
+
+var LegendView =
+/** @class */
+function (_super) {
+  __extends(LegendView, _super);
+
+  function LegendView() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.type = LegendView.type;
+    _this.newlineDisabled = false;
+    return _this;
+  }
+
+  LegendView.prototype.init = function () {
+    this.group.add(this._contentGroup = new Group$1());
+    this.group.add(this._selectorGroup = new Group$1());
+    this._isFirstRender = true;
+  };
+  /**
+   * @protected
+   */
+
+
+  LegendView.prototype.getContentGroup = function () {
+    return this._contentGroup;
+  };
+  /**
+   * @protected
+   */
+
+
+  LegendView.prototype.getSelectorGroup = function () {
+    return this._selectorGroup;
+  };
+  /**
+   * @override
+   */
+
+
+  LegendView.prototype.render = function (legendModel, ecModel, api) {
+    var isFirstRender = this._isFirstRender;
+    this._isFirstRender = false;
+    this.resetInner();
+
+    if (!legendModel.get('show', true)) {
+      return;
+    }
+
+    var itemAlign = legendModel.get('align');
+    var orient = legendModel.get('orient');
+
+    if (!itemAlign || itemAlign === 'auto') {
+      itemAlign = legendModel.get('left') === 'right' && orient === 'vertical' ? 'right' : 'left';
+    } // selector has been normalized to an array in model
+
+
+    var selector = legendModel.get('selector', true);
+    var selectorPosition = legendModel.get('selectorPosition', true);
+
+    if (selector && (!selectorPosition || selectorPosition === 'auto')) {
+      selectorPosition = orient === 'horizontal' ? 'end' : 'start';
+    }
+
+    this.renderInner(itemAlign, legendModel, ecModel, api, selector, orient, selectorPosition); // Perform layout.
+
+    var positionInfo = legendModel.getBoxLayoutParams();
+    var viewportSize = {
+      width: api.getWidth(),
+      height: api.getHeight()
+    };
+    var padding = legendModel.get('padding');
+    var maxSize = getLayoutRect(positionInfo, viewportSize, padding);
+    var mainRect = this.layoutInner(legendModel, itemAlign, maxSize, isFirstRender, selector, selectorPosition); // Place mainGroup, based on the calculated `mainRect`.
+
+    var layoutRect = getLayoutRect(defaults({
+      width: mainRect.width,
+      height: mainRect.height
+    }, positionInfo), viewportSize, padding);
+    this.group.x = layoutRect.x - mainRect.x;
+    this.group.y = layoutRect.y - mainRect.y;
+    this.group.markRedraw(); // Render background after group is layout.
+
+    this.group.add(this._backgroundEl = makeBackground(mainRect, legendModel));
+  };
+
+  LegendView.prototype.resetInner = function () {
+    this.getContentGroup().removeAll();
+    this._backgroundEl && this.group.remove(this._backgroundEl);
+    this.getSelectorGroup().removeAll();
+  };
+
+  LegendView.prototype.renderInner = function (itemAlign, legendModel, ecModel, api, selector, orient, selectorPosition) {
+    var contentGroup = this.getContentGroup();
+    var legendDrawnMap = createHashMap();
+    var selectMode = legendModel.get('selectedMode');
+    var excludeSeriesId = [];
+    ecModel.eachRawSeries(function (seriesModel) {
+      !seriesModel.get('legendHoverLink') && excludeSeriesId.push(seriesModel.id);
+    });
+    each(legendModel.getData(), function (legendItemModel, dataIndex) {
+      var name = legendItemModel.get('name'); // Use empty string or \n as a newline string
+
+      if (!this.newlineDisabled && (name === '' || name === '\n')) {
+        var g = new Group$1(); // @ts-ignore
+
+        g.newline = true;
+        contentGroup.add(g);
+        return;
+      } // Representitive series.
+
+
+      var seriesModel = ecModel.getSeriesByName(name)[0];
+
+      if (legendDrawnMap.get(name)) {
+        // Have been drawn
+        return;
+      } // Legend to control series.
+
+
+      if (seriesModel) {
+        var data = seriesModel.getData();
+        var lineVisualStyle = data.getVisual('legendLineStyle') || {};
+        var legendIcon = data.getVisual('legendIcon');
+        /**
+         * `data.getVisual('style')` may be the color from the register
+         * in series. For example, for line series,
+         */
+
+        var style = data.getVisual('style');
+
+        var itemGroup = this._createItem(seriesModel, name, dataIndex, legendItemModel, legendModel, itemAlign, lineVisualStyle, style, legendIcon, selectMode, api);
+
+        itemGroup.on('click', curry(dispatchSelectAction, name, null, api, excludeSeriesId)).on('mouseover', curry(dispatchHighlightAction, seriesModel.name, null, api, excludeSeriesId)).on('mouseout', curry(dispatchDownplayAction, seriesModel.name, null, api, excludeSeriesId));
+        legendDrawnMap.set(name, true);
+      } else {
+        // Legend to control data. In pie and funnel.
+        ecModel.eachRawSeries(function (seriesModel) {
+          // In case multiple series has same data name
+          if (legendDrawnMap.get(name)) {
+            return;
+          }
+
+          if (seriesModel.legendVisualProvider) {
+            var provider = seriesModel.legendVisualProvider;
+
+            if (!provider.containName(name)) {
+              return;
+            }
+
+            var idx = provider.indexOfName(name);
+            var style = provider.getItemVisual(idx, 'style');
+            var legendIcon = provider.getItemVisual(idx, 'legendIcon');
+            var colorArr = parse(style.fill); // Color may be set to transparent in visualMap when data is out of range.
+            // Do not show nothing.
+
+            if (colorArr && colorArr[3] === 0) {
+              colorArr[3] = 0.2; // TODO color is set to 0, 0, 0, 0. Should show correct RGBA
+
+              style = extend(extend({}, style), {
+                fill: stringify(colorArr, 'rgba')
+              });
+            }
+
+            var itemGroup = this._createItem(seriesModel, name, dataIndex, legendItemModel, legendModel, itemAlign, {}, style, legendIcon, selectMode, api); // FIXME: consider different series has items with the same name.
+
+
+            itemGroup.on('click', curry(dispatchSelectAction, null, name, api, excludeSeriesId)) // Should not specify the series name, consider legend controls
+            // more than one pie series.
+            .on('mouseover', curry(dispatchHighlightAction, null, name, api, excludeSeriesId)).on('mouseout', curry(dispatchDownplayAction, null, name, api, excludeSeriesId));
+            legendDrawnMap.set(name, true);
+          }
+        }, this);
+      }
+    }, this);
+
+    if (selector) {
+      this._createSelector(selector, legendModel, api, orient, selectorPosition);
+    }
+  };
+
+  LegendView.prototype._createSelector = function (selector, legendModel, api, orient, selectorPosition) {
+    var selectorGroup = this.getSelectorGroup();
+    each(selector, function createSelectorButton(selectorItem) {
+      var type = selectorItem.type;
+      var labelText = new ZRText({
+        style: {
+          x: 0,
+          y: 0,
+          align: 'center',
+          verticalAlign: 'middle'
+        },
+        onclick: function () {
+          api.dispatchAction({
+            type: type === 'all' ? 'legendAllSelect' : 'legendInverseSelect'
+          });
+        }
+      });
+      selectorGroup.add(labelText);
+      var labelModel = legendModel.getModel('selectorLabel');
+      var emphasisLabelModel = legendModel.getModel(['emphasis', 'selectorLabel']);
+      setLabelStyle(labelText, {
+        normal: labelModel,
+        emphasis: emphasisLabelModel
+      }, {
+        defaultText: selectorItem.title
+      });
+      enableHoverEmphasis(labelText);
+    });
+  };
+
+  LegendView.prototype._createItem = function (seriesModel, name, dataIndex, legendItemModel, legendModel, itemAlign, lineVisualStyle, itemVisualStyle, legendIcon, selectMode, api) {
+    var drawType = seriesModel.visualDrawType;
+    var itemWidth = legendModel.get('itemWidth');
+    var itemHeight = legendModel.get('itemHeight');
+    var isSelected = legendModel.isSelected(name);
+    var iconRotate = legendItemModel.get('symbolRotate');
+    var symbolKeepAspect = legendItemModel.get('symbolKeepAspect');
+    var legendIconType = legendItemModel.get('icon');
+    legendIcon = legendIconType || legendIcon || 'roundRect';
+    var style = getLegendStyle(legendIcon, legendItemModel, lineVisualStyle, itemVisualStyle, drawType, isSelected, api);
+    var itemGroup = new Group$1();
+    var textStyleModel = legendItemModel.getModel('textStyle');
+
+    if (isFunction(seriesModel.getLegendIcon) && (!legendIconType || legendIconType === 'inherit')) {
+      // Series has specific way to define legend icon
+      itemGroup.add(seriesModel.getLegendIcon({
+        itemWidth: itemWidth,
+        itemHeight: itemHeight,
+        icon: legendIcon,
+        iconRotate: iconRotate,
+        itemStyle: style.itemStyle,
+        lineStyle: style.lineStyle,
+        symbolKeepAspect: symbolKeepAspect
+      }));
+    } else {
+      // Use default legend icon policy for most series
+      var rotate = legendIconType === 'inherit' && seriesModel.getData().getVisual('symbol') ? iconRotate === 'inherit' ? seriesModel.getData().getVisual('symbolRotate') : iconRotate : 0; // No rotation for no icon
+
+      itemGroup.add(getDefaultLegendIcon({
+        itemWidth: itemWidth,
+        itemHeight: itemHeight,
+        icon: legendIcon,
+        iconRotate: rotate,
+        itemStyle: style.itemStyle,
+        lineStyle: style.lineStyle,
+        symbolKeepAspect: symbolKeepAspect
+      }));
+    }
+
+    var textX = itemAlign === 'left' ? itemWidth + 5 : -5;
+    var textAlign = itemAlign;
+    var formatter = legendModel.get('formatter');
+    var content = name;
+
+    if (isString(formatter) && formatter) {
+      content = formatter.replace('{name}', name != null ? name : '');
+    } else if (isFunction(formatter)) {
+      content = formatter(name);
+    }
+
+    var inactiveColor = legendItemModel.get('inactiveColor');
+    itemGroup.add(new ZRText({
+      style: createTextStyle(textStyleModel, {
+        text: content,
+        x: textX,
+        y: itemHeight / 2,
+        fill: isSelected ? textStyleModel.getTextColor() : inactiveColor,
+        align: textAlign,
+        verticalAlign: 'middle'
+      })
+    })); // Add a invisible rect to increase the area of mouse hover
+
+    var hitRect = new Rect({
+      shape: itemGroup.getBoundingRect(),
+      invisible: true
+    });
+    var tooltipModel = legendItemModel.getModel('tooltip');
+
+    if (tooltipModel.get('show')) {
+      setTooltipConfig({
+        el: hitRect,
+        componentModel: legendModel,
+        itemName: name,
+        itemTooltipOption: tooltipModel.option
+      });
+    }
+
+    itemGroup.add(hitRect);
+    itemGroup.eachChild(function (child) {
+      child.silent = true;
+    });
+    hitRect.silent = !selectMode;
+    this.getContentGroup().add(itemGroup);
+    enableHoverEmphasis(itemGroup); // @ts-ignore
+
+    itemGroup.__legendDataIndex = dataIndex;
+    return itemGroup;
+  };
+
+  LegendView.prototype.layoutInner = function (legendModel, itemAlign, maxSize, isFirstRender, selector, selectorPosition) {
+    var contentGroup = this.getContentGroup();
+    var selectorGroup = this.getSelectorGroup(); // Place items in contentGroup.
+
+    box(legendModel.get('orient'), contentGroup, legendModel.get('itemGap'), maxSize.width, maxSize.height);
+    var contentRect = contentGroup.getBoundingRect();
+    var contentPos = [-contentRect.x, -contentRect.y];
+    selectorGroup.markRedraw();
+    contentGroup.markRedraw();
+
+    if (selector) {
+      // Place buttons in selectorGroup
+      box( // Buttons in selectorGroup always layout horizontally
+      'horizontal', selectorGroup, legendModel.get('selectorItemGap', true));
+      var selectorRect = selectorGroup.getBoundingRect();
+      var selectorPos = [-selectorRect.x, -selectorRect.y];
+      var selectorButtonGap = legendModel.get('selectorButtonGap', true);
+      var orientIdx = legendModel.getOrient().index;
+      var wh = orientIdx === 0 ? 'width' : 'height';
+      var hw = orientIdx === 0 ? 'height' : 'width';
+      var yx = orientIdx === 0 ? 'y' : 'x';
+
+      if (selectorPosition === 'end') {
+        selectorPos[orientIdx] += contentRect[wh] + selectorButtonGap;
+      } else {
+        contentPos[orientIdx] += selectorRect[wh] + selectorButtonGap;
+      } // Always align selector to content as 'middle'
+
+
+      selectorPos[1 - orientIdx] += contentRect[hw] / 2 - selectorRect[hw] / 2;
+      selectorGroup.x = selectorPos[0];
+      selectorGroup.y = selectorPos[1];
+      contentGroup.x = contentPos[0];
+      contentGroup.y = contentPos[1];
+      var mainRect = {
+        x: 0,
+        y: 0
+      };
+      mainRect[wh] = contentRect[wh] + selectorButtonGap + selectorRect[wh];
+      mainRect[hw] = Math.max(contentRect[hw], selectorRect[hw]);
+      mainRect[yx] = Math.min(0, selectorRect[yx] + selectorPos[1 - orientIdx]);
+      return mainRect;
+    } else {
+      contentGroup.x = contentPos[0];
+      contentGroup.y = contentPos[1];
+      return this.group.getBoundingRect();
+    }
+  };
+  /**
+   * @protected
+   */
+
+
+  LegendView.prototype.remove = function () {
+    this.getContentGroup().removeAll();
+    this._isFirstRender = true;
+  };
+
+  LegendView.type = 'legend.plain';
+  return LegendView;
+}(ComponentView);
+
+function getLegendStyle(iconType, legendItemModel, lineVisualStyle, itemVisualStyle, drawType, isSelected, api) {
+  /**
+   * Use series style if is inherit;
+   * elsewise, use legend style
+   */
+  function handleCommonProps(style, visualStyle) {
+    // If lineStyle.width is 'auto', it is set to be 2 if series has border
+    if (style.lineWidth === 'auto') {
+      style.lineWidth = visualStyle.lineWidth > 0 ? 2 : 0;
+    }
+
+    each(style, function (propVal, propName) {
+      style[propName] === 'inherit' && (style[propName] = visualStyle[propName]);
+    });
+  } // itemStyle
+
+
+  var itemStyleModel = legendItemModel.getModel('itemStyle');
+  var itemStyle = itemStyleModel.getItemStyle();
+  var iconBrushType = iconType.lastIndexOf('empty', 0) === 0 ? 'fill' : 'stroke';
+  var decalStyle = itemStyleModel.getShallow('decal');
+  itemStyle.decal = !decalStyle || decalStyle === 'inherit' ? itemVisualStyle.decal : createOrUpdatePatternFromDecal(decalStyle, api);
+
+  if (itemStyle.fill === 'inherit') {
+    /**
+     * Series with visualDrawType as 'stroke' should have
+     * series stroke as legend fill
+     */
+    itemStyle.fill = itemVisualStyle[drawType];
+  }
+
+  if (itemStyle.stroke === 'inherit') {
+    /**
+     * icon type with "emptyXXX" should use fill color
+     * in visual style
+     */
+    itemStyle.stroke = itemVisualStyle[iconBrushType];
+  }
+
+  if (itemStyle.opacity === 'inherit') {
+    /**
+     * Use lineStyle.opacity if drawType is stroke
+     */
+    itemStyle.opacity = (drawType === 'fill' ? itemVisualStyle : lineVisualStyle).opacity;
+  }
+
+  handleCommonProps(itemStyle, itemVisualStyle); // lineStyle
+
+  var legendLineModel = legendItemModel.getModel('lineStyle');
+  var lineStyle = legendLineModel.getLineStyle();
+  handleCommonProps(lineStyle, lineVisualStyle); // Fix auto color to real color
+
+  itemStyle.fill === 'auto' && (itemStyle.fill = itemVisualStyle.fill);
+  itemStyle.stroke === 'auto' && (itemStyle.stroke = itemVisualStyle.fill);
+  lineStyle.stroke === 'auto' && (lineStyle.stroke = itemVisualStyle.fill);
+
+  if (!isSelected) {
+    var borderWidth = legendItemModel.get('inactiveBorderWidth');
+    /**
+     * Since stroke is set to be inactiveBorderColor, it may occur that
+     * there is no border in series but border in legend, so we need to
+     * use border only when series has border if is set to be auto
+     */
+
+    var visualHasBorder = itemStyle[iconBrushType];
+    itemStyle.lineWidth = borderWidth === 'auto' ? itemVisualStyle.lineWidth > 0 && visualHasBorder ? 2 : 0 : itemStyle.lineWidth;
+    itemStyle.fill = legendItemModel.get('inactiveColor');
+    itemStyle.stroke = legendItemModel.get('inactiveBorderColor');
+    lineStyle.stroke = legendLineModel.get('inactiveColor');
+    lineStyle.lineWidth = legendLineModel.get('inactiveWidth');
+  }
+
+  return {
+    itemStyle: itemStyle,
+    lineStyle: lineStyle
+  };
+}
+
+function getDefaultLegendIcon(opt) {
+  var symboType = opt.icon || 'roundRect';
+  var icon = createSymbol(symboType, 0, 0, opt.itemWidth, opt.itemHeight, opt.itemStyle.fill, opt.symbolKeepAspect);
+  icon.setStyle(opt.itemStyle);
+  icon.rotation = (opt.iconRotate || 0) * Math.PI / 180;
+  icon.setOrigin([opt.itemWidth / 2, opt.itemHeight / 2]);
+
+  if (symboType.indexOf('empty') > -1) {
+    icon.style.stroke = icon.style.fill;
+    icon.style.fill = '#fff';
+    icon.style.lineWidth = 2;
+  }
+
+  return icon;
+}
+
+function dispatchSelectAction(seriesName, dataName, api, excludeSeriesId) {
+  // downplay before unselect
+  dispatchDownplayAction(seriesName, dataName, api, excludeSeriesId);
+  api.dispatchAction({
+    type: 'legendToggleSelect',
+    name: seriesName != null ? seriesName : dataName
+  }); // highlight after select
+  // TODO highlight immediately may cause animation loss.
+
+  dispatchHighlightAction(seriesName, dataName, api, excludeSeriesId);
+}
+
+function isUseHoverLayer(api) {
+  var list = api.getZr().storage.getDisplayList();
+  var emphasisState;
+  var i = 0;
+  var len = list.length;
+
+  while (i < len && !(emphasisState = list[i].states.emphasis)) {
+    i++;
+  }
+
+  return emphasisState && emphasisState.hoverLayer;
+}
+
+function dispatchHighlightAction(seriesName, dataName, api, excludeSeriesId) {
+  // If element hover will move to a hoverLayer.
+  if (!isUseHoverLayer(api)) {
+    api.dispatchAction({
+      type: 'highlight',
+      seriesName: seriesName,
+      name: dataName,
+      excludeSeriesId: excludeSeriesId
+    });
+  }
+}
+
+function dispatchDownplayAction(seriesName, dataName, api, excludeSeriesId) {
+  // If element hover will move to a hoverLayer.
+  if (!isUseHoverLayer(api)) {
+    api.dispatchAction({
+      type: 'downplay',
+      seriesName: seriesName,
+      name: dataName,
+      excludeSeriesId: excludeSeriesId
+    });
+  }
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+function legendFilter(ecModel) {
+  var legendModels = ecModel.findComponents({
+    mainType: 'legend'
+  });
+
+  if (legendModels && legendModels.length) {
+    ecModel.filterSeries(function (series) {
+      // If in any legend component the status is not selected.
+      // Because in legend series is assumed selected when it is not in the legend data.
+      for (var i = 0; i < legendModels.length; i++) {
+        if (!legendModels[i].isSelected(series.name)) {
+          return false;
+        }
+      }
+
+      return true;
+    });
+  }
+}
+
+function legendSelectActionHandler(methodName, payload, ecModel) {
+  var selectedMap = {};
+  var isToggleSelect = methodName === 'toggleSelected';
+  var isSelected; // Update all legend components
+
+  ecModel.eachComponent('legend', function (legendModel) {
+    if (isToggleSelect && isSelected != null) {
+      // Force other legend has same selected status
+      // Or the first is toggled to true and other are toggled to false
+      // In the case one legend has some item unSelected in option. And if other legend
+      // doesn't has the item, they will assume it is selected.
+      legendModel[isSelected ? 'select' : 'unSelect'](payload.name);
+    } else if (methodName === 'allSelect' || methodName === 'inverseSelect') {
+      legendModel[methodName]();
+    } else {
+      legendModel[methodName](payload.name);
+      isSelected = legendModel.isSelected(payload.name);
+    }
+
+    var legendData = legendModel.getData();
+    each$1(legendData, function (model) {
+      var name = model.get('name'); // Wrap element
+
+      if (name === '\n' || name === '') {
+        return;
+      }
+
+      var isItemSelected = legendModel.isSelected(name);
+
+      if (selectedMap.hasOwnProperty(name)) {
+        // Unselected if any legend is unselected
+        selectedMap[name] = selectedMap[name] && isItemSelected;
+      } else {
+        selectedMap[name] = isItemSelected;
+      }
+    });
+  }); // Return the event explicitly
+
+  return methodName === 'allSelect' || methodName === 'inverseSelect' ? {
+    selected: selectedMap
+  } : {
+    name: payload.name,
+    selected: selectedMap
+  };
+}
+
+function installLegendAction(registers) {
+  /**
+   * @event legendToggleSelect
+   * @type {Object}
+   * @property {string} type 'legendToggleSelect'
+   * @property {string} [from]
+   * @property {string} name Series name or data item name
+   */
+  registers.registerAction('legendToggleSelect', 'legendselectchanged', curry$1(legendSelectActionHandler, 'toggleSelected'));
+  registers.registerAction('legendAllSelect', 'legendselectall', curry$1(legendSelectActionHandler, 'allSelect'));
+  registers.registerAction('legendInverseSelect', 'legendinverseselect', curry$1(legendSelectActionHandler, 'inverseSelect'));
+  /**
+   * @event legendSelect
+   * @type {Object}
+   * @property {string} type 'legendSelect'
+   * @property {string} name Series name or data item name
+   */
+
+  registers.registerAction('legendSelect', 'legendselected', curry$1(legendSelectActionHandler, 'select'));
+  /**
+   * @event legendUnSelect
+   * @type {Object}
+   * @property {string} type 'legendUnSelect'
+   * @property {string} name Series name or data item name
+   */
+
+  registers.registerAction('legendUnSelect', 'legendunselected', curry$1(legendSelectActionHandler, 'unSelect'));
+}
+
+function install$3(registers) {
+  registers.registerComponentModel(LegendModel);
+  registers.registerComponentView(LegendView);
+  registers.registerProcessor(registers.PRIORITY.PROCESSOR.SERIES_FILTER, legendFilter);
+  registers.registerSubTypeDefaulter('legend', function () {
+    return 'plain';
+  });
+  installLegendAction(registers);
+}
+
+var ScrollableLegendModel =
+/** @class */
+function (_super) {
+  __extends(ScrollableLegendModel, _super);
+
+  function ScrollableLegendModel() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.type = ScrollableLegendModel.type;
+    return _this;
+  }
+  /**
+   * @param {number} scrollDataIndex
+   */
+
+
+  ScrollableLegendModel.prototype.setScrollDataIndex = function (scrollDataIndex) {
+    this.option.scrollDataIndex = scrollDataIndex;
+  };
+
+  ScrollableLegendModel.prototype.init = function (option, parentModel, ecModel) {
+    var inputPositionParams = getLayoutParams(option);
+
+    _super.prototype.init.call(this, option, parentModel, ecModel);
+
+    mergeAndNormalizeLayoutParams(this, option, inputPositionParams);
+  };
+  /**
+   * @override
+   */
+
+
+  ScrollableLegendModel.prototype.mergeOption = function (option, ecModel) {
+    _super.prototype.mergeOption.call(this, option, ecModel);
+
+    mergeAndNormalizeLayoutParams(this, this.option, option);
+  };
+
+  ScrollableLegendModel.type = 'legend.scroll';
+  ScrollableLegendModel.defaultOption = inheritDefaultOption(LegendModel.defaultOption, {
+    scrollDataIndex: 0,
+    pageButtonItemGap: 5,
+    pageButtonGap: null,
+    pageButtonPosition: 'end',
+    pageFormatter: '{current}/{total}',
+    pageIcons: {
+      horizontal: ['M0,0L12,-10L12,10z', 'M0,0L-12,-10L-12,10z'],
+      vertical: ['M0,0L20,0L10,-20z', 'M0,0L20,0L10,20z']
+    },
+    pageIconColor: '#2f4554',
+    pageIconInactiveColor: '#aaa',
+    pageIconSize: 15,
+    pageTextStyle: {
+      color: '#333'
+    },
+    animationDurationUpdate: 800
+  });
+  return ScrollableLegendModel;
+}(LegendModel);
+
+function mergeAndNormalizeLayoutParams(legendModel, target, raw) {
+  var orient = legendModel.getOrient();
+  var ignoreSize = [1, 1];
+  ignoreSize[orient.index] = 0;
+  mergeLayoutParam(target, raw, {
+    type: 'box',
+    ignoreSize: !!ignoreSize
+  });
+}
+
+var Group = Group$2;
+var WH = ['width', 'height'];
+var XY = ['x', 'y'];
+
+var ScrollableLegendView =
+/** @class */
+function (_super) {
+  __extends(ScrollableLegendView, _super);
+
+  function ScrollableLegendView() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.type = ScrollableLegendView.type;
+    _this.newlineDisabled = true;
+    _this._currentIndex = 0;
+    return _this;
+  }
+
+  ScrollableLegendView.prototype.init = function () {
+    _super.prototype.init.call(this);
+
+    this.group.add(this._containerGroup = new Group());
+
+    this._containerGroup.add(this.getContentGroup());
+
+    this.group.add(this._controllerGroup = new Group());
+  };
+  /**
+   * @override
+   */
+
+
+  ScrollableLegendView.prototype.resetInner = function () {
+    _super.prototype.resetInner.call(this);
+
+    this._controllerGroup.removeAll();
+
+    this._containerGroup.removeClipPath();
+
+    this._containerGroup.__rectSize = null;
+  };
+  /**
+   * @override
+   */
+
+
+  ScrollableLegendView.prototype.renderInner = function (itemAlign, legendModel, ecModel, api, selector, orient, selectorPosition) {
+    var self = this; // Render content items.
+
+    _super.prototype.renderInner.call(this, itemAlign, legendModel, ecModel, api, selector, orient, selectorPosition);
+
+    var controllerGroup = this._controllerGroup; // FIXME: support be 'auto' adapt to size number text length,
+    // e.g., '3/12345' should not overlap with the control arrow button.
+
+    var pageIconSize = legendModel.get('pageIconSize', true);
+    var pageIconSizeArr = isArray(pageIconSize) ? pageIconSize : [pageIconSize, pageIconSize];
+    createPageButton('pagePrev', 0);
+    var pageTextStyleModel = legendModel.getModel('pageTextStyle');
+    controllerGroup.add(new ZRText({
+      name: 'pageText',
+      style: {
+        // Placeholder to calculate a proper layout.
+        text: 'xx/xx',
+        fill: pageTextStyleModel.getTextColor(),
+        font: pageTextStyleModel.getFont(),
+        verticalAlign: 'middle',
+        align: 'center'
+      },
+      silent: true
+    }));
+    createPageButton('pageNext', 1);
+
+    function createPageButton(name, iconIdx) {
+      var pageDataIndexName = name + 'DataIndex';
+      var icon = createIcon(legendModel.get('pageIcons', true)[legendModel.getOrient().name][iconIdx], {
+        // Buttons will be created in each render, so we do not need
+        // to worry about avoiding using legendModel kept in scope.
+        onclick: bind(self._pageGo, self, pageDataIndexName, legendModel, api)
+      }, {
+        x: -pageIconSizeArr[0] / 2,
+        y: -pageIconSizeArr[1] / 2,
+        width: pageIconSizeArr[0],
+        height: pageIconSizeArr[1]
+      });
+      icon.name = name;
+      controllerGroup.add(icon);
+    }
+  };
+  /**
+   * @override
+   */
+
+
+  ScrollableLegendView.prototype.layoutInner = function (legendModel, itemAlign, maxSize, isFirstRender, selector, selectorPosition) {
+    var selectorGroup = this.getSelectorGroup();
+    var orientIdx = legendModel.getOrient().index;
+    var wh = WH[orientIdx];
+    var xy = XY[orientIdx];
+    var hw = WH[1 - orientIdx];
+    var yx = XY[1 - orientIdx];
+    selector && box( // Buttons in selectorGroup always layout horizontally
+    'horizontal', selectorGroup, legendModel.get('selectorItemGap', true));
+    var selectorButtonGap = legendModel.get('selectorButtonGap', true);
+    var selectorRect = selectorGroup.getBoundingRect();
+    var selectorPos = [-selectorRect.x, -selectorRect.y];
+    var processMaxSize = clone(maxSize);
+    selector && (processMaxSize[wh] = maxSize[wh] - selectorRect[wh] - selectorButtonGap);
+
+    var mainRect = this._layoutContentAndController(legendModel, isFirstRender, processMaxSize, orientIdx, wh, hw, yx, xy);
+
+    if (selector) {
+      if (selectorPosition === 'end') {
+        selectorPos[orientIdx] += mainRect[wh] + selectorButtonGap;
+      } else {
+        var offset = selectorRect[wh] + selectorButtonGap;
+        selectorPos[orientIdx] -= offset;
+        mainRect[xy] -= offset;
+      }
+
+      mainRect[wh] += selectorRect[wh] + selectorButtonGap;
+      selectorPos[1 - orientIdx] += mainRect[yx] + mainRect[hw] / 2 - selectorRect[hw] / 2;
+      mainRect[hw] = Math.max(mainRect[hw], selectorRect[hw]);
+      mainRect[yx] = Math.min(mainRect[yx], selectorRect[yx] + selectorPos[1 - orientIdx]);
+      selectorGroup.x = selectorPos[0];
+      selectorGroup.y = selectorPos[1];
+      selectorGroup.markRedraw();
+    }
+
+    return mainRect;
+  };
+
+  ScrollableLegendView.prototype._layoutContentAndController = function (legendModel, isFirstRender, maxSize, orientIdx, wh, hw, yx, xy) {
+    var contentGroup = this.getContentGroup();
+    var containerGroup = this._containerGroup;
+    var controllerGroup = this._controllerGroup; // Place items in contentGroup.
+
+    box(legendModel.get('orient'), contentGroup, legendModel.get('itemGap'), !orientIdx ? null : maxSize.width, orientIdx ? null : maxSize.height);
+    box( // Buttons in controller are layout always horizontally.
+    'horizontal', controllerGroup, legendModel.get('pageButtonItemGap', true));
+    var contentRect = contentGroup.getBoundingRect();
+    var controllerRect = controllerGroup.getBoundingRect();
+    var showController = this._showController = contentRect[wh] > maxSize[wh]; // In case that the inner elements of contentGroup layout do not based on [0, 0]
+
+    var contentPos = [-contentRect.x, -contentRect.y]; // Remain contentPos when scroll animation perfroming.
+    // If first rendering, `contentGroup.position` is [0, 0], which
+    // does not make sense and may cause unexepcted animation if adopted.
+
+    if (!isFirstRender) {
+      contentPos[orientIdx] = contentGroup[xy];
+    } // Layout container group based on 0.
+
+
+    var containerPos = [0, 0];
+    var controllerPos = [-controllerRect.x, -controllerRect.y];
+    var pageButtonGap = retrieve2(legendModel.get('pageButtonGap', true), legendModel.get('itemGap', true)); // Place containerGroup and controllerGroup and contentGroup.
+
+    if (showController) {
+      var pageButtonPosition = legendModel.get('pageButtonPosition', true); // controller is on the right / bottom.
+
+      if (pageButtonPosition === 'end') {
+        controllerPos[orientIdx] += maxSize[wh] - controllerRect[wh];
+      } // controller is on the left / top.
+      else {
+          containerPos[orientIdx] += controllerRect[wh] + pageButtonGap;
+        }
+    } // Always align controller to content as 'middle'.
+
+
+    controllerPos[1 - orientIdx] += contentRect[hw] / 2 - controllerRect[hw] / 2;
+    contentGroup.setPosition(contentPos);
+    containerGroup.setPosition(containerPos);
+    controllerGroup.setPosition(controllerPos); // Calculate `mainRect` and set `clipPath`.
+    // mainRect should not be calculated by `this.group.getBoundingRect()`
+    // for sake of the overflow.
+
+    var mainRect = {
+      x: 0,
+      y: 0
+    }; // Consider content may be overflow (should be clipped).
+
+    mainRect[wh] = showController ? maxSize[wh] : contentRect[wh];
+    mainRect[hw] = Math.max(contentRect[hw], controllerRect[hw]); // `containerRect[yx] + containerPos[1 - orientIdx]` is 0.
+
+    mainRect[yx] = Math.min(0, controllerRect[yx] + controllerPos[1 - orientIdx]);
+    containerGroup.__rectSize = maxSize[wh];
+
+    if (showController) {
+      var clipShape = {
+        x: 0,
+        y: 0
+      };
+      clipShape[wh] = Math.max(maxSize[wh] - controllerRect[wh] - pageButtonGap, 0);
+      clipShape[hw] = mainRect[hw];
+      containerGroup.setClipPath(new Rect({
+        shape: clipShape
+      })); // Consider content may be larger than container, container rect
+      // can not be obtained from `containerGroup.getBoundingRect()`.
+
+      containerGroup.__rectSize = clipShape[wh];
+    } else {
+      // Do not remove or ignore controller. Keep them set as placeholders.
+      controllerGroup.eachChild(function (child) {
+        child.attr({
+          invisible: true,
+          silent: true
+        });
+      });
+    } // Content translate animation.
+
+
+    var pageInfo = this._getPageInfo(legendModel);
+
+    pageInfo.pageIndex != null && updateProps(contentGroup, {
+      x: pageInfo.contentPosition[0],
+      y: pageInfo.contentPosition[1]
+    }, // When switch from "show controller" to "not show controller", view should be
+    // updated immediately without animation, otherwise causes weird effect.
+    showController ? legendModel : null);
+
+    this._updatePageInfoView(legendModel, pageInfo);
+
+    return mainRect;
+  };
+
+  ScrollableLegendView.prototype._pageGo = function (to, legendModel, api) {
+    var scrollDataIndex = this._getPageInfo(legendModel)[to];
+
+    scrollDataIndex != null && api.dispatchAction({
+      type: 'legendScroll',
+      scrollDataIndex: scrollDataIndex,
+      legendId: legendModel.id
+    });
+  };
+
+  ScrollableLegendView.prototype._updatePageInfoView = function (legendModel, pageInfo) {
+    var controllerGroup = this._controllerGroup;
+    each$1(['pagePrev', 'pageNext'], function (name) {
+      var key = name + 'DataIndex';
+      var canJump = pageInfo[key] != null;
+      var icon = controllerGroup.childOfName(name);
+
+      if (icon) {
+        icon.setStyle('fill', canJump ? legendModel.get('pageIconColor', true) : legendModel.get('pageIconInactiveColor', true));
+        icon.cursor = canJump ? 'pointer' : 'default';
+      }
+    });
+    var pageText = controllerGroup.childOfName('pageText');
+    var pageFormatter = legendModel.get('pageFormatter');
+    var pageIndex = pageInfo.pageIndex;
+    var current = pageIndex != null ? pageIndex + 1 : 0;
+    var total = pageInfo.pageCount;
+    pageText && pageFormatter && pageText.setStyle('text', isString(pageFormatter) ? pageFormatter.replace('{current}', current == null ? '' : current + '').replace('{total}', total == null ? '' : total + '') : pageFormatter({
+      current: current,
+      total: total
+    }));
+  };
+  /**
+   *  contentPosition: Array.<number>, null when data item not found.
+   *  pageIndex: number, null when data item not found.
+   *  pageCount: number, always be a number, can be 0.
+   *  pagePrevDataIndex: number, null when no previous page.
+   *  pageNextDataIndex: number, null when no next page.
+   * }
+   */
+
+
+  ScrollableLegendView.prototype._getPageInfo = function (legendModel) {
+    var scrollDataIndex = legendModel.get('scrollDataIndex', true);
+    var contentGroup = this.getContentGroup();
+    var containerRectSize = this._containerGroup.__rectSize;
+    var orientIdx = legendModel.getOrient().index;
+    var wh = WH[orientIdx];
+    var xy = XY[orientIdx];
+
+    var targetItemIndex = this._findTargetItemIndex(scrollDataIndex);
+
+    var children = contentGroup.children();
+    var targetItem = children[targetItemIndex];
+    var itemCount = children.length;
+    var pCount = !itemCount ? 0 : 1;
+    var result = {
+      contentPosition: [contentGroup.x, contentGroup.y],
+      pageCount: pCount,
+      pageIndex: pCount - 1,
+      pagePrevDataIndex: null,
+      pageNextDataIndex: null
+    };
+
+    if (!targetItem) {
+      return result;
+    }
+
+    var targetItemInfo = getItemInfo(targetItem);
+    result.contentPosition[orientIdx] = -targetItemInfo.s; // Strategy:
+    // (1) Always align based on the left/top most item.
+    // (2) It is user-friendly that the last item shown in the
+    // current window is shown at the begining of next window.
+    // Otherwise if half of the last item is cut by the window,
+    // it will have no chance to display entirely.
+    // (3) Consider that item size probably be different, we
+    // have calculate pageIndex by size rather than item index,
+    // and we can not get page index directly by division.
+    // (4) The window is to narrow to contain more than
+    // one item, we should make sure that the page can be fliped.
+
+    for (var i = targetItemIndex + 1, winStartItemInfo = targetItemInfo, winEndItemInfo = targetItemInfo, currItemInfo = null; i <= itemCount; ++i) {
+      currItemInfo = getItemInfo(children[i]);
+
+      if ( // Half of the last item is out of the window.
+      !currItemInfo && winEndItemInfo.e > winStartItemInfo.s + containerRectSize || // If the current item does not intersect with the window, the new page
+      // can be started at the current item or the last item.
+      currItemInfo && !intersect(currItemInfo, winStartItemInfo.s)) {
+        if (winEndItemInfo.i > winStartItemInfo.i) {
+          winStartItemInfo = winEndItemInfo;
+        } else {
+          // e.g., when page size is smaller than item size.
+          winStartItemInfo = currItemInfo;
+        }
+
+        if (winStartItemInfo) {
+          if (result.pageNextDataIndex == null) {
+            result.pageNextDataIndex = winStartItemInfo.i;
+          }
+
+          ++result.pageCount;
+        }
+      }
+
+      winEndItemInfo = currItemInfo;
+    }
+
+    for (var i = targetItemIndex - 1, winStartItemInfo = targetItemInfo, winEndItemInfo = targetItemInfo, currItemInfo = null; i >= -1; --i) {
+      currItemInfo = getItemInfo(children[i]);
+
+      if ( // If the the end item does not intersect with the window started
+      // from the current item, a page can be settled.
+      (!currItemInfo || !intersect(winEndItemInfo, currItemInfo.s)) && // e.g., when page size is smaller than item size.
+      winStartItemInfo.i < winEndItemInfo.i) {
+        winEndItemInfo = winStartItemInfo;
+
+        if (result.pagePrevDataIndex == null) {
+          result.pagePrevDataIndex = winStartItemInfo.i;
+        }
+
+        ++result.pageCount;
+        ++result.pageIndex;
+      }
+
+      winStartItemInfo = currItemInfo;
+    }
+
+    return result;
+
+    function getItemInfo(el) {
+      if (el) {
+        var itemRect = el.getBoundingRect();
+        var start = itemRect[xy] + el[xy];
+        return {
+          s: start,
+          e: start + itemRect[wh],
+          i: el.__legendDataIndex
+        };
+      }
+    }
+
+    function intersect(itemInfo, winStart) {
+      return itemInfo.e >= winStart && itemInfo.s <= winStart + containerRectSize;
+    }
+  };
+
+  ScrollableLegendView.prototype._findTargetItemIndex = function (targetDataIndex) {
+    if (!this._showController) {
+      return 0;
+    }
+
+    var index;
+    var contentGroup = this.getContentGroup();
+    var defaultIndex;
+    contentGroup.eachChild(function (child, idx) {
+      var legendDataIdx = child.__legendDataIndex; // FIXME
+      // If the given targetDataIndex (from model) is illegal,
+      // we use defaultIndex. But the index on the legend model and
+      // action payload is still illegal. That case will not be
+      // changed until some scenario requires.
+
+      if (defaultIndex == null && legendDataIdx != null) {
+        defaultIndex = idx;
+      }
+
+      if (legendDataIdx === targetDataIndex) {
+        index = idx;
+      }
+    });
+    return index != null ? index : defaultIndex;
+  };
+
+  ScrollableLegendView.type = 'legend.scroll';
+  return ScrollableLegendView;
+}(LegendView);
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+function installScrollableLegendAction(registers) {
+  /**
+   * @event legendScroll
+   * @type {Object}
+   * @property {string} type 'legendScroll'
+   * @property {string} scrollDataIndex
+   */
+  registers.registerAction('legendScroll', 'legendscroll', function (payload, ecModel) {
+    var scrollDataIndex = payload.scrollDataIndex;
+    scrollDataIndex != null && ecModel.eachComponent({
+      mainType: 'legend',
+      subType: 'scroll',
+      query: payload
+    }, function (legendModel) {
+      legendModel.setScrollDataIndex(scrollDataIndex);
+    });
+  });
+}
+
+function install$2(registers) {
+  use(install$3);
+  registers.registerComponentModel(ScrollableLegendModel);
+  registers.registerComponentView(ScrollableLegendView);
+  installScrollableLegendAction(registers);
+}
+
+function install$1(registers) {
+  use(install$3);
+  use(install$2);
+}
+
+var PI2 = Math.PI * 2;
+var RADIAN$1 = Math.PI / 180;
+
+function getViewRect(seriesModel, api) {
+  return getLayoutRect(seriesModel.getBoxLayoutParams(), {
+    width: api.getWidth(),
+    height: api.getHeight()
+  });
+}
+
+function getBasicPieLayout(seriesModel, api) {
+  var viewRect = getViewRect(seriesModel, api); // center can be string or number when coordinateSystem is specified
+
+  var center = seriesModel.get('center');
+  var radius = seriesModel.get('radius');
+
+  if (!isArray(radius)) {
+    radius = [0, radius];
+  }
+
+  var width = parsePercent(viewRect.width, api.getWidth());
+  var height = parsePercent(viewRect.height, api.getHeight());
+  var size = Math.min(width, height);
+  var r0 = parsePercent(radius[0], size / 2);
+  var r = parsePercent(radius[1], size / 2);
+  var cx;
+  var cy;
+  var coordSys = seriesModel.coordinateSystem;
+
+  if (coordSys) {
+    // percentage is not allowed when coordinate system is specified
+    var point = coordSys.dataToPoint(center);
+    cx = point[0] || 0;
+    cy = point[1] || 0;
+  } else {
+    if (!isArray(center)) {
+      center = [center, center];
+    }
+
+    cx = parsePercent(center[0], width) + viewRect.x;
+    cy = parsePercent(center[1], height) + viewRect.y;
+  }
+
+  return {
+    cx: cx,
+    cy: cy,
+    r0: r0,
+    r: r
+  };
+}
+function pieLayout(seriesType, ecModel, api) {
+  ecModel.eachSeriesByType(seriesType, function (seriesModel) {
+    var data = seriesModel.getData();
+    var valueDim = data.mapDimension('value');
+    var viewRect = getViewRect(seriesModel, api);
+
+    var _a = getBasicPieLayout(seriesModel, api),
+        cx = _a.cx,
+        cy = _a.cy,
+        r = _a.r,
+        r0 = _a.r0;
+
+    var startAngle = -seriesModel.get('startAngle') * RADIAN$1;
+    var minAngle = seriesModel.get('minAngle') * RADIAN$1;
+    var validDataCount = 0;
+    data.each(valueDim, function (value) {
+      !isNaN(value) && validDataCount++;
+    });
+    var sum = data.getSum(valueDim); // Sum may be 0
+
+    var unitRadian = Math.PI / (sum || validDataCount) * 2;
+    var clockwise = seriesModel.get('clockwise');
+    var roseType = seriesModel.get('roseType');
+    var stillShowZeroSum = seriesModel.get('stillShowZeroSum'); // [0...max]
+
+    var extent = data.getDataExtent(valueDim);
+    extent[0] = 0; // In the case some sector angle is smaller than minAngle
+
+    var restAngle = PI2;
+    var valueSumLargerThanMinAngle = 0;
+    var currentAngle = startAngle;
+    var dir = clockwise ? 1 : -1;
+    data.setLayout({
+      viewRect: viewRect,
+      r: r
+    });
+    data.each(valueDim, function (value, idx) {
+      var angle;
+
+      if (isNaN(value)) {
+        data.setItemLayout(idx, {
+          angle: NaN,
+          startAngle: NaN,
+          endAngle: NaN,
+          clockwise: clockwise,
+          cx: cx,
+          cy: cy,
+          r0: r0,
+          r: roseType ? NaN : r
+        });
+        return;
+      } // FIXME 兼容 2.0 但是 roseType 是 area 的时候才是这样？
+
+
+      if (roseType !== 'area') {
+        angle = sum === 0 && stillShowZeroSum ? unitRadian : value * unitRadian;
+      } else {
+        angle = PI2 / validDataCount;
+      }
+
+      if (angle < minAngle) {
+        angle = minAngle;
+        restAngle -= minAngle;
+      } else {
+        valueSumLargerThanMinAngle += value;
+      }
+
+      var endAngle = currentAngle + dir * angle;
+      data.setItemLayout(idx, {
+        angle: angle,
+        startAngle: currentAngle,
+        endAngle: endAngle,
+        clockwise: clockwise,
+        cx: cx,
+        cy: cy,
+        r0: r0,
+        r: roseType ? linearMap(value, extent, [r0, r]) : r
+      });
+      currentAngle = endAngle;
+    }); // Some sector is constrained by minAngle
+    // Rest sectors needs recalculate angle
+
+    if (restAngle < PI2 && validDataCount) {
+      // Average the angle if rest angle is not enough after all angles is
+      // Constrained by minAngle
+      if (restAngle <= 1e-3) {
+        var angle_1 = PI2 / validDataCount;
+        data.each(valueDim, function (value, idx) {
+          if (!isNaN(value)) {
+            var layout_1 = data.getItemLayout(idx);
+            layout_1.angle = angle_1;
+            layout_1.startAngle = startAngle + dir * idx * angle_1;
+            layout_1.endAngle = startAngle + dir * (idx + 1) * angle_1;
+          }
+        });
+      } else {
+        unitRadian = restAngle / valueSumLargerThanMinAngle;
+        currentAngle = startAngle;
+        data.each(valueDim, function (value, idx) {
+          if (!isNaN(value)) {
+            var layout_2 = data.getItemLayout(idx);
+            var angle = layout_2.angle === minAngle ? minAngle : value * unitRadian;
+            layout_2.startAngle = currentAngle;
+            layout_2.endAngle = currentAngle + dir * angle;
+            currentAngle += dir * angle;
+          }
+        });
+      }
+    }
+  });
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+function dataFilter(seriesType) {
+  return {
+    seriesType: seriesType,
+    reset: function (seriesModel, ecModel) {
+      var legendModels = ecModel.findComponents({
+        mainType: 'legend'
+      });
+
+      if (!legendModels || !legendModels.length) {
+        return;
+      }
+
+      var data = seriesModel.getData();
+      data.filterSelf(function (idx) {
+        var name = data.getName(idx); // If in any legend component the status is not selected.
+
+        for (var i = 0; i < legendModels.length; i++) {
+          // @ts-ignore FIXME: LegendModel
+          if (!legendModels[i].isSelected(name)) {
+            return false;
+          }
+        }
+
+        return true;
+      });
+    }
+  };
+}
+
+var RADIAN = Math.PI / 180;
+
+function adjustSingleSide(list, cx, cy, r, dir, viewWidth, viewHeight, viewLeft, viewTop, farthestX) {
+  if (list.length < 2) {
+    return;
+  }
+
+  function recalculateXOnSemiToAlignOnEllipseCurve(semi) {
+    var rB = semi.rB;
+    var rB2 = rB * rB;
+
+    for (var i = 0; i < semi.list.length; i++) {
+      var item = semi.list[i];
+      var dy = Math.abs(item.label.y - cy); // horizontal r is always same with original r because x is not changed.
+
+      var rA = r + item.len;
+      var rA2 = rA * rA; // Use ellipse implicit function to calculate x
+
+      var dx = Math.sqrt((1 - Math.abs(dy * dy / rB2)) * rA2);
+      var newX = cx + (dx + item.len2) * dir;
+      var deltaX = newX - item.label.x;
+      var newTargetWidth = item.targetTextWidth - deltaX * dir; // text x is changed, so need to recalculate width.
+
+      constrainTextWidth(item, newTargetWidth, true);
+      item.label.x = newX;
+    }
+  } // Adjust X based on the shifted y. Make tight labels aligned on an ellipse curve.
+
+
+  function recalculateX(items) {
+    // Extremes of
+    var topSemi = {
+      list: [],
+      maxY: 0
+    };
+    var bottomSemi = {
+      list: [],
+      maxY: 0
+    };
+
+    for (var i = 0; i < items.length; i++) {
+      if (items[i].labelAlignTo !== 'none') {
+        continue;
+      }
+
+      var item = items[i];
+      var semi = item.label.y > cy ? bottomSemi : topSemi;
+      var dy = Math.abs(item.label.y - cy);
+
+      if (dy >= semi.maxY) {
+        var dx = item.label.x - cx - item.len2 * dir; // horizontal r is always same with original r because x is not changed.
+
+        var rA = r + item.len; // Canculate rB based on the topest / bottemest label.
+
+        var rB = Math.abs(dx) < rA ? Math.sqrt(dy * dy / (1 - dx * dx / rA / rA)) : rA;
+        semi.rB = rB;
+        semi.maxY = dy;
+      }
+
+      semi.list.push(item);
+    }
+
+    recalculateXOnSemiToAlignOnEllipseCurve(topSemi);
+    recalculateXOnSemiToAlignOnEllipseCurve(bottomSemi);
+  }
+
+  var len = list.length;
+
+  for (var i = 0; i < len; i++) {
+    if (list[i].position === 'outer' && list[i].labelAlignTo === 'labelLine') {
+      var dx = list[i].label.x - farthestX;
+      list[i].linePoints[1][0] += dx;
+      list[i].label.x = farthestX;
+    }
+  }
+
+  if (shiftLayoutOnY(list, viewTop, viewTop + viewHeight)) {
+    recalculateX(list);
+  }
+}
+
+function avoidOverlap(labelLayoutList, cx, cy, r, viewWidth, viewHeight, viewLeft, viewTop) {
+  var leftList = [];
+  var rightList = [];
+  var leftmostX = Number.MAX_VALUE;
+  var rightmostX = -Number.MAX_VALUE;
+
+  for (var i = 0; i < labelLayoutList.length; i++) {
+    var label = labelLayoutList[i].label;
+
+    if (isPositionCenter(labelLayoutList[i])) {
+      continue;
+    }
+
+    if (label.x < cx) {
+      leftmostX = Math.min(leftmostX, label.x);
+      leftList.push(labelLayoutList[i]);
+    } else {
+      rightmostX = Math.max(rightmostX, label.x);
+      rightList.push(labelLayoutList[i]);
+    }
+  }
+
+  for (var i = 0; i < labelLayoutList.length; i++) {
+    var layout = labelLayoutList[i];
+
+    if (!isPositionCenter(layout) && layout.linePoints) {
+      if (layout.labelStyleWidth != null) {
+        continue;
+      }
+
+      var label = layout.label;
+      var linePoints = layout.linePoints;
+      var targetTextWidth = void 0;
+
+      if (layout.labelAlignTo === 'edge') {
+        if (label.x < cx) {
+          targetTextWidth = linePoints[2][0] - layout.labelDistance - viewLeft - layout.edgeDistance;
+        } else {
+          targetTextWidth = viewLeft + viewWidth - layout.edgeDistance - linePoints[2][0] - layout.labelDistance;
+        }
+      } else if (layout.labelAlignTo === 'labelLine') {
+        if (label.x < cx) {
+          targetTextWidth = leftmostX - viewLeft - layout.bleedMargin;
+        } else {
+          targetTextWidth = viewLeft + viewWidth - rightmostX - layout.bleedMargin;
+        }
+      } else {
+        if (label.x < cx) {
+          targetTextWidth = label.x - viewLeft - layout.bleedMargin;
+        } else {
+          targetTextWidth = viewLeft + viewWidth - label.x - layout.bleedMargin;
+        }
+      }
+
+      layout.targetTextWidth = targetTextWidth;
+      constrainTextWidth(layout, targetTextWidth);
+    }
+  }
+
+  adjustSingleSide(rightList, cx, cy, r, 1, viewWidth, viewHeight, viewLeft, viewTop, rightmostX);
+  adjustSingleSide(leftList, cx, cy, r, -1, viewWidth, viewHeight, viewLeft, viewTop, leftmostX);
+
+  for (var i = 0; i < labelLayoutList.length; i++) {
+    var layout = labelLayoutList[i];
+
+    if (!isPositionCenter(layout) && layout.linePoints) {
+      var label = layout.label;
+      var linePoints = layout.linePoints;
+      var isAlignToEdge = layout.labelAlignTo === 'edge';
+      var padding = label.style.padding;
+      var paddingH = padding ? padding[1] + padding[3] : 0; // textRect.width already contains paddingH if bgColor is set
+
+      var extraPaddingH = label.style.backgroundColor ? 0 : paddingH;
+      var realTextWidth = layout.rect.width + extraPaddingH;
+      var dist = linePoints[1][0] - linePoints[2][0];
+
+      if (isAlignToEdge) {
+        if (label.x < cx) {
+          linePoints[2][0] = viewLeft + layout.edgeDistance + realTextWidth + layout.labelDistance;
+        } else {
+          linePoints[2][0] = viewLeft + viewWidth - layout.edgeDistance - realTextWidth - layout.labelDistance;
+        }
+      } else {
+        if (label.x < cx) {
+          linePoints[2][0] = label.x + layout.labelDistance;
+        } else {
+          linePoints[2][0] = label.x - layout.labelDistance;
+        }
+
+        linePoints[1][0] = linePoints[2][0] + dist;
+      }
+
+      linePoints[1][1] = linePoints[2][1] = label.y;
+    }
+  }
+}
+/**
+ * Set max width of each label, and then wrap each label to the max width.
+ *
+ * @param layout label layout
+ * @param availableWidth max width for the label to display
+ * @param forceRecalculate recaculate the text layout even if the current width
+ * is smaller than `availableWidth`. This is useful when the text was previously
+ * wrapped by calling `constrainTextWidth` but now `availableWidth` changed, in
+ * which case, previous wrapping should be redo.
+ */
+
+
+function constrainTextWidth(layout, availableWidth, forceRecalculate) {
+  if (forceRecalculate === void 0) {
+    forceRecalculate = false;
+  }
+
+  if (layout.labelStyleWidth != null) {
+    // User-defined style.width has the highest priority.
+    return;
+  }
+
+  var label = layout.label;
+  var style = label.style;
+  var textRect = layout.rect;
+  var bgColor = style.backgroundColor;
+  var padding = style.padding;
+  var paddingH = padding ? padding[1] + padding[3] : 0;
+  var overflow = style.overflow; // textRect.width already contains paddingH if bgColor is set
+
+  var oldOuterWidth = textRect.width + (bgColor ? 0 : paddingH);
+
+  if (availableWidth < oldOuterWidth || forceRecalculate) {
+    var oldHeight = textRect.height;
+
+    if (overflow && overflow.match('break')) {
+      // Temporarily set background to be null to calculate
+      // the bounding box without background.
+      label.setStyle('backgroundColor', null); // Set constraining width
+
+      label.setStyle('width', availableWidth - paddingH); // This is the real bounding box of the text without padding.
+
+      var innerRect = label.getBoundingRect();
+      label.setStyle('width', Math.ceil(innerRect.width));
+      label.setStyle('backgroundColor', bgColor);
+    } else {
+      var availableInnerWidth = availableWidth - paddingH;
+      var newWidth = availableWidth < oldOuterWidth // Current text is too wide, use `availableWidth` as max width.
+      ? availableInnerWidth : // Current available width is enough, but the text may have
+      // already been wrapped with a smaller available width.
+      forceRecalculate ? availableInnerWidth > layout.unconstrainedWidth // Current available is larger than text width,
+      // so don't constrain width (otherwise it may have
+      // empty space in the background).
+      ? null // Current available is smaller than text width, so
+      // use the current available width as constraining
+      // width.
+      : availableInnerWidth : // Current available width is enough, so no need to
+      // constrain.
+      null;
+      label.setStyle('width', newWidth);
+    }
+
+    var newRect = label.getBoundingRect();
+    textRect.width = newRect.width;
+    var margin = (label.style.margin || 0) + 2.1;
+    textRect.height = newRect.height + margin;
+    textRect.y -= (textRect.height - oldHeight) / 2;
+  }
+}
+
+function isPositionCenter(sectorShape) {
+  // Not change x for center label
+  return sectorShape.position === 'center';
+}
+
+function pieLabelLayout(seriesModel) {
+  var data = seriesModel.getData();
+  var labelLayoutList = [];
+  var cx;
+  var cy;
+  var hasLabelRotate = false;
+  var minShowLabelRadian = (seriesModel.get('minShowLabelAngle') || 0) * RADIAN;
+  var viewRect = data.getLayout('viewRect');
+  var r = data.getLayout('r');
+  var viewWidth = viewRect.width;
+  var viewLeft = viewRect.x;
+  var viewTop = viewRect.y;
+  var viewHeight = viewRect.height;
+
+  function setNotShow(el) {
+    el.ignore = true;
+  }
+
+  function isLabelShown(label) {
+    if (!label.ignore) {
+      return true;
+    }
+
+    for (var key in label.states) {
+      if (label.states[key].ignore === false) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  data.each(function (idx) {
+    var sector = data.getItemGraphicEl(idx);
+    var sectorShape = sector.shape;
+    var label = sector.getTextContent();
+    var labelLine = sector.getTextGuideLine();
+    var itemModel = data.getItemModel(idx);
+    var labelModel = itemModel.getModel('label'); // Use position in normal or emphasis
+
+    var labelPosition = labelModel.get('position') || itemModel.get(['emphasis', 'label', 'position']);
+    var labelDistance = labelModel.get('distanceToLabelLine');
+    var labelAlignTo = labelModel.get('alignTo');
+    var edgeDistance = parsePercent(labelModel.get('edgeDistance'), viewWidth);
+    var bleedMargin = labelModel.get('bleedMargin');
+    var labelLineModel = itemModel.getModel('labelLine');
+    var labelLineLen = labelLineModel.get('length');
+    labelLineLen = parsePercent(labelLineLen, viewWidth);
+    var labelLineLen2 = labelLineModel.get('length2');
+    labelLineLen2 = parsePercent(labelLineLen2, viewWidth);
+
+    if (Math.abs(sectorShape.endAngle - sectorShape.startAngle) < minShowLabelRadian) {
+      each$1(label.states, setNotShow);
+      label.ignore = true;
+
+      if (labelLine) {
+        each$1(labelLine.states, setNotShow);
+        labelLine.ignore = true;
+      }
+
+      return;
+    }
+
+    if (!isLabelShown(label)) {
+      return;
+    }
+
+    var midAngle = (sectorShape.startAngle + sectorShape.endAngle) / 2;
+    var nx = Math.cos(midAngle);
+    var ny = Math.sin(midAngle);
+    var textX;
+    var textY;
+    var linePoints;
+    var textAlign;
+    cx = sectorShape.cx;
+    cy = sectorShape.cy;
+    var isLabelInside = labelPosition === 'inside' || labelPosition === 'inner';
+
+    if (labelPosition === 'center') {
+      textX = sectorShape.cx;
+      textY = sectorShape.cy;
+      textAlign = 'center';
+    } else {
+      var x1 = (isLabelInside ? (sectorShape.r + sectorShape.r0) / 2 * nx : sectorShape.r * nx) + cx;
+      var y1 = (isLabelInside ? (sectorShape.r + sectorShape.r0) / 2 * ny : sectorShape.r * ny) + cy;
+      textX = x1 + nx * 3;
+      textY = y1 + ny * 3;
+
+      if (!isLabelInside) {
+        // For roseType
+        var x2 = x1 + nx * (labelLineLen + r - sectorShape.r);
+        var y2 = y1 + ny * (labelLineLen + r - sectorShape.r);
+        var x3 = x2 + (nx < 0 ? -1 : 1) * labelLineLen2;
+        var y3 = y2;
+
+        if (labelAlignTo === 'edge') {
+          // Adjust textX because text align of edge is opposite
+          textX = nx < 0 ? viewLeft + edgeDistance : viewLeft + viewWidth - edgeDistance;
+        } else {
+          textX = x3 + (nx < 0 ? -labelDistance : labelDistance);
+        }
+
+        textY = y3;
+        linePoints = [[x1, y1], [x2, y2], [x3, y3]];
+      }
+
+      textAlign = isLabelInside ? 'center' : labelAlignTo === 'edge' ? nx > 0 ? 'right' : 'left' : nx > 0 ? 'left' : 'right';
+    }
+
+    var PI = Math.PI;
+    var labelRotate = 0;
+    var rotate = labelModel.get('rotate');
+
+    if (isNumber(rotate)) {
+      labelRotate = rotate * (PI / 180);
+    } else if (labelPosition === 'center') {
+      labelRotate = 0;
+    } else if (rotate === 'radial' || rotate === true) {
+      var radialAngle = nx < 0 ? -midAngle + PI : -midAngle;
+      labelRotate = radialAngle;
+    } else if (rotate === 'tangential' && labelPosition !== 'outside' && labelPosition !== 'outer') {
+      var rad = Math.atan2(nx, ny);
+
+      if (rad < 0) {
+        rad = PI * 2 + rad;
+      }
+
+      var isDown = ny > 0;
+
+      if (isDown) {
+        rad = PI + rad;
+      }
+
+      labelRotate = rad - PI;
+    }
+
+    hasLabelRotate = !!labelRotate;
+    label.x = textX;
+    label.y = textY;
+    label.rotation = labelRotate;
+    label.setStyle({
+      verticalAlign: 'middle'
+    }); // Not sectorShape the inside label
+
+    if (!isLabelInside) {
+      var textRect = label.getBoundingRect().clone();
+      textRect.applyTransform(label.getComputedTransform()); // Text has a default 1px stroke. Exclude this.
+
+      var margin = (label.style.margin || 0) + 2.1;
+      textRect.y -= margin / 2;
+      textRect.height += margin;
+      labelLayoutList.push({
+        label: label,
+        labelLine: labelLine,
+        position: labelPosition,
+        len: labelLineLen,
+        len2: labelLineLen2,
+        minTurnAngle: labelLineModel.get('minTurnAngle'),
+        maxSurfaceAngle: labelLineModel.get('maxSurfaceAngle'),
+        surfaceNormal: new Point(nx, ny),
+        linePoints: linePoints,
+        textAlign: textAlign,
+        labelDistance: labelDistance,
+        labelAlignTo: labelAlignTo,
+        edgeDistance: edgeDistance,
+        bleedMargin: bleedMargin,
+        rect: textRect,
+        unconstrainedWidth: textRect.width,
+        labelStyleWidth: label.style.width
+      });
+    } else {
+      label.setStyle({
+        align: textAlign
+      });
+      var selectState = label.states.select;
+
+      if (selectState) {
+        selectState.x += label.x;
+        selectState.y += label.y;
+      }
+    }
+
+    sector.setTextConfig({
+      inside: isLabelInside
+    });
+  });
+
+  if (!hasLabelRotate && seriesModel.get('avoidLabelOverlap')) {
+    avoidOverlap(labelLayoutList, cx, cy, r, viewWidth, viewHeight, viewLeft, viewTop);
+  }
+
+  for (var i = 0; i < labelLayoutList.length; i++) {
+    var layout = labelLayoutList[i];
+    var label = layout.label;
+    var labelLine = layout.labelLine;
+    var notShowLabel = isNaN(label.x) || isNaN(label.y);
+
+    if (label) {
+      label.setStyle({
+        align: layout.textAlign
+      });
+
+      if (notShowLabel) {
+        each$1(label.states, setNotShow);
+        label.ignore = true;
+      }
+
+      var selectState = label.states.select;
+
+      if (selectState) {
+        selectState.x += label.x;
+        selectState.y += label.y;
+      }
+    }
+
+    if (labelLine) {
+      var linePoints = layout.linePoints;
+
+      if (notShowLabel || !linePoints) {
+        each$1(labelLine.states, setNotShow);
+        labelLine.ignore = true;
+      } else {
+        limitTurnAngle(linePoints, layout.minTurnAngle);
+        limitSurfaceAngle(linePoints, layout.surfaceNormal, layout.maxSurfaceAngle);
+        labelLine.setShape({
+          points: linePoints
+        }); // Set the anchor to the midpoint of sector
+
+        label.__hostTarget.textGuideLineConfig = {
+          anchor: new Point(linePoints[0][0], linePoints[0][1])
+        };
+      }
+    }
+  }
+}
+
+function getSectorCornerRadius(model, shape, zeroIfNull) {
+  var cornerRadius = model.get('borderRadius');
+
+  if (cornerRadius == null) {
+    return zeroIfNull ? {
+      cornerRadius: 0
+    } : null;
+  }
+
+  if (!isArray(cornerRadius)) {
+    cornerRadius = [cornerRadius, cornerRadius, cornerRadius, cornerRadius];
+  }
+
+  var dr = Math.abs(shape.r || 0 - shape.r0 || 0);
+  return {
+    cornerRadius: map(cornerRadius, function (cr) {
+      return parsePercent$1(cr, dr);
+    })
+  };
+}
+
+/**
+ * Piece of pie including Sector, Label, LabelLine
+ */
+
+var PiePiece =
+/** @class */
+function (_super) {
+  __extends(PiePiece, _super);
+
+  function PiePiece(data, idx, startAngle) {
+    var _this = _super.call(this) || this;
+
+    _this.z2 = 2;
+    var text = new ZRText();
+
+    _this.setTextContent(text);
+
+    _this.updateData(data, idx, startAngle, true);
+
+    return _this;
+  }
+
+  PiePiece.prototype.updateData = function (data, idx, startAngle, firstCreate) {
+    var sector = this;
+    var seriesModel = data.hostModel;
+    var itemModel = data.getItemModel(idx);
+    var emphasisModel = itemModel.getModel('emphasis');
+    var layout = data.getItemLayout(idx); // cornerRadius & innerCornerRadius doesn't exist in the item layout. Use `0` if null value is specified.
+    // see `setItemLayout` in `pieLayout.ts`.
+
+    var sectorShape = extend(getSectorCornerRadius(itemModel.getModel('itemStyle'), layout, true), layout); // Ignore NaN data.
+
+    if (isNaN(sectorShape.startAngle)) {
+      // Use NaN shape to avoid drawing shape.
+      sector.setShape(sectorShape);
+      return;
+    }
+
+    if (firstCreate) {
+      sector.setShape(sectorShape);
+      var animationType = seriesModel.getShallow('animationType');
+
+      if (seriesModel.ecModel.ssr) {
+        // Use scale animation in SSR mode(opacity?)
+        // Because CSS SVG animation doesn't support very customized shape animation.
+        initProps(sector, {
+          scaleX: 0,
+          scaleY: 0
+        }, seriesModel, {
+          dataIndex: idx,
+          isFrom: true
+        });
+        sector.originX = sectorShape.cx;
+        sector.originY = sectorShape.cy;
+      } else if (animationType === 'scale') {
+        sector.shape.r = layout.r0;
+        initProps(sector, {
+          shape: {
+            r: layout.r
+          }
+        }, seriesModel, idx);
+      } // Expansion
+      else {
+          if (startAngle != null) {
+            sector.setShape({
+              startAngle: startAngle,
+              endAngle: startAngle
+            });
+            initProps(sector, {
+              shape: {
+                startAngle: layout.startAngle,
+                endAngle: layout.endAngle
+              }
+            }, seriesModel, idx);
+          } else {
+            sector.shape.endAngle = layout.startAngle;
+            updateProps(sector, {
+              shape: {
+                endAngle: layout.endAngle
+              }
+            }, seriesModel, idx);
+          }
+        }
+    } else {
+      saveOldStyle(sector); // Transition animation from the old shape
+
+      updateProps(sector, {
+        shape: sectorShape
+      }, seriesModel, idx);
+    }
+
+    sector.useStyle(data.getItemVisual(idx, 'style'));
+    setStatesStylesFromModel(sector, itemModel);
+    var midAngle = (layout.startAngle + layout.endAngle) / 2;
+    var offset = seriesModel.get('selectedOffset');
+    var dx = Math.cos(midAngle) * offset;
+    var dy = Math.sin(midAngle) * offset;
+    var cursorStyle = itemModel.getShallow('cursor');
+    cursorStyle && sector.attr('cursor', cursorStyle);
+
+    this._updateLabel(seriesModel, data, idx);
+
+    sector.ensureState('emphasis').shape = extend({
+      r: layout.r + (emphasisModel.get('scale') ? emphasisModel.get('scaleSize') || 0 : 0)
+    }, getSectorCornerRadius(emphasisModel.getModel('itemStyle'), layout));
+    extend(sector.ensureState('select'), {
+      x: dx,
+      y: dy,
+      shape: getSectorCornerRadius(itemModel.getModel(['select', 'itemStyle']), layout)
+    });
+    extend(sector.ensureState('blur'), {
+      shape: getSectorCornerRadius(itemModel.getModel(['blur', 'itemStyle']), layout)
+    });
+    var labelLine = sector.getTextGuideLine();
+    var labelText = sector.getTextContent();
+    labelLine && extend(labelLine.ensureState('select'), {
+      x: dx,
+      y: dy
+    }); // TODO: needs dx, dy in zrender?
+
+    extend(labelText.ensureState('select'), {
+      x: dx,
+      y: dy
+    });
+    toggleHoverEmphasis(this, emphasisModel.get('focus'), emphasisModel.get('blurScope'), emphasisModel.get('disabled'));
+  };
+
+  PiePiece.prototype._updateLabel = function (seriesModel, data, idx) {
+    var sector = this;
+    var itemModel = data.getItemModel(idx);
+    var labelLineModel = itemModel.getModel('labelLine');
+    var style = data.getItemVisual(idx, 'style');
+    var visualColor = style && style.fill;
+    var visualOpacity = style && style.opacity;
+    setLabelStyle(sector, getLabelStatesModels(itemModel), {
+      labelFetcher: data.hostModel,
+      labelDataIndex: idx,
+      inheritColor: visualColor,
+      defaultOpacity: visualOpacity,
+      defaultText: seriesModel.getFormattedLabel(idx, 'normal') || data.getName(idx)
+    });
+    var labelText = sector.getTextContent(); // Set textConfig on sector.
+
+    sector.setTextConfig({
+      // reset position, rotation
+      position: null,
+      rotation: null
+    }); // Make sure update style on labelText after setLabelStyle.
+    // Because setLabelStyle will replace a new style on it.
+
+    labelText.attr({
+      z2: 10
+    });
+    var labelPosition = seriesModel.get(['label', 'position']);
+
+    if (labelPosition !== 'outside' && labelPosition !== 'outer') {
+      sector.removeTextGuideLine();
+    } else {
+      var polyline = this.getTextGuideLine();
+
+      if (!polyline) {
+        polyline = new Polyline();
+        this.setTextGuideLine(polyline);
+      } // Default use item visual color
+
+
+      setLabelLineStyle(this, getLabelLineStatesModels(itemModel), {
+        stroke: visualColor,
+        opacity: retrieve3(labelLineModel.get(['lineStyle', 'opacity']), visualOpacity, 1)
+      });
+    }
+  };
+
+  return PiePiece;
+}(Sector); // Pie view
+
+
+var PieView =
+/** @class */
+function (_super) {
+  __extends(PieView, _super);
+
+  function PieView() {
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.ignoreLabelLineUpdate = true;
+    return _this;
+  }
+
+  PieView.prototype.render = function (seriesModel, ecModel, api, payload) {
+    var data = seriesModel.getData();
+    var oldData = this._data;
+    var group = this.group;
+    var startAngle; // First render
+
+    if (!oldData && data.count() > 0) {
+      var shape = data.getItemLayout(0);
+
+      for (var s = 1; isNaN(shape && shape.startAngle) && s < data.count(); ++s) {
+        shape = data.getItemLayout(s);
+      }
+
+      if (shape) {
+        startAngle = shape.startAngle;
+      }
+    } // remove empty-circle if it exists
+
+
+    if (this._emptyCircleSector) {
+      group.remove(this._emptyCircleSector);
+    } // when all data are filtered, show lightgray empty circle
+
+
+    if (data.count() === 0 && seriesModel.get('showEmptyCircle')) {
+      var sector = new Sector({
+        shape: getBasicPieLayout(seriesModel, api)
+      });
+      sector.useStyle(seriesModel.getModel('emptyCircleStyle').getItemStyle());
+      this._emptyCircleSector = sector;
+      group.add(sector);
+    }
+
+    data.diff(oldData).add(function (idx) {
+      var piePiece = new PiePiece(data, idx, startAngle);
+      data.setItemGraphicEl(idx, piePiece);
+      group.add(piePiece);
+    }).update(function (newIdx, oldIdx) {
+      var piePiece = oldData.getItemGraphicEl(oldIdx);
+      piePiece.updateData(data, newIdx, startAngle);
+      piePiece.off('click');
+      group.add(piePiece);
+      data.setItemGraphicEl(newIdx, piePiece);
+    }).remove(function (idx) {
+      var piePiece = oldData.getItemGraphicEl(idx);
+      removeElementWithFadeOut(piePiece, seriesModel, idx);
+    }).execute();
+    pieLabelLayout(seriesModel); // Always use initial animation.
+
+    if (seriesModel.get('animationTypeUpdate') !== 'expansion') {
+      this._data = data;
+    }
+  };
+
+  PieView.prototype.dispose = function () {};
+
+  PieView.prototype.containPoint = function (point, seriesModel) {
+    var data = seriesModel.getData();
+    var itemLayout = data.getItemLayout(0);
+
+    if (itemLayout) {
+      var dx = point[0] - itemLayout.cx;
+      var dy = point[1] - itemLayout.cy;
+      var radius = Math.sqrt(dx * dx + dy * dy);
+      return radius <= itemLayout.r && radius >= itemLayout.r0;
+    }
+  };
+
+  PieView.type = 'pie';
+  return PieView;
+}(ChartView);
+
+/**
+ * [Usage]:
+ * (1)
+ * createListSimply(seriesModel, ['value']);
+ * (2)
+ * createListSimply(seriesModel, {
+ *     coordDimensions: ['value'],
+ *     dimensionsCount: 5
+ * });
+ */
+
+function createSeriesDataSimply(seriesModel, opt, nameList) {
+  opt = isArray(opt) && {
+    coordDimensions: opt
+  } || extend({
+    encodeDefine: seriesModel.getEncode()
+  }, opt);
+  var source = seriesModel.getSource();
+  var dimensions = prepareSeriesDataSchema(source, opt).dimensions;
+  var list = new SeriesData(dimensions, seriesModel);
+  list.initData(source, nameList);
+  return list;
+}
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+
+/**
+ * AUTO-GENERATED FILE. DO NOT MODIFY.
+ */
+
+/*
+* Licensed to the Apache Software Foundation (ASF) under one
+* or more contributor license agreements.  See the NOTICE file
+* distributed with this work for additional information
+* regarding copyright ownership.  The ASF licenses this file
+* to you under the Apache License, Version 2.0 (the
+* "License"); you may not use this file except in compliance
+* with the License.  You may obtain a copy of the License at
+*
+*   http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing,
+* software distributed under the License is distributed on an
+* "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+* KIND, either express or implied.  See the License for the
+* specific language governing permissions and limitations
+* under the License.
+*/
+
+/**
+ * LegendVisualProvider is an bridge that pick encoded color from data and
+ * provide to the legend component.
+ */
+var LegendVisualProvider =
+/** @class */
+function () {
+  function LegendVisualProvider( // Function to get data after filtered. It stores all the encoding info
+  getDataWithEncodedVisual, // Function to get raw data before filtered.
+  getRawData) {
+    this._getDataWithEncodedVisual = getDataWithEncodedVisual;
+    this._getRawData = getRawData;
+  }
+
+  LegendVisualProvider.prototype.getAllNames = function () {
+    var rawData = this._getRawData(); // We find the name from the raw data. In case it's filtered by the legend component.
+    // Normally, the name can be found in rawData, but can't be found in filtered data will display as gray.
+
+
+    return rawData.mapArray(rawData.getName);
+  };
+
+  LegendVisualProvider.prototype.containName = function (name) {
+    var rawData = this._getRawData();
+
+    return rawData.indexOfName(name) >= 0;
+  };
+
+  LegendVisualProvider.prototype.indexOfName = function (name) {
+    // Only get data when necessary.
+    // Because LegendVisualProvider constructor may be new in the stage that data is not prepared yet.
+    // Invoking Series#getData immediately will throw an error.
+    var dataWithEncodedVisual = this._getDataWithEncodedVisual();
+
+    return dataWithEncodedVisual.indexOfName(name);
+  };
+
+  LegendVisualProvider.prototype.getItemVisual = function (dataIndex, key) {
+    // Get encoded visual properties from final filtered data.
+    var dataWithEncodedVisual = this._getDataWithEncodedVisual();
+
+    return dataWithEncodedVisual.getItemVisual(dataIndex, key);
+  };
+
+  return LegendVisualProvider;
+}();
+
+var innerData = makeInner();
+
+var PieSeriesModel =
+/** @class */
+function (_super) {
+  __extends(PieSeriesModel, _super);
+
+  function PieSeriesModel() {
+    return _super !== null && _super.apply(this, arguments) || this;
+  }
+  /**
+   * @overwrite
+   */
+
+
+  PieSeriesModel.prototype.init = function (option) {
+    _super.prototype.init.apply(this, arguments); // Enable legend selection for each data item
+    // Use a function instead of direct access because data reference may changed
+
+
+    this.legendVisualProvider = new LegendVisualProvider(bind(this.getData, this), bind(this.getRawData, this));
+
+    this._defaultLabelLine(option);
+  };
+  /**
+   * @overwrite
+   */
+
+
+  PieSeriesModel.prototype.mergeOption = function () {
+    _super.prototype.mergeOption.apply(this, arguments);
+  };
+  /**
+   * @overwrite
+   */
+
+
+  PieSeriesModel.prototype.getInitialData = function () {
+    return createSeriesDataSimply(this, {
+      coordDimensions: ['value'],
+      encodeDefaulter: curry$1(makeSeriesEncodeForNameBased, this)
+    });
+  };
+  /**
+   * @overwrite
+   */
+
+
+  PieSeriesModel.prototype.getDataParams = function (dataIndex) {
+    var data = this.getData(); // update seats when data is changed
+
+    var dataInner = innerData(data);
+    var seats = dataInner.seats;
+
+    if (!seats) {
+      var valueList_1 = [];
+      data.each(data.mapDimension('value'), function (value) {
+        valueList_1.push(value);
+      });
+      seats = dataInner.seats = getPercentSeats(valueList_1, data.hostModel.get('percentPrecision'));
+    }
+
+    var params = _super.prototype.getDataParams.call(this, dataIndex); // seats may be empty when sum is 0
+
+
+    params.percent = seats[dataIndex] || 0;
+    params.$vars.push('percent');
+    return params;
+  };
+
+  PieSeriesModel.prototype._defaultLabelLine = function (option) {
+    // Extend labelLine emphasis
+    defaultEmphasis(option, 'labelLine', ['show']);
+    var labelLineNormalOpt = option.labelLine;
+    var labelLineEmphasisOpt = option.emphasis.labelLine; // Not show label line if `label.normal.show = false`
+
+    labelLineNormalOpt.show = labelLineNormalOpt.show && option.label.show;
+    labelLineEmphasisOpt.show = labelLineEmphasisOpt.show && option.emphasis.label.show;
+  };
+
+  PieSeriesModel.type = 'series.pie';
+  PieSeriesModel.defaultOption = {
+    // zlevel: 0,
+    z: 2,
+    legendHoverLink: true,
+    colorBy: 'data',
+    // 默认全局居中
+    center: ['50%', '50%'],
+    radius: [0, '75%'],
+    // 默认顺时针
+    clockwise: true,
+    startAngle: 90,
+    // 最小角度改为0
+    minAngle: 0,
+    // If the angle of a sector less than `minShowLabelAngle`,
+    // the label will not be displayed.
+    minShowLabelAngle: 0,
+    // 选中时扇区偏移量
+    selectedOffset: 10,
+    // 选择模式，默认关闭，可选single，multiple
+    // selectedMode: false,
+    // 南丁格尔玫瑰图模式，'radius'（半径） | 'area'（面积）
+    // roseType: null,
+    percentPrecision: 2,
+    // If still show when all data zero.
+    stillShowZeroSum: true,
+    // cursor: null,
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    width: null,
+    height: null,
+    label: {
+      // color: 'inherit',
+      // If rotate around circle
+      rotate: 0,
+      show: true,
+      overflow: 'truncate',
+      // 'outer', 'inside', 'center'
+      position: 'outer',
+      // 'none', 'labelLine', 'edge'. Works only when position is 'outer'
+      alignTo: 'none',
+      // Closest distance between label and chart edge.
+      // Works only position is 'outer' and alignTo is 'edge'.
+      edgeDistance: '25%',
+      // Works only position is 'outer' and alignTo is not 'edge'.
+      bleedMargin: 10,
+      // Distance between text and label line.
+      distanceToLabelLine: 5 // formatter: 标签文本格式器，同 tooltip.formatter，不支持异步回调
+      // 默认使用全局文本样式，详见 textStyle
+      // distance: 当position为inner时有效，为label位置到圆心的距离与圆半径(环状图为内外半径和)的比例系数
+
+    },
+    // Enabled when label.normal.position is 'outer'
+    labelLine: {
+      show: true,
+      // 引导线两段中的第一段长度
+      length: 15,
+      // 引导线两段中的第二段长度
+      length2: 15,
+      smooth: false,
+      minTurnAngle: 90,
+      maxSurfaceAngle: 90,
+      lineStyle: {
+        // color: 各异,
+        width: 1,
+        type: 'solid'
+      }
+    },
+    itemStyle: {
+      borderWidth: 1,
+      borderJoin: 'round'
+    },
+    showEmptyCircle: true,
+    emptyCircleStyle: {
+      color: 'lightgray',
+      opacity: 1
+    },
+    labelLayout: {
+      // Hide the overlapped label.
+      hideOverlap: true
+    },
+    emphasis: {
+      scale: true,
+      scaleSize: 5
+    },
+    // If use strategy to avoid label overlapping
+    avoidLabelOverlap: true,
+    // Animation type. Valid values: expansion, scale
+    animationType: 'expansion',
+    animationDuration: 1000,
+    // Animation type when update. Valid values: transition, expansion
+    animationTypeUpdate: 'transition',
+    animationEasingUpdate: 'cubicInOut',
+    animationDurationUpdate: 500,
+    animationEasing: 'cubicInOut'
+  };
+  return PieSeriesModel;
+}(SeriesModel);
+
+function negativeDataFilter(seriesType) {
+  return {
+    seriesType: seriesType,
+    reset: function (seriesModel, ecModel) {
+      var data = seriesModel.getData();
+      data.filterSelf(function (idx) {
+        // handle negative value condition
+        var valueDim = data.mapDimension('value');
+        var curValue = data.get(valueDim, idx);
+
+        if (isNumber(curValue) && !isNaN(curValue) && curValue < 0) {
+          return false;
+        }
+
+        return true;
+      });
+    }
+  };
+}
+
+function install(registers) {
+  registers.registerChartView(PieView);
+  registers.registerSeriesModel(PieSeriesModel);
+  createLegacyDataSelectAction('pie', registers.registerAction);
+  registers.registerLayout(curry$1(pieLayout, 'pie'));
+  registers.registerProcessor(dataFilter('pie'));
+  registers.registerProcessor(negativeDataFilter('pie'));
+}
+
+const stylesCss = "*{box-sizing:border-box}*:active{outline:none}*:focus{outline:none;box-shadow:var(--const-double-focus-ring, 0 0 0 2px #ffffff, 0 0 0 4px #33b4ff #06C)}:host{box-shadow:none !important}::-moz-focus-inner{border:none}input,textarea,button{font-family:inherit;font-size:inherit;font-stretch:inherit}:host(.sr),:host(.sr) button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.sr,.sr button{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;white-space:nowrap}.hidden{display:none}:host([hidden]){display:none}.invisible{visibility:hidden}:host{position:relative;width:100%;display:block}.container{aspect-ratio:1/1;width:100%;display:flex;justify-content:center;align-items:center}.chart-container{width:100%;height:100%;--comp-color-1:var(--tct-chart-donut-color-1, var(--t-chart-donut-color-1, var(--t-accent-1, #e05252)));--comp-color-2:var(--tct-chart-donut-color-2, var(--t-chart-donut-color-2, var(--t-accent-2, #e09952)));--comp-color-3:var(--tct-chart-donut-color-3, var(--t-chart-donut-color-3, var(--t-accent-3, #e0e052)));--comp-color-4:var(--tct-chart-donut-color-4, var(--t-chart-donut-color-4, var(--t-accent-4, #99e052)));--comp-color-5:var(--tct-chart-donut-color-5, var(--t-chart-donut-color-5, var(--t-accent-5, #52e052)));--comp-color-6:var(--tct-chart-donut-color-6, var(--t-chart-donut-color-6, var(--t-accent-6, #52e099)));--comp-color-7:var(--tct-chart-donut-color-7, var(--t-chart-donut-color-7, var(--t-accent-7, #52e0e0)));--comp-color-8:var(--tct-chart-donut-color-8, var(--t-chart-donut-color-8, var(--t-accent-8, #5299e0)));--comp-color-9:var(--tct-chart-donut-color-9, var(--t-chart-donut-color-9, var(--t-accent-9, #5252e0)));--comp-color-10:var(--tct-chart-donut-color-10, var(--t-chart-donut-color-10, var(--t-accent-10, #9952e0)));--comp-color-11:var(--tct-chart-donut-color-11, var(--t-chart-donut-color-11, var(--t-accent-11, #e052e0)));--comp-color-12:var(--tct-chart-donut-color-12, var(--t-chart-donut-color-12, var(--t-accent-12, #e05299)))}.chart-container,.center-card{--comp-background-color:var(--tct-chart-donut-border-color, var(--t-chart-donut-border-color, var(--t-base, #ffffff)))}button{--comp-button-vertical-padding:var(--tct-chart-donut-button-vertical-padding, var(--t-chart-donut-button-vertical-padding, var(--app-scale-1x, 5px)));transition:box-shadow var(--tct-chart-donut-button-tween, var(--t-chart-donut-button-tween, var(--app-tween-1, 0.2s ease)));padding:var(--comp-button-vertical-padding) 0}button:active{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}button:hover{box-shadow:var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}button:focus{box-shadow:var(--const-double-focus-ring), var(--tct-chart-donut-button-hover-box-shadow, var(--t-chart-donut-button-hover-box-shadow, var(--app-shadow-1, 0 2px 4px rgba(0, 0, 0, 0.3))))}.center-card-container{position:absolute;top:50%;transform:translateY(-50%);padding:var(--tct-chart-donut-button-container-padding, var(--t-chart-donut-button-container-padding, var(--app-scale-1x, 5px)))}.center-card{width:100%;text-align:center;color:var(--tct-chart-donut-text-color, var(--t-chart-donut-text-color, var(--t-text, #4d4d4d)));margin-inline:auto;display:block}.center-card:is(button){cursor:pointer;background:var(--comp-background-color);border:0;border-radius:var(--tct-chart-donut-button-border-radius, var(--t-chart-donut-button-border-radius, var(--app-border-radius-1, 3px)))}q2-icon{--tct-icon-size:var(--tct-chart-donut-icon-size, var(--t-chart-donut-icon-size, 26px));margin-bottom:var(--tct-chart-donut-icon-margin-bottom, var(--t-chart-donut-icon-margin-bottom, var(--app-scale-1x, 5px)))}.name{font-size:var(--tct-chart-donut-name-font-size, var(--t-chart-donut-name-font-size, 14px))}.value{font-size:var(--tct-chart-donut-value-font-size, var(--t-chart-donut-value-font-size, 21px))}";
+
+use([install$4, install$1, install, install$6, install$7, installLabelLayout]);
+const Q2ChartDonut$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.change = createEvent(this, "change", 7);
+    this.click = createEvent(this, "click", 7);
+    this.defaultRecord = { id: null, value: null, name: null };
+    /// Event Handlers ///
+    this.onClickElsewhere = (event) => {
+      event.stopPropagation();
+      this.clearSelection();
+    };
+    this.onButtonKeyUp = (event) => {
+      const { selectedId, data } = this;
+      let selectedIndex = this.getIndexById(selectedId) || 0;
+      switch (event.key) {
+        case 'ArrowLeft':
+        case 'ArrowUp':
+          selectedIndex--;
+          if (selectedIndex < 0)
+            selectedIndex = data.length - 1;
+          this.chart.dispatchAction({
+            type: 'select',
+            seriesId: 'pie',
+            dataIndex: selectedIndex,
+          });
+          break;
+        case 'ArrowRight':
+        case 'ArrowDown':
+          selectedIndex++;
+          if (selectedIndex > data.length - 1)
+            selectedIndex = 0;
+          this.chart.dispatchAction({
+            type: 'select',
+            seriesId: 'pie',
+            dataIndex: selectedIndex,
+          });
+          break;
+        case 'Escape':
+          this.clearSelection();
+          break;
+        default:
+          return;
+      }
+    };
+    this.onButtonClick = (event) => {
+      event.stopPropagation();
+      const { selectedId } = this;
+      const data = selectedId ? this.getDataById(selectedId) : Object.assign({}, this.defaultRecord);
+      this.click.emit(data);
+    };
+    this.onContainerClick = (event) => {
+      if (this.isInChangeEvent)
+        return;
+      if (!(event.target instanceof HTMLElement))
+        return;
+      this.clearSelection();
+      event.stopPropagation();
+    };
+    this.chartName = undefined;
+    this.summaryIcon = undefined;
+    this.summaryName = undefined;
+    this.innerRadius = '70%';
+    this.outerRadius = '85%';
+    this.minSliceSize = '2.5%';
+    this.selectedOffset = 10;
+    this.hoverScaleSize = 5;
+    this.format = undefined;
+    this.isClickable = undefined;
+    this.data = [];
+    this.selectedId = undefined;
+    this.hoveredId = undefined;
+  }
+  /// LifeCycle Hooks ///
+  componentDidLoad() {
+    const chart = init(this.chartContainer);
+    this.cacheComputedStyles();
+    this.colors = this.getColors();
+    this.resizeObserver = new ResizeObserver(() => this.resizeChart());
+    this.resizeObserver.observe(this.hostElement);
+    this.updateChart(chart);
+    this.setupChartEvents(chart);
+    this.chart = chart;
+    overrideFocus(this.hostElement);
+  }
+  willDestroyElement() {
+    this.resizeObserver = null;
+  }
+  /// Getters ///
+  get centerData() {
+    const { selectedId, hoveredId, data } = this;
+    const idToDisplay = hoveredId || selectedId;
+    const index = this.getIndexById(idToDisplay);
+    return idToDisplay
+      ? Object.assign(Object.assign({}, this.getDataById(idToDisplay)), { color: this.colors[index] }) : {
+      name: loc(this.summaryName || 'tecton.element.chartDonut.button.summaryName'),
+      icon: this.summaryIcon,
+      value: data.reduce((acc, cur) => acc + cur.value, 0),
+      color: null,
+    };
+  }
+  /// Helpers
+  cacheComputedStyles() {
+    this.chartContainerStyles = getComputedStyle(this.chartContainer);
+    this.hostElementStyles = getComputedStyle(this.hostElement);
+  }
+  displayValue(value) {
+    const valueAsFloat = parseFloat(value.toString());
+    if (isNaN(valueAsFloat))
+      return;
+    if (this.format === 'currency') {
+      return Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+      }).format(valueAsFloat);
+    }
+    else {
+      return Intl.NumberFormat('en-US').format(valueAsFloat);
+    }
+  }
+  getCSSProperty(name) {
+    let fallback;
+    if (name.startsWith('var(') && name.endsWith(')')) {
+      const regExp = /var\((.*)\)/g;
+      const result = regExp.exec(name);
+      const split = result.length >= 2 ? result[1].split(',') : [];
+      name = split[0];
+      fallback = split[1];
+    }
+    let result = this.chartContainerStyles.getPropertyValue(name).trim();
+    if (!result)
+      result = this.hostElementStyles.getPropertyValue(name).trim();
+    return result || fallback;
+  }
+  getIndexById(id) {
+    return this.data.findIndex(item => item.id === id);
+  }
+  getDataByIndex(index) {
+    if (typeof index !== 'number')
+      return;
+    return this.data[index];
+  }
+  getDataById(id) {
+    if (!id)
+      return;
+    return this.data.find(item => item.id === id);
+  }
+  getColors() {
+    const defaultColors = [
+      '--comp-color-1',
+      '--comp-color-2',
+      '--comp-color-3',
+      '--comp-color-4',
+      '--comp-color-5',
+      '--comp-color-6',
+      '--comp-color-7',
+      '--comp-color-8',
+      '--comp-color-9',
+      '--comp-color-10',
+      '--comp-color-11',
+      '--comp-color-12',
+    ];
+    return this.data.reduce((acc, cur) => {
+      let color = defaultColors.shift();
+      if (cur.color)
+        color = cur.color;
+      acc.push(this.getCSSProperty(color) || color);
+      return acc;
+    }, []);
+  }
+  setupChartEvents(chart) {
+    chart.on('mouseover', (params) => {
+      this.hoveredId = params.data.id;
+    });
+    chart.on('click', params => {
+      // Don't emit click event when clicking a chart slice
+      params.event.event.stopPropagation();
+    });
+    chart.on('mouseout', () => {
+      this.hoveredId = null;
+    });
+    chart.on('selectchanged', (params) => {
+      var _a, _b, _c, _d;
+      const selectedIndex = (_d = (_c = (_b = (_a = params.selected) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.dataIndex) === null || _c === void 0 ? void 0 : _c[0]) !== null && _d !== void 0 ? _d : null;
+      const data = typeof selectedIndex === 'number' ? this.getDataByIndex(selectedIndex) : Object.assign({}, this.defaultRecord);
+      this.selectedId = data.id;
+      this.isInChangeEvent = true;
+      this.change.emit(data);
+      setTimeout(() => {
+        this.isInChangeEvent = false;
+      }, 0);
+    });
+  }
+  cleanData(data) {
+    const { minSliceSize } = this;
+    const minSize = parseFloat(minSliceSize || '2.5%') / 100;
+    const total = data.reduce((acc, cur) => acc + cur.value, 0);
+    const minValue = total * minSize;
+    const newData = data.map(item => {
+      if (item.value < minValue)
+        return Object.assign(Object.assign({}, item), { value: minValue });
+      return item;
+    });
+    return newData;
+  }
+  updateChart(chart) {
+    return chart.setOption({
+      tooltip: {
+        show: false,
+      },
+      legend: {
+        show: false,
+      },
+      aria: {
+        enabled: true,
+      },
+      series: [
+        {
+          name: this.chartName,
+          animationType: 'scale',
+          color: this.colors,
+          id: 'pie',
+          type: 'pie',
+          selectedOffset: this.selectedOffset,
+          selectedMode: 'single',
+          radius: [this.innerRadius, this.outerRadius],
+          label: {
+            show: false,
+          },
+          labelLine: {
+            show: false,
+          },
+          itemStyle: {
+            borderWidth: 5,
+            borderColor: this.getCSSProperty('--comp-background-color'),
+          },
+          emphasis: {
+            scaleSize: this.hoverScaleSize,
+            itemStyle: {
+              color: 'inherit',
+            },
+          },
+          data: this.cleanData(this.data),
+        },
+      ],
+    });
+  }
+  resizeChart() {
+    this.chart.resize();
+  }
+  /// Watchers ///
+  propsUpdates() {
+    this.updateChart(this.chart);
+  }
+  dataUpdated() {
+    this.colors = this.getColors();
+  }
+  innerRadiusUpdated() {
+    const { innerRadius, outerRadius } = this;
+    const innerRadiusInt = parseFloat(innerRadius);
+    const outerRadiusInt = parseFloat(outerRadius);
+    if (innerRadiusInt >= outerRadiusInt) {
+      this.innerRadius = `${outerRadiusInt - 15}%`;
+    }
+  }
+  outerRadiusUpdated() {
+    const { innerRadius, outerRadius } = this;
+    const innerRadiusInt = parseFloat(innerRadius);
+    const outerRadiusInt = parseFloat(outerRadius);
+    if (outerRadiusInt <= innerRadiusInt) {
+      this.outerRadius = `${innerRadiusInt + 15}%`;
+    }
+  }
+  /// Listeners ///
+  delegateFocus(event) {
+    var _a;
+    if (!isEventFromElement(event, this.hostElement))
+      return;
+    if (!this.isClickable)
+      return;
+    (_a = this.centerButtonElement) === null || _a === void 0 ? void 0 : _a.focus();
+  }
+  /// Methods ///
+  async selectById(id) {
+    const dataIndex = this.getIndexById(id);
+    if (dataIndex === -1)
+      return;
+    this.chart.dispatchAction({
+      type: 'select',
+      seriesId: 'pie',
+      dataIndex,
+    });
+  }
+  async selectByIndex(index) {
+    const dataIndex = this.data[index] ? index : null;
+    if (!dataIndex)
+      return;
+    this.chart.dispatchAction({
+      type: 'select',
+      seriesId: 'pie',
+      dataIndex,
+    });
+  }
+  async clearSelection() {
+    const { selectedId } = this;
+    if (!selectedId)
+      return;
+    this.chart.dispatchAction({
+      type: 'unselect',
+      seriesId: 'pie',
+      dataIndex: this.getIndexById(selectedId),
+    });
+  }
+  /// DOM ///
+  renderCenterBlock() {
+    const { icon, name, value, color } = this.centerData;
+    const { isClickable } = this;
+    const TagName = isClickable ? 'button' : 'div';
+    const displayValue = this.displayValue(value);
+    const props = isClickable
+      ? {
+        onKeyUp: this.onButtonKeyUp,
+        onClick: this.onButtonClick,
+        ref: el => (this.centerButtonElement = el),
+        'aria-description': loc('tecton.element.chartDonut.button.description'),
+        'aria-roledescription': loc('tecton.element.chartDonut.button.roleDescription'),
+      }
+      : null;
+    return (h("div", { class: "center-card-container", style: { width: `calc(${this.innerRadius} - 10%)` } }, h(TagName, Object.assign({ class: "center-card", "test-id": "centerCard" }, props), icon && (h("q2-icon", { type: icon, style: color && {
+        '--tct-icon-stroke-primary': color,
+        '--tct-icon-stroke-secondary': color,
+        color,
+      } })), name && h("div", { class: "name" }, name), value && h("div", { class: "value" }, displayValue))));
+  }
+  render() {
+    return (h("click-elsewhere", { onChange: this.onClickElsewhere }, h("div", { class: "container" }, h("div", { ref: el => (this.chartContainer = el), class: "chart-container", "test-id": "chartContainer", onClick: this.onContainerClick }), this.renderCenterBlock())));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "chartName": ["propsUpdates"],
+    "innerRadius": ["propsUpdates", "innerRadiusUpdated"],
+    "outerRadius": ["propsUpdates", "outerRadiusUpdated"],
+    "minSliceSize": ["propsUpdates"],
+    "hoverScaleSize": ["propsUpdates"],
+    "selectedOffset": ["propsUpdates"],
+    "data": ["propsUpdates", "dataUpdated"]
+  }; }
+  static get style() { return stylesCss; }
+}, [1, "q2-chart-donut", {
+    "chartName": [513, "chart-name"],
+    "summaryIcon": [513, "summary-icon"],
+    "summaryName": [513, "summary-name"],
+    "innerRadius": [1025, "inner-radius"],
+    "outerRadius": [1025, "outer-radius"],
+    "minSliceSize": [1, "min-slice-size"],
+    "selectedOffset": [2, "selected-offset"],
+    "hoverScaleSize": [2, "hover-scale-size"],
+    "format": [513],
+    "isClickable": [516, "is-clickable"],
+    "data": [16],
+    "selectedId": [32],
+    "hoveredId": [32],
+    "selectById": [64],
+    "selectByIndex": [64],
+    "clearSelection": [64]
+  }, [[0, "focus", "delegateFocus"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["q2-chart-donut", "click-elsewhere", "q2-icon"];
+  components.forEach(tagName => { switch (tagName) {
+    case "q2-chart-donut":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Q2ChartDonut$1);
+      }
+      break;
+    case "click-elsewhere":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "q2-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const Q2ChartDonut = Q2ChartDonut$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { Q2ChartDonut, defineCustomElement };