通用图表。

src/router/modules/analysis.ts

@@ -66,5 +66,14 @@ export default {
         icon: "Guide",
       },
     },
+    {
+      path: "charts",
+      component: () => import("@/views/charts/index.vue"),
+      name: "Charts",
+      meta: {
+        title: "图表分析",
+        icon: "Guide",
+      },
+    },
   ],
 };

src/views/charts/index.vue

@@ -0,0 +1,184 @@
+<template>
+  <div ref="chartRef" style="width: 100%; height: 400px"></div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from "vue";
+import * as echarts from "echarts";
+
+// 假设的数据
+const data = [
+  { sampleId: "1", value: 10, ewma: 10.5, ucl: 15, lcl: 2 },
+  { sampleId: "2", value: 9, ewma: 11.0, ucl: 16, lcl: 3 },
+  { sampleId: "3", value: 13, ewma: 11.5, ucl: 17, lcl: 4 },
+  { sampleId: "4", value: 28, ewma: 12.0, ucl: 18, lcl: 5 },
+  { sampleId: "5", value: 7, ewma: 12.5, ucl: 22, lcl: 6 },
+  { sampleId: "6", value: 15, ewma: 13.0, ucl: 34, lcl: 8 },
+  { sampleId: "7", value: 12, ewma: 13.5, ucl: 34, lcl: 8 },
+  { sampleId: "8", value: 14, ewma: 14.0, ucl: 34, lcl: 8 },
+  { sampleId: "9", value: 16, ewma: 14.5, ucl: 34, lcl: 8 },
+  { sampleId: "10", value: 4, ewma: 15.0, ucl: 34, lcl: 8 },
+];
+
+const chartRef = ref(null);
+const chartInstance = ref(null);
+
+const prepareData = () => {
+  const sampleIds = data.map((item) => item.sampleId);
+  const values = data.map((item) => item.value);
+  const ewmaValues = data.map((item) => item.ewma);
+  const uclValues = data.map((item) => item.ucl);
+  const lclValues = data.map((item) => item.lcl);
+  const meanValue =
+    data.reduce((acc, item) => acc + item.value, 0) / data.length;
+
+  return {
+    sampleIds,
+    values,
+    ewmaValues,
+    uclValues,
+    lclValues,
+    meanValue,
+  };
+};
+
+const initChart = (chartDom) => {
+  const myChart = echarts.init(chartDom);
+  const { sampleIds, values, ewmaValues, uclValues, lclValues, meanValue } =
+    prepareData();
+
+  const option = {
+    title: {
+      text: "EWMA 控制图",
+    },
+    tooltip: {
+      trigger: "axis",
+    },
+    xAxis: {
+      type: "category",
+      boundaryGap: false, // 不留白，从原点开始
+      data: sampleIds,
+    },
+    yAxis: {
+      type: "value",
+      name: "EWMA值",
+    },
+    series: [
+      {
+        name: "数值",
+        type: "line",
+        // step: "start",
+        symbol: "circle", //将小圆点改成实心 不写symbol默认空心
+        symbolSize: 8,
+        data: values.map((value, index) => ({
+          value,
+          itemStyle: {
+            color:
+              value > uclValues[index] || value < lclValues[index]
+                ? "red"
+                : "blue",
+          },
+        })),
+      },
+      // {
+      //   name: "EWMA",
+      //   type: "line",
+      //   step: "start",
+      //   data: ewmaValues,
+      //   lineStyle: {
+      //     color: "green",
+      //   },
+      // },
+      {
+        name: "均值",
+        type: "line",
+        data: Array(sampleIds.length).fill(meanValue),
+        showSymbol: false,
+        lineStyle: {
+          color: "green",
+          type: "solid",
+        },
+      },
+      {
+        name: "UCL",
+        type: "line",
+        step: "start",
+        data: uclValues,
+        showSymbol: false,
+        lineStyle: {
+          color: "red",
+          type: "dashed",
+        },
+      },
+      {
+        name: "LCL",
+        type: "line",
+        step: "start",
+        data: lclValues,
+        showSymbol: false,
+        lineStyle: {
+          color: "red",
+          type: "dashed",
+        },
+      },
+    ],
+    color: ["blue", "green", "red", "red", "black"],
+  };
+
+  myChart.setOption(option);
+  chartInstance.value = myChart;
+};
+
+const resizeChart = () => {
+  if (chartInstance.value) {
+    chartInstance.value.resize();
+  }
+};
+
+onMounted(() => {
+  initChart(chartRef.value);
+  window.addEventListener("resize", resizeChart);
+});
+
+watch(data, () => {
+  if (chartInstance.value) {
+    const { sampleIds, values, ewmaValues, uclValues, lclValues, meanValue } =
+      prepareData();
+    const option = {
+      xAxis: {
+        data: sampleIds,
+      },
+      series: [
+        {
+          data: values.map((value, index) => ({
+            value,
+            itemStyle: {
+              color:
+                value > uclValues[index] || value < lclValues[index]
+                  ? "red"
+                  : "blue",
+            },
+          })),
+        },
+        {
+          data: ewmaValues,
+        },
+        {
+          data: uclValues,
+        },
+        {
+          data: lclValues,
+        },
+        {
+          data: Array(sampleIds.length).fill(meanValue),
+        },
+      ],
+    };
+    chartInstance.value.setOption(option);
+  }
+});
+</script>
+
+<style scoped>
+/* 样式可以根据需要进行调整 */
+</style>