优化SPC直方图坐标范围

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 刷新图表，空数据时释放实例避免显示旧图。
+// 按当前 option 刷新图表，等待 v-if 容器挂载后再初始化，支持直接进入子路由。
-function renderChart() {
+async function renderChart() {
   if (!props.option) {
     chart?.dispose();
     chart = null;
     return;
   }
+  await nextTick();
   ensureChart();
   chart?.setOption(props.option, true);
 }

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: [