@visactor/vchart-extension 2.0.4-alpha.6 → 2.0.5-alpha.0

package/build/index.js

@@ -7015,7 +7015,8 @@
 	  y1: 0,
 	  strokeBoundsBuffer: 0,
 	  cornerRadius: 0,
-	  cornerType: "round"
+	  cornerType: "round",
+	  drawStrokeWhenZeroWH: !1
 	});
 	Object.assign(Object.assign({}, DefaultAttribute), {
 	  width: 0,
@@ -7024,7 +7025,8 @@
 	  y1: 0,
 	  cornerRadius: 0,
 	  length: 0,
-	  cornerType: "round"
+	  cornerType: "round",
+	  drawStrokeWhenZeroWH: !1
 	});
 	const DefaultSymbolAttribute = Object.assign(Object.assign({}, DefaultAttribute), {
 	  symbolType: "circle",
@@ -7251,6 +7253,34 @@
 	    }
 	    return c;
 	  }
+	  static processColorStops(colorStops) {
+	    if (!colorStops || 0 === colorStops.length) return [];
+	    if (colorStops.some(item => item.length)) {
+	      const stops = colorStops.map(item => ({
+	        color: item.value,
+	        offset: item.length ? parseFloat(item.length.value) / 100 : -1
+	      }));
+	      stops[0].offset < 0 && (stops[0].offset = 0), stops[stops.length - 1].offset < 0 && (stops[stops.length - 1].offset = 1);
+	      for (let i = 1; i < stops.length - 1; i++) if (stops[i].offset < 0) {
+	        const prevWithOffsetIdx = i - 1;
+	        let nextWithOffsetIdx = i + 1;
+	        for (; nextWithOffsetIdx < stops.length && stops[nextWithOffsetIdx].offset < 0;) nextWithOffsetIdx++;
+	        const startOffset = stops[prevWithOffsetIdx].offset,
+	          endOffset = stops[nextWithOffsetIdx].offset,
+	          unspecCount = nextWithOffsetIdx - prevWithOffsetIdx;
+	        for (let j = 1; j < unspecCount; j++) stops[prevWithOffsetIdx + j].offset = startOffset + (endOffset - startOffset) * j / unspecCount;
+	        i = nextWithOffsetIdx - 1;
+	      }
+	      return stops;
+	    }
+	    return colorStops.map((item, index) => {
+	      const offset = colorStops.length > 1 ? index / (colorStops.length - 1) : 0;
+	      return {
+	        color: item.value,
+	        offset: offset
+	      };
+	    });
+	  }
 	  static ParseConic(datum) {
 	    const {
 	        orientation: orientation,
@@ -7264,10 +7294,7 @@
 	      y: .5,
 	      startAngle: sa,
 	      endAngle: sa + pi2,
-	      stops: colorStops.map(item => ({
-	        color: item.value,
-	        offset: parseFloat(item.length.value) / 100
-	      }))
+	      stops: GradientParser.processColorStops(colorStops)
 	    };
 	  }
 	  static ParseRadial(datum) {
@@ -7282,10 +7309,7 @@
 	      y1: .5,
 	      r0: 0,
 	      r1: 1,
-	      stops: colorStops.map(item => ({
-	        color: item.value,
-	        offset: parseFloat(item.length.value) / 100
-	      }))
+	      stops: GradientParser.processColorStops(colorStops)
 	    };
 	  }
 	  static ParseLinear(datum) {
@@ -7307,10 +7331,7 @@
 	      y0: y0,
 	      x1: x1,
 	      y1: y1,
-	      stops: colorStops.map(item => ({
-	        color: item.value,
-	        offset: parseFloat(item.length.value) / 100
-	      }))
+	      stops: GradientParser.processColorStops(colorStops)
 	    };
 	  }
 	}
@@ -10219,7 +10240,7 @@
 	    });
 	  }
 	  setAttributes(params, forceUpdateTag = !1, context) {
-	    (params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params).background ? this.loadImage(params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._setAttributes(params, forceUpdateTag, context);
+	    params && ((params = this.onBeforeAttributeUpdate && this.onBeforeAttributeUpdate(params, this.attribute, null, context) || params).background ? this.loadImage(params.background, !0) : params.shadowGraphic && this.setShadowGraphic(params.shadowGraphic), this._setAttributes(params, forceUpdateTag, context));
 	  }
 	  _setAttributes(params, forceUpdateTag = !1, context) {
 	    const keys = Object.keys(params);
@@ -10854,8 +10875,8 @@
 	function strokeVisible(opacity, strokeOpacity) {
 	  return opacity * strokeOpacity > 0;
 	}
-	function rectStrokeVisible(opacity, strokeOpacity, width, height) {
-	  return opacity * strokeOpacity > 0 && 0 !== width && 0 !== height;
+	function rectStrokeVisible(opacity, strokeOpacity, width, height, drawStrokeWhenZeroWH) {
+	  return drawStrokeWhenZeroWH ? opacity * strokeOpacity > 0 : opacity * strokeOpacity > 0 && 0 !== width && 0 !== height;
 	}
 	function intersect(x0, y0, x1, y1, x2, y2, x3, y3) {
 	  const x10 = x1 - x0,
@@ -12843,7 +12864,7 @@
 	      case "right":
 	        deltaX = -aabbBounds.width();
 	    }
-	    return aabbBounds.translate(deltaX, deltaY), application.graphicService.updateTempAABBBounds(aabbBounds), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, richtextTheme, aabbBounds), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, application.graphicService.transformAABBBounds(attribute, aabbBounds, richtextTheme, !1, this), 0 === aabbBounds.width() && 0 === aabbBounds.height() && aabbBounds.clear(), aabbBounds;
+	    return height || ("middle" === this.verticalDirection ? deltaY -= aabbBounds.height() / 2 : "bottom" === this.verticalDirection && (deltaY -= aabbBounds.height())), aabbBounds.translate(deltaX, deltaY), application.graphicService.updateTempAABBBounds(aabbBounds), null == attribute.forceBoundsHeight && null == attribute.forceBoundsWidth || application.graphicService.updateHTMLTextAABBBounds(attribute, richtextTheme, aabbBounds), this.widthWithoutTransform = aabbBounds.x2 - aabbBounds.x1, this.heightWithoutTransform = aabbBounds.y2 - aabbBounds.y1, application.graphicService.transformAABBBounds(attribute, aabbBounds, richtextTheme, !1, this), 0 === aabbBounds.width() && 0 === aabbBounds.height() && aabbBounds.clear(), aabbBounds;
 	  }
 	  needUpdateTags(keys) {
 	    return super.needUpdateTags(keys, RICHTEXT_UPDATE_TAG_KEY);
@@ -14921,7 +14942,8 @@
 	      y1: y1,
 	      x: originX = rectAttribute.x,
 	      y: originY = rectAttribute.y,
-	      fillStrokeOrder = rectAttribute.fillStrokeOrder
+	      fillStrokeOrder = rectAttribute.fillStrokeOrder,
+	      drawStrokeWhenZeroWH = rectAttribute.drawStrokeWhenZeroWH
 	    } = rect.attribute;
 	    let {
 	      width: width,
@@ -14929,7 +14951,7 @@
 	    } = rect.attribute;
 	    width = (null != width ? width : x1 - originX) || 0, height = (null != height ? height : y1 - originY) || 0;
 	    const fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill),
-	      sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height),
+	      sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height, drawStrokeWhenZeroWH),
 	      doFill = runFill(fill, background),
 	      doStroke = runStroke(stroke, lineWidth);
 	    if (!rect.valid || !visible) return;
@@ -15833,7 +15855,7 @@
 	    super(...arguments), this.type = "rect3d", this.numberType = RECT3D_NUMBER_TYPE;
 	  }
 	  drawShape(rect, context, x, y, drawContext, params, fillCb, strokeCb) {
-	    var _a;
+	    var _a, _b;
 	    const rectAttribute = getTheme(rect, null == params ? void 0 : params.theme).rect,
 	      {
 	        fill = rectAttribute.fill,
@@ -15846,16 +15868,17 @@
 	        fillOpacity = rectAttribute.fillOpacity,
 	        lineWidth = rectAttribute.lineWidth,
 	        strokeOpacity = rectAttribute.strokeOpacity,
-	        visible = rectAttribute.visible
+	        visible = rectAttribute.visible,
+	        drawStrokeWhenZeroWH = null !== (_a = rectAttribute.drawStrokeWhenZeroWH) && void 0 !== _a && _a
 	      } = rect.attribute;
 	    let {
 	      width: width,
 	      height: height
 	    } = rect.attribute;
 	    width = (null != width ? width : x1 - originX) || 0, height = (null != height ? height : y1 - originY) || 0;
-	    const z = null !== (_a = this.z) && void 0 !== _a ? _a : 0,
+	    const z = null !== (_b = this.z) && void 0 !== _b ? _b : 0,
 	      fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill),
-	      sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height),
+	      sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height, drawStrokeWhenZeroWH),
 	      doFill = runFill(fill),
 	      doStroke = runStroke(stroke, lineWidth);
 	    if (!rect.valid || !visible) return;
@@ -17531,6 +17554,94 @@
 	    vchart.Factory.registerChart(Pie3dChart.type, Pie3dChart);
 	};
 
+	const CombinationCandlestickChart_TYPE = 'combinationCandlestick';
+
+	class CandlestickChartSpecTransformer extends vchart.CartesianChartSpecTransformer {
+	    _getDefaultSeriesSpec(spec) {
+	        const dataFields = [spec.openField, spec.highField, spec.lowField, spec.closeField];
+	        const seriesSpec = super._getDefaultSeriesSpec(spec, [
+	            'candlestick',
+	            'openField',
+	            'highField',
+	            'lowField',
+	            'closeField',
+	            'rising',
+	            'falling',
+	            'doji'
+	        ]);
+	        seriesSpec.yField = dataFields;
+	        return seriesSpec;
+	    }
+	    transformSpec(spec) {
+	        super.transformSpec(spec);
+	        if (!spec.axes) {
+	            spec.axes = [
+	                {
+	                    orient: 'bottom'
+	                },
+	                {
+	                    orient: 'left'
+	                }
+	            ];
+	        }
+	        vchart.setDefaultCrosshairForCartesianChart(spec);
+	    }
+	}
+
+	const CANDLESTICK_MARK_TYPE = 'candlestick';
+	class CandlestickMark extends vchart.GlyphMark {
+	    constructor() {
+	        super(...arguments);
+	        this.type = CandlestickMark.type;
+	    }
+	    setGlyphConfig(cfg) {
+	        super.setGlyphConfig(cfg);
+	        this._subMarks = {
+	            line: { type: 'line', defaultAttributes: { x: 0, y: 0 } },
+	            box: { type: 'rect' }
+	        };
+	        this._positionChannels = ['x', 'boxWidth', 'open', 'close', 'high', 'low'];
+	        this._channelEncoder = null;
+	        this._positionEncoder = (glyphAttrs, datum, g) => {
+	            const { x = g.attribute.x, boxWidth = g.attribute.boxWidth, open = g.attribute.open, close = g.attribute.close, low = g.attribute.low, high = g.attribute.high } = glyphAttrs;
+	            const attributes = {};
+	            attributes.line = {
+	                points: [
+	                    {
+	                        x: x,
+	                        y: low
+	                    },
+	                    {
+	                        x: x,
+	                        y: high
+	                    }
+	                ]
+	            };
+	            attributes.box = {
+	                x: x - boxWidth / 2,
+	                x1: x + boxWidth / 2,
+	                y: Math.min(open, close),
+	                y1: Math.max(open, close),
+	                drawStrokeWhenZeroWH: true
+	            };
+	            return attributes;
+	        };
+	    }
+	    _getDefaultStyle() {
+	        const defaultStyle = Object.assign({}, super._getDefaultStyle());
+	        return defaultStyle;
+	    }
+	}
+	CandlestickMark.type = CANDLESTICK_MARK_TYPE;
+	const registerCandlestickMark = () => {
+	    vchart.registerGlyphMark();
+	    registerLine();
+	    registerRect();
+	    vchart.Factory.registerGraphicComponent('line', (attrs) => createLine(attrs));
+	    vchart.Factory.registerGraphicComponent('rect', (attrs) => createRect(attrs));
+	    vchart.Factory.registerMark(CandlestickMark.type, CandlestickMark);
+	};
+
 	class Easing {
 	  constructor() {}
 	  static linear(t) {
@@ -17848,6 +17959,7 @@
 	    return this.getEndProps();
 	  }
 	  stop() {}
+	  release() {}
 	}
 	class WaitStep extends Step {
 	  constructor(type, props, duration, easing) {
@@ -17855,8 +17967,6 @@
 	  }
 	  onStart() {
 	    super.onStart();
-	  }
-	  onFirstRun() {
 	    const fromProps = this.getFromProps();
 	    this.target.setAttributes(fromProps);
 	  }
@@ -18065,7 +18175,9 @@
 	    this.status !== AnimateStatus.END && this.onEnd(), this.status = AnimateStatus.END, this.target && ("start" === type ? this.target.setAttributes(this._startProps) : "end" === type ? this.target.setAttributes(this._endProps) : type && this.target.setAttributes(type));
 	  }
 	  release() {
-	    this.status = AnimateStatus.END, this._onRemove && this._onRemove.forEach(cb => cb()), this._onStart = [], this._onFrame = [], this._onEnd = [], this._onRemove = [];
+	    this.status = AnimateStatus.END, this._onRemove && this._onRemove.forEach(cb => cb()), this._onStart = [], this._onFrame = [], this._onEnd = [], this._onRemove = [], this.forEachStep(step => {
+	      step.release();
+	    });
 	  }
 	  getDuration() {
 	    return this._duration;
@@ -18139,6 +18251,10 @@
 	  getLoop() {
 	    return this._loopCount;
 	  }
+	  forEachStep(cb) {
+	    let step = this._firstStep;
+	    for (; step;) cb(step), step = step.next;
+	  }
 	}
 
 	const performanceRAF = new PerformanceRAF();
@@ -18371,6 +18487,9 @@
 	  constructor(target) {
 	    this._animates = [], this._startCallbacks = [], this._endCallbacks = [], this._started = !1, this._activeCount = 0, this._target = target;
 	  }
+	  get started() {
+	    return this._started;
+	  }
 	  onStart(cb) {
 	    cb ? (this._startCallbacks.push(cb), this._started && this._activeCount > 0 && cb()) : this._startCallbacks.forEach(cb => {
 	      cb();
@@ -18511,14 +18630,14 @@
 	    return delayAfterValue > 0 && (totalDelay += delayAfterValue), totalDelay > 0 && animate.wait(totalDelay), loop && loop > 0 && animate.loop(loop), bounce && animate.bounce(!0), animate;
 	  }
 	  _handleRunAnimate(animate, custom, customType, from, props, duration, easing, customParameters, controlOptions, options, type, graphic) {
-	    var _a, _b, _c, _d;
+	    var _a, _b, _c, _d, _e, _f;
 	    if (custom && customType) {
 	      const customParams = Object.assign({
-	          width: graphic.stage.width,
-	          height: graphic.stage.height,
+	          width: (null === (_a = graphic.stage) || void 0 === _a ? void 0 : _a.width) || 0,
+	          height: (null === (_b = graphic.stage) || void 0 === _b ? void 0 : _b.height) || 0,
 	          group: this._target.parent
 	        }, this.resolveValue(customParameters, graphic)),
-	        objOptions = isFunction$1(options) ? options.call(null, null !== (_b = customParams && (null === (_a = customParams.data) || void 0 === _a ? void 0 : _a[0])) && void 0 !== _b ? _b : null === (_d = null === (_c = graphic.context) || void 0 === _c ? void 0 : _c.data) || void 0 === _d ? void 0 : _d[0], graphic, customParams) : options;
+	        objOptions = isFunction$1(options) ? options.call(null, null !== (_d = customParams && (null === (_c = customParams.data) || void 0 === _c ? void 0 : _c[0])) && void 0 !== _d ? _d : null === (_f = null === (_e = graphic.context) || void 0 === _e ? void 0 : _e.data) || void 0 === _f ? void 0 : _f[0], graphic, customParams) : options;
 	      customParams.options = objOptions, customParams.controlOptions = controlOptions, 1 === customType ? this.createCustomAnimation(animate, custom, from, props, duration, easing, customParams) : 2 === customType && this.createCustomInterpolatorAnimation(animate, custom, props, duration, easing, customParams);
 	    } else "to" === type ? animate.to(props, duration, easing) : "from" === type && animate.from(props, duration, easing);
 	  }
@@ -18738,7 +18857,7 @@
 	  reApplyState(state) {
 	    var _a;
 	    const stateInfo = null === (_a = this.stateList) || void 0 === _a ? void 0 : _a.find(stateInfo => stateInfo.state === state);
-	    if (stateInfo) {
+	    if (stateInfo && stateInfo.executor.started) {
 	      const stateList = this.stateList.slice();
 	      stateInfo.executor.stop(), this.stateList = stateList, stateInfo.executor.execute(stateInfo.animationConfig);
 	    }
@@ -18916,911 +19035,1710 @@
 	  }
 	}
 
-	const WordCloud3dAnimation = (params) => {
-	    return {
-	        custom: RotateBySphereAnimate,
-	        customParameters: () => params,
-	        easing: 'linear',
-	        loop: Infinity,
-	        duration: 6000
+	const scaleIn = () => {
+	    return (graphic) => {
+	        const finalAttribute = graphic.getFinalAttribute();
+	        const { x, y, open, high, low, close } = finalAttribute;
+	        const animateAttributes = { from: { x, y }, to: { x, y } };
+	        if (isValidNumber$1(open) && isValidNumber$1(close)) {
+	            if (open > close) {
+	                animateAttributes.from.open = low;
+	                animateAttributes.to.open = open;
+	                animateAttributes.from.close = low;
+	                animateAttributes.to.close = close;
+	                if (isValidNumber$1(high)) {
+	                    animateAttributes.from.high = low;
+	                    animateAttributes.to.high = high;
+	                }
+	            }
+	            else {
+	                animateAttributes.from.open = high;
+	                animateAttributes.to.open = open;
+	                animateAttributes.from.close = high;
+	                animateAttributes.to.close = close;
+	                if (isValidNumber$1(low)) {
+	                    animateAttributes.from.low = high;
+	                    animateAttributes.to.low = low;
+	                }
+	            }
+	        }
+	        return animateAttributes;
 	    };
 	};
-	const registerWordCloud3dAnimation = () => {
-	    vchart.Factory.registerAnimation('wordCloud3d', (params) => ({
-	        appear: WordCloud3dAnimation(params)
-	    }));
-	};
-
-	const wordCloud3d = {
-	    word: {
-	        padding: 1,
-	        style: {
-	            textAlign: 'center',
-	            textBaseline: 'alphabetic'
+	const scaleOut = () => {
+	    return (graphic) => {
+	        const finalAttribute = graphic.getFinalAttribute();
+	        const { x, y, open, high, low, close } = finalAttribute;
+	        const animateAttributes = { from: { x, y }, to: { x, y } };
+	        if (isValidNumber$1(open) && isValidNumber$1(close)) {
+	            if (open > close) {
+	                animateAttributes.from.open = open;
+	                animateAttributes.to.open = low;
+	                animateAttributes.from.close = close;
+	                animateAttributes.to.close = low;
+	                if (isValidNumber$1(high)) {
+	                    animateAttributes.from.high = high;
+	                    animateAttributes.to.high = low;
+	                }
+	            }
+	            else {
+	                animateAttributes.from.open = open;
+	                animateAttributes.to.open = high;
+	                animateAttributes.from.close = close;
+	                animateAttributes.to.close = high;
+	                if (isValidNumber$1(low)) {
+	                    animateAttributes.from.low = low;
+	                    animateAttributes.to.low = high;
+	                }
+	            }
 	        }
-	    }
+	        return animateAttributes;
+	    };
 	};
-
-	class WordCloud3dSeries extends vchart.BaseWordCloudSeries {
-	    constructor() {
-	        super(...arguments);
-	        this.type = SeriesType3dEnum.wordCloud3d;
+	class CandlestickScaleIn extends ACustomAnimate {
+	    constructor(from, to, duration, easing, params) {
+	        super(from, to, duration, easing, params);
 	    }
-	    _wordCloudTransformOption() {
-	        var _a;
-	        return Object.assign(Object.assign({}, super._wordCloudTransformOption()), { postProjection: (_a = this._spec.postProjection) !== null && _a !== void 0 ? _a : 'StereographicProjection', depth_3d: this._spec.depth_3d });
+	    onBind() {
+	        super.onBind();
+	        const finalAttribute = this.target.getFinalAttribute();
+	        if (finalAttribute) {
+	            this.target.setAttributes(finalAttribute);
+	        }
+	        const { from, to } = this.computeAttribute();
+	        this.propKeys = Object.keys(to).filter(key => to[key] != null);
+	        this.animate.reSyncProps();
+	        this.from = from;
+	        this.to = to;
+	        this.target.setAttributes(this.from);
 	    }
-	    _wordCloudShapeTransformOption() {
-	        var _a;
-	        return Object.assign(Object.assign({}, super._wordCloudShapeTransformOption()), { postProjection: (_a = this._spec.postProjection) !== null && _a !== void 0 ? _a : 'StereographicProjection', depth_3d: this._spec.depth_3d });
+	    computeAttribute() {
+	        const attr = scaleIn()(this.target, this.params, this.params.options);
+	        return attr;
 	    }
-	    initMark() {
-	        this._wordMark = this._createMark(vchart.BaseWordCloudSeries.mark.word, {
-	            groupKey: this._seriesField,
-	            isSeriesMark: true
-	        }, {
-	            support3d: true
+	    onUpdate(end, ratio, out) {
+	        const attribute = this.target.attribute;
+	        this.propKeys.forEach(key => {
+	            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
 	        });
+	        this.target.setAttributes(attribute);
 	    }
-	    initMarkStyle() {
-	        super.initMarkStyle();
-	        const wordMark = this._wordMark;
-	        if (wordMark) {
-	            this.setMarkStyle(wordMark, {
-	                z: (datum) => { var _a; return (_a = datum.z) !== null && _a !== void 0 ? _a : 0; }
-	            }, 'normal', vchart.AttributeLevel.Series);
+	}
+	class CandlestickScaleOut extends ACustomAnimate {
+	    constructor(from, to, duration, easing, params) {
+	        super(from, to, duration, easing, params);
+	    }
+	    onBind() {
+	        var _a;
+	        if ((_a = this.params) === null || _a === void 0 ? void 0 : _a.diffAttrs) {
+	            this.target.setAttributes(this.params.diffAttrs);
 	        }
+	        const { from, to } = this.computeAttribute();
+	        this.propKeys = Object.keys(to).filter(key => to[key] != null);
+	        this.animate.reSyncProps();
+	        this.from = from;
+	        this.to = to;
+	        this.target.setAttributes(this.from);
 	    }
-	    initAnimation() {
-	        var _a, _b;
-	        const padding = (_a = this._padding) !== null && _a !== void 0 ? _a : {};
-	        if (this._wordMark) {
-	            this._wordMark.setAnimationConfig(vchart.animationConfig((_b = vchart.Factory.getAnimationInKey('wordCloud3d')) === null || _b === void 0 ? void 0 : _b(() => {
-	                var _a;
-	                const stage = this.getCompiler().getStage();
-	                const width = stage.width - padding.left || 0 - padding.right || 0;
-	                const height = stage.height - padding.top || 0 - padding.bottom || 0;
-	                const r = Math.max(width, height) / 2;
-	                return {
-	                    center: { x: r, y: r, z: (_a = this._spec.depth_3d) !== null && _a !== void 0 ? _a : r },
-	                    r
-	                };
-	            }), vchart.userAnimationConfig("word", this._spec, this._markAttributeContext)));
-	        }
+	    computeAttribute() {
+	        const attr = scaleOut()(this.target, this.params, this.params.options);
+	        return attr;
+	    }
+	    onUpdate(end, ratio, out) {
+	        const attribute = this.target.attribute;
+	        this.propKeys.forEach(key => {
+	            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
+	        });
+	        this.target.setAttributes(attribute);
 	    }
 	}
-	WordCloud3dSeries.type = SeriesType3dEnum.wordCloud3d;
-	WordCloud3dSeries.builtInTheme = { wordCloud3d };
-	const registerWordCloud3dSeries = () => {
-	    vchart.registerTextMark();
-	    registerWordCloud3dAnimation();
-	    vchart.Factory.registerSeries(WordCloud3dSeries.type, WordCloud3dSeries);
-	};
-	const registerWordCloudShape3dSeries = () => {
-	    registerWordCloud3dSeries();
+	const registerCandlestickScaleAnimation = () => {
+	    AnimateExecutor.registerBuiltInAnimate('candlestickScaleIn', CandlestickScaleIn);
+	    AnimateExecutor.registerBuiltInAnimate('candlestickScaleOut', CandlestickScaleOut);
 	};
 
-	class WordCloud3dChartSpecTransformer extends vchart.BaseWordCloudChartSpecTransformer {
-	    _getDefaultSeriesSpec(spec) {
-	        const series = super._getDefaultSeriesSpec(spec);
-	        series.depth_3d = spec.depth_3d;
-	        return series;
-	    }
-	}
+	const CANDLESTICK_CHART_TYPE = 'candlestick';
+	const CANDLESTICK_SERIES_TYPE = 'candlestick';
+	var CANDLESTICK_TOOLTIP_KEYS;
+	(function (CANDLESTICK_TOOLTIP_KEYS) {
+	    CANDLESTICK_TOOLTIP_KEYS["OPEN"] = "open";
+	    CANDLESTICK_TOOLTIP_KEYS["HIGH"] = "high";
+	    CANDLESTICK_TOOLTIP_KEYS["LOW"] = "low";
+	    CANDLESTICK_TOOLTIP_KEYS["CLOSE"] = "close";
+	    CANDLESTICK_TOOLTIP_KEYS["SERIES_FIELD"] = "seriesField";
+	})(CANDLESTICK_TOOLTIP_KEYS || (CANDLESTICK_TOOLTIP_KEYS = {}));
+	var CandlestickMarkNameEnum;
+	(function (CandlestickMarkNameEnum) {
+	    CandlestickMarkNameEnum["candlestick"] = "candlestick";
+	})(CandlestickMarkNameEnum || (CandlestickMarkNameEnum = {}));
+	const CandlestickSeriesMark = Object.assign(Object.assign({}, vchart.baseSeriesMark), { ["candlestick"]: { name: "candlestick", type: 'candlestick' } });
 
-	class WordCloud3dChart extends vchart.BaseWordCloudChart {
+	class CandlestickSeriesTooltipHelper extends vchart.BaseSeriesTooltipHelper {
 	    constructor() {
 	        super(...arguments);
-	        this.transformerConstructor = WordCloud3dChartSpecTransformer;
-	        this.type = "wordCloud3d";
-	        this.seriesType = SeriesType3dEnum.wordCloud3d;
+	        this.getContentKey = (contentType) => (datum) => {
+	            switch (contentType) {
+	                case CANDLESTICK_TOOLTIP_KEYS.OPEN: {
+	                    const openField = this.series.getOpenField();
+	                    return openField;
+	                }
+	                case CANDLESTICK_TOOLTIP_KEYS.HIGH: {
+	                    const highField = this.series.getHighField();
+	                    return highField;
+	                }
+	                case CANDLESTICK_TOOLTIP_KEYS.LOW: {
+	                    const lowField = this.series.getLowField();
+	                    return lowField;
+	                }
+	                case CANDLESTICK_TOOLTIP_KEYS.CLOSE: {
+	                    const closeField = this.series.getCloseField();
+	                    return closeField;
+	                }
+	                case CANDLESTICK_TOOLTIP_KEYS.SERIES_FIELD: {
+	                    const seriesField = this.series.getSeriesField();
+	                    return seriesField;
+	                }
+	            }
+	            return null;
+	        };
+	        this.getContentValue = (contentType) => (datum) => {
+	            switch (contentType) {
+	                case CANDLESTICK_TOOLTIP_KEYS.OPEN: {
+	                    const openField = this.series.getOpenField();
+	                    return datum[openField];
+	                }
+	                case CANDLESTICK_TOOLTIP_KEYS.HIGH: {
+	                    const highField = this.series.getHighField();
+	                    return datum[highField];
+	                }
+	                case CANDLESTICK_TOOLTIP_KEYS.LOW: {
+	                    const lowField = this.series.getLowField();
+	                    return datum[lowField];
+	                }
+	                case CANDLESTICK_TOOLTIP_KEYS.CLOSE: {
+	                    const closeField = this.series.getCloseField();
+	                    return datum[closeField];
+	                }
+	                case CANDLESTICK_TOOLTIP_KEYS.SERIES_FIELD: {
+	                    const seriesField = this.series.getSeriesField();
+	                    return datum[seriesField];
+	                }
+	            }
+	            return null;
+	        };
+	        this.shapeColorCallback = (datum) => {
+	            return this.series.getMarkInName('candlestick').getAttribute('stroke', datum);
+	        };
 	    }
-	}
-	WordCloud3dChart.type = "wordCloud3d";
-	WordCloud3dChart.seriesType = SeriesType3dEnum.wordCloud3d;
-	WordCloud3dChart.transformerConstructor = WordCloud3dChartSpecTransformer;
-	const registerWordCloud3dChart = () => {
-	    register3DPlugin();
-	    registerWordCloud3dSeries();
-	    vchart.Factory.registerChart(WordCloud3dChart.type, WordCloud3dChart);
-	};
-	const registerWordCloudShape3dChart = () => {
-	    register3DPlugin();
-	    registerWordCloudShape3dSeries();
-	    registerWordCloud3dChart();
-	};
-
-	const axisZ = {
-	    label: {
-	        space: 0
+	    getDefaultContentList(activeType) {
+	        return [
+	            {
+	                key: this.getContentKey(CANDLESTICK_TOOLTIP_KEYS.OPEN),
+	                value: this.getContentValue(CANDLESTICK_TOOLTIP_KEYS.OPEN)
+	            },
+	            {
+	                key: this.getContentKey(CANDLESTICK_TOOLTIP_KEYS.HIGH),
+	                value: this.getContentValue(CANDLESTICK_TOOLTIP_KEYS.HIGH)
+	            },
+	            {
+	                key: this.getContentKey(CANDLESTICK_TOOLTIP_KEYS.LOW),
+	                value: this.getContentValue(CANDLESTICK_TOOLTIP_KEYS.LOW)
+	            },
+	            {
+	                key: this.getContentKey(CANDLESTICK_TOOLTIP_KEYS.CLOSE),
+	                value: this.getContentValue(CANDLESTICK_TOOLTIP_KEYS.CLOSE)
+	            },
+	            {
+	                key: this.getContentKey(CANDLESTICK_TOOLTIP_KEYS.SERIES_FIELD),
+	                value: this.getContentValue(CANDLESTICK_TOOLTIP_KEYS.SERIES_FIELD)
+	            }
+	        ];
 	    }
-	};
+	}
 
-	const getUpdateAttributeOfZAxis = (axis, ignoreGrid) => {
-	    var _a;
-	    const regionSize = vchart.getCombinedSizeOfRegions(axis.getRegions());
-	    const { width } = axis.getLayoutRect();
-	    const axisLength = width;
-	    const depth = axis.layout3dBox ? axis.layout3dBox.length : 0;
-	    const depthZ = axis.layout3dBox ? axis.layout3dBox.width : 0;
-	    const end = { x: depth, y: 0 };
-	    const items = axis.getLabelItems(axisLength);
-	    const attrs = {
-	        start: { x: 0, y: 0 },
-	        end,
-	        title: {
-	            text: axis._spec.title.text || axis._dataFieldText,
-	            maxWidth: axis._getTitleLimit(false)
+	const getCandlestickTheme = () => {
+	    const res = {
+	        rising: {
+	            style: {
+	                boxFill: '#FF0000',
+	                stroke: '#FF0000'
+	            }
 	        },
-	        items,
-	        scale: axis._scale.clone()
+	        falling: {
+	            style: {
+	                boxFill: '#00AA00',
+	                stroke: '#00AA00'
+	            }
+	        },
+	        doji: {
+	            style: {
+	                boxFill: '#000000',
+	                stroke: '#000000'
+	            }
+	        },
+	        candlestick: {
+	            style: {
+	                lineWidth: 1
+	            }
+	        }
 	    };
-	    const directionStr = (_a = axis.directionStr) !== null && _a !== void 0 ? _a : 'r2l';
-	    let anchor3d = [0, 0];
-	    let alpha = -Math.PI / 2;
-	    let z = 0;
-	    if (directionStr === 'l2r') {
-	        z = axis.layout3dBox.length;
-	        anchor3d = [0, 0, 0];
-	        alpha = Math.PI / 2;
-	    }
-	    attrs.z = z;
-	    attrs.alpha = alpha;
-	    attrs.anchor3d = anchor3d;
-	    if (!ignoreGrid) {
-	        attrs.grid = {
-	            type: 'line',
-	            start: { x: 0, y: 0 },
-	            end,
-	            items: items[0],
-	            verticalFactor: axis._axisStyle.verticalFactor,
-	            depth: depthZ,
-	            length: !ignoreGrid ? regionSize.height : 0,
-	            alpha,
-	            z,
-	            anchor3d
-	        };
-	    }
-	    return attrs;
+	    return res;
 	};
+	const candlestick = getCandlestickTheme();
 
-	class Axis3dMixin {
-	    setLayout3dBox(box3d) {
-	        this.layout3dBox = box3d;
+	const DEFAULT_STROKE_COLOR = '#000';
+	class CandlestickSeries extends vchart.CartesianSeries {
+	    constructor() {
+	        super(...arguments);
+	        this.type = CANDLESTICK_SERIES_TYPE;
+	        this._mergedStyles = {
+	            rising: {},
+	            falling: {},
+	            doji: {}
+	        };
 	    }
-	    _afterUpdateAttribute(attrs, ignoreGrid) {
-	        const isZ = vchart.isZAxis(this._orient);
-	        const isX = vchart.isXAxis(this._orient);
-	        const isY = vchart.isYAxis(this._orient);
-	        let regionHeight = 0;
-	        let regionWidth = 0;
-	        if (!ignoreGrid) {
-	            const regions = this.getRegions();
-	            let { x: minX, y: minY } = regions[0].getLayoutStartPoint();
-	            let maxX = minX + regions[0].getLayoutRect().width;
-	            let maxY = minY + regions[0].getLayoutRect().height;
-	            for (let index = 1; index < regions.length; index++) {
-	                const region = regions[index];
-	                const { x, y } = region.getLayoutStartPoint();
-	                const { width, height } = region.getLayoutRect();
-	                minX = Math.min(minX, x);
-	                maxX = Math.max(maxX, width + x);
-	                minY = Math.min(minY, y);
-	                maxY = Math.max(maxY, height + y);
-	            }
-	            regionHeight = Math.abs(maxY - minY);
-	            regionWidth = Math.abs(maxX - minX);
+	    getOpenField() {
+	        return this._openField;
+	    }
+	    getHighField() {
+	        return this._highField;
+	    }
+	    getLowField() {
+	        return this._lowField;
+	    }
+	    getCloseField() {
+	        return this._closeField;
+	    }
+	    getBoxFill() {
+	        return this._boxFill;
+	    }
+	    getStrokeColor() {
+	        return this._strokeColor;
+	    }
+	    setAttrFromSpec() {
+	        var _a, _b, _c, _d, _e, _f, _g, _h;
+	        super.setAttrFromSpec();
+	        const spec = this._spec;
+	        const CandlestickStyle = (_b = (_a = spec.candlestick) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : {};
+	        this._openField = spec.openField;
+	        this._highField = spec.highField;
+	        this._lowField = spec.lowField;
+	        this._closeField = spec.closeField;
+	        this._boxWidth = CandlestickStyle.boxWidth;
+	        this._boxFill = CandlestickStyle.boxFill;
+	        this._strokeColor = CandlestickStyle.strokeColor;
+	        this._buildMergedStyles(CandlestickStyle, (_d = (_c = spec.rising) === null || _c === void 0 ? void 0 : _c.style) !== null && _d !== void 0 ? _d : {}, (_f = (_e = spec.falling) === null || _e === void 0 ? void 0 : _e.style) !== null && _f !== void 0 ? _f : {}, (_h = (_g = spec.doji) === null || _g === void 0 ? void 0 : _g.style) !== null && _h !== void 0 ? _h : {});
+	    }
+	    initMark() {
+	        this._candlestickMark = this._createMark(CandlestickSeries.mark.candlestick, {
+	            groupKey: this._seriesField,
+	            isSeriesMark: true
+	        });
+	    }
+	    initMarkStyle() {
+	        var _a;
+	        const candlestickMark = this._candlestickMark;
+	        if (candlestickMark) {
+	            const CandlestickStyles = {
+	                fill: (datum) => {
+	                    const boxFill = this.mergeStyle(datum).boxFill;
+	                    return boxFill;
+	                },
+	                stroke: (datum) => {
+	                    const strokeColor = this.mergeStyle(datum).stroke;
+	                    return strokeColor;
+	                },
+	                lineWidth: (datum) => {
+	                    const lineWidth = this.mergeStyle(datum).lineWidth;
+	                    return lineWidth;
+	                },
+	                boxWidth: (_a = this._boxWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth.bind(this),
+	                x: this.dataToPositionX.bind(this)
+	            };
+	            candlestickMark.setGlyphConfig({});
+	            this.setMarkStyle(candlestickMark, CandlestickStyles, vchart.STATE_VALUE_ENUM.STATE_NORMAL, vchart.AttributeLevel.Series);
 	        }
-	        let gridLength = 0;
-	        let axisLength = 0;
-	        const { width, height } = this.getLayoutRect();
-	        let end = { x: 0, y: 0 };
-	        if (isX) {
-	            end = { x: width, y: 0 };
-	            gridLength = regionHeight;
-	            axisLength = width;
+	    }
+	    initCandlestickMarkStyle() {
+	        var _a;
+	        const candlestickMark = this._candlestickMark;
+	        const axisHelper = this._yAxisHelper;
+	        if (candlestickMark && axisHelper) {
+	            const { dataToPosition } = axisHelper;
+	            const scale = (_a = axisHelper === null || axisHelper === void 0 ? void 0 : axisHelper.getScale) === null || _a === void 0 ? void 0 : _a.call(axisHelper, 0);
+	            this.setMarkStyle(candlestickMark, {
+	                open: (datum) => vchart.valueInScaleRange(dataToPosition(this.getDatumPositionValues(datum, this._openField), {
+	                    bandPosition: this._bandPosition
+	                }), scale),
+	                high: (datum) => vchart.valueInScaleRange(dataToPosition(this.getDatumPositionValues(datum, this._highField), {
+	                    bandPosition: this._bandPosition
+	                }), scale),
+	                low: (datum) => vchart.valueInScaleRange(dataToPosition(this.getDatumPositionValues(datum, this._lowField), {
+	                    bandPosition: this._bandPosition
+	                }), scale),
+	                close: (datum) => vchart.valueInScaleRange(dataToPosition(this.getDatumPositionValues(datum, this._closeField), {
+	                    bandPosition: this._bandPosition
+	                }), scale)
+	            }, vchart.STATE_VALUE_ENUM.STATE_NORMAL, vchart.AttributeLevel.Series);
 	        }
-	        else if (isY) {
-	            end = { x: 0, y: height };
-	            gridLength = regionWidth;
-	            axisLength = height;
+	    }
+	    init(option) {
+	        super.init(option);
+	        this.initCandlestickMarkStyle();
+	    }
+	    _initAnimationSpec(config = {}) {
+	        const newConfig = merge({}, config);
+	        ['appear', 'enter', 'update', 'exit', 'disappear'].forEach(state => {
+	            if (newConfig[state] && newConfig[state].type === 'scaleIn') {
+	                newConfig[state].type = 'candlestickScaleIn';
+	            }
+	            else if (newConfig[state] && newConfig[state].type === 'scaleOut') {
+	                newConfig[state].type = 'candlestickScaleOut';
+	            }
+	        });
+	        return newConfig;
+	    }
+	    initAnimation() {
+	        var _a;
+	        const animationParams = vchart.getGroupAnimationParams(this);
+	        if (this._candlestickMark) {
+	            const newDefaultConfig = this._initAnimationSpec((_a = vchart.Factory.getAnimationInKey('scaleInOut')) === null || _a === void 0 ? void 0 : _a());
+	            const newConfig = this._initAnimationSpec(vchart.userAnimationConfig(CANDLESTICK_SERIES_TYPE, this._spec, this._markAttributeContext));
+	            this._candlestickMark.setAnimationConfig(vchart.animationConfig(newDefaultConfig, newConfig, animationParams));
 	        }
-	        const depth = this.layout3dBox ? this.layout3dBox.length : 0;
-	        if (!isZ) {
-	            const items = this.getLabelItems(axisLength);
-	            attrs.grid = {
-	                length: gridLength
-	            };
-	            attrs.start = { x: 0, y: 0 };
-	            attrs.text = this._spec.title.text || this._dataFieldText;
-	            attrs.maxWidth = this._getTitleLimit(isX);
-	            attrs.items = items;
-	            attrs.grid = {
-	                type: 'line',
-	                start: { x: 0, y: 0 },
-	                end,
-	                items: items[0],
-	                depth,
-	                length: gridLength
-	            };
-	            return attrs;
+	    }
+	    initTooltip() {
+	        this._tooltipHelper = new CandlestickSeriesTooltipHelper(this);
+	        this._candlestickMark && this._tooltipHelper.activeTriggerSet.mark.add(this._candlestickMark);
+	    }
+	    _buildMergedStyles(baseStyle, risingStyle, fallingStyle, dojiStyle) {
+	        this._mergedStyles.rising = merge({}, baseStyle, risingStyle);
+	        this._mergedStyles.falling = merge({}, baseStyle, fallingStyle);
+	        this._mergedStyles.doji = merge({}, baseStyle, dojiStyle);
+	    }
+	    mergeStyle(datum) {
+	        const open = this.getDatumPositionValues(datum, this._openField)[0];
+	        const close = this.getDatumPositionValues(datum, this._closeField)[0];
+	        if (open < close) {
+	            return this._mergedStyles.rising;
 	        }
-	        return getUpdateAttributeOfZAxis(this, ignoreGrid);
+	        else if (open > close) {
+	            return this._mergedStyles.falling;
+	        }
+	        else {
+	            return this._mergedStyles.doji;
+	        }
+	    }
+	    _getMarkWidth() {
+	        if (this._autoBoxWidth) {
+	            return this._autoBoxWidth;
+	        }
+	        const bandAxisHelper = this._xAxisHelper;
+	        const xField = this._fieldX;
+	        const innerBandWidth = bandAxisHelper.getBandwidth(xField.length - 1);
+	        const autoBoxWidth = innerBandWidth / xField.length;
+	        this._autoBoxWidth = autoBoxWidth;
+	        return this._autoBoxWidth;
+	    }
+	    onLayoutEnd() {
+	        super.onLayoutEnd();
+	        this._autoBoxWidth = null;
+	    }
+	    getActiveMarks() {
+	        return [this._candlestickMark];
 	    }
 	}
-
-	const registerCartesianBandAxis3d = () => {
+	CandlestickSeries.type = CANDLESTICK_SERIES_TYPE;
+	CandlestickSeries.builtInTheme = { candlestick };
+	CandlestickSeries.mark = CandlestickSeriesMark;
+	const registerCandlestickSeries = () => {
+	    registerCandlestickMark();
+	    vchart.registerSymbolMark();
+	    vchart.registerScaleInOutAnimation();
 	    vchart.registerCartesianBandAxis();
-	    const AxisCls = vchart.Factory.getComponentInKey(vchart.CartesianBandAxis.type);
-	    AxisCls.builtInTheme = Object.assign(Object.assign({}, AxisCls.builtInTheme), { axisZ: Object.assign(Object.assign({}, vchart.CartesianBandAxis.builtInTheme.axisX), axisZ) });
-	    mixin(AxisCls, Axis3dMixin);
-	};
-
-	const registerCartesianLinearAxis3d = () => {
 	    vchart.registerCartesianLinearAxis();
-	    const AxisCls = vchart.Factory.getComponentInKey(vchart.CartesianLinearAxis.type);
-	    AxisCls.builtInTheme = Object.assign(Object.assign({}, AxisCls.builtInTheme), { axisZ: Object.assign(Object.assign({}, vchart.CartesianLinearAxis.builtInTheme.axisX), axisZ) });
-	    mixin(AxisCls, Axis3dMixin);
-	};
-
-	const registerCartesianLogAxis3d = () => {
-	    vchart.registerCartesianLogAxis();
-	    const AxisCls = vchart.Factory.getComponentInKey(vchart.CartesianLogAxis.type);
-	    AxisCls.builtInTheme = Object.assign(Object.assign({}, AxisCls.builtInTheme), { axisZ: Object.assign(Object.assign({}, vchart.CartesianLogAxis.builtInTheme.axisX), axisZ) });
-	    mixin(AxisCls, Axis3dMixin);
-	};
-
-	const registerCartesianSymlogAxis3d = () => {
-	    vchart.registerCartesianLogAxis();
-	    const AxisCls = vchart.Factory.getComponentInKey(vchart.CartesianSymlogAxis.type);
-	    AxisCls.builtInTheme = Object.assign(Object.assign({}, AxisCls.builtInTheme), { axisZ: Object.assign(Object.assign({}, AxisCls.builtInTheme.axisX), axisZ) });
-	    mixin(AxisCls, Axis3dMixin);
-	};
-
-	const registerCartesianTimeAxis3d = () => {
-	    vchart.registerCartesianTimeAxis();
-	    const AxisCls = vchart.Factory.getComponentInKey(vchart.CartesianTimeAxis.type);
-	    AxisCls.builtInTheme = Object.assign(Object.assign({}, AxisCls.builtInTheme), { axisZ: Object.assign(Object.assign({}, AxisCls.builtInTheme.axisX), axisZ) });
-	    mixin(AxisCls, Axis3dMixin);
+	    registerCandlestickScaleAnimation();
+	    vchart.Factory.registerSeries(CandlestickSeries.type, CandlestickSeries);
 	};
 
-	const registerAxis3dPlugin = () => {
-	    register3DPlugin();
-	    registerLayout3d();
-	    registerCartesianBandAxis3d();
-	    registerCartesianLinearAxis3d();
-	    registerCartesianTimeAxis3d();
-	    registerCartesianSymlogAxis3d();
-	    registerCartesianLogAxis3d();
+	class CandlestickChart extends vchart.BaseChart {
+	    _setModelOption() {
+	        this._modelOption.getDimensionInfo = vchart.getCartesianDimensionInfo;
+	        this._modelOption.getDimensionInfoByValue = vchart.getDimensionInfoByValue;
+	        this._modelOption.getRectByDimensionData = vchart.getCartesianCrosshairRect;
+	    }
+	}
+	CandlestickChart.type = CANDLESTICK_CHART_TYPE;
+	CandlestickChart.seriesType = CANDLESTICK_SERIES_TYPE;
+	CandlestickChart.transformerConstructor = CandlestickChartSpecTransformer;
+	const registerCandlestickChart = () => {
+	    vchart.registerDimensionTooltipProcessor();
+	    vchart.registerMarkTooltipProcessor();
+	    vchart.registerDimensionEvents();
+	    vchart.registerDimensionHover();
+	    registerCandlestickSeries();
+	    vchart.Factory.registerChart(CandlestickChart.type, CandlestickChart);
 	};
 
-	const rangeColumn3dSeriesMark = Object.assign(Object.assign({}, bar3dSeriesMark), { ["minLabel"]: { name: "minLabel", type: "text" }, ["maxLabel"]: { name: "maxLabel", type: "text" } });
+	function transformCandlestickSeriesSpec(spec) {
+	    spec.yField = [spec.openField, spec.highField, spec.lowField, spec.closeField];
+	}
 
-	const DefaultBandWidth = 6;
-	class RangeColumn3dSeries extends vchart.RangeColumnSeries {
-	    constructor() {
-	        super(...arguments);
-	        this.type = SeriesType3dEnum.rangeColumn3d;
-	        this._barMarkType = "rect3d";
-	        this._barName = SeriesType3dEnum.bar3d;
+	class CombinationCandlestickChartSpecTransformer extends vchart.CartesianChartSpecTransformer {
+	    needAxes() {
+	        return true;
 	    }
-	}
-	RangeColumn3dSeries.type = SeriesType3dEnum.rangeColumn3d;
-	RangeColumn3dSeries.mark = rangeColumn3dSeriesMark;
-	const registerRangeColumn3dSeries = () => {
-	    registerRect3dMark();
-	    vchart.registerCartesianBandAxis();
-	    vchart.registerCartesianLinearAxis();
-	    vchart.Factory.registerSeries(RangeColumn3dSeries.type, RangeColumn3dSeries);
-	};
-
-	class RangeColumn3dSeriesSpecTransformer extends vchart.RangeColumnSeriesSpecTransformer {
-	    _transformLabelSpec(spec) {
-	        var _a;
-	        const labelPosition = (_a = spec.label) === null || _a === void 0 ? void 0 : _a.position;
-	        if (labelPosition !== "bothEnd") {
-	            this._addMarkLabelSpec(spec, "bar3d");
+	    transformSpec(spec) {
+	        this.transformRegion(spec);
+	        if (spec.tooltip === undefined) {
+	            spec.tooltip = {};
 	        }
+	        this.transformSeriesSpec(spec);
+	        this._transformAxisSpec(spec);
+	        this._transformLayout(spec);
 	    }
-	}
-
-	class RangeColumn3dChartSpecTransformer extends vchart.CartesianChartSpecTransformer {
-	    _getDefaultSeriesSpec(spec) {
+	    transformRegion(spec) {
 	        var _a, _b;
-	        const series = super._getDefaultSeriesSpec(spec, ['bar3d', 'barGapInGroup']);
-	        if (spec.direction === "horizontal") {
-	            series.xField = (_a = spec.xField) !== null && _a !== void 0 ? _a : [spec.minField, spec.maxField];
+	        const commonSpec = spec;
+	        commonSpec.region = [(_a = spec.candlestickRegion) !== null && _a !== void 0 ? _a : {}];
+	        if (spec.previewSeries) {
+	            commonSpec.region.push((_b = spec.previewRegion) !== null && _b !== void 0 ? _b : {});
+	        }
+	    }
+	    transformSeriesSpec(spec) {
+	        var _a;
+	        spec.series = (_a = spec.series) !== null && _a !== void 0 ? _a : [];
+	        spec.series.forEach(s => {
+	            this._transformSeriesData(spec, s);
+	            s.regionIndex = 0;
+	        });
+	        const tempCandlestickSeries = spec.series.find(s => s.id === spec.candlestickSeries.id);
+	        let candlestickSpec;
+	        if (tempCandlestickSeries) {
+	            merge(tempCandlestickSeries, spec.candlestickSeries);
+	            candlestickSpec = tempCandlestickSeries;
 	        }
 	        else {
-	            series.yField = (_b = spec.yField) !== null && _b !== void 0 ? _b : [spec.minField, spec.maxField];
+	            spec.series.push(spec.candlestickSeries);
+	            candlestickSpec = spec.candlestickSeries;
 	        }
-	        return series;
+	        transformCandlestickSeriesSpec(candlestickSpec);
+	        this._transformSeriesData(spec, candlestickSpec);
+	        candlestickSpec.regionIndex = 0;
+	        if (spec.previewSeries) {
+	            const tempPreviewSeries = spec.series.find(s => s.id === spec.previewSeries.id);
+	            let previewSeriesSpec;
+	            if (tempPreviewSeries) {
+	                merge(tempPreviewSeries, spec.previewSeries);
+	                previewSeriesSpec = tempPreviewSeries;
+	            }
+	            else {
+	                spec.series.push(spec.previewSeries);
+	                previewSeriesSpec = spec.previewSeries;
+	            }
+	            previewSeriesSpec.regionIndex = 1;
+	            this._transformSeriesData(spec, previewSeriesSpec);
+	        }
+	    }
+	    _transformSeriesData(spec, seriesSpec) {
+	        var _a;
+	        if (seriesSpec.data) {
+	            spec.data = array((_a = spec.data) !== null && _a !== void 0 ? _a : []);
+	            array(seriesSpec.data).forEach((d, index) => {
+	                spec.data.push(d);
+	                if (index === 0) {
+	                    seriesSpec.dataIndex = spec.data.length - 1;
+	                    if ('id' in d) {
+	                        seriesSpec.dataId = d.id;
+	                    }
+	                    else if ('name' in d) {
+	                        seriesSpec.dataId = d.name;
+	                    }
+	                }
+	            });
+	            delete seriesSpec.data;
+	        }
+	    }
+	    _transformAxisSpec(spec) {
+	        super._transformAxisSpec(spec);
+	        if (!spec.previewSeries) {
+	            return;
+	        }
+	        if (!spec.previewAxes) {
+	            spec.previewAxes = {
+	                type: 'linear',
+	                orient: 'left',
+	                visible: false
+	            };
+	        }
+	        spec.previewAxes.regionIndex = [1];
+	        spec.axes.push(spec.previewAxes);
+	        spec.axes.forEach(axis => {
+	            if (axis === spec.previewAxes) {
+	                return;
+	            }
+	            if (axis.orient === 'left' || axis.orient === 'right') {
+	                axis.regionIndex = [0];
+	            }
+	        });
+	    }
+	    _transformDataZoomSpec(spec) {
+	        if (spec.dataZoom) {
+	            array(spec.dataZoom).forEach(dataZoom => {
+	                if (dataZoom.orient === 'left' || dataZoom.orient === 'right') {
+	                    dataZoom.regionIndex = [0];
+	                }
+	            });
+	        }
+	    }
+	    _transformLayout(spec) {
+	        var _a, _b;
+	        const layout = {
+	            type: 'grid',
+	            col: 2,
+	            row: 6,
+	            elements: [],
+	            colWidth: [],
+	            rowHeight: []
+	        };
+	        let totalRow = 0;
+	        let totalCol = 0;
+	        if (((_a = spec.title) === null || _a === void 0 ? void 0 : _a.visible) !== false) {
+	            totalRow++;
+	        }
+	        if (spec.legends) {
+	            const firstLegend = array(spec.legends)[0];
+	            if ((firstLegend === null || firstLegend === void 0 ? void 0 : firstLegend.visible) !== false) {
+	                if (firstLegend.orient === 'top' || firstLegend.orient === 'bottom') {
+	                    totalRow++;
+	                }
+	                else {
+	                    totalCol++;
+	                }
+	            }
+	        }
+	        if (spec.dataZoom) {
+	            array(spec.dataZoom).forEach(dataZoom => {
+	                if ((dataZoom === null || dataZoom === void 0 ? void 0 : dataZoom.visible) !== false) {
+	                    if (dataZoom.orient === 'top' || dataZoom.orient === 'bottom') {
+	                        totalRow++;
+	                    }
+	                    else {
+	                        totalCol++;
+	                    }
+	                }
+	            });
+	        }
+	        if (spec.axes) {
+	            const hasLayout = {
+	                top: false,
+	                bottom: false,
+	                left: false,
+	                right: false,
+	                z: false
+	            };
+	            array(spec.axes).forEach(axis => {
+	                if (hasLayout[axis.orient]) {
+	                    return;
+	                }
+	                hasLayout[axis.orient] = true;
+	                if (axis.orient === 'top' || axis.orient === 'bottom') {
+	                    totalRow++;
+	                }
+	                else {
+	                    totalCol++;
+	                }
+	            });
+	        }
+	        totalRow++;
+	        totalCol++;
+	        if (spec.previewSeries) {
+	            totalRow++;
+	        }
+	        layout.row = totalRow;
+	        layout.col = totalCol;
+	        const temp = {
+	            top: 0,
+	            bottom: 0,
+	            left: 0,
+	            right: 0
+	        };
+	        if (((_b = spec.title) === null || _b === void 0 ? void 0 : _b.visible) !== false) {
+	            this._layoutOrientItem(layout, spec.title, temp, { specKey: 'title', index: 0 }, 'total');
+	        }
+	        if (spec.legends) {
+	            const firstLegend = array(spec.legends)[0];
+	            if ((firstLegend === null || firstLegend === void 0 ? void 0 : firstLegend.visible) !== false) {
+	                this._layoutOrientItem(layout, firstLegend, temp, { specKey: 'legends', index: 0 }, 'less');
+	            }
+	        }
+	        if (spec.dataZoom) {
+	            array(spec.dataZoom).forEach((dataZoom, index) => {
+	                if ((dataZoom === null || dataZoom === void 0 ? void 0 : dataZoom.visible) === false) {
+	                    return;
+	                }
+	                this._layoutOrientItem(layout, dataZoom, temp, { specKey: 'dataZoom', index }, 'one');
+	            });
+	        }
+	        if (spec.axes) {
+	            const hasLayout = {
+	                left: false,
+	                right: false
+	            };
+	            spec.axes.forEach((axis, index) => {
+	                if (axis.orient !== 'left' && axis.orient !== 'right') {
+	                    return;
+	                }
+	                if (hasLayout[axis.orient]) {
+	                    return;
+	                }
+	                hasLayout[axis.orient] = true;
+	                this._layoutOrientItem(layout, axis, temp, { specKey: 'axes', index }, 'one');
+	            });
+	        }
+	        const regionLayout = this._layoutOrientItem(layout, { orient: 'top' }, temp, { specKey: 'region', index: 0 }, 'one');
+	        if (spec.previewSeries) {
+	            const regionLayout = this._layoutOrientItem(layout, { orient: 'bottom' }, temp, { specKey: 'region', index: 1 }, 'one');
+	            const previewAxesIndex = spec.axes.findIndex(axis => axis === spec.previewAxes);
+	            if (previewAxesIndex !== -1) {
+	                const previewAxesLayout = {
+	                    col: regionLayout.col - 1,
+	                    row: regionLayout.row,
+	                    modelKey: 'axes',
+	                    modelIndex: previewAxesIndex
+	                };
+	                layout.elements.push(previewAxesLayout);
+	            }
+	            if (spec.previewHeight) {
+	                if (typeof spec.previewHeight === 'string') {
+	                    if (vchart.isPercent(spec.previewHeight)) {
+	                        const heightStr = spec.previewHeight;
+	                        layout.rowHeight.push({
+	                            index: regionLayout.row,
+	                            size: (size) => (Number(heightStr.substring(0, heightStr.length - 1)) * size) / 100
+	                        });
+	                    }
+	                }
+	                else {
+	                    layout.rowHeight.push({
+	                        index: regionLayout.row,
+	                        size: spec.previewHeight
+	                    });
+	                }
+	            }
+	        }
+	        const bottomAxesIndex = spec.axes.findIndex(axis => axis.orient === 'bottom');
+	        this._layoutOrientItem(layout, spec.axes[bottomAxesIndex], temp, { specKey: 'axes', index: bottomAxesIndex }, 'one');
+	        spec.axes.forEach((axis, index) => {
+	            if (axis === spec.previewAxes) {
+	                return;
+	            }
+	            const axisLayout = layout.elements.find(item => 'modelKey' in item && item.modelKey === 'axes' && item.modelIndex === index);
+	            if (axisLayout) {
+	                if (axis.orient === 'top' || axis.orient === 'bottom') {
+	                    axisLayout.col = regionLayout.col;
+	                }
+	                else {
+	                    axisLayout.row = regionLayout.row;
+	                }
+	            }
+	        });
+	        array(spec.dataZoom).forEach((dataZoom, index) => {
+	            const dataZoomLayout = layout.elements.find(item => 'modelKey' in item && item.modelKey === 'dataZoom' && item.modelIndex === index);
+	            if (dataZoomLayout) {
+	                if (dataZoom.orient === 'top' || dataZoom.orient === 'bottom') {
+	                    dataZoomLayout.col = regionLayout.col;
+	                }
+	                else {
+	                    dataZoomLayout.row = regionLayout.row;
+	                }
+	            }
+	        });
+	        spec.layout = layout;
+	    }
+	    _layoutOrientItem(layout, modelSpec, temp, modelInfo, spanType) {
+	        var _a;
+	        const modelLayout = {
+	            modelKey: modelInfo.specKey,
+	            modelIndex: modelInfo.index,
+	            col: 0,
+	            row: 0
+	        };
+	        const orient = (_a = modelSpec.orient) !== null && _a !== void 0 ? _a : 'top';
+	        const { span, index } = this._getLayoutElementCommon(layout, temp, spanType, orient);
+	        layout.elements.push(modelLayout);
+	        if (orient === 'top') {
+	            modelLayout.row = temp.top;
+	            modelLayout.rowSpan = 1;
+	            modelLayout.colSpan = span;
+	            modelLayout.col = index;
+	            temp.top++;
+	        }
+	        else if (orient === 'bottom') {
+	            modelLayout.row = layout.row - temp.bottom - 1;
+	            modelLayout.rowSpan = 1;
+	            modelLayout.colSpan = span;
+	            modelLayout.col = index;
+	            temp.bottom++;
+	        }
+	        else if (orient === 'left') {
+	            modelLayout.col = temp.left;
+	            modelLayout.colSpan = 1;
+	            modelLayout.rowSpan = span;
+	            modelLayout.row = index;
+	            temp.left++;
+	        }
+	        else if (orient === 'right') {
+	            modelLayout.col = layout.col - temp.right - 1;
+	            modelLayout.colSpan = 1;
+	            modelLayout.rowSpan = span;
+	            modelLayout.row = index;
+	            temp.right++;
+	        }
+	        return modelLayout;
+	    }
+	    _getLayoutElementCommon(layout, temp, span, orient) {
+	        if (orient === 'top' || orient === 'bottom') {
+	            return {
+	                span: span === 'total' ? layout.col : span === 'one' ? 1 : layout.col - temp.left - temp.right,
+	                index: span === 'total' ? 0 : temp.left
+	            };
+	        }
+	        return {
+	            span: span === 'total' ? layout.row : span === 'one' ? 1 : layout.row - temp.top - temp.bottom,
+	            index: span === 'total' ? 0 : temp.top
+	        };
 	    }
 	}
 
-	class RangeColumn3dChart extends vchart.BaseChart {
+	class CombinationCandlestickChart extends vchart.BaseChart {
 	    constructor() {
 	        super(...arguments);
-	        this.transformerConstructor = RangeColumn3dChartSpecTransformer;
-	        this.type = "rangeColumn3d";
-	        this.seriesType = SeriesType3dEnum.rangeColumn3d;
+	        this.type = CombinationCandlestickChart_TYPE;
+	        this.transformerConstructor = CombinationCandlestickChartSpecTransformer;
 	    }
 	    _setModelOption() {
-	        this._modelOption.getDimensionInfo = vchart.getCartesianDimensionInfo;
+	        this._modelOption.getDimensionInfo = (chart, point, isTooltip) => {
+	            var _a;
+	            return [...((_a = vchart.getCartesianDimensionInfo(chart, point, isTooltip)) !== null && _a !== void 0 ? _a : [])];
+	        };
 	        this._modelOption.getDimensionInfoByValue = vchart.getDimensionInfoByValue;
 	        this._modelOption.getRectByDimensionData = vchart.getCartesianCrosshairRect;
 	    }
 	}
-	RangeColumn3dChart.type = "rangeColumn3d";
-	RangeColumn3dChart.seriesType = SeriesType3dEnum.rangeColumn3d;
-	RangeColumn3dChart.transformerConstructor = RangeColumn3dChartSpecTransformer;
-	const registerRangeColumn3dChart = () => {
-	    vchart.registerDimensionTooltipProcessor();
-	    vchart.registerMarkTooltipProcessor();
-	    vchart.registerDimensionEvents();
-	    vchart.registerDimensionHover();
-	    register3DPlugin();
-	    registerLayout3d();
-	    registerRangeColumn3dSeries();
-	    vchart.Factory.registerChart(RangeColumn3dChart.type, RangeColumn3dChart);
+	CombinationCandlestickChart.type = CombinationCandlestickChart_TYPE;
+	CombinationCandlestickChart.transformerConstructor = CombinationCandlestickChartSpecTransformer;
+	mixin(CombinationCandlestickChart, vchart.StackChartMixin);
+	const registerCombinationCandlestickChart = () => {
+	    registerCandlestickSeries();
+	    vchart.Factory.registerChart(CombinationCandlestickChart.type, CombinationCandlestickChart);
 	};
 
-	const PICTOGRAM_CHART_TYPE = 'pictogram';
-	const PICTOGRAM_SERIES_TYPE = 'pictogram';
-	const ELEMENT_HIGHLIGHT_BY_GRPHIC_NAME = 'element-highlight-by-graphic-name';
-	const ELEMENT_SELECT_BY_GRPHIC_NAME = 'element-select-by-graphic-name';
-	var PictogramMarkNameEnum;
-	(function (PictogramMarkNameEnum) {
-	    PictogramMarkNameEnum["pictogram"] = "pictogram";
-	})(PictogramMarkNameEnum || (PictogramMarkNameEnum = {}));
-	const PictogramSeriesMark = Object.assign(Object.assign({}, vchart.baseSeriesMark), { ["pictogram"]: { name: "pictogram", type: "group" } });
+	const WordCloud3dAnimation = (params) => {
+	    return {
+	        custom: RotateBySphereAnimate,
+	        customParameters: () => params,
+	        easing: 'linear',
+	        loop: Infinity,
+	        duration: 6000
+	    };
+	};
+	const registerWordCloud3dAnimation = () => {
+	    vchart.Factory.registerAnimation('wordCloud3d', (params) => ({
+	        appear: WordCloud3dAnimation(params)
+	    }));
+	};
 
-	class PictogramChartSpecTransformer extends vchart.BaseChartSpecTransformer {
-	    _isValidSeries(type) {
-	        return type === PICTOGRAM_SERIES_TYPE;
+	const wordCloud3d = {
+	    word: {
+	        padding: 1,
+	        style: {
+	            textAlign: 'center',
+	            textBaseline: 'alphabetic'
+	        }
 	    }
-	    _getDefaultSeriesSpec(spec) {
-	        return super._getDefaultSeriesSpec(spec, [
-	            'type',
-	            'nameField',
-	            'valueField',
-	            'svg',
-	            'pictogram',
-	            'defaultFillColor'
-	        ]);
+	};
+
+	class WordCloud3dSeries extends vchart.BaseWordCloudSeries {
+	    constructor() {
+	        super(...arguments);
+	        this.type = SeriesType3dEnum.wordCloud3d;
 	    }
-	    transformSpec(spec) {
-	        super.transformSpec(spec);
-	        spec.region.forEach((r) => {
-	            r.coordinate = 'geo';
-	        });
-	        super.transformSeriesSpec(spec);
+	    _wordCloudTransformOption() {
+	        var _a;
+	        return Object.assign(Object.assign({}, super._wordCloudTransformOption()), { postProjection: (_a = this._spec.postProjection) !== null && _a !== void 0 ? _a : 'StereographicProjection', depth_3d: this._spec.depth_3d });
 	    }
-	}
-
-	const svgSourceMap = new Map();
-	let svgDataSet;
-	function initSVGDataSet() {
-	    if (svgDataSet) {
-	        return;
+	    _wordCloudShapeTransformOption() {
+	        var _a;
+	        return Object.assign(Object.assign({}, super._wordCloudShapeTransformOption()), { postProjection: (_a = this._spec.postProjection) !== null && _a !== void 0 ? _a : 'StereographicProjection', depth_3d: this._spec.depth_3d });
 	    }
-	    svgDataSet = new DataSet();
-	    vchart.registerDataSetInstanceParser(svgDataSet, 'svg', svgParser);
-	}
-	function registerSVGSource(key, source) {
-	    if (svgSourceMap.has(key)) {
-	        vchart.warn(`svg source key of '${key}' already exists, will be overwritten.`);
+	    initMark() {
+	        this._wordMark = this._createMark(vchart.BaseWordCloudSeries.mark.word, {
+	            groupKey: this._seriesField,
+	            isSeriesMark: true
+	        }, {
+	            support3d: true
+	        });
 	    }
-	    initSVGDataSet();
-	    const dataView = new DataView(svgDataSet);
-	    dataView.parse(source, {
-	        type: 'svg'
-	    });
-	    svgSourceMap.set(key, dataView);
-	}
-	function unregisterSVGSource(key) {
-	    if (!svgSourceMap.has(key)) {
-	        vchart.warn(`map type of '${key}' does not exists.`);
-	        return;
+	    initMarkStyle() {
+	        super.initMarkStyle();
+	        const wordMark = this._wordMark;
+	        if (wordMark) {
+	            this.setMarkStyle(wordMark, {
+	                z: (datum) => { var _a; return (_a = datum.z) !== null && _a !== void 0 ? _a : 0; }
+	            }, 'normal', vchart.AttributeLevel.Series);
+	        }
 	    }
-	    svgSourceMap.delete(key);
-	}
-	function getSVGSource(type) {
-	    return svgSourceMap.get(type);
-	}
-	function clearSVGSource() {
-	    svgSourceMap.clear();
-	    svgDataSet = null;
-	}
-
-	class PictogramSeriesSpecTransformer extends vchart.BaseSeriesSpecTransformer {
-	    _getDefaultSpecFromChart(chartSpec) {
-	        var _a, _b, _c;
-	        const spec = (_a = super._getDefaultSpecFromChart(chartSpec)) !== null && _a !== void 0 ? _a : {};
-	        const svg = chartSpec.svg;
-	        const elements = (_c = (_b = svgSourceMap.get(svg)) === null || _b === void 0 ? void 0 : _b.latestData) === null || _c === void 0 ? void 0 : _c.elements;
-	        if (elements && elements.length) {
-	            const names = elements.map(e => e.name).filter(n => isValid$1(n));
-	            names.forEach(name => {
-	                if (chartSpec[name]) {
-	                    spec[name] = chartSpec[name];
-	                }
-	            });
+	    initAnimation() {
+	        var _a, _b;
+	        const padding = (_a = this._padding) !== null && _a !== void 0 ? _a : {};
+	        if (this._wordMark) {
+	            this._wordMark.setAnimationConfig(vchart.animationConfig((_b = vchart.Factory.getAnimationInKey('wordCloud3d')) === null || _b === void 0 ? void 0 : _b(() => {
+	                var _a;
+	                const stage = this.getCompiler().getStage();
+	                const width = stage.width - padding.left || 0 - padding.right || 0;
+	                const height = stage.height - padding.top || 0 - padding.bottom || 0;
+	                const r = Math.max(width, height) / 2;
+	                return {
+	                    center: { x: r, y: r, z: (_a = this._spec.depth_3d) !== null && _a !== void 0 ? _a : r },
+	                    r
+	                };
+	            }), vchart.userAnimationConfig("word", this._spec, this._markAttributeContext)));
 	        }
-	        return spec;
 	    }
 	}
+	WordCloud3dSeries.type = SeriesType3dEnum.wordCloud3d;
+	WordCloud3dSeries.builtInTheme = { wordCloud3d };
+	const registerWordCloud3dSeries = () => {
+	    vchart.registerTextMark();
+	    registerWordCloud3dAnimation();
+	    vchart.Factory.registerSeries(WordCloud3dSeries.type, WordCloud3dSeries);
+	};
+	const registerWordCloudShape3dSeries = () => {
+	    registerWordCloud3dSeries();
+	};
 
-	class PictogramSeriesTooltipHelper extends vchart.BaseSeriesTooltipHelper {
-	    constructor() {
-	        super(...arguments);
-	        this.dimensionTooltipTitleCallback = (datum) => {
-	            var _a;
-	            const series = this.series;
-	            return (_a = this._getDimensionData(datum)) !== null && _a !== void 0 ? _a : series.getDatumName(datum);
-	        };
-	        this.markTooltipValueCallback = (datum, params) => {
-	            const { measureFields } = this._seriesCacheInfo;
-	            if (measureFields[0] && datum.data) {
-	                return datum.data[measureFields[0]];
-	            }
-	        };
-	        this.markTooltipKeyCallback = (datum) => {
-	            var _a;
-	            return (_a = datum.data) === null || _a === void 0 ? void 0 : _a[this.series.getDimensionField()[0]];
-	        };
+	class WordCloud3dChartSpecTransformer extends vchart.BaseWordCloudChartSpecTransformer {
+	    _getDefaultSeriesSpec(spec) {
+	        const series = super._getDefaultSeriesSpec(spec);
+	        series.depth_3d = spec.depth_3d;
+	        return series;
 	    }
 	}
 
-	const type$1 = 'element-highlight-by-graphic-name';
-	class ElementHighlightByGraphicName extends vchart.ElementHighlight {
+	class WordCloud3dChart extends vchart.BaseWordCloudChart {
 	    constructor() {
 	        super(...arguments);
-	        this.type = type$1;
-	        this.handleStart = (e) => {
-	            if (e && e.item && this.isGraphicInMark(e.item)) {
-	                const shouldStart = this.options.shouldStart ? this.options.shouldStart(e) : this._filterByName(e);
-	                if (shouldStart) {
-	                    const itemKey = this._parseTargetKey(e);
-	                    this.start(itemKey);
-	                }
-	            }
-	        };
-	        this.handleReset = (e) => {
-	            if (e && e.item && this.isGraphicInMark(e.item)) {
-	                this.reset();
-	            }
-	        };
-	    }
-	    _filterByName(e) {
-	        var _a;
-	        const name = (_a = e === null || e === void 0 ? void 0 : e.node) === null || _a === void 0 ? void 0 : _a.name;
-	        return !!name;
-	    }
-	    _parseTargetKey(e) {
-	        return e.node.name;
-	    }
-	    start(itemKey) {
-	        if (isNil$1(itemKey)) {
-	            return;
-	        }
-	        const { interaction, highlightState, blurState } = this.options;
-	        const statedGraphics = interaction.getStatedGraphics(this);
-	        const newStatedGraphics = [];
-	        this.getMarks().forEach(m => {
-	            var _a;
-	            (_a = m.getGraphics()) === null || _a === void 0 ? void 0 : _a.forEach(g => {
-	                if (g.name === itemKey) {
-	                    newStatedGraphics.push(g);
-	                }
-	            });
-	        });
-	        interaction.updateStates(this, newStatedGraphics, statedGraphics, highlightState, blurState);
-	        interaction.setStatedGraphics(this, newStatedGraphics);
-	    }
-	    reset() {
-	        const { highlightState, blurState, interaction } = this.options;
-	        interaction.clearAllStatesOfTrigger(this, highlightState, blurState);
-	        interaction.setStatedGraphics(this, []);
+	        this.transformerConstructor = WordCloud3dChartSpecTransformer;
+	        this.type = "wordCloud3d";
+	        this.seriesType = SeriesType3dEnum.wordCloud3d;
 	    }
 	}
-	ElementHighlightByGraphicName.type = type$1;
-	const registerElementHighlightByGraphicName = () => {
-	    vchart.Factory.registerInteractionTrigger(ElementHighlightByGraphicName.type, ElementHighlightByGraphicName);
+	WordCloud3dChart.type = "wordCloud3d";
+	WordCloud3dChart.seriesType = SeriesType3dEnum.wordCloud3d;
+	WordCloud3dChart.transformerConstructor = WordCloud3dChartSpecTransformer;
+	const registerWordCloud3dChart = () => {
+	    register3DPlugin();
+	    registerWordCloud3dSeries();
+	    vchart.Factory.registerChart(WordCloud3dChart.type, WordCloud3dChart);
+	};
+	const registerWordCloudShape3dChart = () => {
+	    register3DPlugin();
+	    registerWordCloudShape3dSeries();
+	    registerWordCloud3dChart();
 	};
 
-	const type = 'element-select-by-graphic-name';
-	class ElementSelectByGraphicName extends vchart.ElementSelect {
-	    constructor() {
-	        super(...arguments);
-	        this.type = type;
-	    }
-	    start(markGraphic) {
-	        const name = markGraphic === null || markGraphic === void 0 ? void 0 : markGraphic.name;
-	        if (name) {
-	            this.getMarks().forEach(mark => {
-	                var _a;
-	                (_a = mark.getGraphics()) === null || _a === void 0 ? void 0 : _a.forEach(g => {
-	                    if (g.name === name) {
-	                        super.start(g);
-	                    }
-	                });
-	            });
-	        }
+	const axisZ = {
+	    label: {
+	        space: 0
 	    }
-	}
-	ElementSelectByGraphicName.type = type;
-	const registerElementSelectByGraphicName = () => {
-	    vchart.Factory.registerInteractionTrigger(ElementSelectByGraphicName.type, ElementSelectByGraphicName);
 	};
 
-	function isValidStrokeOrFill(attr) {
+	const getUpdateAttributeOfZAxis = (axis, ignoreGrid) => {
 	    var _a;
-	    return isValid$1(attr) && attr !== 'none' && !((_a = attr.includes) === null || _a === void 0 ? void 0 : _a.call(attr, 'url'));
-	}
-	const getLineWidth = (attributes) => {
-	    const strokeWidth = parseFloat(attributes.strokeWidth);
-	    if (!isNaN(strokeWidth)) {
-	        return strokeWidth;
+	    const regionSize = vchart.getCombinedSizeOfRegions(axis.getRegions());
+	    const { width } = axis.getLayoutRect();
+	    const axisLength = width;
+	    const depth = axis.layout3dBox ? axis.layout3dBox.length : 0;
+	    const depthZ = axis.layout3dBox ? axis.layout3dBox.width : 0;
+	    const end = { x: depth, y: 0 };
+	    const items = axis.getLabelItems(axisLength);
+	    const attrs = {
+	        start: { x: 0, y: 0 },
+	        end,
+	        title: {
+	            text: axis._spec.title.text || axis._dataFieldText,
+	            maxWidth: axis._getTitleLimit(false)
+	        },
+	        items,
+	        scale: axis._scale.clone()
+	    };
+	    const directionStr = (_a = axis.directionStr) !== null && _a !== void 0 ? _a : 'r2l';
+	    let anchor3d = [0, 0];
+	    let alpha = -Math.PI / 2;
+	    let z = 0;
+	    if (directionStr === 'l2r') {
+	        z = axis.layout3dBox.length;
+	        anchor3d = [0, 0, 0];
+	        alpha = Math.PI / 2;
 	    }
-	    const stroke = attributes.stroke;
-	    return stroke && isValidStrokeOrFill(stroke) ? 1 : 0;
-	};
-	const getFill = (attributes, defaultFill) => {
-	    var _a;
-	    const fill = (_a = attributes.fill) !== null && _a !== void 0 ? _a : defaultFill;
-	    return fill && isValidStrokeOrFill(fill) ? fill : undefined;
-	};
-	const getStroke = (attributes, defaultStroke) => {
-	    var _a;
-	    const stroke = (_a = attributes.stroke) !== null && _a !== void 0 ? _a : defaultStroke;
-	    return stroke && isValidStrokeOrFill(stroke) ? stroke : false;
-	};
-	const commonAttributes = (attributes) => {
-	    return Object.assign(Object.assign({}, attributes), { x: parseFloat(attributes.x) || undefined, y: parseFloat(attributes.y) || undefined, fillStrokeOrder: false, fill: getFill(attributes), lineWidth: getLineWidth(attributes), stroke: getStroke(attributes) });
+	    attrs.z = z;
+	    attrs.alpha = alpha;
+	    attrs.anchor3d = anchor3d;
+	    if (!ignoreGrid) {
+	        attrs.grid = {
+	            type: 'line',
+	            start: { x: 0, y: 0 },
+	            end,
+	            items: items[0],
+	            verticalFactor: axis._axisStyle.verticalFactor,
+	            depth: depthZ,
+	            length: !ignoreGrid ? regionSize.height : 0,
+	            alpha,
+	            z,
+	            anchor3d
+	        };
+	    }
+	    return attrs;
 	};
-	const graphicAttributeTransform = {
-	    group: (attributes) => {
-	        const common = commonAttributes(attributes);
-	        return Object.assign(Object.assign({}, common), { visibleAll: common.visible !== false });
-	    },
-	    rule: (attributes) => {
-	        return Object.assign(Object.assign({}, commonAttributes(attributes)), { x: parseFloat(attributes.x1), y: parseFloat(attributes.y1), x1: parseFloat(attributes.x2), y1: parseFloat(attributes.y2) });
-	    },
-	    rect: (attributes) => {
-	        return Object.assign(Object.assign({}, commonAttributes(attributes)), { fill: getFill(attributes, '#000'), width: parseFloat(attributes.width), height: parseFloat(attributes.height) });
-	    },
-	    polygon: (attributes) => {
-	        return Object.assign(Object.assign({}, commonAttributes(attributes)), { fill: getFill(attributes, '#000'), points: attributes.points
-	                .trim()
-	                .split(/\s+/)
-	                .map((pair) => {
-	                const [x, y] = pair.split(',').map(Number);
-	                return { x, y };
-	            }) });
-	    },
-	    line: (attributes) => {
-	        return Object.assign(Object.assign({}, commonAttributes(attributes)), { points: attributes.points
-	                .trim()
-	                .split(/\s+/)
-	                .map((pair) => {
-	                const [x, y] = pair.split(',').map(Number);
-	                return { x, y };
-	            }) });
-	    },
-	    path: (attributes) => {
-	        return Object.assign(Object.assign({}, commonAttributes(attributes)), { path: attributes.d, fillStrokeOrder: false, fill: getFill(attributes, '#000') });
-	    },
-	    arc: (attributes) => {
-	        var _a;
-	        return Object.assign(Object.assign({}, commonAttributes(attributes)), { outerRadius: (_a = attributes.r) !== null && _a !== void 0 ? _a : attributes.ry, x: parseFloat(attributes.cx), y: parseFloat(attributes.cy), startAngle: 0, endAngle: Math.PI * 2, scaleX: parseFloat(attributes.rx) / parseFloat(attributes.ry) || 1, fill: getFill(attributes, '#000') });
-	    },
-	    text: (attributes, value) => {
-	        var _a, _b;
-	        return Object.assign(Object.assign({}, commonAttributes(attributes)), { text: value, textAlign: (_a = attributes.textAlign) !== null && _a !== void 0 ? _a : 'left', textBaseLine: (_b = attributes.textAnchor) !== null && _b !== void 0 ? _b : 'middle', anchor: [0, 0], fill: getFill(attributes, '#000') });
-	    }
-	};
-	const pictogram = (data) => {
-	    var _a, _b;
-	    if (!data || !data[0]) {
-	        return {};
+
+	class Axis3dMixin {
+	    setLayout3dBox(box3d) {
+	        this.layout3dBox = box3d;
 	    }
-	    const { elements } = data[0].latestData;
-	    if (elements && elements.length) {
-	        elements.forEach((el, index) => {
-	            var _a;
-	            el[vchart.DEFAULT_DATA_INDEX] = index;
-	            el._uniqueId = `${el.id}-${index}`;
-	            el.data = undefined;
-	            const { graphicType: type, transform } = el;
-	            const finalAttributes = {
-	                visible: el.attributes.visibility !== 'hidden' && el.attributes.visibility !== 'collapse'
-	            };
-	            if (el.graphicType === 'text') {
-	                merge(finalAttributes, el._inheritStyle, (_a = el.parent) === null || _a === void 0 ? void 0 : _a._textGroupStyle, el.attributes);
-	            }
-	            else if (el.graphicType !== 'group') {
-	                merge(finalAttributes, el._inheritStyle, el.attributes);
-	            }
-	            if (graphicAttributeTransform[type]) {
-	                el._finalAttributes = graphicAttributeTransform[type](finalAttributes, el.value);
-	            }
-	            else {
-	                el._finalAttributes = finalAttributes;
-	            }
-	            if (transform) {
-	                el._finalAttributes.postMatrix = Object.assign({}, transform);
-	            }
-	        });
-	        const texts = elements.filter(el => el.tagName === 'text');
-	        for (let i = 0; i < texts.length; i++) {
-	            const textId = texts[i]._uniqueId;
-	            const children = elements.filter(el => {
-	                let result = false;
-	                let parent = el.parent;
-	                while (parent) {
-	                    if (parent._uniqueId === textId) {
-	                        result = true;
-	                        break;
-	                    }
-	                    parent = parent.parent;
-	                }
-	                return result;
-	            });
-	            if (children && children.length) {
-	                const startX = (_b = (_a = texts[i]._textGroupStyle) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0;
-	                let curX = startX;
-	                for (let j = 0; j < children.length; j++) {
-	                    const currentChild = children[j];
-	                    if (currentChild.graphicType === 'group') {
-	                        curX = startX;
-	                    }
-	                    else if (currentChild.value) {
-	                        if (currentChild.parent._textGroupStyle.x === undefined) {
-	                            const lastText = children
-	                                .slice(0, j)
-	                                .reverse()
-	                                .find(c => c.graphicType === 'text' && c.value);
-	                            if (lastText) {
-	                                const width = vchart.measureText(lastText.value, lastText._finalAttributes).width;
-	                                curX += width;
-	                            }
-	                            currentChild._finalAttributes.x = curX;
-	                        }
-	                    }
-	                }
+	    _afterUpdateAttribute(attrs, ignoreGrid) {
+	        const isZ = vchart.isZAxis(this._orient);
+	        const isX = vchart.isXAxis(this._orient);
+	        const isY = vchart.isYAxis(this._orient);
+	        let regionHeight = 0;
+	        let regionWidth = 0;
+	        if (!ignoreGrid) {
+	            const regions = this.getRegions();
+	            let { x: minX, y: minY } = regions[0].getLayoutStartPoint();
+	            let maxX = minX + regions[0].getLayoutRect().width;
+	            let maxY = minY + regions[0].getLayoutRect().height;
+	            for (let index = 1; index < regions.length; index++) {
+	                const region = regions[index];
+	                const { x, y } = region.getLayoutStartPoint();
+	                const { width, height } = region.getLayoutRect();
+	                minX = Math.min(minX, x);
+	                maxX = Math.max(maxX, width + x);
+	                minY = Math.min(minY, y);
+	                maxY = Math.max(maxY, height + y);
 	            }
+	            regionHeight = Math.abs(maxY - minY);
+	            regionWidth = Math.abs(maxX - minX);
+	        }
+	        let gridLength = 0;
+	        let axisLength = 0;
+	        const { width, height } = this.getLayoutRect();
+	        let end = { x: 0, y: 0 };
+	        if (isX) {
+	            end = { x: width, y: 0 };
+	            gridLength = regionHeight;
+	            axisLength = width;
+	        }
+	        else if (isY) {
+	            end = { x: 0, y: height };
+	            gridLength = regionWidth;
+	            axisLength = height;
+	        }
+	        const depth = this.layout3dBox ? this.layout3dBox.length : 0;
+	        if (!isZ) {
+	            const items = this.getLabelItems(axisLength);
+	            attrs.grid = {
+	                length: gridLength
+	            };
+	            attrs.start = { x: 0, y: 0 };
+	            attrs.text = this._spec.title.text || this._dataFieldText;
+	            attrs.maxWidth = this._getTitleLimit(isX);
+	            attrs.items = items;
+	            attrs.grid = {
+	                type: 'line',
+	                start: { x: 0, y: 0 },
+	                end,
+	                items: items[0],
+	                depth,
+	                length: gridLength
+	            };
+	            return attrs;
 	        }
+	        return getUpdateAttributeOfZAxis(this, ignoreGrid);
 	    }
-	    return elements;
+	}
+
+	const registerCartesianBandAxis3d = () => {
+	    vchart.registerCartesianBandAxis();
+	    const AxisCls = vchart.Factory.getComponentInKey(vchart.CartesianBandAxis.type);
+	    AxisCls.builtInTheme = Object.assign(Object.assign({}, AxisCls.builtInTheme), { axisZ: Object.assign(Object.assign({}, vchart.CartesianBandAxis.builtInTheme.axisX), axisZ) });
+	    mixin(AxisCls, Axis3dMixin);
 	};
 
-	class PictogramSeries extends vchart.GeoSeries {
+	const registerCartesianLinearAxis3d = () => {
+	    vchart.registerCartesianLinearAxis();
+	    const AxisCls = vchart.Factory.getComponentInKey(vchart.CartesianLinearAxis.type);
+	    AxisCls.builtInTheme = Object.assign(Object.assign({}, AxisCls.builtInTheme), { axisZ: Object.assign(Object.assign({}, vchart.CartesianLinearAxis.builtInTheme.axisX), axisZ) });
+	    mixin(AxisCls, Axis3dMixin);
+	};
+
+	const registerCartesianLogAxis3d = () => {
+	    vchart.registerCartesianLogAxis();
+	    const AxisCls = vchart.Factory.getComponentInKey(vchart.CartesianLogAxis.type);
+	    AxisCls.builtInTheme = Object.assign(Object.assign({}, AxisCls.builtInTheme), { axisZ: Object.assign(Object.assign({}, vchart.CartesianLogAxis.builtInTheme.axisX), axisZ) });
+	    mixin(AxisCls, Axis3dMixin);
+	};
+
+	const registerCartesianSymlogAxis3d = () => {
+	    vchart.registerCartesianLogAxis();
+	    const AxisCls = vchart.Factory.getComponentInKey(vchart.CartesianSymlogAxis.type);
+	    AxisCls.builtInTheme = Object.assign(Object.assign({}, AxisCls.builtInTheme), { axisZ: Object.assign(Object.assign({}, AxisCls.builtInTheme.axisX), axisZ) });
+	    mixin(AxisCls, Axis3dMixin);
+	};
+
+	const registerCartesianTimeAxis3d = () => {
+	    vchart.registerCartesianTimeAxis();
+	    const AxisCls = vchart.Factory.getComponentInKey(vchart.CartesianTimeAxis.type);
+	    AxisCls.builtInTheme = Object.assign(Object.assign({}, AxisCls.builtInTheme), { axisZ: Object.assign(Object.assign({}, AxisCls.builtInTheme.axisX), axisZ) });
+	    mixin(AxisCls, Axis3dMixin);
+	};
+
+	const registerAxis3dPlugin = () => {
+	    register3DPlugin();
+	    registerLayout3d();
+	    registerCartesianBandAxis3d();
+	    registerCartesianLinearAxis3d();
+	    registerCartesianTimeAxis3d();
+	    registerCartesianSymlogAxis3d();
+	    registerCartesianLogAxis3d();
+	};
+
+	const rangeColumn3dSeriesMark = Object.assign(Object.assign({}, bar3dSeriesMark), { ["minLabel"]: { name: "minLabel", type: "text" }, ["maxLabel"]: { name: "maxLabel", type: "text" } });
+
+	const DefaultBandWidth = 6;
+	class RangeColumn3dSeries extends vchart.RangeColumnSeries {
 	    constructor() {
 	        super(...arguments);
-	        this.type = PICTOGRAM_SERIES_TYPE;
-	        this._idToMark = new Map();
+	        this.type = SeriesType3dEnum.rangeColumn3d;
+	        this._barMarkType = "rect3d";
+	        this._barName = SeriesType3dEnum.bar3d;
 	    }
-	    setAttrFromSpec() {
-	        var _a, _b, _c;
-	        super.setAttrFromSpec();
-	        this.svg = this._spec.svg;
-	        this._nameField = this._spec.nameField;
-	        this._valueField = this._spec.valueField;
-	        if (!this.svg) {
-	            (_a = this._option) === null || _a === void 0 ? void 0 : _a.onError(`svg source is not specified !`);
-	        }
-	        this._parsedSvgResult = (_b = getSVGSource(this.svg)) === null || _b === void 0 ? void 0 : _b.latestData;
-	        if (!this._parsedSvgResult) {
-	            (_c = this._option) === null || _c === void 0 ? void 0 : _c.onError(`'${this.svg}' is not registered !`);
+	}
+	RangeColumn3dSeries.type = SeriesType3dEnum.rangeColumn3d;
+	RangeColumn3dSeries.mark = rangeColumn3dSeriesMark;
+	const registerRangeColumn3dSeries = () => {
+	    registerRect3dMark();
+	    vchart.registerCartesianBandAxis();
+	    vchart.registerCartesianLinearAxis();
+	    vchart.Factory.registerSeries(RangeColumn3dSeries.type, RangeColumn3dSeries);
+	};
+
+	class RangeColumn3dSeriesSpecTransformer extends vchart.RangeColumnSeriesSpecTransformer {
+	    _transformLabelSpec(spec) {
+	        var _a;
+	        const labelPosition = (_a = spec.label) === null || _a === void 0 ? void 0 : _a.position;
+	        if (labelPosition !== "bothEnd") {
+	            this._addMarkLabelSpec(spec, "bar3d");
 	        }
 	    }
-	    getDatumCenter(datum) {
-	        return [Number.NaN, Number.NaN];
+	}
+
+	class RangeColumn3dChartSpecTransformer extends vchart.CartesianChartSpecTransformer {
+	    _getDefaultSeriesSpec(spec) {
+	        var _a, _b;
+	        const series = super._getDefaultSeriesSpec(spec, ['bar3d', 'barGapInGroup']);
+	        if (spec.direction === "horizontal") {
+	            series.xField = (_a = spec.xField) !== null && _a !== void 0 ? _a : [spec.minField, spec.maxField];
+	        }
+	        else {
+	            series.yField = (_b = spec.yField) !== null && _b !== void 0 ? _b : [spec.minField, spec.maxField];
+	        }
+	        return series;
 	    }
-	    getDatumName(datum) {
-	        return datum.name || datum._nameFromParent;
+	}
+
+	class RangeColumn3dChart extends vchart.BaseChart {
+	    constructor() {
+	        super(...arguments);
+	        this.transformerConstructor = RangeColumn3dChartSpecTransformer;
+	        this.type = "rangeColumn3d";
+	        this.seriesType = SeriesType3dEnum.rangeColumn3d;
 	    }
-	    getMarksWithoutRoot() {
-	        return this.getMarks().filter(m => m.name && !m.name.includes('seriesGroup') && !m.name.includes('root') && m !== this._pictogramMark);
+	    _setModelOption() {
+	        this._modelOption.getDimensionInfo = vchart.getCartesianDimensionInfo;
+	        this._modelOption.getDimensionInfoByValue = vchart.getDimensionInfoByValue;
+	        this._modelOption.getRectByDimensionData = vchart.getCartesianCrosshairRect;
 	    }
-	    _buildMarkAttributeContext() {
-	        super._buildMarkAttributeContext();
-	        this._markAttributeContext.getTransformMatrix = this.getRootMatrix.bind(this);
-	        this._markAttributeContext.coordToPosition = this.coordToPosition.bind(this);
-	        this._markAttributeContext.dataToPosition = this.dataToPosition.bind(this);
-	    }
-	    _defaultHoverConfig(finalHoverSpec) {
-	        return {
-	            type: ELEMENT_HIGHLIGHT_BY_GRPHIC_NAME,
-	            trigger: finalHoverSpec.trigger,
-	            triggerOff: 'pointerout',
-	            blurState: vchart.STATE_VALUE_ENUM.STATE_HOVER_REVERSE,
-	            highlightState: vchart.STATE_VALUE_ENUM.STATE_HOVER
-	        };
+	}
+	RangeColumn3dChart.type = "rangeColumn3d";
+	RangeColumn3dChart.seriesType = SeriesType3dEnum.rangeColumn3d;
+	RangeColumn3dChart.transformerConstructor = RangeColumn3dChartSpecTransformer;
+	const registerRangeColumn3dChart = () => {
+	    vchart.registerDimensionTooltipProcessor();
+	    vchart.registerMarkTooltipProcessor();
+	    vchart.registerDimensionEvents();
+	    vchart.registerDimensionHover();
+	    register3DPlugin();
+	    registerLayout3d();
+	    registerRangeColumn3dSeries();
+	    vchart.Factory.registerChart(RangeColumn3dChart.type, RangeColumn3dChart);
+	};
+
+	const PICTOGRAM_CHART_TYPE = 'pictogram';
+	const PICTOGRAM_SERIES_TYPE = 'pictogram';
+	const ELEMENT_HIGHLIGHT_BY_GRPHIC_NAME = 'element-highlight-by-graphic-name';
+	const ELEMENT_SELECT_BY_GRPHIC_NAME = 'element-select-by-graphic-name';
+	var PictogramMarkNameEnum;
+	(function (PictogramMarkNameEnum) {
+	    PictogramMarkNameEnum["pictogram"] = "pictogram";
+	})(PictogramMarkNameEnum || (PictogramMarkNameEnum = {}));
+	const PictogramSeriesMark = Object.assign(Object.assign({}, vchart.baseSeriesMark), { ["pictogram"]: { name: "pictogram", type: "group" } });
+
+	class PictogramChartSpecTransformer extends vchart.BaseChartSpecTransformer {
+	    _isValidSeries(type) {
+	        return type === PICTOGRAM_SERIES_TYPE;
 	    }
-	    _defaultSelectConfig(finalSelectSpec) {
-	        const isMultiple = finalSelectSpec.mode === 'multiple';
-	        const triggerOff = isValid$1(finalSelectSpec.triggerOff)
-	            ? finalSelectSpec.triggerOff
-	            : isMultiple
-	                ? ['empty', 'self']
-	                : ['empty', finalSelectSpec.trigger];
-	        return {
-	            type: ELEMENT_SELECT_BY_GRPHIC_NAME,
-	            trigger: finalSelectSpec.trigger,
-	            triggerOff: triggerOff,
-	            reverseState: vchart.STATE_VALUE_ENUM.STATE_SELECTED_REVERSE,
-	            state: vchart.STATE_VALUE_ENUM.STATE_SELECTED,
-	            isMultiple
-	        };
+	    _getDefaultSeriesSpec(spec) {
+	        return super._getDefaultSeriesSpec(spec, [
+	            'type',
+	            'nameField',
+	            'valueField',
+	            'svg',
+	            'pictogram',
+	            'defaultFillColor'
+	        ]);
 	    }
-	    initMark() {
-	        var _a;
-	        this._pictogramMark = this._createMark(PictogramSeries.mark.pictogram, {
-	            groupKey: this.getDimensionField()[0],
-	            isSeriesMark: true,
-	            skipBeforeLayouted: true
-	        }, {
-	            morph: vchart.shouldMarkDoMorph(this._spec, PictogramSeries.mark.pictogram.name)
+	    transformSpec(spec) {
+	        super.transformSpec(spec);
+	        spec.region.forEach((r) => {
+	            r.coordinate = 'geo';
 	        });
-	        if (!this._pictogramMark) {
-	            return;
-	        }
-	        this._pictogramMark.setData(this._mapViewData);
-	        this._pictogramMark.setUserId(PictogramSeries.mark.pictogram.name);
-	        for (const element of this._mapViewData.getDataView().latestData) {
-	            const { graphicType: type, name, parent, id, _nameFromParent, _uniqueId } = element;
-	            const mark = this._createMark({ type, name: name !== null && name !== void 0 ? name : _nameFromParent }, {
-	                groupKey: _uniqueId,
-	                isSeriesMark: false,
-	                skipBeforeLayouted: true,
-	                parent: (_a = this._idToMark.get(parent === null || parent === void 0 ? void 0 : parent._uniqueId)) !== null && _a !== void 0 ? _a : this._pictogramMark
-	            }, {
-	                morph: vchart.shouldMarkDoMorph(this._spec, PictogramSeries.mark.pictogram.name)
+	        super.transformSeriesSpec(spec);
+	    }
+	}
+
+	const svgSourceMap = new Map();
+	let svgDataSet;
+	function initSVGDataSet() {
+	    if (svgDataSet) {
+	        return;
+	    }
+	    svgDataSet = new DataSet();
+	    vchart.registerDataSetInstanceParser(svgDataSet, 'svg', svgParser);
+	}
+	function registerSVGSource(key, source) {
+	    if (svgSourceMap.has(key)) {
+	        vchart.warn(`svg source key of '${key}' already exists, will be overwritten.`);
+	    }
+	    initSVGDataSet();
+	    const dataView = new DataView(svgDataSet);
+	    dataView.parse(source, {
+	        type: 'svg'
+	    });
+	    svgSourceMap.set(key, dataView);
+	}
+	function unregisterSVGSource(key) {
+	    if (!svgSourceMap.has(key)) {
+	        vchart.warn(`map type of '${key}' does not exists.`);
+	        return;
+	    }
+	    svgSourceMap.delete(key);
+	}
+	function getSVGSource(type) {
+	    return svgSourceMap.get(type);
+	}
+	function clearSVGSource() {
+	    svgSourceMap.clear();
+	    svgDataSet = null;
+	}
+
+	class PictogramSeriesSpecTransformer extends vchart.BaseSeriesSpecTransformer {
+	    _getDefaultSpecFromChart(chartSpec) {
+	        var _a, _b, _c;
+	        const spec = (_a = super._getDefaultSpecFromChart(chartSpec)) !== null && _a !== void 0 ? _a : {};
+	        const svg = chartSpec.svg;
+	        const elements = (_c = (_b = svgSourceMap.get(svg)) === null || _b === void 0 ? void 0 : _b.latestData) === null || _c === void 0 ? void 0 : _c.elements;
+	        if (elements && elements.length) {
+	            const names = elements.map(e => e.name).filter(n => isValid$1(n));
+	            names.forEach(name => {
+	                if (chartSpec[name]) {
+	                    spec[name] = chartSpec[name];
+	                }
 	            });
-	            if (mark) {
-	                mark.setData(this._mapViewData);
-	                mark.setUserId(_uniqueId);
-	                this._idToMark.set(_uniqueId, mark);
-	                if (mark.type !== 'group') {
-	                    mark.setMarkConfig({ graphicName: mark.name });
+	        }
+	        return spec;
+	    }
+	}
+
+	class PictogramSeriesTooltipHelper extends vchart.BaseSeriesTooltipHelper {
+	    constructor() {
+	        super(...arguments);
+	        this.dimensionTooltipTitleCallback = (datum) => {
+	            var _a;
+	            const series = this.series;
+	            return (_a = this._getDimensionData(datum)) !== null && _a !== void 0 ? _a : series.getDatumName(datum);
+	        };
+	        this.markTooltipValueCallback = (datum, params) => {
+	            const { measureFields } = this._seriesCacheInfo;
+	            if (measureFields[0] && datum.data) {
+	                return datum.data[measureFields[0]];
+	            }
+	        };
+	        this.markTooltipKeyCallback = (datum) => {
+	            var _a;
+	            return (_a = datum.data) === null || _a === void 0 ? void 0 : _a[this.series.getDimensionField()[0]];
+	        };
+	    }
+	}
+
+	const type$1 = 'element-highlight-by-graphic-name';
+	class ElementHighlightByGraphicName extends vchart.ElementHighlight {
+	    constructor() {
+	        super(...arguments);
+	        this.type = type$1;
+	        this.handleStart = (e) => {
+	            if (e && e.item && this.isGraphicInMark(e.item)) {
+	                const shouldStart = this.options.shouldStart ? this.options.shouldStart(e) : this._filterByName(e);
+	                if (shouldStart) {
+	                    const itemKey = this._parseTargetKey(e);
+	                    this.start(itemKey);
 	                }
-	                mark.setTransform([
-	                    {
-	                        type: 'filter',
-	                        callback: (datum) => {
-	                            return datum._uniqueId === _uniqueId;
-	                        }
-	                    }
-	                ]);
 	            }
-	        }
-	        this._initLabelMark();
+	        };
+	        this.handleReset = (e) => {
+	            if (e && e.item && this.isGraphicInMark(e.item)) {
+	                this.reset();
+	            }
+	        };
 	    }
-	    _initLabelMark() {
-	        if (this._spec.label.visible !== true) {
+	    _filterByName(e) {
+	        var _a;
+	        const name = (_a = e === null || e === void 0 ? void 0 : e.node) === null || _a === void 0 ? void 0 : _a.name;
+	        return !!name;
+	    }
+	    _parseTargetKey(e) {
+	        return e.node.name;
+	    }
+	    start(itemKey) {
+	        if (isNil$1(itemKey)) {
 	            return;
 	        }
-	        const labelMark = this._createMark(PictogramSeries.mark.label, {
-	            isSeriesMark: false,
-	            parent: this._pictogramMark,
-	            groupKey: '_uniqueId',
-	            skipBeforeLayouted: true
+	        const { interaction, highlightState, blurState } = this.options;
+	        const statedGraphics = interaction.getStatedGraphics(this);
+	        const newStatedGraphics = [];
+	        this.getMarks().forEach(m => {
+	            var _a;
+	            (_a = m.getGraphics()) === null || _a === void 0 ? void 0 : _a.forEach(g => {
+	                if (g.name === itemKey) {
+	                    newStatedGraphics.push(g);
+	                }
+	            });
 	        });
-	        if (labelMark) {
-	            this._labelMark = labelMark;
-	            this._labelMark.setData(this._mapViewData);
-	        }
+	        interaction.updateStates(this, newStatedGraphics, statedGraphics, highlightState, blurState);
+	        interaction.setStatedGraphics(this, newStatedGraphics);
 	    }
-	    initLabelMarkStyle() {
-	        if (!this._labelMark) {
-	            return;
-	        }
-	        this.setMarkStyle(this._labelMark, {
-	            visible: (d) => !!this._validElement(d),
-	            x: (d) => { var _a; return (_a = this.dataToPosition(d, true)) === null || _a === void 0 ? void 0 : _a.x; },
-	            y: (d) => { var _a; return (_a = this.dataToPosition(d, true)) === null || _a === void 0 ? void 0 : _a.y; },
-	            text: (d) => d[this.nameField],
-	            textAlign: 'center',
-	            textBaseline: 'middle'
-	        }, vchart.STATE_VALUE_ENUM.STATE_NORMAL, vchart.AttributeLevel.Series);
+	    reset() {
+	        const { highlightState, blurState, interaction } = this.options;
+	        interaction.clearAllStatesOfTrigger(this, highlightState, blurState);
+	        interaction.setStatedGraphics(this, []);
 	    }
-	    initMarkStyle() {
-	        const { root, viewBoxRect } = this._parsedSvgResult;
-	        const elements = this._mapViewData.getDataView().latestData;
-	        if (root) {
-	            this.setMarkStyle(this._pictogramMark, graphicAttributeTransform.group(root.attributes), 'normal', vchart.AttributeLevel.Built_In);
-	            if (root.transform) {
-	                this.setMarkStyle(this._pictogramMark, {
-	                    postMatrix: () => root.transform
-	                }, 'normal', vchart.AttributeLevel.Built_In);
-	            }
-	            if (viewBoxRect) {
-	                this._pictogramMark.setMarkConfig({
-	                    clip: true,
-	                    clipPath: [createRect(Object.assign(Object.assign({}, viewBoxRect), { fill: true }))]
+	}
+	ElementHighlightByGraphicName.type = type$1;
+	const registerElementHighlightByGraphicName = () => {
+	    vchart.Factory.registerInteractionTrigger(ElementHighlightByGraphicName.type, ElementHighlightByGraphicName);
+	};
+
+	const type = 'element-select-by-graphic-name';
+	class ElementSelectByGraphicName extends vchart.ElementSelect {
+	    constructor() {
+	        super(...arguments);
+	        this.type = type;
+	    }
+	    start(markGraphic) {
+	        const name = markGraphic === null || markGraphic === void 0 ? void 0 : markGraphic.name;
+	        if (name) {
+	            this.getMarks().forEach(mark => {
+	                var _a;
+	                (_a = mark.getGraphics()) === null || _a === void 0 ? void 0 : _a.forEach(g => {
+	                    if (g.name === name) {
+	                        super.start(g);
+	                    }
 	                });
-	            }
-	        }
-	        for (const element of elements) {
-	            const { _uniqueId, _finalAttributes: attributes } = element;
-	            const mark = this._idToMark.get(_uniqueId);
-	            const valid = this._validElement(element);
-	            if (mark) {
-	                this.setMarkStyle(mark, { keepStrokeScale: true }, 'normal', vchart.AttributeLevel.Built_In);
-	                if (valid) {
-	                    this.initMarkStyleWithSpec(mark, merge({}, this._spec.pictogram, this._spec[mark.name]));
-	                    this.setMarkStyle(mark, attributes, 'normal', vchart.AttributeLevel.Series);
-	                    mark.setPostProcess('fill', (result, datum) => {
-	                        return isValid$1(result) ? result : this._spec.defaultFillColor;
-	                    });
-	                }
-	                else {
-	                    mark.setMarkConfig({ interactive: false });
-	                    this.setMarkStyle(mark, attributes, 'normal', vchart.AttributeLevel.Built_In);
-	                }
-	            }
+	            });
 	        }
-	        this.initLabelMarkStyle();
 	    }
-	    _validElement(element) {
-	        return element.name || element._nameFromParent;
+	}
+	ElementSelectByGraphicName.type = type;
+	const registerElementSelectByGraphicName = () => {
+	    vchart.Factory.registerInteractionTrigger(ElementSelectByGraphicName.type, ElementSelectByGraphicName);
+	};
+
+	function isValidStrokeOrFill(attr) {
+	    var _a;
+	    return isValid$1(attr) && attr !== 'none' && !((_a = attr.includes) === null || _a === void 0 ? void 0 : _a.call(attr, 'url'));
+	}
+	const getLineWidth = (attributes) => {
+	    const strokeWidth = parseFloat(attributes.strokeWidth);
+	    if (!isNaN(strokeWidth)) {
+	        return strokeWidth;
 	    }
-	    initTooltip() {
-	        this._tooltipHelper = new PictogramSeriesTooltipHelper(this);
-	        this.getMarksWithoutRoot().forEach(mark => {
-	            if (mark && mark.name) {
-	                this._tooltipHelper.activeTriggerSet.mark.add(mark);
+	    const stroke = attributes.stroke;
+	    return stroke && isValidStrokeOrFill(stroke) ? 1 : 0;
+	};
+	const getFill = (attributes, defaultFill) => {
+	    var _a;
+	    const fill = (_a = attributes.fill) !== null && _a !== void 0 ? _a : defaultFill;
+	    return fill && isValidStrokeOrFill(fill) ? fill : undefined;
+	};
+	const getStroke = (attributes, defaultStroke) => {
+	    var _a;
+	    const stroke = (_a = attributes.stroke) !== null && _a !== void 0 ? _a : defaultStroke;
+	    return stroke && isValidStrokeOrFill(stroke) ? stroke : false;
+	};
+	const commonAttributes = (attributes) => {
+	    return Object.assign(Object.assign({}, attributes), { x: parseFloat(attributes.x) || undefined, y: parseFloat(attributes.y) || undefined, fillStrokeOrder: false, fill: getFill(attributes), lineWidth: getLineWidth(attributes), stroke: getStroke(attributes) });
+	};
+	const graphicAttributeTransform = {
+	    group: (attributes) => {
+	        const common = commonAttributes(attributes);
+	        return Object.assign(Object.assign({}, common), { visibleAll: common.visible !== false });
+	    },
+	    rule: (attributes) => {
+	        return Object.assign(Object.assign({}, commonAttributes(attributes)), { x: parseFloat(attributes.x1), y: parseFloat(attributes.y1), x1: parseFloat(attributes.x2), y1: parseFloat(attributes.y2) });
+	    },
+	    rect: (attributes) => {
+	        return Object.assign(Object.assign({}, commonAttributes(attributes)), { fill: getFill(attributes, '#000'), width: parseFloat(attributes.width), height: parseFloat(attributes.height) });
+	    },
+	    polygon: (attributes) => {
+	        return Object.assign(Object.assign({}, commonAttributes(attributes)), { fill: getFill(attributes, '#000'), points: attributes.points
+	                .trim()
+	                .split(/\s+/)
+	                .map((pair) => {
+	                const [x, y] = pair.split(',').map(Number);
+	                return { x, y };
+	            }) });
+	    },
+	    line: (attributes) => {
+	        return Object.assign(Object.assign({}, commonAttributes(attributes)), { points: attributes.points
+	                .trim()
+	                .split(/\s+/)
+	                .map((pair) => {
+	                const [x, y] = pair.split(',').map(Number);
+	                return { x, y };
+	            }) });
+	    },
+	    path: (attributes) => {
+	        return Object.assign(Object.assign({}, commonAttributes(attributes)), { path: attributes.d, fillStrokeOrder: false, fill: getFill(attributes, '#000') });
+	    },
+	    arc: (attributes) => {
+	        var _a;
+	        return Object.assign(Object.assign({}, commonAttributes(attributes)), { outerRadius: (_a = attributes.r) !== null && _a !== void 0 ? _a : attributes.ry, x: parseFloat(attributes.cx), y: parseFloat(attributes.cy), startAngle: 0, endAngle: Math.PI * 2, scaleX: parseFloat(attributes.rx) / parseFloat(attributes.ry) || 1, fill: getFill(attributes, '#000') });
+	    },
+	    text: (attributes, value) => {
+	        var _a, _b;
+	        return Object.assign(Object.assign({}, commonAttributes(attributes)), { text: value, textAlign: (_a = attributes.textAlign) !== null && _a !== void 0 ? _a : 'left', textBaseLine: (_b = attributes.textAnchor) !== null && _b !== void 0 ? _b : 'middle', anchor: [0, 0], fill: getFill(attributes, '#000') });
+	    }
+	};
+	const pictogram = (data) => {
+	    var _a, _b;
+	    if (!data || !data[0]) {
+	        return {};
+	    }
+	    const { elements } = data[0].latestData;
+	    if (elements && elements.length) {
+	        elements.forEach((el, index) => {
+	            var _a;
+	            el[vchart.DEFAULT_DATA_INDEX] = index;
+	            el._uniqueId = `${el.id}-${index}`;
+	            el.data = undefined;
+	            const { graphicType: type, transform } = el;
+	            const finalAttributes = {
+	                visible: el.attributes.visibility !== 'hidden' && el.attributes.visibility !== 'collapse'
+	            };
+	            if (el.graphicType === 'text') {
+	                merge(finalAttributes, el._inheritStyle, (_a = el.parent) === null || _a === void 0 ? void 0 : _a._textGroupStyle, el.attributes);
+	            }
+	            else if (el.graphicType !== 'group') {
+	                merge(finalAttributes, el._inheritStyle, el.attributes);
+	            }
+	            if (graphicAttributeTransform[type]) {
+	                el._finalAttributes = graphicAttributeTransform[type](finalAttributes, el.value);
+	            }
+	            else {
+	                el._finalAttributes = finalAttributes;
+	            }
+	            if (transform) {
+	                el._finalAttributes.postMatrix = Object.assign({}, transform);
 	            }
 	        });
-	    }
-	    dataToPosition(datum, global = false) {
-	        if (!datum) {
-	            return null;
-	        }
-	        const name = datum[this.nameField];
-	        if (!name) {
-	            return null;
-	        }
-	        const mark = this.getMarksWithoutRoot().filter(mark => mark.name === name);
-	        if (!mark || mark.length === 0) {
-	            return null;
-	        }
-	        let bounds = new Bounds();
-	        if (global) {
-	            mark.forEach(m => {
-	                bounds = bounds.union(m.getGraphics()[0].globalAABBBounds);
-	            });
-	        }
-	        else {
-	            mark.forEach(m => {
-	                bounds = bounds.union(m.getProduct().AABBBounds);
+	        const texts = elements.filter(el => el.tagName === 'text');
+	        for (let i = 0; i < texts.length; i++) {
+	            const textId = texts[i]._uniqueId;
+	            const children = elements.filter(el => {
+	                let result = false;
+	                let parent = el.parent;
+	                while (parent) {
+	                    if (parent._uniqueId === textId) {
+	                        result = true;
+	                        break;
+	                    }
+	                    parent = parent.parent;
+	                }
+	                return result;
 	            });
+	            if (children && children.length) {
+	                const startX = (_b = (_a = texts[i]._textGroupStyle) === null || _a === void 0 ? void 0 : _a.x) !== null && _b !== void 0 ? _b : 0;
+	                let curX = startX;
+	                for (let j = 0; j < children.length; j++) {
+	                    const currentChild = children[j];
+	                    if (currentChild.graphicType === 'group') {
+	                        curX = startX;
+	                    }
+	                    else if (currentChild.value) {
+	                        if (currentChild.parent._textGroupStyle.x === undefined) {
+	                            const lastText = children
+	                                .slice(0, j)
+	                                .reverse()
+	                                .find(c => c.graphicType === 'text' && c.value);
+	                            if (lastText) {
+	                                const width = vchart.measureText(lastText.value, lastText._finalAttributes).width;
+	                                curX += width;
+	                            }
+	                            currentChild._finalAttributes.x = curX;
+	                        }
+	                    }
+	                }
+	            }
 	        }
-	        const point = { x: (bounds.x1 + bounds.x2) / 2, y: (bounds.y1 + bounds.y2) / 2 };
-	        if (global) {
-	            const { x, y } = this.getLayoutStartPoint();
-	            point.x -= x;
-	            point.y -= y;
-	        }
-	        return point;
 	    }
-	    coordToPosition(point) {
-	        if (!point) {
-	            return null;
+	    return elements;
+	};
+
+	class PictogramSeries extends vchart.GeoSeries {
+	    constructor() {
+	        super(...arguments);
+	        this.type = PICTOGRAM_SERIES_TYPE;
+	        this._idToMark = new Map();
+	    }
+	    setAttrFromSpec() {
+	        var _a, _b, _c;
+	        super.setAttrFromSpec();
+	        this.svg = this._spec.svg;
+	        this._nameField = this._spec.nameField;
+	        this._valueField = this._spec.valueField;
+	        if (!this.svg) {
+	            (_a = this._option) === null || _a === void 0 ? void 0 : _a.onError(`svg source is not specified !`);
 	        }
-	        const { x, y } = point;
-	        const matrix = this.getRootMatrix();
-	        if (!matrix) {
-	            return null;
+	        this._parsedSvgResult = (_b = getSVGSource(this.svg)) === null || _b === void 0 ? void 0 : _b.latestData;
+	        if (!this._parsedSvgResult) {
+	            (_c = this._option) === null || _c === void 0 ? void 0 : _c.onError(`'${this.svg}' is not registered !`);
 	        }
-	        const position = {};
-	        matrix.getInverse().transformPoint({ x, y }, position);
-	        return position;
 	    }
-	    getRootMatrix() {
-	        var _a;
+	    getDatumCenter(datum) {
+	        return [Number.NaN, Number.NaN];
+	    }
+	    getDatumName(datum) {
+	        return datum.name || datum._nameFromParent;
+	    }
+	    getMarksWithoutRoot() {
+	        return this.getMarks().filter(m => m.name && !m.name.includes('seriesGroup') && !m.name.includes('root') && m !== this._pictogramMark);
+	    }
+	    _buildMarkAttributeContext() {
+	        super._buildMarkAttributeContext();
+	        this._markAttributeContext.getTransformMatrix = this.getRootMatrix.bind(this);
+	        this._markAttributeContext.coordToPosition = this.coordToPosition.bind(this);
+	        this._markAttributeContext.dataToPosition = this.dataToPosition.bind(this);
+	    }
+	    _defaultHoverConfig(finalHoverSpec) {
+	        return {
+	            type: ELEMENT_HIGHLIGHT_BY_GRPHIC_NAME,
+	            trigger: finalHoverSpec.trigger,
+	            triggerOff: 'pointerout',
+	            blurState: vchart.STATE_VALUE_ENUM.STATE_HOVER_REVERSE,
+	            highlightState: vchart.STATE_VALUE_ENUM.STATE_HOVER
+	        };
+	    }
+	    _defaultSelectConfig(finalSelectSpec) {
+	        const isMultiple = finalSelectSpec.mode === 'multiple';
+	        const triggerOff = isValid$1(finalSelectSpec.triggerOff)
+	            ? finalSelectSpec.triggerOff
+	            : isMultiple
+	                ? ['empty', 'self']
+	                : ['empty', finalSelectSpec.trigger];
+	        return {
+	            type: ELEMENT_SELECT_BY_GRPHIC_NAME,
+	            trigger: finalSelectSpec.trigger,
+	            triggerOff: triggerOff,
+	            reverseState: vchart.STATE_VALUE_ENUM.STATE_SELECTED_REVERSE,
+	            state: vchart.STATE_VALUE_ENUM.STATE_SELECTED,
+	            isMultiple
+	        };
+	    }
+	    initMark() {
+	        var _a;
+	        this._pictogramMark = this._createMark(PictogramSeries.mark.pictogram, {
+	            groupKey: this.getDimensionField()[0],
+	            isSeriesMark: true,
+	            skipBeforeLayouted: true
+	        }, {
+	            morph: vchart.shouldMarkDoMorph(this._spec, PictogramSeries.mark.pictogram.name)
+	        });
+	        if (!this._pictogramMark) {
+	            return;
+	        }
+	        this._pictogramMark.setData(this._mapViewData);
+	        this._pictogramMark.setUserId(PictogramSeries.mark.pictogram.name);
+	        for (const element of this._mapViewData.getDataView().latestData) {
+	            const { graphicType: type, name, parent, id, _nameFromParent, _uniqueId } = element;
+	            const mark = this._createMark({ type, name: name !== null && name !== void 0 ? name : _nameFromParent }, {
+	                groupKey: _uniqueId,
+	                isSeriesMark: false,
+	                skipBeforeLayouted: true,
+	                parent: (_a = this._idToMark.get(parent === null || parent === void 0 ? void 0 : parent._uniqueId)) !== null && _a !== void 0 ? _a : this._pictogramMark
+	            }, {
+	                morph: vchart.shouldMarkDoMorph(this._spec, PictogramSeries.mark.pictogram.name)
+	            });
+	            if (mark) {
+	                mark.setData(this._mapViewData);
+	                mark.setUserId(_uniqueId);
+	                this._idToMark.set(_uniqueId, mark);
+	                if (mark.type !== 'group') {
+	                    mark.setMarkConfig({ graphicName: mark.name });
+	                }
+	                mark.setTransform([
+	                    {
+	                        type: 'filter',
+	                        callback: (datum) => {
+	                            return datum._uniqueId === _uniqueId;
+	                        }
+	                    }
+	                ]);
+	            }
+	        }
+	        this._initLabelMark();
+	    }
+	    _initLabelMark() {
+	        if (this._spec.label.visible !== true) {
+	            return;
+	        }
+	        const labelMark = this._createMark(PictogramSeries.mark.label, {
+	            isSeriesMark: false,
+	            parent: this._pictogramMark,
+	            groupKey: '_uniqueId',
+	            skipBeforeLayouted: true
+	        });
+	        if (labelMark) {
+	            this._labelMark = labelMark;
+	            this._labelMark.setData(this._mapViewData);
+	        }
+	    }
+	    initLabelMarkStyle() {
+	        if (!this._labelMark) {
+	            return;
+	        }
+	        this.setMarkStyle(this._labelMark, {
+	            visible: (d) => !!this._validElement(d),
+	            x: (d) => { var _a; return (_a = this.dataToPosition(d, true)) === null || _a === void 0 ? void 0 : _a.x; },
+	            y: (d) => { var _a; return (_a = this.dataToPosition(d, true)) === null || _a === void 0 ? void 0 : _a.y; },
+	            text: (d) => d[this.nameField],
+	            textAlign: 'center',
+	            textBaseline: 'middle'
+	        }, vchart.STATE_VALUE_ENUM.STATE_NORMAL, vchart.AttributeLevel.Series);
+	    }
+	    initMarkStyle() {
+	        const { root, viewBoxRect } = this._parsedSvgResult;
+	        const elements = this._mapViewData.getDataView().latestData;
+	        if (root) {
+	            this.setMarkStyle(this._pictogramMark, graphicAttributeTransform.group(root.attributes), 'normal', vchart.AttributeLevel.Built_In);
+	            if (root.transform) {
+	                this.setMarkStyle(this._pictogramMark, {
+	                    postMatrix: () => root.transform
+	                }, 'normal', vchart.AttributeLevel.Built_In);
+	            }
+	            if (viewBoxRect) {
+	                this._pictogramMark.setMarkConfig({
+	                    clip: true,
+	                    clipPath: [createRect(Object.assign(Object.assign({}, viewBoxRect), { fill: true }))]
+	                });
+	            }
+	        }
+	        for (const element of elements) {
+	            const { _uniqueId, _finalAttributes: attributes } = element;
+	            const mark = this._idToMark.get(_uniqueId);
+	            const valid = this._validElement(element);
+	            if (mark) {
+	                this.setMarkStyle(mark, { keepStrokeScale: true }, 'normal', vchart.AttributeLevel.Built_In);
+	                if (valid) {
+	                    this.initMarkStyleWithSpec(mark, merge({}, this._spec.pictogram, this._spec[mark.name]));
+	                    this.setMarkStyle(mark, attributes, 'normal', vchart.AttributeLevel.Series);
+	                    mark.setPostProcess('fill', (result, datum) => {
+	                        return isValid$1(result) ? result : this._spec.defaultFillColor;
+	                    });
+	                }
+	                else {
+	                    mark.setMarkConfig({ interactive: false });
+	                    this.setMarkStyle(mark, attributes, 'normal', vchart.AttributeLevel.Built_In);
+	                }
+	            }
+	        }
+	        this.initLabelMarkStyle();
+	    }
+	    _validElement(element) {
+	        return element.name || element._nameFromParent;
+	    }
+	    initTooltip() {
+	        this._tooltipHelper = new PictogramSeriesTooltipHelper(this);
+	        this.getMarksWithoutRoot().forEach(mark => {
+	            if (mark && mark.name) {
+	                this._tooltipHelper.activeTriggerSet.mark.add(mark);
+	            }
+	        });
+	    }
+	    dataToPosition(datum, global = false) {
+	        if (!datum) {
+	            return null;
+	        }
+	        const name = datum[this.nameField];
+	        if (!name) {
+	            return null;
+	        }
+	        const mark = this.getMarksWithoutRoot().filter(mark => mark.name === name);
+	        if (!mark || mark.length === 0) {
+	            return null;
+	        }
+	        let bounds = new Bounds();
+	        if (global) {
+	            mark.forEach(m => {
+	                bounds = bounds.union(m.getGraphics()[0].globalAABBBounds);
+	            });
+	        }
+	        else {
+	            mark.forEach(m => {
+	                bounds = bounds.union(m.getProduct().AABBBounds);
+	            });
+	        }
+	        const point = { x: (bounds.x1 + bounds.x2) / 2, y: (bounds.y1 + bounds.y2) / 2 };
+	        if (global) {
+	            const { x, y } = this.getLayoutStartPoint();
+	            point.x -= x;
+	            point.y -= y;
+	        }
+	        return point;
+	    }
+	    coordToPosition(point) {
+	        if (!point) {
+	            return null;
+	        }
+	        const { x, y } = point;
+	        const matrix = this.getRootMatrix();
+	        if (!matrix) {
+	            return null;
+	        }
+	        const position = {};
+	        matrix.getInverse().transformPoint({ x, y }, position);
+	        return position;
+	    }
+	    getRootMatrix() {
+	        var _a;
 	        return (_a = this.getPictogramRootGraphic()) === null || _a === void 0 ? void 0 : _a.transMatrix;
 	    }
 	    getPictogramRootGraphic() {
@@ -21576,932 +22494,409 @@
 	      cellInfo.forEach(cell => {
 	        let intersectPixelCount = 0;
 	        eachPixel(cell, index => {
-	          labels[index] && intersectPixelCount++;
-	        }), cell.intersectPixels = intersectPixelCount;
-	      });
-	    }
-	    const imageCount = images.length,
-	      maxDistance = Math.sqrt(Math.pow(size[0], 2) + Math.pow(size[1], 2)),
-	      imageVisible = cell => {
-	        const {
-	          intersectPixels: intersectPixels
-	        } = cell;
-	        return "default" === placement ? intersectPixels > .5 * cellPixelCount : "edge" !== placement || intersectPixels > .1 * cellPixelCount && intersectPixels < cellPixelCount;
-	      };
-	    for (let i = 0; i < imageCount; i++) {
-	      const image = images[i],
-	        cell = cellInfo[i];
-	      cell && (image.x = cell.centerX - image.width / 2, image.y = cell.centerY - image.height / 2, image.visible = imageVisible(cell), image.cell = `${cell.row}_${cell.col}`, image.angle = Math.random() * (2 * maxAngle) - maxAngle, image.anchor = [image.x + image.width / 2, image.y + image.height / 2], image.zIndex = maxDistance - cell.distance, image.distance = cell.distance, image.frequency = 1, cell.image = image);
-	    }
-	    const key = Object.keys(images[0]).find(k => k.includes("VGRAMMAR"));
-	    if (imageCount < cellCount) for (let i = imageCount; i < cellCount; i++) {
-	      const image = images[i - imageCount],
-	        cell = cellInfo[i];
-	      if (cell) {
-	        const repeatImage = Object.assign({}, image);
-	        repeatImage.x = cell.centerX - repeatImage.width / 2, repeatImage.y = cell.centerY - repeatImage.height / 2, repeatImage.anchor = [repeatImage.x + repeatImage.width / 2, repeatImage.y + repeatImage.height / 2], repeatImage.angle = Math.random() * (2 * maxAngle) - maxAngle, repeatImage.frequency += 1, repeatImage[key] = `${repeatImage[key]}_${repeatImage.frequency}`, repeatImage.visible = imageVisible(cell), repeatImage.cell = `${cell.row}_${cell.col}`, repeatImage.distance = cell.distance, repeatImage.zIndex = maxDistance - cell.distance, cell.image = repeatImage, images.push(repeatImage);
-	      }
-	    }
-	    return images.filter(img => img.visible);
-	  }
-	}
-
-	const transform = (options, upstreamData, parameters) => {
-	  var _a, _b;
-	  const size = isFunction$1(options.size) ? options.size() : options.size;
-	  if (options.size = size, !size || isNil$1(size[0]) || isNil$1(size[1]) || size[0] <= 0 || size[1] <= 0) {
-	    return Logger.getInstance().info("Wordcloud size dimensions must be greater than 0"), [];
-	  }
-	  if (options.size = [Math.ceil(size[0]), Math.ceil(size[1])], options.image || Logger.getInstance().error("Imagecloud: image source must be specified."), options.onBeforeLayout && options.onBeforeLayout(), !upstreamData || 0 === upstreamData.length) return [];
-	  let layoutConstructor;
-	  switch (null !== (_b = null === (_a = options.layoutConfig) || void 0 === _a ? void 0 : _a.layoutMode) && void 0 !== _b ? _b : "spiral") {
-	    case "grid":
-	      layoutConstructor = GridLayout;
-	      break;
-	    case "stack":
-	      layoutConstructor = StackLayout;
-	      break;
-	    default:
-	      layoutConstructor = SpiralLayout;
-	  }
-	  const layout = new layoutConstructor(options);
-	  return layout.layout(upstreamData), layout.unfinished() ? {
-	    progressive: layout
-	  } : layout.output();
-	};
-
-	class AxialRotateAnimation extends ACustomAnimate {
-	    constructor(from, to, duration, easing, params) {
-	        var _a;
-	        super(from, to, duration, easing, params);
-	        this._rotations = (_a = params === null || params === void 0 ? void 0 : params.rotation) !== null && _a !== void 0 ? _a : 1;
-	    }
-	    onBind() {
-	        this._scaleX = this.target.attribute.scaleX;
-	        if (!isValidNumber$1(this._rotations)) {
-	            this.valid = false;
-	        }
-	    }
-	    onUpdate(end, ratio, out) {
-	        var _a;
-	        if (this.valid === false) {
-	            return;
-	        }
-	        if (end) {
-	            out.scaleX = this._scaleX;
-	            return;
-	        }
-	        const currentAngle = this._rotations * 360 * ratio;
-	        const currentAngleInRadians = (currentAngle * Math.PI) / 180;
-	        const scaleX = Math.abs(Math.cos(currentAngleInRadians)) * ((_a = this._scaleX) !== null && _a !== void 0 ? _a : 1);
-	        this.target.attribute.scaleX = scaleX;
-	        this.target.addUpdatePositionTag();
-	        this.target.addUpdateShapeAndBoundsTag();
-	    }
-	}
-	function imageCloudPresetAnimation(params, preset) {
-	    switch (preset) {
-	        case 'axialRotate':
-	            return [
-	                {
-	                    custom: AxialRotateAnimation,
-	                    customParameters: {
-	                        rotation: 1
-	                    },
-	                    duration: vchart.DEFAULT_ANIMATION_CONFIG.appear.duration
-	                },
-	                {
-	                    channel: {
-	                        y: {
-	                            from: (datum, element) => {
-	                                return params.height() + element.getFinalAttribute().y;
-	                            }
-	                        },
-	                        fillOpacity: {
-	                            from: 0,
-	                            to: 1
-	                        }
-	                    },
-	                    easing: 'sineInOut'
-	                }
-	            ];
-	        case 'growIn':
-	            return {
-	                channel: {
-	                    scaleX: {
-	                        from: 0,
-	                        to: 1
-	                    },
-	                    scaleY: {
-	                        from: 0,
-	                        to: 1
-	                    },
-	                    x: { from: () => params.center().x },
-	                    y: { from: () => params.center().y }
-	                },
-	                duration: vchart.DEFAULT_ANIMATION_CONFIG.appear.duration
-	            };
-	        case 'scaleIn':
-	            return { type: 'scaleIn', duration: vchart.DEFAULT_ANIMATION_CONFIG.appear.duration };
-	        case 'fadeIn':
-	        default:
-	            return { type: 'fadeIn', easing: 'linear', duration: vchart.DEFAULT_ANIMATION_CONFIG.appear.duration };
-	    }
-	}
-	const registerImageCloudAnimation = () => {
-	    vchart.Factory.registerAnimation('imageCloud', (params, preset) => ({
-	        appear: imageCloudPresetAnimation(params, preset),
-	        enter: imageCloudPresetAnimation(params, preset),
-	        exit: { type: 'fadeOut' },
-	        disappear: { type: 'fadeOut' }
-	    }));
-	};
-
-	class ImageCloudTooltipHelper extends vchart.BaseSeriesTooltipHelper {
-	    constructor() {
-	        super(...arguments);
-	        this.markTooltipKeyCallback = (datum) => {
-	            var _a, _b;
-	            return (_b = (_a = this.series) === null || _a === void 0 ? void 0 : _a.getMarkData(datum)) === null || _b === void 0 ? void 0 : _b[this.series.getDimensionField()[0]];
-	        };
-	        this.markTooltipValueCallback = (datum) => {
-	            var _a, _b;
-	            const { measureFields } = this._seriesCacheInfo;
-	            const data = (_a = this.series) === null || _a === void 0 ? void 0 : _a.getMarkData(datum);
-	            if (measureFields[0] && data) {
-	                return (_b = data[measureFields[0]]) !== null && _b !== void 0 ? _b : datum.value;
-	            }
-	            return undefined;
-	        };
-	        this.dimensionTooltipTitleCallback = (datum) => {
-	            var _a;
-	            const { dimensionFields } = this._seriesCacheInfo;
-	            const data = (_a = this.series) === null || _a === void 0 ? void 0 : _a.getMarkData(datum);
-	            if (dimensionFields[0] && data) {
-	                return data[dimensionFields[0]];
-	            }
-	            return undefined;
-	        };
-	    }
-	    get defaultShapeType() {
-	        return 'square';
-	    }
-	}
-
-	class ImageCloudSeries extends vchart.BaseSeries {
-	    constructor() {
-	        super(...arguments);
-	        this.type = IMAGE_CLOUD_SERIES_TYPE;
-	    }
-	    setValueField(field) {
-	        if (isValid$1(field)) {
-	            this._valueField = field;
-	        }
-	    }
-	    setAttrFromSpec() {
-	        super.setAttrFromSpec();
-	        this._nameField = this._spec.nameField;
-	        this._valueField = this._spec.valueField;
-	        this._urlField = this._spec.urlField;
-	    }
-	    initMark() {
-	        var _a;
-	        if ((_a = this._spec.imageMask) === null || _a === void 0 ? void 0 : _a.visible) {
-	            this._maskMark = this._createMark(imageCloudSeriesMark.imageMask, {
-	                dataView: false,
-	                skipBeforeLayouted: true
-	            });
-	        }
-	        this._imageMark = this._createMark(imageCloudSeriesMark.image, {
-	            key: datum => `${datum[vchart.DEFAULT_DATA_KEY]}-${datum.frequency}`,
-	            isSeriesMark: true,
-	            skipBeforeLayouted: true
-	        });
-	    }
-	    initMarkStyle() {
-	        this._initImageMarkStyle();
-	        this._initMaskMarkStyle();
-	    }
-	    _initImageMarkStyle() {
-	        var _a, _b;
-	        if (!this._imageMark) {
-	            return;
-	        }
-	        this._imageMark.setTransform([
-	            Object.assign({ type: 'imagecloud' }, this._imageCloudTransformOption())
-	        ]);
-	        this.setMarkStyle(this._imageMark, {
-	            x: (datum) => datum.x,
-	            y: (datum) => datum.y,
-	            width: (datum) => datum.width,
-	            height: (datum) => datum.height,
-	            visible: (datum) => datum.visible,
-	            angle: (datum) => datum.angle,
-	            clipConfig: (datum) => datum.clipConfig,
-	            image: (datum) => datum[this._urlField],
-	            scaleCenter: ['50%', '50%']
-	        }, 'normal', vchart.AttributeLevel.Series);
-	        const isMasked = ((_a = this._spec.layoutConfig) === null || _a === void 0 ? void 0 : _a.placement) === 'masked';
-	        if (isMasked) {
-	            this.setMarkStyle(this._imageMark, {
-	                globalCompositeOperation: 'source-atop'
-	            }, 'normal', vchart.AttributeLevel.Series);
-	            this.setMarkStyle(this._rootMark, {
-	                width: () => this._region.getLayoutRect().width,
-	                height: () => this._region.getLayoutRect().height,
-	                globalCompositeOperation: 'destination-in',
-	                clip: true,
-	                drawMode: 1
-	            }, 'normal', vchart.AttributeLevel.Series);
-	        }
-	        if (((_b = this._spec.layoutConfig) === null || _b === void 0 ? void 0 : _b.layoutMode) === 'stack') {
-	            this.setMarkStyle(this._imageMark, {
-	                stroke: 'white',
-	                lineWidth: 2,
-	                shadowBlur: 6,
-	                shadowColor: 'grey'
-	            }, 'normal', vchart.AttributeLevel.Series);
-	        }
-	    }
-	    isFillingImage(datum) {
-	        return datum._frequency > 1;
-	    }
-	    _initMaskMarkStyle() {
-	        if (!this._maskMark) {
-	            return;
-	        }
-	        this._maskMark.setMarkConfig({ interactive: false });
-	        this.setMarkStyle(this._maskMark, {
-	            width: () => {
-	                return this._region.getLayoutRect().width;
-	            },
-	            height: () => {
-	                return this._region.getLayoutRect().height;
-	            }
-	        }, 'normal', vchart.AttributeLevel.Series);
-	    }
-	    initTooltip() {
-	        this._tooltipHelper = new ImageCloudTooltipHelper(this);
-	        this._imageMark && this._tooltipHelper.activeTriggerSet.mark.add(this._imageMark);
-	    }
-	    _imageCloudTransformOption() {
-	        var _a;
-	        return {
-	            size: () => {
-	                const { width, height } = this._region.getLayoutRect();
-	                return [width, height];
-	            },
-	            image: { field: this._urlField },
-	            weight: { field: this._valueField },
-	            imageConfig: {
-	                imageSize: this._spec.imageSize,
-	                imageSizeRange: this._spec.imageSizeRange,
-	                padding: (_a = this._spec.image) === null || _a === void 0 ? void 0 : _a.padding
-	            },
-	            ratio: this._spec.ratio,
-	            mask: this._spec.maskShape,
-	            maskConfig: this._spec.imageMask,
-	            layoutConfig: this._spec.layoutConfig,
-	            createCanvas: vchart.vglobal.createCanvas.bind(vchart.vglobal),
-	            createImage,
-	            onUpdateMaskCanvas: ((inputImage, maskImage) => {
-	                var _a;
-	                if (inputImage && this._maskMark) {
-	                    this._maskMark
-	                        .getProduct()
-	                        .getChildren()
-	                        .forEach((element) => {
-	                        element.setAttribute('background', inputImage);
-	                    });
-	                }
-	                if (maskImage && ((_a = this._spec.layoutConfig) === null || _a === void 0 ? void 0 : _a.placement) === 'masked') {
-	                    this._rootMark.getProduct().setAttribute('background', maskImage);
-	                }
-	            }).bind(this)
-	        };
-	    }
-	    _buildMarkAttributeContext() {
-	        super._buildMarkAttributeContext();
-	        this._markAttributeContext.isFillingImage = this.isFillingImage.bind(this);
-	    }
-	    initAnimation() {
-	        [this._imageMark].forEach(mark => {
-	            var _a, _b;
-	            if (mark) {
-	                const appearPreset = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.animationAppear) === null || _b === void 0 ? void 0 : _b.preset;
-	                const params = {
-	                    center: () => {
-	                        const { width, height } = this._region.getLayoutRect();
-	                        return { x: width / 2, y: height / 2 };
-	                    },
-	                    height: () => {
-	                        const { height } = this._region.getLayoutRect();
-	                        return height;
-	                    }
-	                };
-	                mark.setAnimationConfig(vchart.animationConfig(vchart.Factory.getAnimationInKey('imageCloud')(params, appearPreset), vchart.userAnimationConfig("image", this._spec, this._markAttributeContext)));
-	            }
-	        });
-	    }
-	    getDimensionField() {
-	        var _a;
-	        return [(_a = this._nameField) !== null && _a !== void 0 ? _a : this._spec.urlField];
-	    }
-	    getMeasureField() {
-	        return [this._valueField];
-	    }
-	    getStatisticFields() {
-	        const fields = [];
-	        fields.push({ key: this._nameField, operations: ['values'] });
-	        fields.push({ key: this._valueField, operations: ['max', 'min'] });
-	        return fields;
-	    }
-	    getActiveMarks() {
-	        return [this._imageMark];
-	    }
-	    getMarkData(datum) {
-	        var _a;
-	        return (_a = datum === null || datum === void 0 ? void 0 : datum.datum) !== null && _a !== void 0 ? _a : datum;
-	    }
-	    getGroupFields() {
-	        return [];
-	    }
-	    dataToPosition(data) {
-	        return null;
-	    }
-	    dataToPositionX(data) {
-	        var _a;
-	        return (_a = this.dataToPosition(data)) === null || _a === void 0 ? void 0 : _a.x;
-	    }
-	    dataToPositionY(data) {
-	        var _a;
-	        return (_a = this.dataToPosition(data)) === null || _a === void 0 ? void 0 : _a.y;
-	    }
-	    valueToPosition(value1, value2) {
-	        return null;
-	    }
-	    getStackGroupFields() {
-	        return [];
-	    }
-	    getStackValueField() {
-	        return '';
-	    }
-	}
-	ImageCloudSeries.type = IMAGE_CLOUD_SERIES_TYPE;
-	ImageCloudSeries.mark = imageCloudSeriesMark;
-	const registerImageCloudSeries = () => {
-	    vchart.registerImageMark();
-	    registerImageCloudAnimation();
-	    vchart.Factory.registerSeries(ImageCloudSeries.type, ImageCloudSeries);
-	    vchart.Factory.registerGrammarTransform('imagecloud', {
-	        transform: transform
-	    });
-	};
-
-	class ImageCloudChart extends vchart.BaseChart {
-	    constructor() {
-	        super(...arguments);
-	        this.transformerConstructor = ImageCloudChart.transformerConstructor;
-	        this.type = IMAGE_CLOUD_CHART_TYPE;
-	        this.seriesType = IMAGE_CLOUD_SERIES_TYPE;
-	    }
-	}
-	ImageCloudChart.type = IMAGE_CLOUD_CHART_TYPE;
-	ImageCloudChart.seriesType = IMAGE_CLOUD_SERIES_TYPE;
-	ImageCloudChart.transformerConstructor = ImageCloudChartSpecTransformer;
-	const registerImageCloudChart = () => {
-	    registerImageCloudSeries();
-	    vchart.Factory.registerChart(ImageCloudChart.type, ImageCloudChart);
-	};
-
-	class CandlestickChartSpecTransformer extends vchart.CartesianChartSpecTransformer {
-	    _getDefaultSeriesSpec(spec) {
-	        const dataFields = [spec.openField, spec.highField, spec.lowField, spec.closeField];
-	        const seriesSpec = super._getDefaultSeriesSpec(spec, [
-	            'candlestick',
-	            'openField',
-	            'highField',
-	            'lowField',
-	            'closeField',
-	            'rising',
-	            'falling',
-	            'doji'
-	        ]);
-	        seriesSpec.yField = dataFields;
-	        return seriesSpec;
-	    }
-	    transformSpec(spec) {
-	        super.transformSpec(spec);
-	        if (!spec.axes) {
-	            spec.axes = [
-	                {
-	                    orient: 'bottom'
-	                },
-	                {
-	                    orient: 'left'
-	                }
-	            ];
-	        }
-	        vchart.setDefaultCrosshairForCartesianChart(spec);
-	    }
-	}
-
-	const CANDLESTICK_MARK_TYPE = 'candlestick';
-	class CandlestickMark extends vchart.GlyphMark {
-	    constructor() {
-	        super(...arguments);
-	        this.type = CandlestickMark.type;
+	          labels[index] && intersectPixelCount++;
+	        }), cell.intersectPixels = intersectPixelCount;
+	      });
 	    }
-	    setGlyphConfig(cfg) {
-	        super.setGlyphConfig(cfg);
-	        this._subMarks = {
-	            line: { type: 'line', defaultAttributes: { x: 0, y: 0 } },
-	            box: { type: 'rect' }
-	        };
-	        this._positionChannels = ['x', 'boxWidth', 'open', 'close', 'high', 'low'];
-	        this._channelEncoder = null;
-	        this._positionEncoder = (glyphAttrs, datum, g) => {
-	            const { x = g.attribute.x, boxWidth = g.attribute.boxWidth, open = g.attribute.open, close = g.attribute.close, low = g.attribute.low, high = g.attribute.high } = glyphAttrs;
-	            const attributes = {};
-	            attributes.line = {
-	                points: [
-	                    {
-	                        x: x,
-	                        y: low
-	                    },
-	                    {
-	                        x: x,
-	                        y: high
-	                    }
-	                ]
-	            };
-	            attributes.box = {
-	                x: x - boxWidth / 2,
-	                x1: x + boxWidth / 2,
-	                y: Math.min(open, close),
-	                y1: Math.max(open, close),
-	                drawStrokeWhenZeroWH: true
-	            };
-	            return attributes;
-	        };
+	    const imageCount = images.length,
+	      maxDistance = Math.sqrt(Math.pow(size[0], 2) + Math.pow(size[1], 2)),
+	      imageVisible = cell => {
+	        const {
+	          intersectPixels: intersectPixels
+	        } = cell;
+	        return "default" === placement ? intersectPixels > .5 * cellPixelCount : "edge" !== placement || intersectPixels > .1 * cellPixelCount && intersectPixels < cellPixelCount;
+	      };
+	    for (let i = 0; i < imageCount; i++) {
+	      const image = images[i],
+	        cell = cellInfo[i];
+	      cell && (image.x = cell.centerX - image.width / 2, image.y = cell.centerY - image.height / 2, image.visible = imageVisible(cell), image.cell = `${cell.row}_${cell.col}`, image.angle = Math.random() * (2 * maxAngle) - maxAngle, image.anchor = [image.x + image.width / 2, image.y + image.height / 2], image.zIndex = maxDistance - cell.distance, image.distance = cell.distance, image.frequency = 1, cell.image = image);
 	    }
-	    _getDefaultStyle() {
-	        const defaultStyle = Object.assign({}, super._getDefaultStyle());
-	        return defaultStyle;
+	    const key = Object.keys(images[0]).find(k => k.includes("VGRAMMAR"));
+	    if (imageCount < cellCount) for (let i = imageCount; i < cellCount; i++) {
+	      const image = images[i - imageCount],
+	        cell = cellInfo[i];
+	      if (cell) {
+	        const repeatImage = Object.assign({}, image);
+	        repeatImage.x = cell.centerX - repeatImage.width / 2, repeatImage.y = cell.centerY - repeatImage.height / 2, repeatImage.anchor = [repeatImage.x + repeatImage.width / 2, repeatImage.y + repeatImage.height / 2], repeatImage.angle = Math.random() * (2 * maxAngle) - maxAngle, repeatImage.frequency += 1, repeatImage[key] = `${repeatImage[key]}_${repeatImage.frequency}`, repeatImage.visible = imageVisible(cell), repeatImage.cell = `${cell.row}_${cell.col}`, repeatImage.distance = cell.distance, repeatImage.zIndex = maxDistance - cell.distance, cell.image = repeatImage, images.push(repeatImage);
+	      }
 	    }
+	    return images.filter(img => img.visible);
+	  }
 	}
-	CandlestickMark.type = CANDLESTICK_MARK_TYPE;
-	const registerCandlestickMark = () => {
-	    vchart.registerGlyphMark();
-	    registerLine();
-	    registerRect();
-	    vchart.Factory.registerGraphicComponent('line', (attrs) => createLine(attrs));
-	    vchart.Factory.registerGraphicComponent('rect', (attrs) => createRect(attrs));
-	    vchart.Factory.registerMark(CandlestickMark.type, CandlestickMark);
-	};
 
-	const scaleIn = () => {
-	    return (graphic) => {
-	        const finalAttribute = graphic.getFinalAttribute();
-	        const { x, y, open, high, low, close } = finalAttribute;
-	        const animateAttributes = { from: { x, y }, to: { x, y } };
-	        if (isValidNumber$1(open) && isValidNumber$1(close)) {
-	            if (open > close) {
-	                animateAttributes.from.open = low;
-	                animateAttributes.to.open = open;
-	                animateAttributes.from.close = low;
-	                animateAttributes.to.close = close;
-	                if (isValidNumber$1(high)) {
-	                    animateAttributes.from.high = low;
-	                    animateAttributes.to.high = high;
-	                }
-	            }
-	            else {
-	                animateAttributes.from.open = high;
-	                animateAttributes.to.open = open;
-	                animateAttributes.from.close = high;
-	                animateAttributes.to.close = close;
-	                if (isValidNumber$1(low)) {
-	                    animateAttributes.from.low = high;
-	                    animateAttributes.to.low = low;
-	                }
-	            }
-	        }
-	        return animateAttributes;
-	    };
-	};
-	const scaleOut = () => {
-	    return (graphic) => {
-	        const finalAttribute = graphic.getFinalAttribute();
-	        const { x, y, open, high, low, close } = finalAttribute;
-	        const animateAttributes = { from: { x, y }, to: { x, y } };
-	        if (isValidNumber$1(open) && isValidNumber$1(close)) {
-	            if (open > close) {
-	                animateAttributes.from.open = open;
-	                animateAttributes.to.open = low;
-	                animateAttributes.from.close = close;
-	                animateAttributes.to.close = low;
-	                if (isValidNumber$1(high)) {
-	                    animateAttributes.from.high = high;
-	                    animateAttributes.to.high = low;
-	                }
-	            }
-	            else {
-	                animateAttributes.from.open = open;
-	                animateAttributes.to.open = high;
-	                animateAttributes.from.close = close;
-	                animateAttributes.to.close = high;
-	                if (isValidNumber$1(low)) {
-	                    animateAttributes.from.low = low;
-	                    animateAttributes.to.low = high;
-	                }
-	            }
-	        }
-	        return animateAttributes;
-	    };
+	const transform = (options, upstreamData, parameters) => {
+	  var _a, _b;
+	  const size = isFunction$1(options.size) ? options.size() : options.size;
+	  if (options.size = size, !size || isNil$1(size[0]) || isNil$1(size[1]) || size[0] <= 0 || size[1] <= 0) {
+	    return Logger.getInstance().info("Wordcloud size dimensions must be greater than 0"), [];
+	  }
+	  if (options.size = [Math.ceil(size[0]), Math.ceil(size[1])], options.image || Logger.getInstance().error("Imagecloud: image source must be specified."), options.onBeforeLayout && options.onBeforeLayout(), !upstreamData || 0 === upstreamData.length) return [];
+	  let layoutConstructor;
+	  switch (null !== (_b = null === (_a = options.layoutConfig) || void 0 === _a ? void 0 : _a.layoutMode) && void 0 !== _b ? _b : "spiral") {
+	    case "grid":
+	      layoutConstructor = GridLayout;
+	      break;
+	    case "stack":
+	      layoutConstructor = StackLayout;
+	      break;
+	    default:
+	      layoutConstructor = SpiralLayout;
+	  }
+	  const layout = new layoutConstructor(options);
+	  return layout.layout(upstreamData), layout.unfinished() ? {
+	    progressive: layout
+	  } : layout.output();
 	};
-	class CandlestickScaleIn extends ACustomAnimate {
+
+	class AxialRotateAnimation extends ACustomAnimate {
 	    constructor(from, to, duration, easing, params) {
+	        var _a;
 	        super(from, to, duration, easing, params);
+	        this._rotations = (_a = params === null || params === void 0 ? void 0 : params.rotation) !== null && _a !== void 0 ? _a : 1;
 	    }
 	    onBind() {
-	        super.onBind();
-	        const finalAttribute = this.target.getFinalAttribute();
-	        if (finalAttribute) {
-	            this.target.setAttributes(finalAttribute);
+	        this._scaleX = this.target.attribute.scaleX;
+	        if (!isValidNumber$1(this._rotations)) {
+	            this.valid = false;
 	        }
-	        const { from, to } = this.computeAttribute();
-	        this.propKeys = Object.keys(to).filter(key => to[key] != null);
-	        this.animate.reSyncProps();
-	        this.from = from;
-	        this.to = to;
-	        this.target.setAttributes(this.from);
-	    }
-	    computeAttribute() {
-	        const attr = scaleIn()(this.target, this.params, this.params.options);
-	        return attr;
 	    }
 	    onUpdate(end, ratio, out) {
-	        const attribute = this.target.attribute;
-	        this.propKeys.forEach(key => {
-	            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
-	        });
-	        this.target.setAttributes(attribute);
-	    }
-	}
-	class CandlestickScaleOut extends ACustomAnimate {
-	    constructor(from, to, duration, easing, params) {
-	        super(from, to, duration, easing, params);
-	    }
-	    onBind() {
 	        var _a;
-	        if ((_a = this.params) === null || _a === void 0 ? void 0 : _a.diffAttrs) {
-	            this.target.setAttributes(this.params.diffAttrs);
+	        if (this.valid === false) {
+	            return;
 	        }
-	        const { from, to } = this.computeAttribute();
-	        this.propKeys = Object.keys(to).filter(key => to[key] != null);
-	        this.animate.reSyncProps();
-	        this.from = from;
-	        this.to = to;
-	        this.target.setAttributes(this.from);
-	    }
-	    computeAttribute() {
-	        const attr = scaleOut()(this.target, this.params, this.params.options);
-	        return attr;
+	        if (end) {
+	            out.scaleX = this._scaleX;
+	            return;
+	        }
+	        const currentAngle = this._rotations * 360 * ratio;
+	        const currentAngleInRadians = (currentAngle * Math.PI) / 180;
+	        const scaleX = Math.abs(Math.cos(currentAngleInRadians)) * ((_a = this._scaleX) !== null && _a !== void 0 ? _a : 1);
+	        this.target.attribute.scaleX = scaleX;
+	        this.target.addUpdatePositionTag();
+	        this.target.addUpdateShapeAndBoundsTag();
 	    }
-	    onUpdate(end, ratio, out) {
-	        const attribute = this.target.attribute;
-	        this.propKeys.forEach(key => {
-	            attribute[key] = this.from[key] + (this.to[key] - this.from[key]) * ratio;
-	        });
-	        this.target.setAttributes(attribute);
+	}
+	function imageCloudPresetAnimation(params, preset) {
+	    switch (preset) {
+	        case 'axialRotate':
+	            return [
+	                {
+	                    custom: AxialRotateAnimation,
+	                    customParameters: {
+	                        rotation: 1
+	                    },
+	                    duration: vchart.DEFAULT_ANIMATION_CONFIG.appear.duration
+	                },
+	                {
+	                    channel: {
+	                        y: {
+	                            from: (datum, element) => {
+	                                return params.height() + element.getFinalAttribute().y;
+	                            }
+	                        },
+	                        fillOpacity: {
+	                            from: 0,
+	                            to: 1
+	                        }
+	                    },
+	                    easing: 'sineInOut'
+	                }
+	            ];
+	        case 'growIn':
+	            return {
+	                channel: {
+	                    scaleX: {
+	                        from: 0,
+	                        to: 1
+	                    },
+	                    scaleY: {
+	                        from: 0,
+	                        to: 1
+	                    },
+	                    x: { from: () => params.center().x },
+	                    y: { from: () => params.center().y }
+	                },
+	                duration: vchart.DEFAULT_ANIMATION_CONFIG.appear.duration
+	            };
+	        case 'scaleIn':
+	            return { type: 'scaleIn', duration: vchart.DEFAULT_ANIMATION_CONFIG.appear.duration };
+	        case 'fadeIn':
+	        default:
+	            return { type: 'fadeIn', easing: 'linear', duration: vchart.DEFAULT_ANIMATION_CONFIG.appear.duration };
 	    }
 	}
-	const registerCandlestickScaleAnimation = () => {
-	    AnimateExecutor.registerBuiltInAnimate('candlestickScaleIn', CandlestickScaleIn);
-	    AnimateExecutor.registerBuiltInAnimate('candlestickScaleOut', CandlestickScaleOut);
+	const registerImageCloudAnimation = () => {
+	    vchart.Factory.registerAnimation('imageCloud', (params, preset) => ({
+	        appear: imageCloudPresetAnimation(params, preset),
+	        enter: imageCloudPresetAnimation(params, preset),
+	        exit: { type: 'fadeOut' },
+	        disappear: { type: 'fadeOut' }
+	    }));
 	};
 
-	const CANDLESTICK_CHART_TYPE = 'candlestick';
-	const CANDLESTICK_SERIES_TYPE = 'candlestick';
-	var CANDLESTICK_TOOLTIP_KEYS;
-	(function (CANDLESTICK_TOOLTIP_KEYS) {
-	    CANDLESTICK_TOOLTIP_KEYS["OPEN"] = "open";
-	    CANDLESTICK_TOOLTIP_KEYS["HIGH"] = "high";
-	    CANDLESTICK_TOOLTIP_KEYS["LOW"] = "low";
-	    CANDLESTICK_TOOLTIP_KEYS["CLOSE"] = "close";
-	    CANDLESTICK_TOOLTIP_KEYS["SERIES_FIELD"] = "seriesField";
-	})(CANDLESTICK_TOOLTIP_KEYS || (CANDLESTICK_TOOLTIP_KEYS = {}));
-	var CandlestickMarkNameEnum;
-	(function (CandlestickMarkNameEnum) {
-	    CandlestickMarkNameEnum["candlestick"] = "candlestick";
-	})(CandlestickMarkNameEnum || (CandlestickMarkNameEnum = {}));
-	const CandlestickSeriesMark = Object.assign(Object.assign({}, vchart.baseSeriesMark), { ["candlestick"]: { name: "candlestick", type: 'candlestick' } });
-
-	class CandlestickSeriesTooltipHelper extends vchart.BaseSeriesTooltipHelper {
+	class ImageCloudTooltipHelper extends vchart.BaseSeriesTooltipHelper {
 	    constructor() {
 	        super(...arguments);
-	        this.getContentKey = (contentType) => (datum) => {
-	            switch (contentType) {
-	                case CANDLESTICK_TOOLTIP_KEYS.OPEN: {
-	                    const openField = this.series.getOpenField();
-	                    return openField;
-	                }
-	                case CANDLESTICK_TOOLTIP_KEYS.HIGH: {
-	                    const highField = this.series.getHighField();
-	                    return highField;
-	                }
-	                case CANDLESTICK_TOOLTIP_KEYS.LOW: {
-	                    const lowField = this.series.getLowField();
-	                    return lowField;
-	                }
-	                case CANDLESTICK_TOOLTIP_KEYS.CLOSE: {
-	                    const closeField = this.series.getCloseField();
-	                    return closeField;
-	                }
-	                case CANDLESTICK_TOOLTIP_KEYS.SERIES_FIELD: {
-	                    const seriesField = this.series.getSeriesField();
-	                    return seriesField;
-	                }
-	            }
-	            return null;
+	        this.markTooltipKeyCallback = (datum) => {
+	            var _a, _b;
+	            return (_b = (_a = this.series) === null || _a === void 0 ? void 0 : _a.getMarkData(datum)) === null || _b === void 0 ? void 0 : _b[this.series.getDimensionField()[0]];
 	        };
-	        this.getContentValue = (contentType) => (datum) => {
-	            switch (contentType) {
-	                case CANDLESTICK_TOOLTIP_KEYS.OPEN: {
-	                    const openField = this.series.getOpenField();
-	                    return datum[openField];
-	                }
-	                case CANDLESTICK_TOOLTIP_KEYS.HIGH: {
-	                    const highField = this.series.getHighField();
-	                    return datum[highField];
-	                }
-	                case CANDLESTICK_TOOLTIP_KEYS.LOW: {
-	                    const lowField = this.series.getLowField();
-	                    return datum[lowField];
-	                }
-	                case CANDLESTICK_TOOLTIP_KEYS.CLOSE: {
-	                    const closeField = this.series.getCloseField();
-	                    return datum[closeField];
-	                }
-	                case CANDLESTICK_TOOLTIP_KEYS.SERIES_FIELD: {
-	                    const seriesField = this.series.getSeriesField();
-	                    return datum[seriesField];
-	                }
+	        this.markTooltipValueCallback = (datum) => {
+	            var _a, _b;
+	            const { measureFields } = this._seriesCacheInfo;
+	            const data = (_a = this.series) === null || _a === void 0 ? void 0 : _a.getMarkData(datum);
+	            if (measureFields[0] && data) {
+	                return (_b = data[measureFields[0]]) !== null && _b !== void 0 ? _b : datum.value;
 	            }
-	            return null;
+	            return undefined;
 	        };
-	        this.shapeColorCallback = (datum) => {
-	            return this.series.getMarkInName('candlestick').getAttribute('stroke', datum);
+	        this.dimensionTooltipTitleCallback = (datum) => {
+	            var _a;
+	            const { dimensionFields } = this._seriesCacheInfo;
+	            const data = (_a = this.series) === null || _a === void 0 ? void 0 : _a.getMarkData(datum);
+	            if (dimensionFields[0] && data) {
+	                return data[dimensionFields[0]];
+	            }
+	            return undefined;
 	        };
 	    }
-	    getDefaultContentList(activeType) {
-	        return [
-	            {
-	                key: this.getContentKey(CANDLESTICK_TOOLTIP_KEYS.OPEN),
-	                value: this.getContentValue(CANDLESTICK_TOOLTIP_KEYS.OPEN)
-	            },
-	            {
-	                key: this.getContentKey(CANDLESTICK_TOOLTIP_KEYS.HIGH),
-	                value: this.getContentValue(CANDLESTICK_TOOLTIP_KEYS.HIGH)
-	            },
-	            {
-	                key: this.getContentKey(CANDLESTICK_TOOLTIP_KEYS.LOW),
-	                value: this.getContentValue(CANDLESTICK_TOOLTIP_KEYS.LOW)
-	            },
-	            {
-	                key: this.getContentKey(CANDLESTICK_TOOLTIP_KEYS.CLOSE),
-	                value: this.getContentValue(CANDLESTICK_TOOLTIP_KEYS.CLOSE)
-	            },
-	            {
-	                key: this.getContentKey(CANDLESTICK_TOOLTIP_KEYS.SERIES_FIELD),
-	                value: this.getContentValue(CANDLESTICK_TOOLTIP_KEYS.SERIES_FIELD)
-	            }
-	        ];
+	    get defaultShapeType() {
+	        return 'square';
 	    }
 	}
 
-	const getCandlestickTheme = () => {
-	    const res = {
-	        rising: {
-	            style: {
-	                boxFill: '#FF0000',
-	                stroke: '#FF0000'
-	            }
-	        },
-	        falling: {
-	            style: {
-	                boxFill: '#00AA00',
-	                stroke: '#00AA00'
-	            }
-	        },
-	        doji: {
-	            style: {
-	                boxFill: '#000000',
-	                stroke: '#000000'
-	            }
-	        },
-	        candlestick: {
-	            style: {
-	                lineWidth: 1
-	            }
-	        }
-	    };
-	    return res;
-	};
-	const candlestick = getCandlestickTheme();
-
-	class CandlestickSeries extends vchart.CartesianSeries {
+	class ImageCloudSeries extends vchart.BaseSeries {
 	    constructor() {
 	        super(...arguments);
-	        this.type = CANDLESTICK_SERIES_TYPE;
-	        this._mergedStyles = {
-	            rising: {},
-	            falling: {},
-	            doji: {}
-	        };
+	        this.type = IMAGE_CLOUD_SERIES_TYPE;
 	    }
-	    getOpenField() {
-	        return this._openField;
+	    setValueField(field) {
+	        if (isValid$1(field)) {
+	            this._valueField = field;
+	        }
 	    }
-	    getHighField() {
-	        return this._highField;
+	    setAttrFromSpec() {
+	        super.setAttrFromSpec();
+	        this._nameField = this._spec.nameField;
+	        this._valueField = this._spec.valueField;
+	        this._urlField = this._spec.urlField;
 	    }
-	    getLowField() {
-	        return this._lowField;
+	    initMark() {
+	        var _a;
+	        if ((_a = this._spec.imageMask) === null || _a === void 0 ? void 0 : _a.visible) {
+	            this._maskMark = this._createMark(imageCloudSeriesMark.imageMask, {
+	                dataView: false,
+	                skipBeforeLayouted: true
+	            });
+	        }
+	        this._imageMark = this._createMark(imageCloudSeriesMark.image, {
+	            key: datum => `${datum[vchart.DEFAULT_DATA_KEY]}-${datum.frequency}`,
+	            isSeriesMark: true,
+	            skipBeforeLayouted: true
+	        });
 	    }
-	    getCloseField() {
-	        return this._closeField;
+	    initMarkStyle() {
+	        this._initImageMarkStyle();
+	        this._initMaskMarkStyle();
+	    }
+	    _initImageMarkStyle() {
+	        var _a, _b;
+	        if (!this._imageMark) {
+	            return;
+	        }
+	        this._imageMark.setTransform([
+	            Object.assign({ type: 'imagecloud' }, this._imageCloudTransformOption())
+	        ]);
+	        this.setMarkStyle(this._imageMark, {
+	            x: (datum) => datum.x,
+	            y: (datum) => datum.y,
+	            width: (datum) => datum.width,
+	            height: (datum) => datum.height,
+	            visible: (datum) => datum.visible,
+	            angle: (datum) => datum.angle,
+	            clipConfig: (datum) => datum.clipConfig,
+	            image: (datum) => datum[this._urlField],
+	            scaleCenter: ['50%', '50%']
+	        }, 'normal', vchart.AttributeLevel.Series);
+	        const isMasked = ((_a = this._spec.layoutConfig) === null || _a === void 0 ? void 0 : _a.placement) === 'masked';
+	        if (isMasked) {
+	            this.setMarkStyle(this._imageMark, {
+	                globalCompositeOperation: 'source-atop'
+	            }, 'normal', vchart.AttributeLevel.Series);
+	            this.setMarkStyle(this._rootMark, {
+	                width: () => this._region.getLayoutRect().width,
+	                height: () => this._region.getLayoutRect().height,
+	                globalCompositeOperation: 'destination-in',
+	                clip: true,
+	                drawMode: 1
+	            }, 'normal', vchart.AttributeLevel.Series);
+	        }
+	        if (((_b = this._spec.layoutConfig) === null || _b === void 0 ? void 0 : _b.layoutMode) === 'stack') {
+	            this.setMarkStyle(this._imageMark, {
+	                stroke: 'white',
+	                lineWidth: 2,
+	                shadowBlur: 6,
+	                shadowColor: 'grey'
+	            }, 'normal', vchart.AttributeLevel.Series);
+	        }
+	    }
+	    isFillingImage(datum) {
+	        return datum._frequency > 1;
+	    }
+	    _initMaskMarkStyle() {
+	        if (!this._maskMark) {
+	            return;
+	        }
+	        this._maskMark.setMarkConfig({ interactive: false });
+	        this.setMarkStyle(this._maskMark, {
+	            width: () => {
+	                return this._region.getLayoutRect().width;
+	            },
+	            height: () => {
+	                return this._region.getLayoutRect().height;
+	            }
+	        }, 'normal', vchart.AttributeLevel.Series);
 	    }
-	    getBoxFill() {
-	        return this._boxFill;
+	    initTooltip() {
+	        this._tooltipHelper = new ImageCloudTooltipHelper(this);
+	        this._imageMark && this._tooltipHelper.activeTriggerSet.mark.add(this._imageMark);
 	    }
-	    getStrokeColor() {
-	        return this._strokeColor;
+	    _imageCloudTransformOption() {
+	        var _a;
+	        return {
+	            size: () => {
+	                const { width, height } = this._region.getLayoutRect();
+	                return [width, height];
+	            },
+	            image: { field: this._urlField },
+	            weight: { field: this._valueField },
+	            imageConfig: {
+	                imageSize: this._spec.imageSize,
+	                imageSizeRange: this._spec.imageSizeRange,
+	                padding: (_a = this._spec.image) === null || _a === void 0 ? void 0 : _a.padding
+	            },
+	            ratio: this._spec.ratio,
+	            mask: this._spec.maskShape,
+	            maskConfig: this._spec.imageMask,
+	            layoutConfig: this._spec.layoutConfig,
+	            createCanvas: vchart.vglobal.createCanvas.bind(vchart.vglobal),
+	            createImage,
+	            onUpdateMaskCanvas: ((inputImage, maskImage) => {
+	                var _a;
+	                if (inputImage && this._maskMark) {
+	                    this._maskMark
+	                        .getProduct()
+	                        .getChildren()
+	                        .forEach((element) => {
+	                        element.setAttribute('background', inputImage);
+	                    });
+	                }
+	                if (maskImage && ((_a = this._spec.layoutConfig) === null || _a === void 0 ? void 0 : _a.placement) === 'masked') {
+	                    this._rootMark.getProduct().setAttribute('background', maskImage);
+	                }
+	            }).bind(this),
+	            onLayoutFinished: () => {
+	                var _a, _b;
+	                return (_b = (_a = this._option.globalInstance
+	                    .getChart()
+	                    .getOption()
+	                    .performanceHook) === null || _a === void 0 ? void 0 : _a.afterWordcloudShapeDraw) === null || _b === void 0 ? void 0 : _b.call(_a, this._option.globalInstance);
+	            }
+	        };
 	    }
-	    setAttrFromSpec() {
-	        var _a, _b, _c, _d, _e, _f, _g, _h;
-	        super.setAttrFromSpec();
-	        const spec = this._spec;
-	        const CandlestickStyle = (_b = (_a = spec.candlestick) === null || _a === void 0 ? void 0 : _a.style) !== null && _b !== void 0 ? _b : {};
-	        this._openField = spec.openField;
-	        this._highField = spec.highField;
-	        this._lowField = spec.lowField;
-	        this._closeField = spec.closeField;
-	        this._boxWidth = CandlestickStyle.boxWidth;
-	        this._boxFill = CandlestickStyle.boxFill;
-	        this._strokeColor = CandlestickStyle.strokeColor;
-	        this._buildMergedStyles(CandlestickStyle, (_d = (_c = spec.rising) === null || _c === void 0 ? void 0 : _c.style) !== null && _d !== void 0 ? _d : {}, (_f = (_e = spec.falling) === null || _e === void 0 ? void 0 : _e.style) !== null && _f !== void 0 ? _f : {}, (_h = (_g = spec.doji) === null || _g === void 0 ? void 0 : _g.style) !== null && _h !== void 0 ? _h : {});
+	    _buildMarkAttributeContext() {
+	        super._buildMarkAttributeContext();
+	        this._markAttributeContext.isFillingImage = this.isFillingImage.bind(this);
 	    }
-	    initMark() {
-	        this._candlestickMark = this._createMark(CandlestickSeries.mark.candlestick, {
-	            groupKey: this._seriesField,
-	            isSeriesMark: true
+	    initAnimation() {
+	        [this._imageMark].forEach(mark => {
+	            var _a, _b;
+	            if (mark) {
+	                const appearPreset = (_b = (_a = this._spec) === null || _a === void 0 ? void 0 : _a.animationAppear) === null || _b === void 0 ? void 0 : _b.preset;
+	                const params = {
+	                    center: () => {
+	                        const { width, height } = this._region.getLayoutRect();
+	                        return { x: width / 2, y: height / 2 };
+	                    },
+	                    height: () => {
+	                        const { height } = this._region.getLayoutRect();
+	                        return height;
+	                    }
+	                };
+	                mark.setAnimationConfig(vchart.animationConfig(vchart.Factory.getAnimationInKey('imageCloud')(params, appearPreset), vchart.userAnimationConfig("image", this._spec, this._markAttributeContext)));
+	            }
 	        });
 	    }
-	    initMarkStyle() {
+	    getDimensionField() {
 	        var _a;
-	        const candlestickMark = this._candlestickMark;
-	        if (candlestickMark) {
-	            const CandlestickStyles = {
-	                fill: (datum) => {
-	                    const boxFill = this.mergeStyle(datum).boxFill;
-	                    return boxFill;
-	                },
-	                stroke: (datum) => {
-	                    const strokeColor = this.mergeStyle(datum).stroke;
-	                    return strokeColor;
-	                },
-	                lineWidth: (datum) => {
-	                    const lineWidth = this.mergeStyle(datum).lineWidth;
-	                    return lineWidth;
-	                },
-	                boxWidth: (_a = this._boxWidth) !== null && _a !== void 0 ? _a : this._getMarkWidth.bind(this),
-	                x: this.dataToPositionX.bind(this)
-	            };
-	            candlestickMark.setGlyphConfig({});
-	            this.setMarkStyle(candlestickMark, CandlestickStyles, vchart.STATE_VALUE_ENUM.STATE_NORMAL, vchart.AttributeLevel.Series);
-	        }
+	        return [(_a = this._nameField) !== null && _a !== void 0 ? _a : this._spec.urlField];
 	    }
-	    initCandlestickMarkStyle() {
-	        var _a;
-	        const candlestickMark = this._candlestickMark;
-	        const axisHelper = this._yAxisHelper;
-	        if (candlestickMark && axisHelper) {
-	            const { dataToPosition } = axisHelper;
-	            const scale = (_a = axisHelper === null || axisHelper === void 0 ? void 0 : axisHelper.getScale) === null || _a === void 0 ? void 0 : _a.call(axisHelper, 0);
-	            this.setMarkStyle(candlestickMark, {
-	                open: (datum) => vchart.valueInScaleRange(dataToPosition(this.getDatumPositionValues(datum, this._openField), {
-	                    bandPosition: this._bandPosition
-	                }), scale),
-	                high: (datum) => vchart.valueInScaleRange(dataToPosition(this.getDatumPositionValues(datum, this._highField), {
-	                    bandPosition: this._bandPosition
-	                }), scale),
-	                low: (datum) => vchart.valueInScaleRange(dataToPosition(this.getDatumPositionValues(datum, this._lowField), {
-	                    bandPosition: this._bandPosition
-	                }), scale),
-	                close: (datum) => vchart.valueInScaleRange(dataToPosition(this.getDatumPositionValues(datum, this._closeField), {
-	                    bandPosition: this._bandPosition
-	                }), scale)
-	            }, vchart.STATE_VALUE_ENUM.STATE_NORMAL, vchart.AttributeLevel.Series);
-	        }
+	    getMeasureField() {
+	        return [this._valueField];
 	    }
-	    init(option) {
-	        super.init(option);
-	        this.initCandlestickMarkStyle();
+	    getStatisticFields() {
+	        const fields = [];
+	        fields.push({ key: this._nameField, operations: ['values'] });
+	        fields.push({ key: this._valueField, operations: ['max', 'min'] });
+	        return fields;
 	    }
-	    _initAnimationSpec(config = {}) {
-	        const newConfig = merge({}, config);
-	        ['appear', 'enter', 'update', 'exit', 'disappear'].forEach(state => {
-	            if (newConfig[state] && newConfig[state].type === 'scaleIn') {
-	                newConfig[state].type = 'candlestickScaleIn';
-	            }
-	            else if (newConfig[state] && newConfig[state].type === 'scaleOut') {
-	                newConfig[state].type = 'candlestickScaleOut';
-	            }
-	        });
-	        return newConfig;
+	    getActiveMarks() {
+	        return [this._imageMark];
 	    }
-	    initAnimation() {
+	    getMarkData(datum) {
 	        var _a;
-	        const animationParams = vchart.getGroupAnimationParams(this);
-	        if (this._candlestickMark) {
-	            const newDefaultConfig = this._initAnimationSpec((_a = vchart.Factory.getAnimationInKey('scaleInOut')) === null || _a === void 0 ? void 0 : _a());
-	            const newConfig = this._initAnimationSpec(vchart.userAnimationConfig(CANDLESTICK_SERIES_TYPE, this._spec, this._markAttributeContext));
-	            this._candlestickMark.setAnimationConfig(vchart.animationConfig(newDefaultConfig, newConfig, animationParams));
-	        }
+	        return (_a = datum === null || datum === void 0 ? void 0 : datum.datum) !== null && _a !== void 0 ? _a : datum;
 	    }
-	    initTooltip() {
-	        this._tooltipHelper = new CandlestickSeriesTooltipHelper(this);
-	        this._candlestickMark && this._tooltipHelper.activeTriggerSet.mark.add(this._candlestickMark);
+	    getGroupFields() {
+	        return [];
 	    }
-	    _buildMergedStyles(baseStyle, risingStyle, fallingStyle, dojiStyle) {
-	        this._mergedStyles.rising = merge({}, baseStyle, risingStyle);
-	        this._mergedStyles.falling = merge({}, baseStyle, fallingStyle);
-	        this._mergedStyles.doji = merge({}, baseStyle, dojiStyle);
+	    dataToPosition(data) {
+	        return null;
 	    }
-	    mergeStyle(datum) {
-	        const open = this.getDatumPositionValues(datum, this._openField)[0];
-	        const close = this.getDatumPositionValues(datum, this._closeField)[0];
-	        if (open < close) {
-	            return this._mergedStyles.rising;
-	        }
-	        else if (open > close) {
-	            return this._mergedStyles.falling;
-	        }
-	        else {
-	            return this._mergedStyles.doji;
-	        }
+	    dataToPositionX(data) {
+	        var _a;
+	        return (_a = this.dataToPosition(data)) === null || _a === void 0 ? void 0 : _a.x;
 	    }
-	    _getMarkWidth() {
-	        if (this._autoBoxWidth) {
-	            return this._autoBoxWidth;
-	        }
-	        const bandAxisHelper = this._xAxisHelper;
-	        const xField = this._fieldX;
-	        const innerBandWidth = bandAxisHelper.getBandwidth(xField.length - 1);
-	        const autoBoxWidth = innerBandWidth / xField.length;
-	        this._autoBoxWidth = autoBoxWidth;
-	        return this._autoBoxWidth;
+	    dataToPositionY(data) {
+	        var _a;
+	        return (_a = this.dataToPosition(data)) === null || _a === void 0 ? void 0 : _a.y;
 	    }
-	    onLayoutEnd() {
-	        super.onLayoutEnd();
-	        this._autoBoxWidth = null;
+	    valueToPosition(value1, value2) {
+	        return null;
 	    }
-	    getActiveMarks() {
-	        return [this._candlestickMark];
+	    getStackGroupFields() {
+	        return [];
+	    }
+	    getStackValueField() {
+	        return '';
 	    }
 	}
-	CandlestickSeries.type = CANDLESTICK_SERIES_TYPE;
-	CandlestickSeries.builtInTheme = { candlestick };
-	CandlestickSeries.mark = CandlestickSeriesMark;
-	const registerCandlestickSeries = () => {
-	    registerCandlestickMark();
-	    vchart.registerSymbolMark();
-	    vchart.registerScaleInOutAnimation();
-	    vchart.registerCartesianBandAxis();
-	    vchart.registerCartesianLinearAxis();
-	    registerCandlestickScaleAnimation();
-	    vchart.Factory.registerSeries(CandlestickSeries.type, CandlestickSeries);
+	ImageCloudSeries.type = IMAGE_CLOUD_SERIES_TYPE;
+	ImageCloudSeries.mark = imageCloudSeriesMark;
+	const registerImageCloudSeries = () => {
+	    vchart.registerImageMark();
+	    registerImageCloudAnimation();
+	    vchart.Factory.registerSeries(ImageCloudSeries.type, ImageCloudSeries);
+	    vchart.Factory.registerGrammarTransform('imagecloud', {
+	        transform: transform
+	    });
 	};
 
-	class CandlestickChart extends vchart.BaseChart {
-	    _setModelOption() {
-	        this._modelOption.getDimensionInfo = vchart.getCartesianDimensionInfo;
-	        this._modelOption.getDimensionInfoByValue = vchart.getDimensionInfoByValue;
-	        this._modelOption.getRectByDimensionData = vchart.getCartesianCrosshairRect;
+	class ImageCloudChart extends vchart.BaseChart {
+	    constructor() {
+	        super(...arguments);
+	        this.transformerConstructor = ImageCloudChart.transformerConstructor;
+	        this.type = IMAGE_CLOUD_CHART_TYPE;
+	        this.seriesType = IMAGE_CLOUD_SERIES_TYPE;
 	    }
 	}
-	CandlestickChart.type = CANDLESTICK_CHART_TYPE;
-	CandlestickChart.seriesType = CANDLESTICK_SERIES_TYPE;
-	CandlestickChart.transformerConstructor = CandlestickChartSpecTransformer;
-	const registerCandlestickChart = () => {
-	    vchart.registerDimensionTooltipProcessor();
-	    vchart.registerMarkTooltipProcessor();
-	    vchart.registerDimensionEvents();
-	    vchart.registerDimensionHover();
-	    registerCandlestickSeries();
-	    vchart.Factory.registerChart(CandlestickChart.type, CandlestickChart);
+	ImageCloudChart.type = IMAGE_CLOUD_CHART_TYPE;
+	ImageCloudChart.seriesType = IMAGE_CLOUD_SERIES_TYPE;
+	ImageCloudChart.transformerConstructor = ImageCloudChartSpecTransformer;
+	const registerImageCloudChart = () => {
+	    registerImageCloudSeries();
+	    vchart.Factory.registerChart(ImageCloudChart.type, ImageCloudChart);
 	};
 
 	const GROUP_ATTRIBUTES = ["x", "y", "dx", "dy", "scaleX", "scaleY", "angle", "anchor", "postMatrix", "visible", "clip", "pickable", "childrenPickable", "zIndex", "cursor"];
@@ -25576,8 +25971,12 @@
 	exports.BarLinkComponent = BarLinkComponent;
 	exports.CandlestickChart = CandlestickChart;
 	exports.CandlestickChartSpecTransformer = CandlestickChartSpecTransformer;
+	exports.CandlestickSeries = CandlestickSeries;
+	exports.CombinationCandlestickChart = CombinationCandlestickChart;
+	exports.CombinationCandlestickChart_TYPE = CombinationCandlestickChart_TYPE;
 	exports.ConversionFunnelChart = ConversionFunnelChart;
 	exports.ConversionFunnelSeries = ConversionFunnelSeries;
+	exports.DEFAULT_STROKE_COLOR = DEFAULT_STROKE_COLOR;
 	exports.DefaultBandWidth = DefaultBandWidth;
 	exports.Funnel3dChart = Funnel3dChart;
 	exports.Funnel3dSeries = Funnel3dSeries;
@@ -25621,6 +26020,8 @@
 	exports.registerBar3dSeries = registerBar3dSeries;
 	exports.registerBarLink = registerBarLink;
 	exports.registerCandlestickChart = registerCandlestickChart;
+	exports.registerCandlestickSeries = registerCandlestickSeries;
+	exports.registerCombinationCandlestickChart = registerCombinationCandlestickChart;
 	exports.registerConversionFunnelChart = registerConversionFunnelChart;
 	exports.registerFunnel3dChart = registerFunnel3dChart;
 	exports.registerFunnel3dSeries = registerFunnel3dSeries;
@@ -25646,6 +26047,7 @@
 	exports.registerWordCloudShape3dChart = registerWordCloudShape3dChart;
 	exports.registerWordCloudShape3dSeries = registerWordCloudShape3dSeries;
 	exports.svgSourceMap = svgSourceMap;
+	exports.transformCandlestickSeriesSpec = transformCandlestickSeriesSpec;
 	exports.unregisterSVGSource = unregisterSVGSource;
 
 }));