@wil-works/evoke-charts 0.1.1 → 0.2.0

package/README.md

@@ -2,6 +2,8 @@
 
 `@wil-works/evoke-charts` — 零依赖 Canvas 自绘图表库（Vue 3）。Evoke 生态的独立图表包，不依赖任何第三方图表引擎，也不依赖 Evoke 其他组件库。
 
+**在线文档**：[evoke-charts.wil-works.com](https://evoke-charts.wil-works.com) — 全部图表类型、完整配置项与在线示例。
+
 ## 特性
 
 - **20+ 图表类型**：折线 / 面积 / 柱状 / 堆叠柱 / 条形 / 饼图 / 环形 / 玫瑰图 / 散点（含趋势线）/ 雷达 / 漏斗 / 仪表盘 / 热力图 / K 线 / 子弹图 / 直方图 / 矩形树图 / 旭日图 / 瀑布图 / 箱线图 / 混合图 / 迷你图
@@ -56,9 +58,9 @@ const options = {
 
 ## 主题接入
 
-图表颜色按以下 `--ev-*` 令牌实时读取（`document.documentElement` 上取值），任一缺失即整组回落到内置色板：
+图表颜色按以下 `--ev-*` 令牌实时读取（`document.documentElement` 上取值），未定义的槽位逐槽回落到内置成套色板：
 
-- 系列色：`--ev-color-primary / -success / -warning / -danger / -info`、`--ev-color-ext-violet / -cyan / -magenta`
+- 系列色：`--ev-color-series-1` … `--ev-color-series-8`（数据系列专用色板，与状态语义色解耦；槽 1 未定义时回读 `--ev-color-primary`，主题跟随不受影响）
 - 表面：`--ev-bg-color`、`--ev-bg-color-overlay`、`--ev-app-card-border`
 - 文字：`--ev-text-color-primary / -secondary / -danger`
 - 边线：`--ev-border-color / -light / -dark`
@@ -67,12 +69,12 @@ const options = {
 
 暗色跟随约定：在 `html.dark` 选择器下重映射上述令牌（组件内部监听 `<html>` 的 `class` 变化自动重绘）。
 
-### 与 evoke-business-ui 搭配
-
-`evoke-business-ui` 依赖本包并以 `EbChart`（模板 `<eb-chart>`）提供同一组件，其样式包内置了 `--eb-*` 令牌到 `--ev-*`（本包读取面）的映射，两库同用时图表自动跟随其主题、暗色与运行时换肤（其换肤时会派发 `ev-theme-change` 事件），无需额外配置。
+图表引擎对宿主保持中立：不为任何组件库做特殊配置；组件库或站点需要个性化时，走通用扩展接口——槽位令牌、`padding` / `theme` / `animation` 配置，以及 `applySeriesPalette` 配色方案工具。
 
 ## 组件 API（摘要）
 
+以下为常用项摘要，各图表类型的独立文档页与完整配置项见[在线文档](https://evoke-charts.wil-works.com/chart)。
+
 ### Props
 
 | 名称 | 类型 | 默认值 | 说明 |

package/dist/evoke-charts.css

@@ -1,5 +1,5 @@
 
-.ev-chart[data-v-4ea20430] {
+.ev-chart[data-v-a07b68e8] {
   position: relative;
   overflow: hidden;
   border-radius: 8px;
@@ -8,7 +8,7 @@
 }
 
 /* 关键：canvas 必须能接收鼠标事件 */
-.ev-chart__canvas[data-v-4ea20430] {
+.ev-chart__canvas[data-v-a07b68e8] {
   position: absolute;
   top: 0;
   left: 0;
@@ -18,15 +18,15 @@
   /* 触摸：纵向留给页面滚动，横向拖拽由图表接管（dataZoom 平移） */
   touch-action: pan-y;
 }
-.ev-chart__tooltip[data-v-4ea20430] {
+.ev-chart__tooltip[data-v-a07b68e8] {
   position: absolute;
   pointer-events: none;
   z-index: 100;
-  padding: 10px 14px;
+  padding: 9px 12px;
   background: var(--ev-bg-color-overlay, #ffffff);
   border: 1px solid var(--ev-border-color, #e2e8f0);
-  border-radius: 8px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+  border-radius: 10px;
+  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
   font-size: 13px;
   line-height: 1.6;
   white-space: nowrap;
@@ -39,47 +39,47 @@
 }
 
 /* tooltip 淡入淡出（仅 opacity，位置由 left/top transition 负责） */
-.ev-chart-tooltip-enter-active[data-v-4ea20430],
-.ev-chart-tooltip-leave-active[data-v-4ea20430] {
+.ev-chart-tooltip-enter-active[data-v-a07b68e8],
+.ev-chart-tooltip-leave-active[data-v-a07b68e8] {
   transition: opacity 0.18s ease;
 }
 
 /* 进入期间禁用位置 transition，避免首次出现时从旧位置滑入 */
-.ev-chart-tooltip-enter-active[data-v-4ea20430] {
+.ev-chart-tooltip-enter-active[data-v-a07b68e8] {
   transition:
     opacity 0.18s ease,
     left 0s,
     top 0s;
 }
-.ev-chart-tooltip-enter-from[data-v-4ea20430],
-.ev-chart-tooltip-leave-to[data-v-4ea20430] {
+.ev-chart-tooltip-enter-from[data-v-a07b68e8],
+.ev-chart-tooltip-leave-to[data-v-a07b68e8] {
   opacity: 0;
 }
 
 /* v-html 注入的内容不带 scoped 属性，需用 :deep() 穿透 */
-[data-v-4ea20430] .ev-chart__tooltip-title {
+[data-v-a07b68e8] .ev-chart__tooltip-title {
   color: var(--ev-text-color-secondary, #6b7280);
   font-size: 12px;
   margin-bottom: 6px;
   font-weight: 500;
 }
-[data-v-4ea20430] .ev-chart__tooltip-item {
+[data-v-a07b68e8] .ev-chart__tooltip-item {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 2px 0;
 }
-[data-v-4ea20430] .ev-chart__tooltip-dot {
+[data-v-a07b68e8] .ev-chart__tooltip-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   flex-shrink: 0;
   display: inline-block;
 }
-[data-v-4ea20430] .ev-chart__tooltip-name {
+[data-v-a07b68e8] .ev-chart__tooltip-name {
   color: var(--ev-text-color-primary, #111827);
 }
-[data-v-4ea20430] .ev-chart__tooltip-value {
+[data-v-a07b68e8] .ev-chart__tooltip-value {
   color: var(--ev-text-color-primary, #111827);
   font-weight: 600;
   margin-left: auto;
@@ -88,7 +88,7 @@
 }
 
 /* ══════ 空数据占位 ══════ */
-.ev-chart__empty[data-v-4ea20430] {
+.ev-chart__empty[data-v-a07b68e8] {
   position: absolute;
   inset: 0;
   display: flex;
@@ -100,7 +100,7 @@
   gap: 14px;
   user-select: none;
 }
-.ev-chart__empty-icon-wrap[data-v-4ea20430] {
+.ev-chart__empty-icon-wrap[data-v-a07b68e8] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -109,19 +109,19 @@
   border-radius: 16px;
   background: var(--ev-fill-color-light, #f5f7fa);
 }
-.ev-chart__empty-img[data-v-4ea20430] {
+.ev-chart__empty-img[data-v-a07b68e8] {
   width: 32px;
   height: 32px;
   opacity: 0.4;
 }
-.ev-chart__empty-text[data-v-4ea20430] {
+.ev-chart__empty-text[data-v-a07b68e8] {
   letter-spacing: 0.04em;
   font-weight: 500;
   font-size: 13px;
 }
 
 /* ══════ 加载中骨架 ══════ */
-.ev-chart__loading[data-v-4ea20430] {
+.ev-chart__loading[data-v-a07b68e8] {
   position: absolute;
   inset: 0;
   display: flex;
@@ -129,20 +129,20 @@
   justify-content: center;
   background: var(--ev-bg-color, #ffffff);
 }
-.ev-chart__loading-bars[data-v-4ea20430] {
+.ev-chart__loading-bars[data-v-a07b68e8] {
   display: flex;
   align-items: flex-end;
   gap: 6px;
   height: 60px;
 }
-.ev-chart__loading-bar[data-v-4ea20430] {
+.ev-chart__loading-bar[data-v-a07b68e8] {
   width: 10px;
   height: 40px;
   border-radius: 4px;
   background: var(--ev-border-color, #e2e8f0);
-  animation: ev-chart-shimmer-4ea20430 1.2s ease-in-out infinite;
+  animation: ev-chart-shimmer-a07b68e8 1.2s ease-in-out infinite;
 }
-@keyframes ev-chart-shimmer-4ea20430 {
+@keyframes ev-chart-shimmer-a07b68e8 {
 0%,
   100% {
     transform: scaleY(0.4);
@@ -155,7 +155,7 @@
 }
 
 /* ══════ 错误边界 ══════ */
-.ev-chart__error[data-v-4ea20430] {
+.ev-chart__error[data-v-a07b68e8] {
   position: absolute;
   inset: 0;
   display: flex;
@@ -168,11 +168,13 @@
   padding: 20px;
   text-align: center;
 }
-.ev-chart__error-icon[data-v-4ea20430] {
-  font-size: 28px;
-  line-height: 1;
+.ev-chart__error-icon[data-v-a07b68e8] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 30px;
 }
-.ev-chart__error-text[data-v-4ea20430] {
+.ev-chart__error-text[data-v-a07b68e8] {
   font-size: 12px;
   line-height: 1.5;
   max-width: 80%;
@@ -180,17 +182,17 @@
 }
 
 /* ══════ 进入/离开淡入淡出 ══════ */
-.ev-chart-fade-enter-active[data-v-4ea20430],
-.ev-chart-fade-leave-active[data-v-4ea20430] {
+.ev-chart-fade-enter-active[data-v-a07b68e8],
+.ev-chart-fade-leave-active[data-v-a07b68e8] {
   transition: opacity 0.2s ease;
 }
-.ev-chart-fade-enter-from[data-v-4ea20430],
-.ev-chart-fade-leave-to[data-v-4ea20430] {
+.ev-chart-fade-enter-from[data-v-a07b68e8],
+.ev-chart-fade-leave-to[data-v-a07b68e8] {
   opacity: 0;
 }
 
 /* ══════ 无障碍：sr-only ══════ */
-.ev-chart__sr-only[data-v-4ea20430] {
+.ev-chart__sr-only[data-v-a07b68e8] {
   position: absolute;
   width: 1px;
   height: 1px;

package/dist/index.mjs

@@ -16,18 +16,20 @@ var DEFAULT_I18N_ZH = {
 	noData: "暂无数据"
 };
 /**
-* 系列色令牌表 — 图表分类色板从 CSS 令牌实时读取（换主题/暗色即跟随），
+* 系列色令牌槽位 — 每槽按顺序尝试读取专用数据色令牌（--ev-color-series-N），
+* 槽 1 回退 --ev-color-primary（品牌主色跟随）；
+* 任一槽无令牌时该槽回落内置成套色板（与语义状态色解耦的数据色板）。
 * CHART_COLORS 仅作为 SSR / 无 DOM 环境的静态兜底。
 */
-var SERIES_COLOR_TOKENS = [
-	"--ev-color-primary",
-	"--ev-color-success",
-	"--ev-color-warning",
-	"--ev-color-ext-violet",
-	"--ev-color-ext-cyan",
-	"--ev-color-danger",
-	"--ev-color-ext-magenta",
-	"--ev-color-info"
+var SERIES_COLOR_SLOTS = [
+	["--ev-color-series-1", "--ev-color-primary"],
+	["--ev-color-series-2"],
+	["--ev-color-series-3"],
+	["--ev-color-series-4"],
+	["--ev-color-series-5"],
+	["--ev-color-series-6"],
+	["--ev-color-series-7"],
+	["--ev-color-series-8"]
 ];
 function readChartToken(name, fallback) {
 	try {
@@ -38,24 +40,29 @@ function readChartToken(name, fallback) {
 	}
 }
 function getSeriesColors(fallbackColors) {
-	const live = SERIES_COLOR_TOKENS.map((t) => readChartToken(t, ""));
-	return live.some((v) => !v) ? [...fallbackColors] : live;
+	return SERIES_COLOR_SLOTS.map((tokens, i) => {
+		for (const t of tokens) {
+			const v = readChartToken(t, "");
+			if (v) return v;
+		}
+		return fallbackColors[i];
+	});
 }
 var CHART_COLORS = {
 	/**
-	* 主色板 — 对齐 evoke 设计令牌：
-	* 前位使用功能色（primary/success/warning/danger/info），
-	* 扩展色选取与深蓝体系协调的色相；相邻色相拉开对比度。
+	* 主色板 — 品牌蓝锚定的成套数据色板（与语义状态色解耦）：
+	* 色相按取色顺序相邻差 ≥ 30°，明度带 44–68，青绿/金黄/天蓝/珊瑚/紫/石板
+	* 取材 AntV 经典系并经品牌蓝调协调；暗色板同色相提亮。
 	*/
 	primary: [
 		"#175DFF",
-		"#16a34a",
-		"#d97706",
-		"#8b5cf6",
-		"#0891b2",
-		"#dc2626",
-		"#db2777",
-		"#64748b"
+		"#5AD8A6",
+		"#F6BD16",
+		"#6DC8EC",
+		"#E8684A",
+		"#9270CA",
+		"#FF9D4D",
+		"#5D7092"
 	],
 	/** 浅色系列 — primary 的 light-9/light-8/light-7 阶梯 */
 	light: [
@@ -63,16 +70,16 @@ var CHART_COLORS = {
 		"#d0e1ff",
 		"#b9d2ff"
 	],
-	/** 暗色模式系列 — 对齐 evoke 暗色功能色令牌 */
+	/** 暗色模式系列 — 同色相提亮（对齐 evoke 暗色主色） */
 	dark: [
 		"#4d8bff",
-		"#4ade80",
-		"#fbbf24",
-		"#a78bfa",
-		"#22d3ee",
-		"#f87171",
-		"#f472b6",
-		"#94a3b8"
+		"#5ad8a6",
+		"#f6bd16",
+		"#6dc8ec",
+		"#f08568",
+		"#a585e8",
+		"#ff9d4d",
+		"#8da3bf"
 	],
 	/** 热力图默认色阶（天亮蓝由浅到深） */
 	heatmapScale: [
@@ -292,6 +299,42 @@ function hasLegendContent(options) {
 function titleBlockHeight(options) {
 	return (options.title ? 26 : 0) + (options.subtitle ? 18 : 0);
 }
+/** options.padding 覆写：数字（四边一致）或 { top, right, bottom, left }（未提供的边回落默认值） */
+function resolveUserPadding(options) {
+	const p = options.padding;
+	if (!p) return {};
+	if (typeof p === "number") return {
+		top: p,
+		right: p,
+		bottom: p,
+		left: p
+	};
+	return p;
+}
+/**
+* y 轴左侧留白按刻度标签实测宽度自适应（替代固定 65）：
+* 取数据范围 → nice 刻度值 → 逐个测宽，留 26px（10 间隙 + 刻度短横 + 余量）。
+* 对数轴/自定义 formatter 场景不可预估时回落 65；结果夹在 [40, 140]。
+*/
+function estimateYAxisLeft(options) {
+	const axisConfig = options.yAxis || {};
+	if (axisConfig.type === "log") return 65;
+	try {
+		const range = calculateRange(options, /* @__PURE__ */ new Set(), false);
+		const min = axisConfig.min ?? range?.min;
+		const max = axisConfig.max ?? range?.max;
+		if (!Number.isFinite(min) || !Number.isFinite(max)) return 65;
+		const { tickValues } = resolveTickExtendedRange(min, max, axisConfig.ticks || 5);
+		const maxW = tickValues.reduce((m, t) => {
+			const label = axisConfig.formatter ? axisConfig.formatter(t) : Number.isInteger(t) ? t.toString() : parseFloat(t.toFixed(6)).toString();
+			return Math.max(m, estimateTextWidth(String(label), 12));
+		}, 0);
+		if (!maxW) return 65;
+		return Math.max(40, Math.min(140, Math.round(maxW + 26)));
+	} catch {
+		return 65;
+	}
+}
 function getPadding(options, containerWidth = 600) {
 	const legend = options.legend || {};
 	const legendPosition = legend.show !== false && hasLegendContent(options) ? legend.position || "bottom" : "none";
@@ -311,12 +354,15 @@ function getPadding(options, containerWidth = 600) {
 	const zoom = options.dataZoom;
 	const hasDataZoom = !!zoom?.enabled && hasXAxis;
 	const zoomHeight = (zoom?.height || 40) + 14;
-	if (options.type === "sparkline") return {
-		top: options.title ? 32 : 6,
-		right: 6,
-		bottom: 6,
-		left: 6
-	};
+	if (options.type === "sparkline") {
+		const sparkPad = resolveUserPadding(options);
+		return {
+			top: sparkPad.top ?? (options.title ? 32 : 6),
+			right: sparkPad.right ?? 6,
+			bottom: sparkPad.bottom ?? 6,
+			left: sparkPad.left ?? 6
+		};
+	}
 	const legendRowsExtra = (() => {
 		if (legendPosition !== "top" && legendPosition !== "bottom") return 0;
 		return (estimateLegendRows(options, containerWidth) - 1) * 20;
@@ -335,13 +381,14 @@ function getPadding(options, containerWidth = 600) {
 		"bin",
 		"sunburst"
 	].includes(options.type)) {
-		let top2 = 18 + titleBlockHeight(options);
-		let bottom2 = 18;
-		let left2 = 20;
-		let right2 = 20;
+		const pad = resolveUserPadding(options);
+		let top2 = (pad.top ?? 18) + titleBlockHeight(options);
+		let bottom2 = pad.bottom ?? 18;
+		let left2 = pad.left ?? 20;
+		let right2 = pad.right ?? 20;
 		if (options.type === "heatmap") {
 			const maxYLabel = Array.from(new Set((options.heatmapData || []).map((d) => d.y))).reduce((m, s) => Math.max(m, estimateTextWidth(s, 11)), 0);
-			left2 = Math.min(130, Math.max(24, maxYLabel + 14));
+			left2 = pad.left ?? Math.min(130, Math.max(24, maxYLabel + 14));
 			bottom2 = Math.max(bottom2, 26);
 			if (options.heatmap?.colorBar === true || options.heatmapColorBar === true) right2 += 44;
 		}
@@ -350,7 +397,7 @@ function getPadding(options, containerWidth = 600) {
 			(options.series || []).forEach((s) => allValues.push(...s.data.filter((v) => !isMissingValue(v))));
 			const maxFreq = allValues.length;
 			const tickLabelWidth = String(maxFreq).length * 7;
-			left2 = Math.min(90, Math.max(36, tickLabelWidth + 16));
+			left2 = pad.left ?? Math.min(90, Math.max(36, tickLabelWidth + 16));
 			bottom2 = Math.max(bottom2, 30);
 		}
 		if (options.type === "bullet") {
@@ -371,21 +418,43 @@ function getPadding(options, containerWidth = 600) {
 			left: left2
 		};
 	}
-	let top = 18 + titleBlockHeight(options) + (legendPosition === "top" ? LEGEND_BAND + legendRowsExtra : 0);
-	let bottom = 46 + (legendPosition === "bottom" ? LEGEND_BAND + legendRowsExtra : 0);
-	let left = 65;
-	let right = hasYAxisRight ? 65 : 40;
+	const pad = resolveUserPadding(options);
+	const xAxisHidden = options.xAxis?.show === false;
+	let top = (pad.top ?? 18) + titleBlockHeight(options) + (legendPosition === "top" ? LEGEND_BAND + legendRowsExtra : 0);
+	let bottom = (pad.bottom ?? (xAxisHidden ? 12 : 46)) + (legendPosition === "bottom" ? LEGEND_BAND + legendRowsExtra : 0);
+	let left = pad.left ?? estimateYAxisLeft(options);
+	let right = pad.right ?? (hasYAxisRight ? 65 : 24);
 	if (legendPosition === "left") left += 80;
 	if (legendPosition === "right") right += 80;
-	if (hasXAxis && hasXAxisTitle) bottom += 15;
+	if (hasXAxis && hasXAxisTitle) return {
+		top,
+		right,
+		bottom: bottom + 15,
+		left
+	};
 	const xRotate = options.xAxis?.rotate || 0;
 	if (hasXAxis && xRotate) {
 		const maxLabelWidth = (options.labels || []).reduce((m, s) => Math.max(m, estimateTextWidth(String(s), 12)), 0);
-		bottom += Math.min(90, 12 + maxLabelWidth * Math.sin(Math.min(60, Math.abs(xRotate)) * Math.PI / 180));
+		return {
+			top,
+			right,
+			bottom: bottom + Math.min(90, 12 + maxLabelWidth * Math.sin(Math.min(60, Math.abs(xRotate)) * Math.PI / 180)),
+			left
+		};
 	}
 	if (hasDataZoom) {
-		if ((zoom?.position || "bottom") === "top") top += zoomHeight;
-		else bottom += zoomHeight;
+		if ((zoom?.position || "bottom") === "top") return {
+			top: top + zoomHeight,
+			right,
+			bottom,
+			left
+		};
+		return {
+			top,
+			right,
+			bottom: bottom + zoomHeight,
+			left
+		};
 	}
 	return {
 		top,
@@ -774,6 +843,14 @@ function renderYAxis(ctx, side = "left", dataRange) {
 		else label = Number.isInteger(tick) ? tick.toString() : parseFloat(tick.toFixed(6)).toString();
 		label = truncateLabel(canvasCtx, label, maxLabelWidth);
 		canvasCtx.fillText(label, xPos, y);
+		if (side === "left") {
+			canvasCtx.strokeStyle = theme.gridColor;
+			canvasCtx.lineWidth = 1;
+			canvasCtx.beginPath();
+			canvasCtx.moveTo(plotArea.x - 6, y);
+			canvasCtx.lineTo(plotArea.x, y);
+			canvasCtx.stroke();
+		}
 	});
 	drawAxisLine(canvasCtx, axisConfig, theme, side === "left" ? plotArea.x : plotArea.x + plotArea.width, plotArea.y, side === "left" ? plotArea.x : plotArea.x + plotArea.width, plotArea.y + plotArea.height);
 	if (axisConfig.title) {
@@ -1158,14 +1235,14 @@ function renderTitle(ctx, paddingTop) {
 	if (!options.title) return;
 	canvasCtx.save();
 	canvasCtx.fillStyle = theme.textColor;
-	canvasCtx.font = "bold 16px Inter, sans-serif";
-	canvasCtx.textAlign = "center";
+	canvasCtx.font = "600 13px Inter, sans-serif";
+	canvasCtx.textAlign = "left";
 	canvasCtx.textBaseline = "top";
-	canvasCtx.fillText(options.title, plotArea.x + plotArea.width / 2, paddingTop);
+	canvasCtx.fillText(options.title, plotArea.x, paddingTop);
 	if (options.subtitle) {
-		canvasCtx.font = "12px Inter, sans-serif";
+		canvasCtx.font = "11px Inter, sans-serif";
 		canvasCtx.fillStyle = theme.textColorSecondary;
-		canvasCtx.fillText(options.subtitle, plotArea.x + plotArea.width / 2, paddingTop + 22);
+		canvasCtx.fillText(options.subtitle, plotArea.x, paddingTop + 20);
 	}
 	canvasCtx.restore();
 }
@@ -1284,12 +1361,12 @@ function renderLegend(ctx) {
 			canvasCtx.fill();
 		} else if (icon === "rect") canvasCtx.fillRect(bound.x, bound.y + 5, 12, 12);
 		else {
-			roundRect(canvasCtx, bound.x, bound.y + 5, 12, 12, 2);
+			roundRect(canvasCtx, bound.x, bound.y + 9.5, 12, 3, 1.5);
 			canvasCtx.fill();
 		}
 		canvasCtx.restore();
 		canvasCtx.save();
-		canvasCtx.fillStyle = isHidden ? theme.textColorSecondary : theme.textColor;
+		canvasCtx.fillStyle = theme.textColorSecondary;
 		canvasCtx.globalAlpha = isHidden ? .6 : 1;
 		canvasCtx.textAlign = "left";
 		canvasCtx.textBaseline = "middle";
@@ -1388,6 +1465,32 @@ function computePieMaxRadius(pieData, options, plotArea) {
 function alphaHex(opacity) {
 	return Math.round(Math.max(0, Math.min(1, opacity)) * 255).toString(16).padStart(2, "0");
 }
+/** 单调三次插值切线（Fritsch–Carlson 限幅）：平滑但不过冲，曲线必过每个数据点 */
+function monotoneTangents(pts) {
+	const n = pts.length;
+	const m = new Array(n).fill(0);
+	const d = [];
+	for (let i = 0; i < n - 1; i++) d.push((pts[i + 1][1] - pts[i][1]) / (pts[i + 1][0] - pts[i][0]));
+	m[0] = d[0];
+	m[n - 1] = d[n - 2];
+	for (let i = 1; i < n - 1; i++) m[i] = d[i - 1] * d[i] <= 0 ? 0 : (d[i - 1] + d[i]) / 2;
+	for (let i = 0; i < n - 1; i++) {
+		if (d[i] === 0) {
+			m[i] = 0;
+			m[i + 1] = 0;
+			continue;
+		}
+		const a = m[i] / d[i];
+		const b = m[i + 1] / d[i];
+		const s = a * a + b * b;
+		if (s > 9) {
+			const tk = 3 / Math.sqrt(s);
+			m[i] = tk * a * d[i];
+			m[i + 1] = tk * b * d[i];
+		}
+	}
+	return m;
+}
 function renderLineChart(ctx, yRange, side = "left") {
 	const { ctx: canvasCtx, theme, plotArea, options, progress, hoverIndex, hiddenSeries, valueFormatter } = ctx;
 	const allPoints = [];
@@ -1443,16 +1546,25 @@ function renderLineChart(ctx, yRange, side = "left") {
 		});
 		if (segments.length === 0) return;
 		const step = series.step || options.step;
+		const smooth = !!(series.smooth ?? options.smooth);
 		const tracePath = (pts, startMove) => {
 			startMove(canvasCtx, pts[0]);
+			if (smooth && pts.length > 2) {
+				const m = monotoneTangents(pts);
+				for (let i = 0; i < pts.length - 1; i++) {
+					const x0 = pts[i][0];
+					const y0 = pts[i][1];
+					const x1 = pts[i + 1][0];
+					const y1 = pts[i + 1][1];
+					const h = (x1 - x0) / 3;
+					canvasCtx.bezierCurveTo(x0 + h, y0 + h * m[i], x1 - h, y1 - h * m[i + 1], x1, y1);
+				}
+				return;
+			}
 			for (let i = 0; i < pts.length - 1; i++) {
 				const curr = pts[i];
 				const next = pts[i + 1];
-				if (series.smooth && pts.length > 2 && !step) {
-					const cp1x = curr[0] + (next[0] - curr[0]) / 3;
-					const cp2x = next[0] - (next[0] - curr[0]) / 3;
-					canvasCtx.bezierCurveTo(cp1x, curr[1], cp2x, next[1], next[0], next[1]);
-				} else if (step) {
+				if (step) {
 					if (step === "start") {
 						canvasCtx.lineTo(next[0], curr[1]);
 						canvasCtx.lineTo(next[0], next[1]);
@@ -1512,7 +1624,7 @@ function renderLineChart(ctx, yRange, side = "left") {
 		}
 		canvasCtx.beginPath();
 		canvasCtx.strokeStyle = color;
-		canvasCtx.lineWidth = series.lineWidth || 2;
+		canvasCtx.lineWidth = series.lineWidth || 1.5;
 		canvasCtx.lineJoin = "round";
 		canvasCtx.lineCap = "round";
 		canvasCtx.setLineDash(resolveLineDash(series));
@@ -1520,7 +1632,7 @@ function renderLineChart(ctx, yRange, side = "left") {
 		canvasCtx.stroke();
 		canvasCtx.setLineDash([]);
 		if (!series.area && options.type !== "area") canvasCtx.restore();
-		if (series.showSymbol !== false && series.symbol !== "none") {
+		if (series.showSymbol === true && series.symbol !== "none") {
 			const baseR = series.symbolSize ?? 4;
 			points.forEach((p, i) => {
 				if (!p) return;
@@ -1541,6 +1653,15 @@ function renderLineChart(ctx, yRange, side = "left") {
 					canvasCtx.stroke();
 				}
 			});
+		} else if (hoverIndex >= 0 && points[hoverIndex]) {
+			const p = points[hoverIndex];
+			canvasCtx.beginPath();
+			canvasCtx.arc(p[0], p[1], 4.5, 0, Math.PI * 2);
+			canvasCtx.fillStyle = theme.backgroundColor;
+			canvasCtx.fill();
+			canvasCtx.strokeStyle = color;
+			canvasCtx.lineWidth = 2;
+			canvasCtx.stroke();
 		}
 		if ((series.showValues !== void 0 ? series.showValues : options.showValues) && progress > .9) {
 			canvasCtx.save();
@@ -3380,9 +3501,13 @@ function renderDataZoomSlider(ctx, zoom) {
 	}
 	const { xStart, xEnd } = windowToX(zoom, geo);
 	const windowFill = theme.crosshairColor.includes("rgba") ? theme.crosshairColor.replace(/[\d.]+\)$/, "0.12)") : theme.crosshairColor + "1f";
+	canvasCtx.save();
+	roundRect(canvasCtx, geo.x, geo.y, geo.width, geo.height, 4);
+	canvasCtx.clip();
 	canvasCtx.fillStyle = theme.backgroundColor + "aa";
 	canvasCtx.fillRect(geo.x, geo.y, xStart - geo.x, geo.height);
 	canvasCtx.fillRect(xEnd, geo.y, geo.x + geo.width - xEnd, geo.height);
+	canvasCtx.restore();
 	canvasCtx.strokeStyle = theme.gridColor;
 	canvasCtx.lineWidth = 1;
 	roundRect(canvasCtx, geo.x, geo.y, geo.width, geo.height, 4);
@@ -3394,21 +3519,26 @@ function renderDataZoomSlider(ctx, zoom) {
 	canvasCtx.lineWidth = 1;
 	roundRect(canvasCtx, xStart, geo.y, Math.max(2, xEnd - xStart), geo.height, 4);
 	canvasCtx.stroke();
-	const handleW = 8;
+	const handleW = 9;
 	const handleH = 18;
 	const handleY = geo.y + (geo.height - handleH) / 2;
 	[xStart - handleW / 2, xEnd - handleW / 2].forEach((hx) => {
-		roundRect(canvasCtx, hx, handleY, handleW, handleH, 3);
-		canvasCtx.fillStyle = theme.crosshairColor;
+		roundRect(canvasCtx, hx, handleY, handleW, handleH, 4);
+		canvasCtx.fillStyle = theme.backgroundColor;
 		canvasCtx.fill();
-		canvasCtx.strokeStyle = theme.backgroundColor;
-		canvasCtx.lineWidth = 1;
+		canvasCtx.strokeStyle = theme.crosshairColor;
+		canvasCtx.lineWidth = 1.5;
+		canvasCtx.stroke();
+		canvasCtx.strokeStyle = theme.crosshairColor;
+		canvasCtx.lineWidth = 1.5;
+		canvasCtx.lineCap = "round";
 		canvasCtx.beginPath();
-		canvasCtx.moveTo(hx + handleW / 2 - 2, handleY + 5);
-		canvasCtx.lineTo(hx + handleW / 2 - 2, handleY + handleH - 5);
-		canvasCtx.moveTo(hx + handleW / 2 + 2, handleY + 5);
-		canvasCtx.lineTo(hx + handleW / 2 + 2, handleY + handleH - 5);
+		canvasCtx.moveTo(hx + handleW / 2 - 2, handleY + 6);
+		canvasCtx.lineTo(hx + handleW / 2 - 2, handleY + handleH - 6);
+		canvasCtx.moveTo(hx + handleW / 2 + 2, handleY + 6);
+		canvasCtx.lineTo(hx + handleW / 2 + 2, handleY + handleH - 6);
 		canvasCtx.stroke();
+		canvasCtx.lineCap = "butt";
 	});
 	canvasCtx.restore();
 }
@@ -5854,7 +5984,35 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 					_: 1
 				}),
 				createVNode(Transition, { name: "ev-chart-fade" }, {
-					default: withCtx(() => [internalError.value ? (openBlock(), createElementBlock("div", _hoisted_7, [_cache[0] || (_cache[0] = createElementVNode("span", { class: "ev-chart__error-icon" }, "⚠", -1)), createElementVNode("span", _hoisted_8, toDisplayString(internalError.value), 1)])) : createCommentVNode("", true)]),
+					default: withCtx(() => [internalError.value ? (openBlock(), createElementBlock("div", _hoisted_7, [_cache[0] || (_cache[0] = createElementVNode("span", { class: "ev-chart__error-icon" }, [createElementVNode("svg", {
+						viewBox: "0 0 24 24",
+						width: "1em",
+						height: "1em",
+						"aria-hidden": "true",
+						fill: "none",
+						stroke: "currentColor",
+						"stroke-width": "2",
+						"stroke-linecap": "round",
+						"stroke-linejoin": "round"
+					}, [
+						createElementVNode("circle", {
+							cx: "12",
+							cy: "12",
+							r: "9"
+						}),
+						createElementVNode("line", {
+							x1: "12",
+							y1: "7.5",
+							x2: "12",
+							y2: "13"
+						}),
+						createElementVNode("line", {
+							x1: "12",
+							y1: "16.5",
+							x2: "12",
+							y2: "16.51"
+						})
+					])], -1)), createElementVNode("span", _hoisted_8, toDisplayString(internalError.value), 1)])) : createCommentVNode("", true)]),
 					_: 1
 				}),
 				createVNode(Transition, { name: "ev-chart-tooltip" }, {
@@ -5873,7 +6031,7 @@ var chart_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
 			], 12, _hoisted_1);
 		};
 	}
-}), [["__scopeId", "data-v-4ea20430"]]);
+}), [["__scopeId", "data-v-a07b68e8"]]);
 //#endregion
 //#region src/useChart.js
 var USE_CHART_KEY = /* @__PURE__ */ Symbol("ev-chart-context");
@@ -5937,6 +6095,95 @@ function injectChartContext() {
 	return inject(USE_CHART_KEY, null);
 }
 //#endregion
+//#region src/palette.js
+/**
+* 配色方案应用工具 — 中性契约的官方实现
+*
+* 把一套数据色板写入 --ev-color-series-1..8 槽位令牌并派发 'ev-theme-change'，
+* 页面上的全部图表即时重绘。任何宿主（组件库 / 站点 / 独立页面）都可直接调用，
+* 不必各自实现令牌写入与事件广播。
+*
+* palette 两种形态：
+* - string[]            单套色值，明暗模式共用；
+* - { light, dark }     浅/暗两组，随 html.dark 自动换挡（经注入样式表实现）。
+*
+* clearSeriesPalette() 移除覆写（内联属性 + 注入样式表），回到内置成套色板。
+*/
+var SLOT_COUNT = 8;
+var PALETTE_EVENT = "ev-theme-change";
+var STYLE_ID = "data-ev-series-palette";
+var paletteStyleEl = null;
+function dispatchPaletteChange(dark) {
+	if (typeof document === "undefined") return;
+	const isDark = typeof dark === "boolean" ? dark : document.documentElement.classList.contains("dark");
+	document.documentElement.dispatchEvent(new CustomEvent(PALETTE_EVENT, {
+		bubbles: true,
+		detail: { dark: isDark }
+	}));
+}
+function removeInlineSlots() {
+	if (typeof document === "undefined") return;
+	for (let i = 1; i <= SLOT_COUNT; i++) document.documentElement.style.removeProperty(`--ev-color-series-${i}`);
+}
+function ensurePaletteStyleEl() {
+	if (typeof document === "undefined") return null;
+	if (!paletteStyleEl || !paletteStyleEl.isConnected) {
+		paletteStyleEl = document.createElement("style");
+		paletteStyleEl.setAttribute(STYLE_ID, "");
+		document.head.appendChild(paletteStyleEl);
+	}
+	return paletteStyleEl;
+}
+function normalizeSlots(colors) {
+	const out = {};
+	if (!Array.isArray(colors)) return out;
+	colors.slice(0, SLOT_COUNT).forEach((color, i) => {
+		if (color) out[`--ev-color-series-${i + 1}`] = color;
+	});
+	return out;
+}
+/**
+* 应用一套数据色板
+* @param {string[] | { light: string[], dark: string[] }} palette
+*   数组：写入内联槽位（明暗共用）；{ light, dark }：注入样式表，随 html.dark 自动换挡
+* @param {{ dark?: boolean, target?: HTMLElement }} [options]
+*   dark 手动指定当前暗色态（默认探测 html.dark）；target 改写注入目标
+* @returns {boolean} 是否写入成功
+*/
+function applySeriesPalette(palette, options = {}) {
+	if (typeof document === "undefined") return false;
+	const el = options.target ?? document.documentElement;
+	if (!el || !palette) return false;
+	if (Array.isArray(palette)) {
+		paletteStyleEl?.remove();
+		paletteStyleEl = null;
+		for (const [name, value] of Object.entries(normalizeSlots(palette))) el.style.setProperty(name, value);
+		dispatchPaletteChange(options.dark);
+		return true;
+	}
+	const { light, dark } = palette;
+	if (!Array.isArray(light) && !Array.isArray(dark)) return false;
+	removeInlineSlots();
+	const styleEl = ensurePaletteStyleEl();
+	if (styleEl) {
+		const vars = (colors) => colors.map((c, i) => `--ev-color-series-${i + 1}: ${c}`).join(";");
+		styleEl.textContent = `${light ? `:root { ${vars(light)}; }` : ""}${dark ? ` html.dark { ${vars(dark)}; }` : ""}`;
+	}
+	dispatchPaletteChange(options.dark);
+	return true;
+}
+/**
+* 清除配色方案覆写（内联槽位 + 注入样式表），回到内置成套色板
+*/
+function clearSeriesPalette(options = {}) {
+	if (typeof document === "undefined") return false;
+	paletteStyleEl?.remove();
+	paletteStyleEl = null;
+	removeInlineSlots();
+	dispatchPaletteChange(options.dark);
+	return true;
+}
+//#endregion
 //#region src/index.js
 var components = { EvChart: chart_default };
 function install(app, _options = {}) {
@@ -5945,4 +6192,4 @@ function install(app, _options = {}) {
 var EvokeCharts = { install };
 var src_default = { install };
 //#endregion
-export { chart_default as EvChart, EvokeCharts, components, src_default as default, injectChartContext, install, provideChartContext, useChart };
+export { chart_default as EvChart, EvokeCharts, applySeriesPalette, clearSeriesPalette, components, src_default as default, injectChartContext, install, provideChartContext, useChart };

package/package.json

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