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