@wil-works/evoke-charts 0.3.0 → 0.3.1

package/README.md

@@ -1,5 +1,7 @@
 # Evoke Charts
 
+> **⚠️ 本包正在开发迭代中，尚未发布正式版：API、图表类型与视觉细节可能随版本调整，请勿用于生产环境。**
+
 `@wil-works/evoke-charts` — 零依赖 Canvas 自绘图表库（Vue 3）。Evoke 生态的独立图表包，不依赖任何第三方图表引擎，也不依赖 Evoke 其他组件库。
 
 **在线文档**：[evoke-charts.wil-works.com](https://evoke-charts.wil-works.com) — 全部图表类型、完整配置项与在线示例。

package/dist/evoke-charts.css

@@ -1,5 +1,5 @@
 
-.ev-chart[data-v-ce034a2a] {
+.ev-chart[data-v-0c5d944e] {
   position: relative;
   /* 容器不带边框：是否加框、加多粗由宿主决定，图表只负责内容；
      圆角裁剪下沉到 canvas 与浮层自身（border-radius: inherit） */
@@ -9,7 +9,7 @@
 }
 
 /* 关键：canvas 必须能接收鼠标事件 */
-.ev-chart__canvas[data-v-ce034a2a] {
+.ev-chart__canvas[data-v-0c5d944e] {
   position: absolute;
   top: 0;
   left: 0;
@@ -23,14 +23,14 @@
 
 /* HTML 覆盖层：只在内容层，不与 canvas 抢交互（子元素可自行 pointer-events:auto），
    也不压过 tooltip（z-index 100） */
-.ev-chart__overlay[data-v-ce034a2a] {
+.ev-chart__overlay[data-v-0c5d944e] {
   position: absolute;
   inset: 0;
   z-index: 1;
   pointer-events: none;
   border-radius: inherit;
 }
-.ev-chart__tooltip[data-v-ce034a2a] {
+.ev-chart__tooltip[data-v-0c5d944e] {
   position: absolute;
   pointer-events: none;
   z-index: 100;
@@ -51,47 +51,47 @@
 }
 
 /* tooltip 淡入淡出（仅 opacity，位置由 left/top transition 负责） */
-.ev-chart-tooltip-enter-active[data-v-ce034a2a],
-.ev-chart-tooltip-leave-active[data-v-ce034a2a] {
+.ev-chart-tooltip-enter-active[data-v-0c5d944e],
+.ev-chart-tooltip-leave-active[data-v-0c5d944e] {
   transition: opacity 0.18s ease;
 }
 
 /* 进入期间禁用位置 transition，避免首次出现时从旧位置滑入 */
-.ev-chart-tooltip-enter-active[data-v-ce034a2a] {
+.ev-chart-tooltip-enter-active[data-v-0c5d944e] {
   transition:
     opacity 0.18s ease,
     left 0s,
     top 0s;
 }
-.ev-chart-tooltip-enter-from[data-v-ce034a2a],
-.ev-chart-tooltip-leave-to[data-v-ce034a2a] {
+.ev-chart-tooltip-enter-from[data-v-0c5d944e],
+.ev-chart-tooltip-leave-to[data-v-0c5d944e] {
   opacity: 0;
 }
 
 /* v-html 注入的内容不带 scoped 属性，需用 :deep() 穿透 */
-[data-v-ce034a2a] .ev-chart__tooltip-title {
+[data-v-0c5d944e] .ev-chart__tooltip-title {
   color: var(--ev-text-color-secondary, #6b7280);
   font-size: 12px;
   margin-bottom: 6px;
   font-weight: 500;
 }
-[data-v-ce034a2a] .ev-chart__tooltip-item {
+[data-v-0c5d944e] .ev-chart__tooltip-item {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 2px 0;
 }
-[data-v-ce034a2a] .ev-chart__tooltip-dot {
+[data-v-0c5d944e] .ev-chart__tooltip-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   flex-shrink: 0;
   display: inline-block;
 }
-[data-v-ce034a2a] .ev-chart__tooltip-name {
+[data-v-0c5d944e] .ev-chart__tooltip-name {
   color: var(--ev-text-color-primary, #111827);
 }
-[data-v-ce034a2a] .ev-chart__tooltip-value {
+[data-v-0c5d944e] .ev-chart__tooltip-value {
   color: var(--ev-text-color-primary, #111827);
   font-weight: 600;
   margin-left: auto;
@@ -100,7 +100,7 @@
 }
 
 /* ══════ 空数据占位 ══════ */
-.ev-chart__empty[data-v-ce034a2a] {
+.ev-chart__empty[data-v-0c5d944e] {
   position: absolute;
   inset: 0;
   border-radius: inherit;
@@ -113,7 +113,7 @@
   gap: 14px;
   user-select: none;
 }
-.ev-chart__empty-icon-wrap[data-v-ce034a2a] {
+.ev-chart__empty-icon-wrap[data-v-0c5d944e] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -122,19 +122,19 @@
   border-radius: 16px;
   background: var(--ev-fill-color-light, #f5f7fa);
 }
-.ev-chart__empty-img[data-v-ce034a2a] {
+.ev-chart__empty-img[data-v-0c5d944e] {
   width: 32px;
   height: 32px;
   opacity: 0.4;
 }
-.ev-chart__empty-text[data-v-ce034a2a] {
+.ev-chart__empty-text[data-v-0c5d944e] {
   letter-spacing: 0.04em;
   font-weight: 500;
   font-size: 13px;
 }
 
 /* ══════ 加载中骨架 ══════ */
-.ev-chart__loading[data-v-ce034a2a] {
+.ev-chart__loading[data-v-0c5d944e] {
   position: absolute;
   inset: 0;
   border-radius: inherit;
@@ -143,20 +143,20 @@
   justify-content: center;
   background: var(--ev-bg-color, #ffffff);
 }
-.ev-chart__loading-bars[data-v-ce034a2a] {
+.ev-chart__loading-bars[data-v-0c5d944e] {
   display: flex;
   align-items: flex-end;
   gap: 6px;
   height: 60px;
 }
-.ev-chart__loading-bar[data-v-ce034a2a] {
+.ev-chart__loading-bar[data-v-0c5d944e] {
   width: 10px;
   height: 40px;
   border-radius: 4px;
   background: var(--ev-border-color, #e2e8f0);
-  animation: ev-chart-shimmer-ce034a2a 1.2s ease-in-out infinite;
+  animation: ev-chart-shimmer-0c5d944e 1.2s ease-in-out infinite;
 }
-@keyframes ev-chart-shimmer-ce034a2a {
+@keyframes ev-chart-shimmer-0c5d944e {
 0%,
   100% {
     transform: scaleY(0.4);
@@ -169,7 +169,7 @@
 }
 
 /* ══════ 错误边界 ══════ */
-.ev-chart__error[data-v-ce034a2a] {
+.ev-chart__error[data-v-0c5d944e] {
   position: absolute;
   inset: 0;
   border-radius: inherit;
@@ -183,13 +183,13 @@
   padding: 20px;
   text-align: center;
 }
-.ev-chart__error-icon[data-v-ce034a2a] {
+.ev-chart__error-icon[data-v-0c5d944e] {
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 30px;
 }
-.ev-chart__error-text[data-v-ce034a2a] {
+.ev-chart__error-text[data-v-0c5d944e] {
   font-size: 12px;
   line-height: 1.5;
   max-width: 80%;
@@ -197,17 +197,17 @@
 }
 
 /* ══════ 进入/离开淡入淡出 ══════ */
-.ev-chart-fade-enter-active[data-v-ce034a2a],
-.ev-chart-fade-leave-active[data-v-ce034a2a] {
+.ev-chart-fade-enter-active[data-v-0c5d944e],
+.ev-chart-fade-leave-active[data-v-0c5d944e] {
   transition: opacity 0.2s ease;
 }
-.ev-chart-fade-enter-from[data-v-ce034a2a],
-.ev-chart-fade-leave-to[data-v-ce034a2a] {
+.ev-chart-fade-enter-from[data-v-0c5d944e],
+.ev-chart-fade-leave-to[data-v-0c5d944e] {
   opacity: 0;
 }
 
 /* ══════ 无障碍：sr-only ══════ */
-.ev-chart__sr-only[data-v-ce034a2a] {
+.ev-chart__sr-only[data-v-0c5d944e] {
   position: absolute;
   width: 1px;
   height: 1px;

package/dist/index.mjs

@@ -121,19 +121,62 @@ function estimateTextWidth(text, fontSize = 12) {
 	}
 	return width;
 }
+/** 解析 `#rgb` / `#rrggbb` / `rgb()` / `rgba()` 为通道数组；无法识别返回 null */
+function parseColorChannels(color) {
+	if (typeof color !== "string") return null;
+	const text = color.trim();
+	const hex = text.replace(/^#/, "");
+	if (/^[0-9a-fA-F]{3}$/.test(hex)) return [
+		0,
+		1,
+		2
+	].map((i) => parseInt(hex[i] + hex[i], 16));
+	if (/^[0-9a-fA-F]{6}$/.test(hex)) return [
+		0,
+		2,
+		4
+	].map((i) => parseInt(hex.slice(i, i + 2), 16));
+	const rgbMatch = text.match(/^rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i);
+	if (rgbMatch) return [
+		1,
+		2,
+		3
+	].map((i) => Math.round(parseFloat(rgbMatch[i])));
+	return null;
+}
+/** 浅色底判断（YIQ）：底色可能来自令牌、混合出的 `rgb()` 或自定义主题 */
+function isLightColor(color) {
+	const ch = parseColorChannels(color);
+	if (!ch) return true;
+	return (ch[0] * 299 + ch[1] * 587 + ch[2] * 114) / 1e3 >= 150;
+}
+function relativeLuminance(ch) {
+	const [r, g, b] = ch.map((v) => {
+		const s = v / 255;
+		return s <= .03928 ? s / 12.92 : Math.pow((s + .055) / 1.055, 2.4);
+	});
+	return .2126 * r + .7152 * g + .0722 * b;
+}
+/** 底色上的文字取反色：白字/深字谁对比度高用谁——中间调底色（如逐层提亮后的蓝）
+*  用亮度阈值会误判成白字，导致浅底白字看不清 */
 function getContrastText(bgColor) {
-	const hex = bgColor.replace("#", "");
-	let r = 0, g = 0, b = 0;
-	if (hex.length === 3) {
-		r = parseInt(hex[0] + hex[0], 16);
-		g = parseInt(hex[1] + hex[1], 16);
-		b = parseInt(hex[2] + hex[2], 16);
-	} else if (hex.length >= 6) {
-		r = parseInt(hex.slice(0, 2), 16);
-		g = parseInt(hex.slice(2, 4), 16);
-		b = parseInt(hex.slice(4, 6), 16);
-	}
-	return (r * 299 + g * 587 + b * 114) / 1e3 >= 150 ? "#111827" : "#ffffff";
+	const ch = parseColorChannels(bgColor);
+	if (!ch) return "#111827";
+	const luminance = relativeLuminance(ch);
+	const againstWhite = 1.05 / (luminance + .05);
+	return (luminance + .05) / (relativeLuminance([
+		17,
+		24,
+		39
+	]) + .05) >= againstWhite ? "#111827" : "#ffffff";
+}
+/** 颜色向 target 混合（ratio 0-1），返回 `#rrggbb`：同色系逐层提亮/压暗用 */
+function mixColor(color, ratio, target) {
+	const from = parseColorChannels(color);
+	const to = parseColorChannels(target);
+	if (!from || !to) return color;
+	const r = Math.max(0, Math.min(1, ratio));
+	return `#${from.map((v, i) => Math.round(v + (to[i] - v) * r)).map((v) => v.toString(16).padStart(2, "0")).join("")}`;
 }
 function isMissingValue(v) {
 	return v === null || v === void 0 || Number.isNaN(v);
@@ -1493,6 +1536,12 @@ function collectLegendItems(options, theme, hiddenSeries) {
 		color: d.color || theme.colors[i % theme.colors.length],
 		hidden: hiddenSeries.has(d.label || "")
 	}));
+	if (options.type === "scatter") return (options.scatterData || []).map((d, i) => ({
+		name: d.label || `P${i + 1}`,
+		label: fmt(d.label || `P${i + 1}`),
+		color: d.color || theme.colors[i % theme.colors.length],
+		hidden: hiddenSeries.has(d.label || `P${i + 1}`)
+	}));
 	return (options.series || []).map((s, i) => ({
 		name: s.name,
 		label: fmt(s.name),
@@ -1671,12 +1720,69 @@ function renderToolbox(ctx, hoveredFeature) {
 		canvasCtx.restore();
 	});
 }
+/**
+* items: [{ angle, r, text }]（angle 扇区中角，r 引线锚点半径）
+* cfg: { canvasCtx, centerX, centerY, plotArea, theme } + 可选覆写
+*/
+function drawCalloutLabels(items, cfg) {
+	const { canvasCtx, centerX, centerY, plotArea, theme, radialLen = 14, stubLen = 12, textGap = 5, minGap = 16, maxShift = 10, font = "12px Inter, sans-serif", textColor = theme.textColor, lineColor = theme.textColorSecondary } = cfg;
+	if (!canvasCtx || items.length === 0) return;
+	const topLimit = plotArea.y + 4;
+	const bottomLimit = plotArea.y + plotArea.height - 4;
+	const layoutSide = (side, sign) => {
+		const sorted = side.map((it) => ({
+			...it,
+			y: centerY + Math.sin(it.angle) * (it.r + radialLen),
+			visible: true
+		})).sort((a, b) => a.y - b.y);
+		let lastY = -Infinity;
+		sorted.forEach((it) => {
+			let y = it.y;
+			if (y < lastY + minGap) {
+				const shifted = lastY + minGap;
+				if (shifted - it.y <= maxShift && shifted <= bottomLimit) y = shifted;
+				else {
+					it.visible = false;
+					return;
+				}
+			}
+			if (y > bottomLimit || y < topLimit) {
+				it.visible = false;
+				return;
+			}
+			it.y = y;
+			lastY = y;
+		});
+		sorted.forEach((it) => {
+			if (!it.visible) return;
+			const dirX = Math.cos(it.angle);
+			const dirY = Math.sin(it.angle);
+			const p1x = centerX + dirX * (it.r + radialLen);
+			const p1y = centerY + dirY * (it.r + radialLen);
+			const p2x = p1x + sign * stubLen;
+			canvasCtx.save();
+			canvasCtx.strokeStyle = lineColor;
+			canvasCtx.lineWidth = 1;
+			canvasCtx.beginPath();
+			canvasCtx.moveTo(centerX + dirX * it.r, centerY + dirY * it.r);
+			canvasCtx.lineTo(p1x, p1y);
+			canvasCtx.lineTo(p2x, it.y);
+			canvasCtx.stroke();
+			canvasCtx.restore();
+			canvasCtx.save();
+			canvasCtx.fillStyle = textColor;
+			canvasCtx.font = font;
+			canvasCtx.textAlign = sign === 1 ? "left" : "right";
+			canvasCtx.textBaseline = "middle";
+			canvasCtx.fillText(it.text, p2x + sign * textGap, it.y);
+			canvasCtx.restore();
+		});
+	};
+	layoutSide(items.filter((it) => Math.cos(it.angle) >= 0), 1);
+	layoutSide(items.filter((it) => Math.cos(it.angle) < 0), -1);
+}
 //#endregion
 //#region src/renderer/charts-basic.js
-var PIE_RADIAL_LEN = 14;
-var PIE_STUB_LEN = 12;
-var PIE_TEXT_GAP = 5;
-var PIE_MAX_SHIFT = 10;
 function computePieMaxRadius(pieData, options, plotArea) {
 	const total = pieData.reduce((sum, d) => sum + d.value, 0);
 	if (total <= 0) return 30;
@@ -2295,70 +2401,21 @@ function renderPieChart(ctx, isDoughnut, isRose = false) {
 		if (progress > .9) {
 			const percentage = (data.value / total * 100).toFixed(1);
 			const text = percentMode ? `${percentage}%` : `${data.label || ""} (${percentage}%)`;
-			const r = isRose ? roseRadius : maxRadius;
 			labelItems.push({
 				angle: midAngle,
-				r,
-				color,
-				text,
-				y: centerY + Math.sin(midAngle) * (r + PIE_RADIAL_LEN),
-				visible: true
+				r: isRose ? roseRadius : maxRadius,
+				text
 			});
 		}
 		startAngle = endAngle;
 	});
-	if (labelItems.length > 0 && progress > .9) {
-		const minGap = 16;
-		const topLimit = plotArea.y + 4;
-		const bottomLimit = plotArea.y + plotArea.height - 4;
-		const layoutSide = (items, sign) => {
-			const sorted = [...items].sort((a, b) => a.y - b.y);
-			let lastY = -Infinity;
-			sorted.forEach((it) => {
-				let y = it.y;
-				if (y < lastY + minGap) {
-					const shifted = lastY + minGap;
-					if (shifted - it.y <= PIE_MAX_SHIFT && shifted <= bottomLimit) y = shifted;
-					else {
-						it.visible = false;
-						return;
-					}
-				}
-				if (y > bottomLimit || y < topLimit) {
-					it.visible = false;
-					return;
-				}
-				it.y = y;
-				lastY = y;
-			});
-			sorted.forEach((it) => {
-				if (!it.visible) return;
-				const dirX = Math.cos(it.angle);
-				const dirY = Math.sin(it.angle);
-				const p1x = centerX + dirX * (it.r + PIE_RADIAL_LEN);
-				const p1y = centerY + dirY * (it.r + PIE_RADIAL_LEN);
-				const p2x = p1x + sign * PIE_STUB_LEN;
-				canvasCtx.save();
-				canvasCtx.strokeStyle = theme.textColorSecondary;
-				canvasCtx.lineWidth = 1;
-				canvasCtx.beginPath();
-				canvasCtx.moveTo(centerX + dirX * it.r, centerY + dirY * it.r);
-				canvasCtx.lineTo(p1x, p1y);
-				canvasCtx.lineTo(p2x, it.y);
-				canvasCtx.stroke();
-				canvasCtx.restore();
-				canvasCtx.save();
-				canvasCtx.fillStyle = theme.textColor;
-				canvasCtx.font = "12px Inter, sans-serif";
-				canvasCtx.textAlign = sign === 1 ? "left" : "right";
-				canvasCtx.textBaseline = "middle";
-				canvasCtx.fillText(it.text, p2x + sign * PIE_TEXT_GAP, it.y);
-				canvasCtx.restore();
-			});
-		};
-		layoutSide(labelItems.filter((it) => Math.cos(it.angle) >= 0), 1);
-		layoutSide(labelItems.filter((it) => Math.cos(it.angle) < 0), -1);
-	}
+	if (labelItems.length > 0 && progress > .9) drawCalloutLabels(labelItems, {
+		canvasCtx,
+		centerX,
+		centerY,
+		plotArea,
+		theme
+	});
 	if (isDoughnut && options.gauge?.value !== void 0) {
 		canvasCtx.save();
 		canvasCtx.fillStyle = theme.textColor;
@@ -2401,6 +2458,10 @@ function renderScatterChart(ctx, yRange) {
 	const points = [];
 	const yFactor = Math.min(ctx.progress * 1.2, 1);
 	scatterData.forEach((point, i) => {
+		if (ctx.hiddenSeries.has(point.label || `P${i + 1}`)) {
+			points.push([NaN, NaN]);
+			return;
+		}
 		const x = scale.toX(point.x);
 		const finalY = scale.toY(point.y);
 		const animatedY = plotArea.y + plotArea.height - (plotArea.y + plotArea.height - finalY) * yFactor;
@@ -2553,6 +2614,20 @@ function renderRadarChart(ctx) {
 		canvasCtx.stroke();
 	}
 	canvasCtx.restore();
+	const sharedMax = indicators[0].max;
+	const sharedMin = indicators[0].min || 0;
+	if (sharedMax != null && indicators.every((ind) => (ind.max ?? sharedMax) === sharedMax && (ind.min || 0) === sharedMin)) {
+		canvasCtx.save();
+		canvasCtx.fillStyle = theme.textColorSecondary;
+		canvasCtx.font = "10px Inter, sans-serif";
+		canvasCtx.textAlign = "left";
+		canvasCtx.textBaseline = "middle";
+		for (let level = 1; level <= 5; level++) {
+			const v = sharedMin + (sharedMax - sharedMin) * level / 5;
+			canvasCtx.fillText(Number.isInteger(sharedMax) ? String(Math.round(v)) : v.toFixed(1), centerX + 5, centerY - radius * level / 5);
+		}
+		canvasCtx.restore();
+	}
 	canvasCtx.save();
 	canvasCtx.fillStyle = theme.textColorSecondary;
 	canvasCtx.font = "12px Inter, sans-serif";
@@ -2606,7 +2681,15 @@ function renderRadarChart(ctx) {
 				else canvasCtx.lineTo(p[0], p[1]);
 			});
 			canvasCtx.closePath();
-			canvasCtx.fillStyle = color + (hoverIndex >= 0 ? "50" : "30");
+			if (/^#[0-9a-fA-F]{6}$/.test(color)) {
+				const grad = canvasCtx.createLinearGradient(0, centerY - radius, 0, centerY + radius);
+				grad.addColorStop(0, color + (hoverIndex >= 0 ? "59" : "40"));
+				grad.addColorStop(1, color + "08");
+				canvasCtx.fillStyle = grad;
+			} else {
+				canvasCtx.fillStyle = color;
+				canvasCtx.globalAlpha = alpha * .18;
+			}
 			canvasCtx.fill();
 			canvasCtx.restore();
 		}
@@ -2619,15 +2702,17 @@ function renderRadarChart(ctx) {
 		});
 		canvasCtx.closePath();
 		canvasCtx.strokeStyle = color;
-		canvasCtx.lineWidth = hoverIndex >= 0 ? 2.5 : 2;
+		canvasCtx.lineWidth = hoverIndex >= 0 ? 2.5 : 1.5;
 		canvasCtx.stroke();
 		canvasCtx.restore();
 		canvasCtx.save();
 		canvasCtx.globalAlpha = alpha;
+		const showSymbol = s.showSymbol === true;
 		points.forEach((p, i) => {
 			const isHover = i === hoverIndex;
+			if (!showSymbol && !isHover) return;
 			canvasCtx.beginPath();
-			canvasCtx.arc(p[0], p[1], isHover ? 6 : 4, 0, Math.PI * 2);
+			canvasCtx.arc(p[0], p[1], isHover ? 6 : 3, 0, Math.PI * 2);
 			canvasCtx.fillStyle = isHover ? theme.backgroundColor : color;
 			canvasCtx.fill();
 			canvasCtx.strokeStyle = color;
@@ -2662,11 +2747,14 @@ function renderFunnelChart(ctx) {
 	const stepHeight = (plotArea.y + plotArea.height - 8 - topY) / funnelData.length;
 	const maxValue = Math.max(...funnelData.map((d) => d.value));
 	const drawData = options.pyramid === true ? [...funnelData].reverse() : funnelData;
+	const labelAlpha = Math.min(1, Math.max(0, (progress - .72) / .28));
+	const outsideLabels = [];
 	drawData.forEach((data, i) => {
 		const color = data.color || theme.colors[funnelData.indexOf(data) % theme.colors.length];
 		const isHover = i === hoverIndex;
-		const currentWidth = data.value / maxValue * maxWidth * progress;
-		const nextWidth = (drawData[i + 1]?.value ?? data.value * .5) / maxValue * maxWidth * progress;
+		const easedWidth = 1 - Math.pow(1 - progress, 3);
+		const currentWidth = data.value / maxValue * maxWidth * easedWidth;
+		const nextWidth = (drawData[i + 1]?.value ?? data.value * .5) / maxValue * maxWidth * easedWidth;
 		const y = topY + i * stepHeight;
 		const yOffset = isHover ? -3 : 0;
 		canvasCtx.save();
@@ -2681,48 +2769,67 @@ function renderFunnelChart(ctx) {
 		canvasCtx.strokeStyle = theme.backgroundColor;
 		canvasCtx.lineWidth = 2;
 		canvasCtx.stroke();
-		if (progress > .8) {
-			const labelY = y + stepHeight / 2 + yOffset;
-			const percentage = (data.value / drawData[0].value * 100).toFixed(1);
-			const label = `${data.label}`;
-			const valueText = `${data.value} (${percentage}%)`;
+		canvasCtx.restore();
+		if (labelAlpha <= 0) return;
+		const labelY = y + stepHeight / 2 + yOffset;
+		const percentage = (data.value / drawData[0].value * 100).toFixed(1);
+		const label = `${data.label}`;
+		const valueText = `${data.value} (${percentage}%)`;
+		canvasCtx.save();
+		canvasCtx.font = "bold 13px Inter, sans-serif";
+		const labelWidth = canvasCtx.measureText(label).width;
+		canvasCtx.font = "11px Inter, sans-serif";
+		const valueWidth = canvasCtx.measureText(valueText).width;
+		const minTextWidth = Math.max(labelWidth, valueWidth) + 28;
+		if ((currentWidth + nextWidth) / 2 >= minTextWidth && stepHeight >= 36) {
+			canvasCtx.globalAlpha = labelAlpha;
+			canvasCtx.fillStyle = theme.backgroundColor;
 			canvasCtx.font = "bold 13px Inter, sans-serif";
-			const labelWidth = canvasCtx.measureText(label).width;
+			canvasCtx.textAlign = "center";
+			canvasCtx.textBaseline = "middle";
+			canvasCtx.fillText(label, centerX, labelY - 9);
 			canvasCtx.font = "11px Inter, sans-serif";
-			const valueWidth = canvasCtx.measureText(valueText).width;
-			const minTextWidth = Math.max(labelWidth, valueWidth) + 16;
-			if ((currentWidth + nextWidth) / 2 >= minTextWidth) {
-				canvasCtx.fillStyle = theme.backgroundColor;
-				canvasCtx.font = "bold 13px Inter, sans-serif";
-				canvasCtx.textAlign = "center";
-				canvasCtx.textBaseline = "middle";
-				canvasCtx.fillText(label, centerX, labelY - 8);
-				canvasCtx.font = "11px Inter, sans-serif";
-				canvasCtx.fillText(valueText, centerX, labelY + 8);
-			} else {
-				const lineEndX = centerX + currentWidth / 2;
-				const textX = plotArea.x + plotArea.width - 4;
-				canvasCtx.save();
-				canvasCtx.strokeStyle = theme.textColorSecondary;
-				canvasCtx.lineWidth = 1;
-				canvasCtx.setLineDash([3, 3]);
-				canvasCtx.beginPath();
-				canvasCtx.moveTo(lineEndX, labelY);
-				canvasCtx.lineTo(textX - 4, labelY);
-				canvasCtx.stroke();
-				canvasCtx.setLineDash([]);
-				canvasCtx.restore();
-				canvasCtx.fillStyle = theme.textColor;
-				canvasCtx.font = "bold 12px Inter, sans-serif";
-				canvasCtx.textAlign = "right";
-				canvasCtx.textBaseline = "bottom";
-				canvasCtx.fillText(label, textX, labelY - 1);
-				canvasCtx.font = "11px Inter, sans-serif";
-				canvasCtx.fillStyle = theme.textColorSecondary;
-				canvasCtx.textBaseline = "top";
-				canvasCtx.fillText(valueText, textX, labelY + 1);
-			}
-		}
+			canvasCtx.fillText(valueText, centerX, labelY + 9);
+		} else outsideLabels.push({
+			labelY,
+			lineEndX: centerX + currentWidth / 2,
+			label,
+			valueText,
+			labelTextWidth: Math.max(labelWidth, valueWidth)
+		});
+		canvasCtx.restore();
+	});
+	outsideLabels.sort((a, b) => a.labelY - b.labelY);
+	const textX = plotArea.x + plotArea.width - 4;
+	let lastBottom = -Infinity;
+	outsideLabels.map((o) => {
+		const top = Math.max(o.labelY - 13, lastBottom + 2);
+		lastBottom = top + 36;
+		return {
+			...o,
+			top
+		};
+	}).forEach((o) => {
+		canvasCtx.save();
+		canvasCtx.globalAlpha = labelAlpha;
+		canvasCtx.strokeStyle = theme.textColorSecondary;
+		canvasCtx.lineWidth = 1;
+		canvasCtx.setLineDash([3, 3]);
+		canvasCtx.beginPath();
+		canvasCtx.moveTo(o.lineEndX, o.labelY);
+		canvasCtx.lineTo(textX - o.labelTextWidth - 10, o.top + 12);
+		canvasCtx.stroke();
+		canvasCtx.setLineDash([]);
+		const nameY = o.top + 12;
+		canvasCtx.fillStyle = theme.textColor;
+		canvasCtx.font = "bold 12px Inter, sans-serif";
+		canvasCtx.textAlign = "right";
+		canvasCtx.textBaseline = "bottom";
+		canvasCtx.fillText(o.label, textX, nameY);
+		canvasCtx.font = "11px Inter, sans-serif";
+		canvasCtx.fillStyle = theme.textColorSecondary;
+		canvasCtx.textBaseline = "top";
+		canvasCtx.fillText(o.valueText, textX, nameY + 2);
 		canvasCtx.restore();
 	});
 }
@@ -3206,42 +3313,40 @@ function squarifyTreemap(nodes, x, y, w, h, depth, result) {
 	});
 	return result;
 }
+function isRectWithinFocus(rect, focus) {
+	return rect.depth >= focus.depth && rect.x >= focus.x - .5 && rect.y >= focus.y - .5 && rect.x + rect.w <= focus.x + focus.w + .5 && rect.y + rect.h <= focus.y + focus.h + .5;
+}
 function renderTreemapChart(ctx) {
-	const { ctx: canvasCtx, theme, plotArea, options, progress, hoverIndex, valueFormatter } = ctx;
+	const { ctx: canvasCtx, theme, plotArea, options, progress, hoverIndex, valueFormatter, hoverAnimProgress = 1 } = ctx;
 	const rootData = options.treemapData || [];
 	if (rootData.length === 0) return;
 	const rects = [];
 	squarifyTreemap(rootData, plotArea.x, plotArea.y, plotArea.width, plotArea.height, 0, rects);
 	const totalValue = rootData.reduce((s, n) => s + treemapValueOf(n), 0);
 	const scale = progress;
-	function drawRect(rect, isHover) {
+	const focus = hoverIndex >= 0 && hoverIndex < rects.length ? rects[hoverIndex] : null;
+	const dimAlpha = 1 - .75 * hoverAnimProgress;
+	function drawRect(rect, isFocusRoot) {
 		const cx = rect.x + rect.w / 2;
 		const cy = rect.y + rect.h / 2;
 		const aw = rect.w * scale;
 		const ah = rect.h * scale;
 		const ax = cx - aw / 2;
 		const ay = cy - ah / 2;
-		const color = rect.node.color || theme.colors[(rect.colorSeed + rect.depth) % theme.colors.length];
+		const base = rect.node.color || theme.colors[(rect.colorSeed + rect.depth) % theme.colors.length];
+		const color = isFocusRoot ? mixColor(base, .08, "#000000") : base;
 		canvasCtx.save();
-		canvasCtx.fillStyle = isHover ? color : color + (rect.depth === 0 ? "" : "cc");
+		canvasCtx.globalAlpha = !focus || isRectWithinFocus(rect, focus) ? 1 : dimAlpha;
+		canvasCtx.fillStyle = isFocusRoot ? color : color + (rect.depth === 0 ? "" : "cc");
 		roundRect(canvasCtx, ax, ay, Math.max(0, aw), Math.max(0, ah), 3);
 		canvasCtx.fill();
-		if (!isHover) {
-			canvasCtx.strokeStyle = theme.backgroundColor;
-			canvasCtx.lineWidth = 2;
-			canvasCtx.stroke();
-		} else {
-			canvasCtx.shadowColor = color;
-			canvasCtx.shadowBlur = 10;
-			canvasCtx.strokeStyle = theme.textColor;
-			canvasCtx.lineWidth = 2.5;
-			canvasCtx.stroke();
-			canvasCtx.shadowBlur = 0;
-			canvasCtx.stroke();
-		}
+		canvasCtx.strokeStyle = theme.backgroundColor;
+		canvasCtx.lineWidth = 2;
+		canvasCtx.stroke();
 		canvasCtx.restore();
 		if (progress > .8 && aw > 50 && ah > 24) {
 			canvasCtx.save();
+			canvasCtx.globalAlpha = !focus || isRectWithinFocus(rect, focus) ? 1 : dimAlpha;
 			canvasCtx.fillStyle = getContrastText(color);
 			if (rect.node.children && rect.node.children.length > 0) {
 				canvasCtx.font = "bold 11px Inter, sans-serif";
@@ -3262,10 +3367,7 @@ function renderTreemapChart(ctx) {
 			canvasCtx.restore();
 		}
 	}
-	rects.forEach((rect, i) => {
-		if (i !== hoverIndex) drawRect(rect, false);
-	});
-	if (hoverIndex >= 0 && hoverIndex < rects.length) drawRect(rects[hoverIndex], true);
+	rects.forEach((rect) => drawRect(rect, focus === rect));
 }
 function renderSparklineChart(ctx) {
 	const { ctx: canvasCtx, theme, plotArea, options, progress, hoverIndex } = ctx;
@@ -3545,12 +3647,26 @@ function computeSunburstDepth(nodes) {
 	});
 	return max;
 }
-function layoutSunburst(nodes, r0, ringWidth, depth, startAngle, colorOffset, result) {
-	const total = nodes.reduce((s, n) => s + n.value, 0);
+var SUNBURST_HOLE_RATIO = .22;
+var SUNBURST_LIGHT_STEP = .26;
+var SUNBURST_LIGHT_MAX = .6;
+var SUNBURST_DARK_STEP = .14;
+var SUNBURST_DARK_MAX = .34;
+/** 父节点可省略 value（由子孙汇总）；直接读 n.value 会得到 NaN，
+*  让后续兄弟分支的角度全部失效、只剩第一个分支可见 */
+function sunburstValue(node) {
+	if (typeof node.value === "number" && Number.isFinite(node.value)) return node.value;
+	if (node.children && node.children.length > 0) return node.children.reduce((s, c) => s + sunburstValue(c), 0);
+	return 0;
+}
+function layoutSunburst(nodes, r0, ringWidth, depth, startAngle, colorOffset, result, sweep = Math.PI * 2, parentIndex = -1) {
+	const total = nodes.reduce((s, n) => s + sunburstValue(n), 0);
 	if (total <= 0) return result;
 	let a = startAngle;
 	nodes.forEach((n, i) => {
-		const span = n.value / total * Math.PI * 2;
+		const slot = depth === 0 ? (colorOffset + i) % 8 : colorOffset % 8;
+		const span = sweep * sunburstValue(n) / total;
+		const selfIndex = result.length;
 		result.push({
 			startAngle: a,
 			endAngle: a + span,
@@ -3558,25 +3674,72 @@ function layoutSunburst(nodes, r0, ringWidth, depth, startAngle, colorOffset, re
 			r0,
 			r1: r0 + ringWidth,
 			node: n,
+			value: sunburstValue(n),
 			depth,
-			colorIndex: (colorOffset + i) % 8
+			colorIndex: slot,
+			parentIndex
 		});
-		if (n.children && n.children.length > 0) layoutSunburst(n.children, r0 + ringWidth, ringWidth, depth + 1, a, colorOffset + i, result);
+		if (n.children && n.children.length > 0) layoutSunburst(n.children, r0 + ringWidth, ringWidth, depth + 1, a, slot, result, span, selfIndex);
 		a += span;
 	});
 	return result;
 }
-function renderSunburstChart(ctx) {
-	const { ctx: canvasCtx, theme, plotArea, options, progress, hoverIndex, valueFormatter } = ctx;
+function isSunburstDescendant(segments, index, ancestorIndex) {
+	let cursor = index;
+	while (cursor >= 0) {
+		if (cursor === ancestorIndex) return true;
+		cursor = segments[cursor].parentIndex;
+	}
+	return false;
+}
+/** 环带颜色：同色系按深度向背景方向混合，外圈大面积不刺眼 */
+function sunburstDepthColor(base, depth, theme) {
+	if (depth <= 0) return base;
+	const darker = !isLightColor(theme.backgroundColor);
+	return mixColor(base, Math.min(darker ? SUNBURST_DARK_MAX : SUNBURST_LIGHT_MAX, depth * (darker ? SUNBURST_DARK_STEP : SUNBURST_LIGHT_STEP)), darker ? "#000000" : "#ffffff");
+}
+function sunburstNodeColor(seg, theme) {
+	const base = seg.node.color || theme.colors[seg.colorIndex % theme.colors.length];
+	if (seg.node.color && seg.depth > 0) return seg.node.color;
+	return sunburstDepthColor(base, seg.depth, theme);
+}
+/** 旭日图几何：渲染与悬浮命中共用一份口径（环厚、留白、半径预算） */
+function computeSunburstGeometry(plotArea, options, theme, valueFormatter) {
 	const data = options.sunburstData || [];
-	if (data.length === 0) return;
+	const depthCount = computeSunburstDepth(data);
+	if (data.length === 0 || depthCount === 0) return null;
 	const centerX = plotArea.x + plotArea.width / 2;
 	const centerY = plotArea.y + plotArea.height / 2;
-	const maxR = Math.max(40, Math.min(plotArea.width, plotArea.height) / 2 - 10);
-	const innerHole = Math.max(0, maxR * .18);
-	const depthCount = computeSunburstDepth(data);
-	const segments = layoutSunburst(data, innerHole, (maxR - innerHole) / depthCount, 0, -Math.PI / 2, 0, []);
+	const maxR = Math.max(40, Math.min(plotArea.width, plotArea.height) / 2 - 20);
+	const innerHole = Math.max(0, maxR * SUNBURST_HOLE_RATIO);
+	const ringWidth = (maxR - innerHole) / depthCount;
+	const segments = layoutSunburst(data, innerHole, ringWidth, 0, -Math.PI / 2, 0, []);
+	segments.forEach((seg) => {
+		seg.color = sunburstNodeColor(seg, theme);
+	});
+	return {
+		centerX,
+		centerY,
+		maxR,
+		innerHole,
+		ringWidth,
+		depthCount,
+		segments,
+		showValues: options.showValues === true,
+		valueFormatter
+	};
+}
+function renderSunburstChart(ctx) {
+	const { ctx: canvasCtx, theme, plotArea, options, progress, hoverIndex, valueFormatter, hoverAnimProgress = 1 } = ctx;
+	const geo = computeSunburstGeometry(plotArea, options, theme, valueFormatter);
+	if (!geo) return;
+	const { centerX, centerY, maxR, ringWidth, depthCount, segments, showValues } = geo;
 	const sweep = -Math.PI / 2 + Math.PI * 2 * progress;
+	const grow = .94 + .06 * progress;
+	const focusIndex = hoverIndex >= 0 && hoverIndex < segments.length ? hoverIndex : -1;
+	const dimAlpha = 1 - .75 * hoverAnimProgress;
+	const alphaAt = (i) => focusIndex < 0 || isSunburstDescendant(segments, i, focusIndex) ? 1 : dimAlpha;
+	const labels = [];
 	canvasCtx.save();
 	canvasCtx.beginPath();
 	canvasCtx.moveTo(centerX, centerY);
@@ -3584,45 +3747,58 @@ function renderSunburstChart(ctx) {
 	canvasCtx.closePath();
 	canvasCtx.clip();
 	segments.forEach((seg, i) => {
-		const color = seg.node.color || theme.colors[seg.colorIndex % theme.colors.length];
-		const isHover = i === hoverIndex;
+		const color = i === focusIndex ? mixColor(seg.color, .08, "#000000") : seg.color;
 		canvasCtx.save();
+		canvasCtx.globalAlpha = alphaAt(i);
 		canvasCtx.beginPath();
-		canvasCtx.arc(centerX, centerY, seg.r1, seg.startAngle, seg.endAngle);
-		canvasCtx.arc(centerX, centerY, seg.r0, seg.endAngle, seg.startAngle, true);
+		canvasCtx.arc(centerX, centerY, seg.r1 * grow, seg.startAngle, seg.endAngle);
+		canvasCtx.arc(centerX, centerY, seg.r0 * grow, seg.endAngle, seg.startAngle, true);
 		canvasCtx.closePath();
-		canvasCtx.fillStyle = isHover ? color : color + (seg.depth === 0 ? "" : "dd");
+		canvasCtx.fillStyle = color;
 		canvasCtx.fill();
 		canvasCtx.strokeStyle = theme.backgroundColor;
 		canvasCtx.lineWidth = 2;
 		canvasCtx.stroke();
-		if (isHover) {
-			canvasCtx.strokeStyle = theme.textColor;
-			canvasCtx.lineWidth = 2;
-			canvasCtx.stroke();
-		}
 		canvasCtx.restore();
+		if (progress <= .9) return;
+		const name = seg.node.name || "";
+		if (!name) return;
 		const span = seg.endAngle - seg.startAngle;
 		const midR = (seg.r0 + seg.r1) / 2;
 		const chord = midR * span;
-		const name = seg.node.name || "";
-		if (progress > .9 && span > .12 && chord > estimateTextWidth(name, 11) + 8 && seg.r1 - seg.r0 > 13) {
-			const lx = centerX + Math.cos(seg.midAngle) * midR;
-			const ly = centerY + Math.sin(seg.midAngle) * midR;
-			canvasCtx.save();
-			canvasCtx.fillStyle = getContrastText(color);
-			canvasCtx.font = seg.depth === 0 ? "bold 12px Inter, sans-serif" : "11px Inter, sans-serif";
-			canvasCtx.textAlign = "center";
-			canvasCtx.textBaseline = "middle";
-			canvasCtx.fillText(name, lx, ly - (options.showValues ? 6 : 0));
-			if (options.showValues && seg.r1 - seg.r0 > 26) {
-				canvasCtx.font = "10px Inter, sans-serif";
-				canvasCtx.fillText(valueFormatter(seg.node.value), lx, ly + 8);
-			}
-			canvasCtx.restore();
-		}
+		if (ringWidth < 12 || chord < 11) return;
+		const value = showValues && ringWidth >= 26 ? valueFormatter(seg.value) : null;
+		if (Math.max(estimateTextWidth(name, 11), value ? estimateTextWidth(value, 10) : 0) > ringWidth + 20) return;
+		labels.push({
+			x: centerX + Math.cos(seg.midAngle) * midR,
+			y: centerY + Math.sin(seg.midAngle) * midR,
+			midAngle: seg.midAngle,
+			name,
+			value,
+			bold: seg.depth === 0,
+			fill: getContrastText(color),
+			alpha: alphaAt(i)
+		});
 	});
 	canvasCtx.restore();
+	labels.forEach((l) => {
+		canvasCtx.save();
+		canvasCtx.globalAlpha = l.alpha;
+		canvasCtx.fillStyle = l.fill;
+		canvasCtx.font = l.bold ? "bold 11px Inter, sans-serif" : "11px Inter, sans-serif";
+		canvasCtx.textAlign = "center";
+		canvasCtx.textBaseline = "middle";
+		canvasCtx.translate(l.x, l.y);
+		let rot = l.midAngle;
+		if (rot > Math.PI / 2 || rot < -Math.PI / 2) rot += Math.PI;
+		canvasCtx.rotate(rot);
+		canvasCtx.fillText(l.name, 0, l.value ? -7 : 0);
+		if (l.value) {
+			canvasCtx.font = "10px Inter, sans-serif";
+			canvasCtx.fillText(l.value, 0, 7);
+		}
+		canvasCtx.restore();
+	});
 }
 function renderMixedChart(ctx, leftRange, rightRange) {
 	const { ctx: canvasCtx, theme, plotArea, options, progress, hoverIndex, hiddenSeries } = ctx;
@@ -4480,6 +4656,10 @@ var chartOptionsSchema = {
 						enum: ["left", "right"]
 					},
 					type: { type: "string" },
+					chartType: {
+						type: "string",
+						enum: ["bar", "line"]
+					},
 					area: { type: "boolean" }
 				}
 			}
@@ -5334,9 +5514,24 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				hoverAnimFrameId = null;
 			}
 		}
-		function startHoverAnimation(dir) {
+		function usesHoverAnimation() {
+			const t = props.options.type;
+			return t === "pie" || t === "doughnut" || t === "rose" || t === "sunburst" || t === "treemap";
+		}
+		function clearHover() {
+			if (hoverIndex === -1) return false;
+			hoverIndex = -1;
 			const t = props.options.type;
-			if (t !== "pie" && t !== "doughnut" && t !== "rose") return;
+			if (t === "pie" || t === "doughnut" || t === "rose") startHoverAnimation(-1);
+			else {
+				stopHoverAnimation();
+				hoverAnimProgress = 0;
+				redraw();
+			}
+			return true;
+		}
+		function startHoverAnimation(dir) {
+			if (!usesHoverAnimation()) return;
 			if (props.options.animation?.enabled === false) {
 				hoverAnimProgress = dir > 0 ? 1 : 0;
 				redraw();
@@ -5377,7 +5572,8 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			"doughnut",
 			"rose",
 			"radar",
-			"funnel"
+			"funnel",
+			"scatter"
 		];
 		function checkLegendHit(x, y) {
 			const canvas = canvasRef.value;
@@ -5570,20 +5766,14 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				};
 			}
 			if (options.type === "sunburst") {
-				const data = options.sunburstData || [];
-				if (data.length === 0) return null;
-				const centerX = plotArea.x + plotArea.width / 2;
-				const centerY = plotArea.y + plotArea.height / 2;
-				const maxR = Math.max(40, Math.min(plotArea.width, plotArea.height) / 2 - 10);
-				const innerHole = Math.max(0, maxR * .18);
-				const depthCount = computeSunburstDepth(data);
-				const ringWidth = (maxR - innerHole) / depthCount;
+				const geo = computeSunburstGeometry(plotArea, options, theme, formatTooltipValue);
+				if (!geo) return null;
+				const { centerX, centerY, segments } = geo;
 				const dx = canvasX - centerX;
 				const dy = canvasY - centerY;
 				const distance = Math.sqrt(dx * dx + dy * dy);
 				let hoverAngle = Math.atan2(dy, dx);
 				if (hoverAngle < -Math.PI / 2) hoverAngle += Math.PI * 2;
-				const segments = layoutSunburst(data, innerHole, ringWidth, 0, -Math.PI / 2, 0, []);
 				for (let i = 0; i < segments.length; i++) {
 					const seg = segments[i];
 					if (distance >= seg.r0 && distance <= seg.r1 && hoverAngle >= seg.startAngle && hoverAngle < seg.endAngle) return {
@@ -5591,8 +5781,8 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 						params: {
 							seriesName: seg.node.name,
 							name: seg.node.name,
-							value: seg.node.value,
-							color: seg.node.color || theme.colors[seg.colorIndex % theme.colors.length],
+							value: sunburstValue(seg.node),
+							color: seg.color,
 							dataIndex: i,
 							seriesIndex: 0
 						}
@@ -6211,12 +6401,7 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				}
 			}
 			if (legendName) {
-				if (hoverIndex !== -1) {
-					hoverIndex = -1;
-					const t = props.options.type;
-					if (t === "pie" || t === "doughnut" || t === "rose") startHoverAnimation(-1);
-					else redraw();
-				}
+				clearHover();
 				tooltipVisible.value = false;
 				return;
 			}
@@ -6235,6 +6420,10 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 							hoverAnimProgress = .35;
 							startHoverAnimation(1);
 						}
+					} else if (usesHoverAnimation()) {
+						stopHoverAnimation();
+						hoverAnimProgress = 1;
+						redraw();
 					} else redraw();
 					if (prevIndex === -1) {
 						const emitParams = Array.isArray(result.params) ? result.params[0] : result.params;
@@ -6259,10 +6448,7 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				});
 				tooltipVisible.value = true;
 			} else {
-				if (hoverIndex !== -1) {
-					hoverIndex = -1;
-					if (isPieLike) startHoverAnimation(-1);
-					else redraw();
+				if (clearHover()) {
 					emit("unhover");
 					ariaLiveText.value = "";
 				}
@@ -6344,11 +6530,7 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 				redraw();
 			}
 			dragMode = "none";
-			if (hoverIndex !== -1) {
-				hoverIndex = -1;
-				const t = props.options.type;
-				if (t === "pie" || t === "doughnut" || t === "rose") startHoverAnimation(-1);
-				else redraw();
+			if (clearHover()) {
 				emit("unhover");
 				ariaLiveText.value = "";
 			}
@@ -6821,7 +7003,7 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			], 12, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-ce034a2a"]]);
+}), [["__scopeId", "data-v-0c5d944e"]]);
 //#endregion
 //#region src/useChart.js
 var USE_CHART_KEY = /* @__PURE__ */ Symbol("ev-chart-context");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wil-works/evoke-charts",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Evoke Charts — 零依赖 Canvas 自绘图表库（Vue3），Evoke 生态独立图表包",
   "type": "module",
   "main": "./dist/index.mjs",