@visactor/vchart 1.1.2 → 1.2.0-beta.2

package/build/index.js

@@ -7937,8 +7937,11 @@
 	    return Logger.getInstance().warn(`[VChart warn]: ${msg}`);
 	};
 	const error$1 = (msg, detail, err) => {
-	    const errIns = new Error(msg);
-	    return Logger.getInstance().error(`[VChart error]: ${errIns}`, detail);
+	    if (isFunction(config.errorHandler)) {
+	        config.errorHandler.call(null, msg, detail);
+	        return;
+	    }
+	    throw new Error(msg);
 	};
 	const config = {
 	    silent: false,
@@ -8341,7 +8344,8 @@
 	function min$2(data, field) {
 	    const initialData = field ? +data[0][field] : +data[0];
 	    if (!isValidNumber(initialData)) {
-	        throw new Error('invalid data');
+	        warn('invalid data');
+	        return 0;
 	    }
 	    const min = data.reduce((pre, _cur) => {
 	        const cur = field ? +_cur[field] : +_cur;
@@ -8355,7 +8359,8 @@
 	function max$2(data, field) {
 	    const initialData = field ? +data[0][field] : +data[0];
 	    if (!isValidNumber(initialData)) {
-	        throw new Error('invalid data');
+	        warn('invalid data');
+	        return 0;
 	    }
 	    const max = data.reduce((pre, _cur) => {
 	        const cur = field ? +_cur[field] : +_cur;
@@ -9730,6 +9735,23 @@
 	    const keys = Object.keys(obj);
 	    return obj instanceof DataView || dataViewKeys.every(key => keys.includes(key));
 	}
+	function convertBackgroundSpec(bg) {
+	    if (!bg) {
+	        return null;
+	    }
+	    if (typeof bg === 'string') {
+	        return {
+	            fill: bg,
+	            fillOpacity: 1
+	        };
+	    }
+	    if (typeof bg !== 'object') {
+	        return null;
+	    }
+	    const { x, y, width, height, x1, y1, image, ...rest } = bg;
+	    rest.background = image;
+	    return rest;
+	}
 
 	var check = function (it) {
 	  return it && it.Math == Math && it;
@@ -22298,18 +22320,18 @@
 	  bind(DefaultGlobal).toSelf().inSingletonScope(), bind(Global).toService(DefaultGlobal), bind(DefaultWindow).to(DefaultWindow), bind(Window).toService(DefaultWindow), bind(DefaultGraphicUtil).toSelf().inSingletonScope(), bind(GraphicUtil).toService(DefaultGraphicUtil), bind(DefaultTransformUtil).toSelf().inSingletonScope(), bind(TransformUtil).toService(DefaultTransformUtil), bind(DefaultLayerService).toSelf().inSingletonScope(), bind(LayerService).toService(DefaultLayerService);
 	});
 
-	function runFill(fill) {
-	  return !!fill;
+	function runFill(fill, background) {
+	  return !(!fill && !background);
 	}
 	function runStroke(stroke, lineWidth) {
 	  let s;
 	  return s = isArray$3(stroke) ? stroke.some(item => item || void 0 === item) : !!stroke, s && lineWidth > 0;
 	}
-	function fillVisible(opacity, fillOpacity) {
-	  return opacity * fillOpacity > 0;
+	function fillVisible(opacity, fillOpacity, fill) {
+	  return fill && opacity * fillOpacity > 0;
 	}
-	function rectFillVisible(opacity, fillOpacity, width, height) {
-	  return opacity * fillOpacity > 0 && width > 0 && height > 0;
+	function rectFillVisible(opacity, fillOpacity, width, height, fill) {
+	  return fill && opacity * fillOpacity > 0 && width > 0 && height > 0;
 	}
 	function strokeVisible(opacity, strokeOpacity) {
 	  return opacity * strokeOpacity > 0;
@@ -22329,7 +22351,7 @@
 	      strokeOpacity = themeAttributes.strokeOpacity,
 	      visible = themeAttributes.visible
 	    } = graphic.attribute,
-	    fVisible = fillVisible(opacity, fillOpacity),
+	    fVisible = fillVisible(opacity, fillOpacity, fill),
 	    sVisible = strokeVisible(opacity, strokeOpacity),
 	    doFill = runFill(fill),
 	    doStroke = runStroke(stroke, lineWidth);
@@ -22691,12 +22713,12 @@
 	        x: originX = arcAttribute.x,
 	        y: originY = arcAttribute.y
 	      } = arc.attribute,
-	      fVisible = fillVisible(opacity, fillOpacity),
+	      fVisible = fillVisible(opacity, fillOpacity, fill),
 	      sVisible = strokeVisible(opacity, strokeOpacity),
-	      doFill = runFill(fill),
+	      doFill = runFill(fill, background),
 	      doStroke = runStroke(stroke, lineWidth);
 	    if (!arc.valid || !visible) return;
-	    if (!(doFill || doStroke || background)) return;
+	    if (!doFill && !doStroke) return;
 	    if (!(fVisible || sVisible || fillCb || strokeCb || background)) return;
 	    const {
 	      outerRadius = arcAttribute.outerRadius,
@@ -22709,7 +22731,7 @@
 	      isFullStroke: isFullStroke,
 	      stroke: arrayStroke
 	    } = parseStroke(stroke);
-	    if (doFill || isFullStroke || background) {
+	    if (doFill || isFullStroke) {
 	      if (context.beginPath(), drawArcPath$1(arc, context, x, y, outerRadius, innerRadius), !this._arcBeforeRenderContribitions) {
 	        this._arcBeforeRenderContribitions = [], this._arcAfterRenderContribitions = [];
 	        const contributions = this.arcRenderContribitions.getContributions() || [];
@@ -22833,11 +22855,11 @@
 	        x: originX = circleAttribute.x,
 	        y: originY = circleAttribute.y
 	      } = circle.attribute,
-	      fVisible = fillVisible(opacity, fillOpacity),
+	      fVisible = fillVisible(opacity, fillOpacity, fill),
 	      sVisible = strokeVisible(opacity, strokeOpacity),
-	      doFill = runFill(fill),
+	      doFill = runFill(fill, background),
 	      doStroke = runStroke(stroke, lineWidth);
-	    circle.valid && visible && (doFill || doStroke || background) && (fVisible || sVisible || fillCb || strokeCb || background) && (context.beginPath(), context.arc(x, y, radius, startAngle, endAngle), context.closePath(), this._circleRenderContribitions || (this._circleRenderContribitions = this.circleRenderContribitions.getContributions() || [], this._circleRenderContribitions.sort((a, b) => b.order - a.order)), this._circleRenderContribitions.forEach(c => {
+	    circle.valid && visible && (doFill || doStroke) && (fVisible || sVisible || fillCb || strokeCb || background) && (context.beginPath(), context.arc(x, y, radius, startAngle, endAngle), context.closePath(), this._circleRenderContribitions || (this._circleRenderContribitions = this.circleRenderContribitions.getContributions() || [], this._circleRenderContribitions.sort((a, b) => b.order - a.order)), this._circleRenderContribitions.forEach(c => {
 	      c.time === BaseRenderContributionTime.beforeFillStroke && c.drawShape(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb);
 	    }), context.setShadowStyle && context.setShadowStyle(circle, circle.attribute, circleAttribute), doFill && (fillCb ? fillCb(context, circle.attribute, circleAttribute) : fVisible && (context.setCommonStyle(circle, circle.attribute, originX - x, originY - y, circleAttribute), context.fill())), doStroke && (strokeCb ? strokeCb(context, circle.attribute, circleAttribute) : sVisible && (context.setStrokeStyle(circle, circle.attribute, originX - x, originY - y, circleAttribute), context.stroke())), this._circleRenderContribitions.forEach(c => {
 	      c.time === BaseRenderContributionTime.afterFillStroke && c.drawShape(circle, context, x, y, doFill, doStroke, fVisible, sVisible, circleAttribute, drawContext, fillCb, strokeCb);
@@ -25802,10 +25824,14 @@
 	    return aabbBounds.set(-outerRadius, -outerRadius, outerRadius, outerRadius), aabbBounds;
 	  }
 	  updateArcAABBBoundsAccurate(attribute, arcTheme, aabbBounds, graphic) {
-	    const {
+	    let {
 	      outerRadius = arcTheme.outerRadius,
 	      innerRadius = arcTheme.innerRadius
 	    } = attribute;
+	    if (outerRadius < innerRadius) {
+	      const temp = outerRadius;
+	      outerRadius = innerRadius, innerRadius = temp;
+	    }
 	    let {
 	      endAngle = arcTheme.endAngle,
 	      startAngle = arcTheme.startAngle
@@ -25928,7 +25954,7 @@
 	    return isArray$3(text) ? !text.every(t => null == t || "" === t) : null != text && "" !== text;
 	  }
 	  updateMultilineAABBBounds(text) {
-	    var _a;
+	    var _a, _b, _c;
 	    const textTheme = getTheme(this).text,
 	      {
 	        fontFamily = textTheme.fontFamily,
@@ -25967,6 +25993,10 @@
 	          break;
 	        }
 	        const clip = layoutObj.textMeasure.clipText(str, layoutObj.textOptions, maxLineWidth);
+	        if ("" !== str && "" === clip.str) if (ellipsis) {
+	          const clipEllipsis = layoutObj.textMeasure.clipTextWithSuffix(str, layoutObj.textOptions, maxLineWidth, ellipsis);
+	          clip.str = null !== (_b = clipEllipsis.str) && void 0 !== _b ? _b : "", clip.width = null !== (_c = clipEllipsis.width) && void 0 !== _c ? _c : 0;
+	        } else clip.str = "", clip.width = 0;
 	        if (linesLayout.push({
 	          str: clip.str,
 	          width: clip.width
@@ -26192,6 +26222,7 @@
 	BaseRender = __decorate$1v([injectable()], BaseRender);
 
 	function drawSegments(path, segPath, percent, clipRangeByDimension, params) {
+	  if (!segPath) return;
 	  const {
 	    offsetX = 0,
 	    offsetY = 0,
@@ -26294,6 +26325,7 @@
 	  }
 	  drawSegmentItem(context, cache, fill, stroke, fillOpacity, strokeOpacity, attribute, defaultAttribute, clipRange, clipRangeByDimension, offsetX, offsetY, line, fillCb, strokeCb) {
 	    var _a;
+	    if (!cache) return;
 	    context.beginPath();
 	    const z = null !== (_a = this.z) && void 0 !== _a ? _a : 0;
 	    drawSegments(context.camera ? context : context.nativeContext, cache, clipRange, clipRangeByDimension, {
@@ -26318,7 +26350,7 @@
 	        lineWidth = lineAttribute.lineWidth,
 	        visible = lineAttribute.visible
 	      } = line.attribute,
-	      fVisible = fillVisible(opacity, fillOpacity),
+	      fVisible = fillVisible(opacity, fillOpacity, fill),
 	      sVisible = strokeVisible(opacity, strokeOpacity),
 	      doFill = runFill(fill),
 	      doStroke = runStroke(stroke, lineWidth);
@@ -26499,12 +26531,13 @@
 	        opacity = areaAttribute.opacity,
 	        visible = areaAttribute.visible,
 	        z = areaAttribute.z,
+	        background: background,
 	        stroke = area.attribute.stroke,
 	        lineWidth = areaAttribute.lineWidth,
 	        strokeOpacity = areaAttribute.strokeOpacity
 	      } = area.attribute,
-	      fVisible = fillVisible(opacity, fillOpacity),
-	      doFill = runFill(fill),
+	      fVisible = fillVisible(opacity, fillOpacity, fill),
+	      doFill = runFill(fill, background),
 	      doStroke = runStroke(stroke, lineWidth),
 	      sVisible = strokeVisible(opacity, strokeOpacity);
 	    if (!area.valid || !visible) return;
@@ -26605,6 +26638,7 @@
 	    drawPathProxy(area, context, x, y, drawContext, params) || this.drawShape(area, context, x, y, drawContext, params), context.highPerformanceRestore();
 	  }
 	  drawSegmentItem(context, cache, fill, fillOpacity, stroke, strokeOpacity, attribute, defaultAttribute, clipRange, offsetX, offsetY, offsetZ, area, drawContext, fillCb, strokeCb) {
+	    if (!cache) return;
 	    context.beginPath();
 	    drawAreaSegments(context.camera ? context : context.nativeContext, cache, clipRange, {
 	      offsetX: offsetX,
@@ -26673,11 +26707,11 @@
 	        y: originY = pathAttribute.y
 	      } = path.attribute,
 	      z = null !== (_a = this.z) && void 0 !== _a ? _a : 0,
-	      fVisible = fillVisible(opacity, fillOpacity),
+	      fVisible = fillVisible(opacity, fillOpacity, fill),
 	      sVisible = strokeVisible(opacity, strokeOpacity),
-	      doFill = runFill(fill),
+	      doFill = runFill(fill, background),
 	      doStroke = runStroke(stroke, lineWidth);
-	    if (path.valid && visible && (doFill || doStroke || background) && (fVisible || sVisible || fillCb || strokeCb || background)) {
+	    if (path.valid && visible && (doFill || doStroke) && (fVisible || sVisible || fillCb || strokeCb || background)) {
 	      if (context.beginPath(), path.pathShape) renderCommandList(path.pathShape.commandList, context, x, y, 1, 1, z);else {
 	        const path2D = null !== (_b = path.attribute.path) && void 0 !== _b ? _b : pathAttribute.path;
 	        renderCommandList(path2D.commandList, context, x, y, 1, 1, z);
@@ -26799,12 +26833,12 @@
 	        x: originX = rectAttribute.x,
 	        y: originY = rectAttribute.y
 	      } = rect.attribute,
-	      fVisible = rectFillVisible(opacity, fillOpacity, width, height),
+	      fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill),
 	      sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height),
-	      doFill = runFill(fill),
+	      doFill = runFill(fill, background),
 	      doStroke = runStroke(stroke, lineWidth);
 	    if (!rect.valid || !visible) return;
-	    if (!(doFill || doStroke || background)) return;
+	    if (!doFill && !doStroke) return;
 	    if (!(fVisible || sVisible || fillCb || strokeCb || background)) return;
 	    0 === cornerRadius || isArray$3(cornerRadius) && cornerRadius.every(num => 0 === num) ? (context.beginPath(), context.rect(x, y, width, height)) : (context.beginPath(), createRectPath(context, x, y, width, height, cornerRadius)), this._rectRenderContribitions || (this._rectRenderContribitions = this.rectRenderContribitions.getContributions() || [], this._rectRenderContribitions.sort((a, b) => b.order - a.order));
 	    const doFillOrStroke = {
@@ -26874,12 +26908,12 @@
 	        scaleX = symbolAttribute.scaleX,
 	        scaleY = symbolAttribute.scaleY
 	      } = symbol.attribute,
-	      fVisible = fillVisible(opacity, fillOpacity),
+	      fVisible = fillVisible(opacity, fillOpacity, fill),
 	      sVisible = strokeVisible(opacity, strokeOpacity),
-	      doFill = runFill(fill),
+	      doFill = runFill(fill, background),
 	      doStroke = runStroke(stroke, lineWidth);
 	    if (!symbol.valid || !visible) return;
-	    if (!(doFill || doStroke || background)) return;
+	    if (!doFill && !doStroke) return;
 	    if (!(fVisible || sVisible || fillCb || strokeCb || background)) return;
 	    const parsedPath = symbol.getParsedPath();
 	    if (!parsedPath) return;
@@ -26957,7 +26991,7 @@
 	        y: originY = textAttribute.y
 	      } = text.attribute,
 	      lineHeight = null !== (_a = text.attribute.lineHeight) && void 0 !== _a ? _a : fontSize,
-	      fVisible = fillVisible(opacity, fillOpacity),
+	      fVisible = fillVisible(opacity, fillOpacity, fill),
 	      sVisible = strokeVisible(opacity, strokeOpacity),
 	      doFill = runFill(fill),
 	      doStroke = runStroke(stroke, lineWidth);
@@ -27170,11 +27204,11 @@
 	        x: originX = polygonAttribute.x,
 	        y: originY = polygonAttribute.y
 	      } = polygon.attribute,
-	      fVisible = fillVisible(opacity, fillOpacity),
+	      fVisible = fillVisible(opacity, fillOpacity, fill),
 	      sVisible = strokeVisible(opacity, strokeOpacity),
-	      doFill = runFill(fill),
+	      doFill = runFill(fill, background),
 	      doStroke = runStroke(stroke, lineWidth);
-	    polygon.valid && visible && (doFill || doStroke || background) && (fVisible || sVisible || fillCb || strokeCb || background) && (context.beginPath(), cornerRadius <= 0 || isArray$3(cornerRadius) && cornerRadius.every(num => 0 === num) ? drawPolygon(context.camera ? context : context.nativeContext, points, x, y) : drawRoundedPolygon(context.camera ? context : context.nativeContext, points, x, y, cornerRadius), context.closePath(), this._polygonRenderContribitions || (this._polygonRenderContribitions = this.polygonRenderContribitions.getContributions() || [], this._polygonRenderContribitions.sort((a, b) => b.order - a.order)), this._polygonRenderContribitions.forEach(c => {
+	    polygon.valid && visible && (doFill || doStroke) && (fVisible || sVisible || fillCb || strokeCb || background) && (context.beginPath(), cornerRadius <= 0 || isArray$3(cornerRadius) && cornerRadius.every(num => 0 === num) ? drawPolygon(context.camera ? context : context.nativeContext, points, x, y) : drawRoundedPolygon(context.camera ? context : context.nativeContext, points, x, y, cornerRadius), context.closePath(), this._polygonRenderContribitions || (this._polygonRenderContribitions = this.polygonRenderContribitions.getContributions() || [], this._polygonRenderContribitions.sort((a, b) => b.order - a.order)), this._polygonRenderContribitions.forEach(c => {
 	      c.time === BaseRenderContributionTime.beforeFillStroke && c.drawShape(polygon, context, x, y, doFill, doStroke, fVisible, sVisible, polygonAttribute, drawContext, fillCb, strokeCb);
 	    }), context.setShadowStyle && context.setShadowStyle(polygon, polygon.attribute, polygonAttribute), doFill && (fillCb ? fillCb(context, polygon.attribute, polygonAttribute) : fillOpacity && (context.setCommonStyle(polygon, polygon.attribute, originX - x, originY - y, polygonAttribute), context.fill())), doStroke && (strokeCb ? strokeCb(context, polygon.attribute, polygonAttribute) : strokeOpacity && (context.setStrokeStyle(polygon, polygon.attribute, originX - x, originY - y, polygonAttribute), context.stroke())), this._polygonRenderContribitions.forEach(c => {
 	      c.time === BaseRenderContributionTime.afterFillStroke && c.drawShape(polygon, context, x, y, doFill, doStroke, fVisible, sVisible, polygonAttribute, drawContext, fillCb, strokeCb);
@@ -27233,7 +27267,7 @@
 	        repeatY = imageAttribute.repeatY,
 	        image: url
 	      } = image.attribute,
-	      fVisible = fillVisible(opacity, fillOpacity),
+	      fVisible = fillVisible(opacity, fillOpacity, fill),
 	      doFill = runFill(fill);
 	    if (image.valid && visible && doFill && (fVisible || fillCb)) {
 	      if (this._imageRenderContribitions || (this._imageRenderContribitions = this.imageRenderContribitions.getContributions() || []), this._imageRenderContribitions.forEach(c => {
@@ -32352,13 +32386,13 @@
 	        lineWidth = groupAttribute.lineWidth,
 	        visible = groupAttribute.visible
 	      } = group.attribute,
-	      fVisible = rectFillVisible(opacity, fillOpacity, width, height),
+	      fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill),
 	      sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height),
-	      doFill = runFill(fill),
+	      doFill = runFill(fill, background),
 	      doStroke = runStroke(stroke, lineWidth);
 	    if (!group.valid || !visible) return;
 	    if (!clip) {
-	      if (!(doFill || doStroke || background)) return;
+	      if (!doFill && !doStroke) return;
 	      if (!(fVisible || sVisible || fillCb || strokeCb || background)) return;
 	    }
 	    if (path && path.length && drawContext.drawContribution) {
@@ -32440,7 +32474,7 @@
 	          lineWidth = lineAttribute.lineWidth,
 	          visible = lineAttribute.visible
 	        } = line.attribute,
-	        fVisible = fillVisible(opacity, fillOpacity),
+	        fVisible = fillVisible(opacity, fillOpacity, fill),
 	        sVisible = strokeVisible(opacity, strokeOpacity),
 	        doFill = runFill(fill),
 	        doStroke = runStroke(stroke, lineWidth);
@@ -32490,7 +32524,7 @@
 	          opacity = areaAttribute.opacity,
 	          visible = areaAttribute.visible
 	        } = area.attribute,
-	        fVisible = fillVisible(opacity, fillOpacity),
+	        fVisible = fillVisible(opacity, fillOpacity, fill),
 	        doFill = runFill(fill);
 	      if (!area.valid || !visible) return;
 	      if (!doFill) return;
@@ -32680,7 +32714,7 @@
 	        visible = rectAttribute.visible
 	      } = rect.attribute,
 	      z = null !== (_a = this.z) && void 0 !== _a ? _a : 0,
-	      fVisible = rectFillVisible(opacity, fillOpacity, width, height),
+	      fVisible = rectFillVisible(opacity, fillOpacity, width, height, fill),
 	      sVisible = rectStrokeVisible(opacity, strokeOpacity, width, height),
 	      doFill = runFill(fill),
 	      doStroke = runStroke(stroke, lineWidth);
@@ -32808,7 +32842,7 @@
 	        visible = richtextAttribute.visible
 	      } = richtext.attribute;
 	    if (!richtext.valid || !visible) return;
-	    if (!fillVisible(opacity, fillOpacity)) return;
+	    if (!fillVisible(opacity, fillOpacity, !0)) return;
 	    context.translate(x, y);
 	    richtext.getFrameCache().draw(context, this.drawIcon);
 	  }
@@ -32968,13 +33002,13 @@
 	        strokeOpacity = arcAttribute.strokeOpacity,
 	        visible = arcAttribute.visible
 	      } = arc.attribute,
-	      fVisible = fillVisible(opacity, fillOpacity),
+	      fVisible = fillVisible(opacity, fillOpacity, fill),
 	      sVisible = strokeVisible(opacity, strokeOpacity),
-	      doFill = runFill(fill),
+	      doFill = runFill(fill, background),
 	      doStroke = runStroke(stroke, lineWidth),
 	      z = null !== (_a = this.z) && void 0 !== _a ? _a : 0;
 	    if (!arc.valid || !visible) return;
-	    if (!(doFill || doStroke || background)) return;
+	    if (!doFill && !doStroke) return;
 	    if (!(fVisible || sVisible || fillCb || strokeCb || background)) return;
 	    const {
 	        outerRadius = arcAttribute.outerRadius,
@@ -33061,7 +33095,7 @@
 	        face = [!0, !0, !0, !0, !0, !0]
 	      } = pyramid3d.attribute,
 	      z = null !== (_a = this.z) && void 0 !== _a ? _a : 0,
-	      fVisible = fillVisible(opacity, fillOpacity),
+	      fVisible = fillVisible(opacity, fillOpacity, fill),
 	      sVisible = strokeVisible(opacity, strokeOpacity),
 	      doFill = runFill(fill),
 	      doStroke = runStroke(stroke, lineWidth);
@@ -35067,6 +35101,11 @@
 	            lineWidth: 2,
 	            fontSize: THEME_CONSTANTS.LABEL_FONT_SIZE
 	        }
+	    },
+	    point: {
+	        style: {
+	            symbolType: 'circle'
+	        }
 	    }
 	};
 
@@ -35262,6 +35301,11 @@
 	            stroke: 'white',
 	            fontSize: THEME_CONSTANTS.LABEL_FONT_SIZE
 	        }
+	    },
+	    point: {
+	        style: {
+	            symbolType: 'circle'
+	        }
 	    }
 	};
 
@@ -35353,6 +35397,11 @@
 	            stroke: 'white',
 	            fontSize: THEME_CONSTANTS.LABEL_FONT_SIZE
 	        }
+	    },
+	    point: {
+	        style: {
+	            symbolType: 'circle'
+	        }
 	    }
 	};
 
@@ -40526,7 +40575,8 @@
 	        maxWidth: maxWidth,
 	        padding = 4,
 	        visible: visible,
-	        state: state
+	        state: state,
+	        formatMethod: formatMethod
 	      } = this.attribute,
 	      parsedPadding = normalizePadding$1(padding),
 	      group = this.createOrUpdateChild("tag-content", {
@@ -40558,7 +40608,7 @@
 	    }
 	    tagWidth += symbolPlaceWidth, textX += symbolPlaceWidth;
 	    const textAttrs = Object.assign(Object.assign({
-	      text: text,
+	      text: formatMethod ? formatMethod(text) : text,
 	      visible: isValid(text) && !1 !== visible,
 	      lineHeight: null == textStyle ? void 0 : textStyle.fontSize
 	    }, textStyle), {
@@ -43506,13 +43556,14 @@
 	        previewCallbackX: previewCallbackX,
 	        previewCallbackY: previewCallbackY,
 	        previewCallbackX1: previewCallbackX1,
-	        previewCallbackY1: previewCallbackY1
+	        previewCallbackY1: previewCallbackY1,
+	        updateStateCallback: updateStateCallback
 	      } = this.attribute,
 	      {
 	        width: width,
 	        height: height
 	      } = size;
-	    start && (this.state.start = start), end && (this.state.end = end), this._isHorizontal = "top" === orient || "bottom" === orient, this._layoutCache.max = this._isHorizontal ? width : height, this._layoutCache.attPos = this._isHorizontal ? "x" : "y", this._layoutCache.attSize = this._isHorizontal ? "width" : "height", this._activeCache.startPos = position, this._activeCache.lastPos = position, this._showText = "auto" !== showDetail && showDetail, previewData && (this._previewData = previewData), isFunction(previewCallbackX) && (this._previewCallbackX = previewCallbackX), isFunction(previewCallbackY) && (this._previewCallbackY = previewCallbackY), isFunction(previewCallbackX1) && (this._previewCallbackX1 = previewCallbackX1), isFunction(previewCallbackY1) && (this._previewCallbackY1 = previewCallbackY1);
+	    start && (this.state.start = start), end && (this.state.end = end), this._isHorizontal = "top" === orient || "bottom" === orient, this._layoutCache.max = this._isHorizontal ? width : height, this._layoutCache.attPos = this._isHorizontal ? "x" : "y", this._layoutCache.attSize = this._isHorizontal ? "width" : "height", this._activeCache.startPos = position, this._activeCache.lastPos = position, this._showText = "auto" !== showDetail && showDetail, previewData && (this._previewData = previewData), isFunction(previewCallbackX) && (this._previewCallbackX = previewCallbackX), isFunction(previewCallbackY) && (this._previewCallbackY = previewCallbackY), isFunction(previewCallbackX1) && (this._previewCallbackX1 = previewCallbackX1), isFunction(previewCallbackY1) && (this._previewCallbackY1 = previewCallbackY1), isFunction(updateStateCallback) && (this._updateStateCallback = updateStateCallback);
 	  }
 	  bindEvents() {
 	    const {
@@ -43942,10 +43993,10 @@
 	      start: startAttr,
 	      end: endAttr
 	    } = this.attribute;
-	    isValid(start) && isValid(end) && (start !== this.state.start || end !== this.state.end) && (this.state.start = start, this.state.end = end, startAttr === this.state.start && endAttr === this.state.end || this.setAttributes({
+	    isValid(start) && isValid(end) && (start !== this.state.start || end !== this.state.end) && (this.state.start = start, this.state.end = end, startAttr === this.state.start && endAttr === this.state.end || (this.setAttributes({
 	      start: start,
 	      end: end
-	    }));
+	    }), this._updateStateCallback && this._updateStateCallback(start, end)));
 	  }
 	  setPreviewData(data) {
 	    this._previewData = data;
@@ -44986,7 +45037,7 @@
 	    const innerGroupBounds = innerGroup.AABBBounds,
 	      innerGroupWidth = innerGroupBounds.width(),
 	      innerGroupHeight = innerGroupBounds.height(),
-	      itemGroupWidth = this._itemWidthByUser || innerGroupWidth + parsedPadding[1] + parsedPadding[3],
+	      itemGroupWidth = isValid(this.attribute.item.width) ? this.attribute.item.width : innerGroupWidth + parsedPadding[1] + parsedPadding[3],
 	      itemGroupHeight = this._itemHeightByUser || innerGroupHeight + parsedPadding[0] + parsedPadding[2];
 	    return itemGroup.attribute.width = itemGroupWidth, itemGroup.attribute.height = itemGroupHeight, innerGroup.translateTo(-innerGroupBounds.x1 + parsedPadding[3], -innerGroupBounds.y1 + parsedPadding[0]), itemGroup;
 	  }
@@ -51514,6 +51565,8 @@
 	(function (ChartEvent) {
 	    ChartEvent["initialized"] = "initialized";
 	    ChartEvent["rendered"] = "rendered";
+	    ChartEvent["renderFinished"] = "renderFinished";
+	    ChartEvent["animationFinished"] = "animationFinished";
 	    ChartEvent["regionSeriesDataFilterOver"] = "regionSeriesDataFilterOver";
 	    ChartEvent["afterInitData"] = "afterInitData";
 	    ChartEvent["afterInitEvent"] = "afterInitEvent";
@@ -53164,19 +53217,33 @@
 	    return true;
 	};
 	const getDimensionData = (value, axis, coordinate, getDimensionField) => {
+	    const scale = axis.getScale();
+	    const isDiscreteAxis = isDiscrete(scale.type);
 	    const data = [];
 	    const regions = axis.getRegions();
 	    for (const region of regions) {
 	        const seriesList = region.getSeries();
 	        for (const series of seriesList) {
 	            if (series.coordinate === coordinate) {
-	                const dimensionField = getDimensionField(series);
+	                const dimensionField = array(getDimensionField(series));
 	                const viewData = series.getViewData()?.latestData;
 	                if (dimensionField && viewData) {
-	                    data.push({
-	                        series,
-	                        datum: viewData.filter((datum) => datum[dimensionField]?.toString() === value?.toString())
-	                    });
+	                    if (isDiscreteAxis) {
+	                        data.push({
+	                            series,
+	                            datum: viewData.filter((datum) => datum[dimensionField[0]]?.toString() === value?.toString())
+	                        });
+	                    }
+	                    else {
+	                        data.push({
+	                            series,
+	                            datum: viewData.filter((datum) => datum[dimensionField[0]]?.toString() === value?.toString() ||
+	                                (isValid(datum[dimensionField[0]]) &&
+	                                    isValid(datum[dimensionField[1]]) &&
+	                                    value >= datum[dimensionField[0]] &&
+	                                    value < datum[dimensionField[1]]))
+	                        });
+	                    }
 	                }
 	            }
 	        }
@@ -53269,8 +53336,10 @@
 	    }
 	    return null;
 	};
-	const XAxisGetDimensionField = (series) => series.fieldX[0];
-	const YAxisGetDimensionField = (series) => series.fieldY[0];
+	const discreteXAxisGetDimensionField = (series) => series.fieldX[0];
+	const discreteYAxisGetDimensionField = (series) => series.fieldY[0];
+	const continuousXAxisGetDimensionField = (series) => [series.fieldX[0], series.fieldX2];
+	const continuousYAxisGetDimensionField = (series) => [series.fieldY[0], series.fieldY2];
 	const getCartesianDimensionInfo = (chart, pos) => {
 	    if (!chart) {
 	        return null;
@@ -53285,13 +53354,15 @@
 	    const targetAxisInfo = [];
 	    if (xAxisList) {
 	        xAxisList.forEach(axis => {
-	            const info = getDiscreteAxisDimensionInfo(axis, x, 'x', XAxisGetDimensionField);
+	            const isDiscreteAxis = isDiscrete(axis.getScale().type);
+	            const info = getDimensionInfoByPosition(axis, x, 'x', isDiscreteAxis ? discreteXAxisGetDimensionField : continuousXAxisGetDimensionField);
 	            info && targetAxisInfo.push(info);
 	        });
 	    }
 	    if (yAxisList) {
 	        yAxisList.forEach(axis => {
-	            const info = getDiscreteAxisDimensionInfo(axis, y, 'y', YAxisGetDimensionField);
+	            const isDiscreteAxis = isDiscrete(axis.getScale().type);
+	            const info = getDimensionInfoByPosition(axis, y, 'y', isDiscreteAxis ? discreteYAxisGetDimensionField : continuousYAxisGetDimensionField);
 	            info && targetAxisInfo.push(info);
 	        });
 	    }
@@ -53300,20 +53371,17 @@
 	    }
 	    return targetAxisInfo;
 	};
-	const getDiscreteAxisDimensionInfo = (axis, posValue, posKey, getDimensionField) => {
+	const getDimensionInfoByPosition = (axis, posValue, posKey, getDimensionField) => {
 	    const scale = axis.getScale();
 	    const scalePos = posValue - axis.getLayoutStartPoint()[posKey];
 	    if ((scalePos - scale.range()[0]) * (scalePos - scale.range()[1]) > 0) {
 	        return null;
 	    }
 	    const value = scale.invert(scalePos);
-	    return getDimensionInfoInAxis(axis, value, getDimensionField);
+	    return getDimensionInfoByValue(axis, value, getDimensionField);
 	};
-	const getDimensionInfoInAxis = (axis, value, getDimensionField) => {
+	const getDimensionInfoByValue = (axis, value, getDimensionField) => {
 	    const scale = axis.getScale();
-	    if (!scale || !isDiscrete(scale.type)) {
-	        return null;
-	    }
 	    if (isNil(value)) {
 	        return null;
 	    }
@@ -53322,7 +53390,7 @@
 	    if (index < 0) {
 	        index = undefined;
 	    }
-	    const data = getDimensionData(value, axis, 'cartesian', getDimensionField ?? (isXAxis(axis.orient) ? XAxisGetDimensionField : YAxisGetDimensionField));
+	    const data = getDimensionData(value, axis, 'cartesian', getDimensionField ?? (isXAxis(axis.orient) ? discreteXAxisGetDimensionField : discreteYAxisGetDimensionField));
 	    return { index, value, axis, data };
 	};
 
@@ -53461,10 +53529,10 @@
 	        this._chart = this._eventDispatcher.globalInstance.getChart?.();
 	    }
 	    register(eType, handler) {
-	        throw new Error('Method not implemented.');
+	        (this._chart?.getOption().onError ?? error$1)('Method not implemented.');
 	    }
 	    unregister() {
-	        throw new Error('Method not implemented.');
+	        (this._chart?.getOption().onError ?? error$1)('Method not implemented.');
 	    }
 	    getTargetDimensionInfo(x, y) {
 	        const cartesianInfo = getCartesianDimensionInfo(this._chart, { x, y }) ?? [];
@@ -53491,7 +53559,7 @@
 	        });
 	        const dimensionInfo = [];
 	        axis.forEach(a => {
-	            const info = getDimensionInfoInAxis(a, v);
+	            const info = getDimensionInfoByValue(a, v);
 	            if (info) {
 	                dimensionInfo.push(info);
 	            }
@@ -54097,7 +54165,7 @@
 	    });
 	    return viewData;
 	}
-	function dataToDataView(data, dataSet, sourceDataViews = []) {
+	function dataToDataView(data, dataSet, sourceDataViews = [], ctx = {}) {
 	    if (data instanceof DataView) {
 	        return data;
 	    }
@@ -54116,7 +54184,8 @@
 	        if (typeof fromDataId === 'string') {
 	            const fromDataView = sourceDataViews.find(dv => dv.name === fromDataId);
 	            if (!fromDataView) {
-	                throw new Error(`no data matches fromDataId ${fromDataId}`);
+	                (ctx.onError ?? error$1)(`no data matches fromDataId ${fromDataId}`);
+	                return null;
 	            }
 	            dataView.parse([fromDataView], {
 	                type: 'dataview'
@@ -54128,7 +54197,8 @@
 	        else if (typeof fromDataIndex === 'number') {
 	            const fromDataView = sourceDataViews[fromDataIndex];
 	            if (!fromDataView) {
-	                throw new Error(`no data matches fromDataIndex ${fromDataIndex}`);
+	                (ctx.onError ?? error$1)(`no data matches fromDataIndex ${fromDataIndex}`);
+	                return null;
 	            }
 	            dataView.parse([fromDataView], {
 	                type: 'dataview'
@@ -54146,7 +54216,7 @@
 	        }
 	        else {
 	            dataView.parse([]);
-	            error$1('values should be array');
+	            warn('values should be array');
 	        }
 	        if (transforms && transforms.length) {
 	            transforms.forEach((transform) => {
@@ -54283,6 +54353,12 @@
 	        if (this._view) {
 	            return;
 	        }
+	        const logger = new Logger(this._option.logLevel ?? LoggerLevel.Error);
+	        if (this._option.onError) {
+	            logger.addErrorHandler((...args) => {
+	                this._option.onError(...args);
+	            });
+	        }
 	        this._view = new View({
 	            width: this._width,
 	            height: this._height,
@@ -54302,7 +54378,8 @@
 	            doLayout: () => {
 	                this._compileChart?.onLayout(this._view);
 	            },
-	            logLevel: Logger.getInstance().level()
+	            logger: logger,
+	            logLevel: logger.level()
 	        });
 	        this._setCanvasStyle();
 	        const interactive = this._option.interactive;
@@ -54556,7 +54633,7 @@
 	        });
 	    });
 	}
-	async function getCanvasDataURL(c) {
+	async function getCanvasDataURL(c, ctx) {
 	    if (!c) {
 	        return '';
 	    }
@@ -54565,8 +54642,8 @@
 	            return OffscreenCanvasToDataURL(c);
 	        }
 	    }
-	    catch (error) {
-	        console.error('getCanvasDataURL', error);
+	    catch (_error) {
+	        (ctx?.onError ?? error$1)(`getCanvasDataURL error : ${_error.toString()}`);
 	    }
 	    return c.toDataURL();
 	}
@@ -54627,15 +54704,20 @@
 	    _autoSize = true;
 	    _option = {
 	        mode: exports.RenderModeEnum['desktop-browser'],
-	        animation: true
+	        animation: true,
+	        onError: (msg) => {
+	            throw new Error(msg);
+	        }
 	    };
 	    _curSize = { width: 0, height: 0 };
 	    _observer = null;
 	    _currentThemeName;
 	    _currentTheme;
+	    _onError;
 	    _context = {};
 	    constructor(spec, options) {
 	        this._option = merge$2(this._option, options);
+	        this._onError = this._option.onError;
 	        const { dom, renderCanvas, mode, stage, poptip, ...restOptions } = this._option;
 	        if (dom) {
 	            this._container = isString(dom) ? document?.getElementById(dom) : dom;
@@ -54647,13 +54729,14 @@
 	            this._stage = stage;
 	        }
 	        if (mode !== 'node' && !this._container && !this._canvas && !this._stage) {
-	            error$1('please specify container or renderCanvas!');
+	            this._option.onError('please specify container or renderCanvas!');
 	            return;
 	        }
 	        this._viewBox = this._option.viewBox;
 	        this._currentThemeName = ThemeManager.getCurrentThemeName();
 	        this._setSpec(spec);
 	        this._updateCurrentTheme();
+	        const specBackground = typeof spec.background === 'string' ? spec.background : null;
 	        this._compiler = new Compiler({
 	            dom: this._container ?? 'none',
 	            canvas: renderCanvas
@@ -54662,7 +54745,8 @@
 	            stage,
 	            pluginList: poptip !== false ? ['poptipForText'] : [],
 	            ...restOptions,
-	            background: spec.background || this._currentTheme.background || this._option.background
+	            background: specBackground || this._currentTheme.background || this._option.background,
+	            onError: this._onError
 	        });
 	        this._eventDispatcher = new EventDispatcher(this, this._compiler);
 	        this._event = new Event$1(this._eventDispatcher, mode);
@@ -54677,6 +54761,7 @@
 	            height: spec.height || 0
 	        };
 	        this._bindResizeEvent();
+	        this._bindVGrammarViewEvent();
 	        this._event.emit(ChartEvent.initialized, {});
 	        InstanceManager.registerInstance(this);
 	    }
@@ -54695,13 +54780,15 @@
 	        const dataViewArr = [];
 	        for (let i = 0; i < specData.length; i++) {
 	            const curSpecData = specData[i];
-	            dataViewArr.push(dataToDataView(curSpecData, this._dataSet, dataViewArr));
+	            dataViewArr.push(dataToDataView(curSpecData, this._dataSet, dataViewArr, {
+	                onError: this._option.onError
+	            }));
 	        }
 	        this._spec.data = dataViewArr;
 	    }
 	    _initChart(spec) {
 	        if (!this._compiler) {
-	            error$1('compiler is not initialized');
+	            this._option.onError('compiler is not initialized');
 	            return;
 	        }
 	        this._initData();
@@ -54719,10 +54806,11 @@
 	            viewBox: this._viewBox,
 	            animation: this._option.animation,
 	            getTheme: () => this._currentTheme,
-	            layout: this._option.layout
+	            layout: this._option.layout,
+	            onError: this._onError
 	        });
 	        if (!chart) {
-	            error$1('init chart fail');
+	            this._option.onError('init chart fail');
 	            return;
 	        }
 	        this._chart = chart;
@@ -54735,6 +54823,17 @@
 	            this._dataSet = null;
 	        }
 	    }
+	    _bindVGrammarViewEvent() {
+	        if (!this._compiler || this._compiler.isReleased) {
+	            return;
+	        }
+	        this._compiler.getVGrammarView().addEventListener(HOOK_EVENT.ALL_ANIMATION_END, () => {
+	            this._event.emit(ChartEvent.animationFinished, {});
+	        });
+	        this._compiler.getVGrammarView().addEventListener(HOOK_EVENT.AFTER_VRENDER_NEXT_RENDER, () => {
+	            this._event.emit(ChartEvent.renderFinished, {});
+	        });
+	    }
 	    _bindResizeEvent() {
 	        if (this._autoSize) {
 	            if (this._container) {
@@ -54786,7 +54885,21 @@
 	        if (!isValid(result)) {
 	            return this;
 	        }
-	        if (result.reMake) {
+	        this._reCompile(result);
+	        await this.renderAsync(morphConfig);
+	        return this;
+	    }
+	    updateCustomConfigAndRerenderSync(modifyConfig, morphConfig) {
+	        const result = modifyConfig();
+	        if (!isValid(result)) {
+	            return this;
+	        }
+	        this._reCompile(result);
+	        this.renderSync(morphConfig);
+	        return this;
+	    }
+	    _reCompile(updateResult) {
+	        if (updateResult.reMake) {
 	            this._releaseData();
 	            this._initDataSet();
 	            this._chart.release();
@@ -54794,13 +54907,11 @@
 	            this._compiler?.releaseGrammar();
 	        }
 	        else {
-	            if (result.reCompile) {
+	            if (updateResult.reCompile) {
 	                this.getComponents().forEach(c => c.clear());
 	                this._compiler?.compile({ chart: this._chart, vChart: this }, {});
 	            }
 	        }
-	        await this.renderAsync(morphConfig);
-	        return this;
 	    }
 	    renderSync(morphConfig) {
 	        if (!this._chart) {
@@ -54959,6 +55070,25 @@
 	        }, morphConfig);
 	        return this;
 	    }
+	    updateSpecSync(spec, forceMerge = false, morphConfig) {
+	        if (!spec) {
+	            return this;
+	        }
+	        if (isString(spec)) {
+	            spec = JSON.parse(spec);
+	        }
+	        if (forceMerge) {
+	            spec = merge$2({}, this._spec, spec);
+	        }
+	        this.updateCustomConfigAndRerenderSync(() => {
+	            spec = specTransform(spec);
+	            this._spec = spec;
+	            this._updateCurrentTheme();
+	            this._compiler?.getVGrammarView()?.updateLayoutTag();
+	            return this._chart.updateSpec(spec, morphConfig);
+	        }, morphConfig);
+	        return this;
+	    }
 	    async resize(width, height) {
 	        if (!this._chart || !this._compiler) {
 	            return this;
@@ -55036,6 +55166,18 @@
 	        });
 	        return this;
 	    }
+	    setCurrentThemeSync(name) {
+	        if (!ThemeManager.themeExist(name)) {
+	            return this;
+	        }
+	        this.updateCustomConfigAndRerenderSync(() => {
+	            this._currentThemeName = name;
+	            this._updateCurrentTheme();
+	            this._chart?.setCurrentTheme(this._currentTheme, true);
+	            return { change: true, reMake: false };
+	        });
+	        return this;
+	    }
 	    _getTooltipComponent() {
 	        const tooltip = this._chart?.getAllComponents().find(c => c.type === ComponentTypeEnum.tooltip);
 	        return tooltip;
@@ -55117,15 +55259,17 @@
 	        if (this._chart && stage) {
 	            stage.render();
 	            const canvas = this._chart.getCanvas();
-	            const url = await getCanvasDataURL(canvas);
+	            const url = await getCanvasDataURL(canvas, {
+	                onError: this._onError
+	            });
 	            return url;
 	        }
-	        console.error(new ReferenceError(`render is not defined`));
+	        this._option.onError(new ReferenceError(`render is not defined`));
 	        return null;
 	    }
 	    async exportImg(name) {
 	        if (!isTrueBrowser(this._option.mode)) {
-	            console.error(new TypeError(`non-browser environment can not export img`));
+	            this._option.onError(new TypeError(`non-browser environment can not export img`));
 	            return;
 	        }
 	        const dataURL = await this.getDataURL();
@@ -55133,12 +55277,12 @@
 	            URLToImage(name, dataURL);
 	        }
 	        else {
-	            console.error(new ReferenceError(`render is not defined`));
+	            this._option.onError(new ReferenceError(`render is not defined`));
 	        }
 	    }
 	    getImageBuffer() {
 	        if (this._option.mode !== 'node') {
-	            console.error(new TypeError('getImageBuffer() now only support node environment.'));
+	            this._option.onError(new TypeError('getImageBuffer() now only support node environment.'));
 	            return;
 	        }
 	        const stage = this.getStage();
@@ -55147,7 +55291,7 @@
 	            const buffer = stage.window.getImageBuffer();
 	            return buffer;
 	        }
-	        console.error(new ReferenceError(`render is not defined`));
+	        this._option.onError(new ReferenceError(`render is not defined`));
 	        return null;
 	    }
 	    setLayout(layout) {
@@ -55560,14 +55704,6 @@
 	    layoutPaddingBottom = 0;
 	    layoutOffsetX = 0;
 	    layoutOffsetY = 0;
-	    _attributeTag = true;
-	    getAttributeTag() {
-	        return this._attributeTag;
-	    }
-	    setAttributeTag(tag) {
-	        this._attributeTag = tag;
-	        return this._attributeTag;
-	    }
 	    layoutLevel = LayoutLevel.Region;
 	    layoutZIndex = 0;
 	    chartLayoutRect;
@@ -56674,6 +56810,10 @@
 	    _bottomCurrent = 0;
 	    _chartLayoutRect;
 	    _chartViewBox;
+	    _onError;
+	    constructor(_spec, ctx) {
+	        this._onError = ctx?.onError;
+	    }
 	    layoutItems(_chart, items, chartLayoutRect, chartViewBox) {
 	        this._chartLayoutRect = chartLayoutRect;
 	        this._chartViewBox = chartViewBox;
@@ -56934,7 +57074,7 @@
 	    filterRegionsWithID(regions, id) {
 	        const target = regions.find(x => x.id === id);
 	        if (!target) {
-	            throw Error('can not find target region item, invalid id');
+	            (this._onError ?? error$1)('can not find target region item, invalid id');
 	        }
 	        return target;
 	    }
@@ -58028,7 +58168,7 @@
 	VChart.useMark([ComponentMark, GroupMark, ImageMark]);
 	Factory.registerRegion('region', Region);
 	Factory.registerLayout('base', Layout);
-	const version = "1.1.2";
+	const version = "1.2.0-beta.2";
 	Logger.getInstance(LoggerLevel.Error);
 
 	var SeriesMarkNameEnum;
@@ -58460,7 +58600,7 @@
 	    }
 	    stack(stackCache) {
 	        if (stackCache.values.length > 0) {
-	            let positiveStart = Number.EPSILON;
+	            let positiveStart = 0;
 	            let negativeStart = 0;
 	            let sign = 1;
 	            let value = 0;
@@ -58481,8 +58621,8 @@
 	                value = v[STACK_FIELD_END];
 	                const denominator = value >= 0 ? positiveStart : negativeStart;
 	                sign = value >= 0 ? 1 : -1;
-	                v[STACK_FIELD_START_PERCENT] = Math.min(1, v[STACK_FIELD_START] / denominator) * sign;
-	                v[STACK_FIELD_END_PERCENT] = Math.min(1, v[STACK_FIELD_END] / denominator) * sign;
+	                v[STACK_FIELD_START_PERCENT] = denominator === 0 ? 0 : Math.min(1, v[STACK_FIELD_START] / denominator) * sign;
+	                v[STACK_FIELD_END_PERCENT] = denominator === 0 ? 0 : Math.min(1, v[STACK_FIELD_END] / denominator) * sign;
 	            });
 	        }
 	        for (const key in stackCache.nodes) {
@@ -58517,6 +58657,9 @@
 	        this.transformSpec(s);
 	        this._spec = s;
 	    }
+	    getOption() {
+	        return this._option;
+	    }
 	    _theme;
 	    _regions = [];
 	    _series = [];
@@ -58571,6 +58714,7 @@
 	    padding = { top: 0, left: 0, right: 0, bottom: 0 };
 	    _paddingSpec;
 	    _canvasRect;
+	    _backgroundMark;
 	    constructor(spec, option) {
 	        super(option);
 	        this._theme = option.getTheme();
@@ -58584,7 +58728,8 @@
 	            getChartLayoutRect: () => this._layoutRect,
 	            getChartViewRect: () => this._viewRect,
 	            getChart: () => this,
-	            globalScale: this._globalScale
+	            globalScale: this._globalScale,
+	            onError: this._option.onError
 	        };
 	        this._stack = new Stack(this);
 	        this._spec = spec;
@@ -58592,6 +58737,7 @@
 	    created() {
 	        this.transformSpec(this._spec);
 	        this.createGlobalScale();
+	        this.createBackground(this._spec.background);
 	        this.createLayout();
 	        this.createRegion(this._spec.region);
 	        this.createSeries(this._spec.series);
@@ -58628,6 +58774,28 @@
 	        this._updateLayoutRect(viewBox);
 	        this.setLayoutTag(true);
 	    }
+	    createBackground(bg) {
+	        if (!bg) {
+	            return;
+	        }
+	        if (typeof bg !== 'object') {
+	            return;
+	        }
+	        this._backgroundMark = Factory.createMark(MarkTypeEnum.group, 'chart-background', {
+	            model: this,
+	            map: this._option.map,
+	            getCompiler: this.getCompiler,
+	            globalScale: this._globalScale
+	        });
+	        this._backgroundMark.created();
+	        this._backgroundMark.setStyle(convertBackgroundSpec(bg));
+	        this._backgroundMark.setStyle({
+	            x: () => this._viewBox.x1,
+	            y: () => this._viewBox.y1,
+	            width: () => this._viewBox.x2 - this._viewBox.x1,
+	            height: () => this._viewBox.y2 - this._viewBox.y1
+	        });
+	    }
 	    createRegion(regionSpec) {
 	        if (!regionSpec) {
 	            return;
@@ -58653,7 +58821,9 @@
 	                spec.data = this.getSeriesData(spec.dataId, spec.dataIndex);
 	            }
 	            else {
-	                spec.data = dataToDataView(spec.data, this._dataSet, this._spec.data);
+	                spec.data = dataToDataView(spec.data, this._dataSet, this._spec.data, {
+	                    onError: this._option.onError
+	                });
 	            }
 	            if (this._option.animation === false) {
 	                spec.animation = false;
@@ -58772,7 +58942,9 @@
 	            if (this._spec.zField || (this._spec.series && this._spec.series.some((s) => s.zField))) {
 	                use3dLayout = true;
 	            }
-	            const layout = new (Factory.getLayout(this._spec.layout?.type ?? (use3dLayout ? 'layout3d' : 'base')))(this._spec.layout);
+	            const layout = new (Factory.getLayout(this._spec.layout?.type ?? (use3dLayout ? 'layout3d' : 'base')))(this._spec.layout, {
+	                onError: this._option.onError
+	            });
 	            this._layoutFunc = layout.layoutItems.bind(layout);
 	        }
 	    }
@@ -58990,7 +59162,8 @@
 	    }
 	    getSeriesData(id, index) {
 	        if (!this._spec.data) {
-	            throw new Error('no data in spec!');
+	            this._option.onError('no data in spec!');
+	            return null;
 	        }
 	        if (typeof id === 'string') {
 	            const metchData = this._spec.data.filter((data) => {
@@ -58999,13 +59172,15 @@
 	            if (metchData[0]) {
 	                return metchData[0];
 	            }
-	            throw new Error(`no data matches dataId ${id}!`);
+	            this._option.onError(`no data matches dataId ${id}!`);
+	            return null;
 	        }
 	        if (typeof index === 'number') {
 	            if (this._spec.data[index]) {
 	                return this._spec.data[index];
 	            }
-	            throw new Error(`no data matches dataIndex ${index}!`);
+	            this._option.onError(`no data matches dataIndex ${index}!`);
+	            return null;
 	        }
 	        return this._spec.data[0];
 	    }
@@ -59195,7 +59370,8 @@
 	            large: spec.large,
 	            largeThreshold: spec.largeThreshold,
 	            progressiveStep: spec.progressiveStep,
-	            progressiveThreshold: spec.progressiveThreshold
+	            progressiveThreshold: spec.progressiveThreshold,
+	            background: spec.seriesBackground
 	        };
 	        return series;
 	    }
@@ -59255,6 +59431,7 @@
 	        });
 	    }
 	    compile() {
+	        this.compileBackground();
 	        this.compileLayout();
 	        this.compileRegions();
 	        this.compileSeries();
@@ -59275,6 +59452,21 @@
 	        const { width, height } = this.getCanvasRect();
 	        this.getCompiler().setSize(width, height);
 	    }
+	    compileBackground() {
+	        if (!this._backgroundMark) {
+	            return;
+	        }
+	        this._backgroundMark.compile();
+	        this._backgroundMark
+	            .getProduct()
+	            ?.configure({
+	            context: {
+	                model: this
+	            }
+	        })
+	            .layout(() => {
+	        });
+	    }
 	    compileRegions() {
 	        this._option.performanceHook?.beforeRegionCompile?.();
 	        this.getAllRegions().forEach(r => {
@@ -59319,7 +59511,6 @@
 	        }
 	        if (model && mark.isUpdated) {
 	            model.bindSceneNode?.(sceneRoot.elements[0]);
-	            model.setAttributeTag(true);
 	            return;
 	        }
 	        if (mark.markType === 'group') {
@@ -61063,7 +61254,7 @@
 	        if (isFunction(dataKey)) {
 	            return dataKey(datum, index);
 	        }
-	        throw new Error(`invalid dataKey: ${dataKey}`);
+	        this._option.onError(`invalid dataKey: ${dataKey}`);
 	    }
 	    _addDataIndexAndKey() {
 	        if (this._rawData?.dataSet) {
@@ -63941,13 +64132,14 @@
 	        }
 	        return lineMark;
 	    }
-	    initSymbolMark(progressive) {
+	    initSymbolMark(progressive, isSeriesMark) {
 	        this._symbolMark = this._createMark(lineLikeSeriesMarkMap.point, {
 	            morph: shouldDoMorph(this._spec.animation, this._spec.morph, userAnimationConfig('point', this._spec)),
 	            defaultMorphElementKey: this.getDimensionField()[0],
 	            groupKey: this._seriesField,
 	            label: merge$2({ animation: this._spec.animation }, this._spec.label),
-	            progressive
+	            progressive,
+	            isSeriesMark: !!isSeriesMark
 	        });
 	        return this._symbolMark;
 	    }
@@ -64094,8 +64286,9 @@
 	            large: this._spec.large,
 	            largeThreshold: this._spec.largeThreshold
 	        };
-	        this.initLineMark(progressive);
-	        this.initSymbolMark(progressive);
+	        const seriesMark = this._spec.seriesMark ?? 'line';
+	        this.initLineMark(progressive, seriesMark === 'line');
+	        this.initSymbolMark(progressive, seriesMark === 'point');
 	    }
 	    initMarkStyle() {
 	        this.initLineMarkStyle(this._direction);
@@ -64110,8 +64303,11 @@
 	        }
 	    }
 	    getSeriesStyle(datum) {
+	        const isLineAsSeriesMark = this._spec.seriesMark !== 'point';
 	        return (attribute) => {
-	            attribute === 'fill' && (attribute = 'stroke');
+	            if (isLineAsSeriesMark) {
+	                attribute === 'fill' && (attribute = 'stroke');
+	            }
 	            return this._seriesMark?.getAttribute(attribute, datum) ?? null;
 	        };
 	    }
@@ -64549,14 +64745,15 @@
 	            largeThreshold: this._spec.largeThreshold
 	        };
 	        const isAreaVisible = this._spec.area?.visible !== false && this._spec.area?.style?.visible !== false;
+	        const seriesMark = this._spec.seriesMark ?? 'area';
 	        this._areaMark = this._createMark(AreaSeries.mark.area, {
 	            groupKey: this._seriesField,
 	            defaultMorphElementKey: this.getDimensionField()[0],
 	            progressive,
-	            isSeriesMark: isAreaVisible
+	            isSeriesMark: isAreaVisible && seriesMark === 'area'
 	        });
-	        this.initLineMark(progressive, !isAreaVisible);
-	        this.initSymbolMark(progressive);
+	        this.initLineMark(progressive, seriesMark === 'line' || (seriesMark === 'area' && !isAreaVisible));
+	        this.initSymbolMark(progressive, seriesMark === 'point');
 	    }
 	    initMarkStyle() {
 	        const userCurveType = this.getSpec().area?.style?.curveType ?? this.getSpec().line?.style?.curveType;
@@ -65010,13 +65207,16 @@
 	    longitudeToData(lon) {
 	    }
 	    dataToPositionX(data) {
-	        throw new Error('Method not implemented.');
+	        this._option.onError('Method not implemented.');
+	        return 0;
 	    }
 	    dataToPositionY(data) {
-	        throw new Error('Method not implemented.');
+	        this._option.onError('Method not implemented.');
+	        return 0;
 	    }
 	    dataToPositionZ(data) {
-	        throw new Error('Method not implemented.');
+	        this._option.onError('Method not implemented.');
+	        return 0;
 	    }
 	    release() {
 	        super.release();
@@ -65131,10 +65331,10 @@
 	        this._valueField = this._spec.valueField;
 	        this._spec.nameProperty && (this._nameProperty = this._spec.nameProperty);
 	        if (!this.map) {
-	            throw new Error(`map type '${this.map}' is not specified !`);
+	            this._option.onError(`map type '${this.map}' is not specified !`);
 	        }
 	        if (!geoSourceMap.get(this.map)) {
-	            throw new Error(`'${this.map}' data is not registered !`);
+	            this._option.onError(`'${this.map}' data is not registered !`);
 	        }
 	    }
 	    initData() {
@@ -65144,7 +65344,7 @@
 	        registerDataSetInstanceTransform(this._dataSet, 'lookup', lookup);
 	        const features = geoSourceMap.get(this.map);
 	        if (!features) {
-	            throw Error('no valid map data found!');
+	            this._option.onError('no valid map data found!');
 	        }
 	        const mapData = new DataView(this._dataSet);
 	        mapData
@@ -65350,10 +65550,12 @@
 	        return '';
 	    }
 	    dataToPositionX(data) {
-	        throw new Error('Method not implemented.');
+	        this._option.onError('Method not implemented.');
+	        return 0;
 	    }
 	    dataToPositionY(data) {
-	        throw new Error('Method not implemented.');
+	        this._option.onError('Method not implemented.');
+	        return 0;
 	    }
 	    viewDataUpdate(d) {
 	        super.viewDataUpdate(d);
@@ -66900,10 +67102,12 @@
 	        }
 	        if (isArray$3(spec)) {
 	            if (isNil(field)) {
-	                throw new Error(`${key}Field is required.`);
+	                this._option.onError(`${key}Field is required.`);
+	                return spec;
 	            }
 	            if (spec.length > 2) {
-	                throw new Error(`${key} length is invalid, specify up to 2 ${key}s.`);
+	                this._option.onError(`${key} length is invalid, specify up to 2 ${key}s.`);
+	                return spec;
 	            }
 	            const scaleName = `${PREFIX}_series_scatter_${this.id}_scale_${key}`;
 	            this._option.globalScale.registerModelScale({
@@ -66924,7 +67128,8 @@
 	        }
 	        if (isObject$f(spec)) {
 	            if (isNil(field)) {
-	                throw new Error(`${key}Field is required.`);
+	                this._option.onError(`${key}Field is required.`);
+	                return spec;
 	            }
 	            const scaleName = `${PREFIX}_series_scatter_${this.id}_scale_${key}`;
 	            const visualSpec = {
@@ -66945,7 +67150,8 @@
 	                field
 	            };
 	        }
-	        throw new Error(`${key} attribute is invalid.`);
+	        this._option.onError(`${key} attribute is invalid.`);
+	        return spec;
 	    }
 	    getSizeAttribute(field, sizeSpec) {
 	        if (isNil(sizeSpec)) {
@@ -67257,9 +67463,10 @@
 	            largeThreshold: this._spec.largeThreshold
 	        };
 	        const isAreaVisible = this._spec.area?.visible !== false && this._spec.area?.style?.visible !== false;
-	        this.initAreaMark(progressive, isAreaVisible);
-	        this.initLineMark(progressive, !isAreaVisible);
-	        this.initSymbolMark(progressive);
+	        const seriesMark = this._spec.seriesMark ?? 'area';
+	        this.initAreaMark(progressive, isAreaVisible && seriesMark === 'area');
+	        this.initLineMark(progressive, seriesMark === 'line' || (seriesMark === 'area' && !isAreaVisible));
+	        this.initSymbolMark(progressive, seriesMark === 'point');
 	    }
 	    initMarkStyle() {
 	        this.initAreaMarkStyle();
@@ -70778,6 +70985,16 @@
 	    }
 	    setValueFieldToPercent() {
 	    }
+	    updateSpec(spec) {
+	        const originalSpec = this._originalSpec;
+	        const result = super.updateSpec(spec);
+	        if (!isEqual$1(originalSpec, spec)) {
+	            result.reMake = true;
+	            result.reCompile = true;
+	            return result;
+	        }
+	        return result;
+	    }
 	}
 
 	class WordCloudSeries extends BaseWordCloudSeries {
@@ -73793,6 +74010,29 @@
 	    else {
 	        data = data[0];
 	    }
+	    if (op.sourceField !== 'source' || op.targetField !== 'target') {
+	        for (const key in data) {
+	            if (key === 'links') {
+	                const updatedData = [];
+	                data[key].forEach((datum) => {
+	                    const updatedDatum = {};
+	                    for (const key in datum) {
+	                        if (key === op.sourceField) {
+	                            updatedDatum.source = datum[op.sourceField];
+	                        }
+	                        else if (key === op.targetField) {
+	                            updatedDatum.target = datum[op.targetField];
+	                        }
+	                        else {
+	                            updatedDatum[key] = datum[key];
+	                        }
+	                    }
+	                    updatedData.push(updatedDatum);
+	                });
+	                data[key] = updatedData;
+	            }
+	        }
+	    }
 	    const layout = new SankeyLayout(op);
 	    const result = [];
 	    result.push(layout.layout(data, view));
@@ -73972,13 +74212,15 @@
 	                            y1: this._viewBox.y2
 	                        };
 	                    },
+	                    sourceField: this._spec.sourceField,
+	                    targetField: this._spec.targetField,
 	                    direction: this._spec.direction,
-	                    nodeAlign: this._spec.nodeAlign,
-	                    nodeGap: this._spec.nodeGap,
-	                    nodeWidth: this._spec.nodeWidth,
+	                    nodeAlign: this._spec.nodeAlign ?? 'justify',
+	                    nodeGap: this._spec.nodeGap ?? 8,
+	                    nodeWidth: this._spec.nodeWidth ?? 10,
 	                    linkWidth: this._spec.linkWidth,
 	                    minStepWidth: this._spec.minStepWidth,
-	                    minNodeHeight: this._spec.minNodeHeight,
+	                    minNodeHeight: this._spec.minNodeHeight ?? 4,
 	                    minLinkHeight: this._spec.minLinkHeight,
 	                    iterations: this._spec.iterations,
 	                    nodeKey: this._spec.nodeKey,
@@ -75756,7 +75998,8 @@
 	            invalidType: spec.invalidType || 'break',
 	            point: spec.point,
 	            line: spec.line,
-	            area: spec.area
+	            area: spec.area,
+	            seriesMark: spec.seriesMark ?? 'area'
 	        };
 	    }
 	    transformSpec(spec) {
@@ -76293,7 +76536,8 @@
 	            ...super._getDefaultSeriesSpec(spec),
 	            invalidType: spec.invalidType || 'break',
 	            point: spec.point,
-	            line: spec.line
+	            line: spec.line,
+	            seriesMark: spec.seriesMark ?? 'line'
 	        };
 	    }
 	    transformSpec(spec) {
@@ -76587,7 +76831,8 @@
 	            percent: spec.percent,
 	            area: merge$2({
 	                visible: false
-	            }, spec.area)
+	            }, spec.area),
+	            seriesMark: spec.seriesMark ?? 'area'
 	        };
 	    }
 	    transformSpec(spec) {
@@ -76984,9 +77229,13 @@
 	                }
 	            }
 	            else {
-	                spec.data = dataToDataView(spec.data, this._dataSet, this._spec.data);
+	                spec.data = dataToDataView(spec.data, this._dataSet, this._spec.data, {
+	                    onError: this._option.onError
+	                });
 	                if (spec.type === SeriesTypeEnum.link) {
-	                    spec.dataDot = dataToDataView(this._spec.series[spec.dotSeriesIndex].data, this._dataSet, this._spec.data);
+	                    spec.dataDot = dataToDataView(this._spec.series[spec.dotSeriesIndex].data, this._dataSet, this._spec.data, {
+	                        onError: this._option.onError
+	                    });
 	                }
 	            }
 	            if (spec.type === SeriesTypeEnum.link) {
@@ -80457,7 +80706,8 @@
 	                inverse
 	            }, options);
 	        }
-	        throw `Component ${componentName} not found`;
+	        options.onError(`Component ${componentName} not found`);
+	        return null;
 	    }
 	    static createComponent(spec, options) {
 	        if (!this.type.startsWith(CartesianAxis.type)) {
@@ -81480,7 +81730,8 @@
 	        if (C) {
 	            return new C(spec, options);
 	        }
-	        throw `Component ${componentName} not found`;
+	        options.onError(`Component ${componentName} not found`);
+	        return null;
 	    }
 	    static createComponent(spec, options) {
 	        if (!this.type.startsWith(PolarAxis.type)) {
@@ -82008,7 +82259,7 @@
 	    selectedData.forEach(s => {
 	        selectedFilter[s] = true;
 	    });
-	    const datumField = field();
+	    const datumField = field() ?? DEFAULT_DATA_SERIES_FIELD;
 	    if (isValid(datumField)) {
 	        data = data.filter(d => selectedFilter[d[datumField]] === true);
 	    }
@@ -82717,7 +82968,6 @@
 	    }
 	    updateDatum(datum) {
 	        this._activeDatum = datum;
-	        this.setAttributeTag(true);
 	        this._displayData.updateData();
 	        const attrs = this._getIndicatorAttrs();
 	        this._createOrUpdateIndicatorComponent(attrs);
@@ -82976,9 +83226,6 @@
 	    projection;
 	    constructor(projectionSpec) {
 	        this.projection = projection(projectionSpec.type)();
-	        if (this.projection === null) {
-	            throw Error('unsupported projection type!');
-	        }
 	    }
 	    fit(start, size, features) {
 	        const fitData = { type: 'FeatureCollection', features };
@@ -83146,6 +83393,10 @@
 	    }
 	    initProjection() {
 	        this._projection = new Projection(this._projectionSpec);
+	        if (this._projection.projection === null) {
+	            this._option.onError('unsupported projection type!');
+	            return;
+	        }
 	    }
 	    coordinateHelper() {
 	        const helper = {
@@ -85213,7 +85464,8 @@
 	                }
 	            }
 	        }
-	        throw new Error('need at least one series');
+	        this._option.onError('need at least one series');
+	        return null;
 	    }
 	    clear() {
 	        if (this._markerComponent) {
@@ -87549,6 +87801,9 @@
 	        else if (targetDimensionInfo.length > 1) {
 	            const dimensionAxisInfo = targetDimensionInfo.filter(info => {
 	                const axis = info.axis;
+	                if (!isDiscrete(axis.getScale().type)) {
+	                    return false;
+	                }
 	                let firstSeries;
 	                for (const region of axis?.getRegions() ?? []) {
 	                    for (const series of region.getSeries()) {
@@ -87561,7 +87816,7 @@
 	                        break;
 	                    }
 	                }
-	                if (isValid(firstSeries) && firstSeries.getDimensionField() === firstSeries.fieldY) {
+	                if (isValid(firstSeries) && firstSeries.getDimensionField()[0] === firstSeries.fieldY[0]) {
 	                    return axis.orient === 'left' || axis.orient === 'right';
 	                }
 	                return axis.orient === 'bottom' || axis.orient === 'top';
@@ -88286,7 +88541,8 @@
 	    _rowElements;
 	    _gridInfo;
 	    _elementMap = new Map();
-	    constructor(gridInfo) {
+	    _onError;
+	    constructor(gridInfo, ctx) {
 	        this.standardizationSpec(gridInfo);
 	        this._gridInfo = gridInfo;
 	        this._col = gridInfo.col;
@@ -88295,6 +88551,7 @@
 	        this._rowSize = new Array(this._row).fill(null);
 	        this._colElements = new Array(this._col).fill([]);
 	        this._rowElements = new Array(this._row).fill([]);
+	        this._onError = ctx?.onError;
 	        this.initUserSetting();
 	    }
 	    standardizationSpec(gridInfo) {