From 5ca26575367443214da1b533be9fac0b106bd475 Mon Sep 17 00:00:00 2001
From: zhangshun <453905631@qq.com>
Date: Mon, 29 Jun 2026 09:23:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96SPC=E7=9B=B4=E6=96=B9?=
 =?UTF-8?q?=E5=9B=BE=E5=9D=90=E6=A0=87=E8=8C=83=E5=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 spc-vue/src/components/EChartPanel.vue |  7 +++---
 spc-vue/src/utils/chartOptions.ts      | 33 ++++++++++++++++++++++++++
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/spc-vue/src/components/EChartPanel.vue b/spc-vue/src/components/EChartPanel.vue
index e9fc50f..32de351 100644
--- a/spc-vue/src/components/EChartPanel.vue
+++ b/spc-vue/src/components/EChartPanel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import * as echarts from "echarts";
 import type { EChartsOption } from "echarts";
-import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from "vue";
 
 const props = defineProps<{
   title: string;
@@ -23,13 +23,14 @@ function ensureChart() {
   resizeObserver.observe(chartElement.value);
 }
 
-// 按当前 option 刷新图表，空数据时释放实例避免显示旧图。
-function renderChart() {
+// 按当前 option 刷新图表，等待 v-if 容器挂载后再初始化，支持直接进入子路由。
+async function renderChart() {
   if (!props.option) {
     chart?.dispose();
     chart = null;
     return;
   }
+  await nextTick();
   ensureChart();
   chart?.setOption(props.option, true);
 }
diff --git a/spc-vue/src/utils/chartOptions.ts b/spc-vue/src/utils/chartOptions.ts
index 9485512..ba86785 100644
--- a/spc-vue/src/utils/chartOptions.ts
+++ b/spc-vue/src/utils/chartOptions.ts
@@ -13,6 +13,35 @@ function constantSeries(length: number, value: number): number[] {
   return Array.from({ length }, () => value);
 }
 
+// 计算直方图 X 轴范围，覆盖分箱、规格限、正态曲线和原始极值，并保留少量边距。
+function calculateHistogramXAxisRange(cpk: CpkResult): { min: number; max: number } {
+  const values = [
+    ...cpk.Xk,
+    ...cpk.XkUp,
+    ...cpk.XkDown,
+    ...cpk.NormalDistributionX,
+    cpk.LSL,
+    cpk.USL,
+    cpk.SL,
+    cpk.ValueMin,
+    cpk.ValueMax
+  ].filter((value) => Number.isFinite(value));
+
+  if (!values.length) {
+    return { min: 0, max: 1 };
+  }
+
+  const rawMin = Math.min(...values);
+  const rawMax = Math.max(...values);
+  const span = rawMax - rawMin;
+  const padding = span > 0 ? Math.max(span * 0.08, cpk.GroupWidth || 0) : Math.max(Math.abs(rawMin) * 0.08, 0.1);
+
+  return {
+    min: rawMin - padding,
+    max: rawMax + padding
+  };
+}
+
 // 找出越过控制限的点，作为红色散点叠加在控制图上。
 function outOfLimitPoints(values: readonly number[], upper: number, lower: number): Array<[number, number]> {
   return values
@@ -133,6 +162,8 @@ export function createCapabilityBarOption(cpk: CpkResult): EChartsOption {
 
 // 创建直方图和正态曲线配置，用来核对分布和规格限位置。
 export function createHistogramOption(cpk: CpkResult): EChartsOption {
+  const xRange = calculateHistogramXAxisRange(cpk);
+
   return {
     color: ["#0f766e", "#b45309"],
     tooltip: { trigger: "axis" },
@@ -141,6 +172,8 @@ export function createHistogramOption(cpk: CpkResult): EChartsOption {
     xAxis: {
       type: "value",
       name: "测量值",
+      min: xRange.min,
+      max: xRange.max,
       axisLabel: { color: "#667085" }
     },
     yAxis: [