实时数据折线图控件

1.x轴数据结构

[
    "15:34:24",
    "15:34:33",
    "15:34:35",
    "15:34:36",
    "15:34:36"
]

2.series配置数据 结构

[
    {
        "name": "2",
        "time": "2024-11-28 15:34:24",
        "type": "line",
        "showSymbol": false,
        "hoverAnimation": false,
        "data": [
            0,
            29.6,
            29.6,
            29.6,
            29.6
        ]
    }
]

<script setup lang="ts">
import echarts from "@/plugins/echarts";
import { ECharts } from "echarts";
import { onBeforeMount, nextTick, onMounted, reactive, ref, watch } from "vue";
import { tryOnUnmounted, useEventListener, useTimeoutFn } from "@vueuse/core";
import { defineExpose } from "vue";
import { ElMessage } from "element-plus";
// const props = defineProps(["lineData", "selectTime", "rackNumber"]);
const props = defineProps({
  selectTime: {
    type: Number,
    default: 350
  },
  rackNumber: {
    type: String,
    default: ""
  },

  lineData: {
    type: Object,
    default: () => {
      return [];
    }
  },
  multipleSelection: {
    type: Object,
    default: () => {
      return [];
    }
  }
});

const lineData = props.lineData;

let echartInstance: ECharts;

const chartData = ref([]);
const xData = ref([]);
const now = +new Date(2023, 1, 1);
const oneDay = 24 * 3600 * 1000;
const value = Math.random() * 1000;

function initechartInstance() {
  const echartDom = document.querySelector(".lineChartRefTime");
  if (!echartDom) return;

  if (!echartInstance) {
    // @ts-ignore
    echartInstance = echarts.init(echartDom);
  }
  // echartInstance.clear(); //清除旧画布 重新渲染

  echartInstance.setOption({
    title: {
      text: "实时监控数据的变化"
    },
    tooltip: {
      trigger: "axis",
      formatter: function (params) {
        let str = `<div>${params[0].name}</div>`;
        params.forEach(it => {
          str += `<div>${it.marker} ${it.seriesName}：${it.data}</div>`;
        });
        return str;
      },
      axisPointer: {
        animation: false
      }
    },
    xAxis: {
      type: "category",
      data: xData.value,
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: "value",
      boundaryGap: [0, "20%"],
      splitLine: {
        show: false
      }
    },
    series: chartData.value
  });
}

onBeforeMount(() => {
  nextTick(() => {
    initechartInstance();
  });
});

onMounted(() => {
  nextTick(() => {
    useEventListener("resize", () => {
      if (!echartInstance) return;
      useTimeoutFn(() => {
        echartInstance.resize();
      }, 180);
    });
  });
});

tryOnUnmounted(() => {
  if (!echartInstance) return;
  echartInstance.dispose();
  echartInstance = null;
});

const selectTimeData = ref(350);

const changeTime = time => {
  if (time == 1) selectTimeData.value = 150;

  if (time == 3) selectTimeData.value = 450;

  if (time == 5) selectTimeData.value = 750;

  if (time == 10) selectTimeData.value = 1500;

  if (time == 60) selectTimeData.value = 8000;

  echartInstance.dispose();
  echartInstance = null;
  xData.value = [];
  chartData.value = [];
  initechartInstance();
};
const getTime = str => {
  return str.split(" ")[1];
};

watch(
  () => props.lineData,
  () => {
    nextTick(() => {
      // 这是数据吗

      if (props.lineData.length <= 0) return false;
      console.log(chartData.value, "chartData");

      if (!chartData.value.length) {
        chartData.value = props.lineData;
        xData.value = [getTime(props.lineData[0].time)];
      } else {
        console.log(chartData.value, " 1111111111");

        //实时数据拼接
        chartData.value.forEach(item => {
          const child = props.lineData.find(it => it.name === item.name) || {};
          item.data = item.data.concat(child.data);
        });
        console.log(chartData.value, " 222222222");
        xData.value.push(getTime(props.lineData[0].time));
      }

      if (xData.value.length >= selectTimeData.value) {
        xData.value.shift();
        chartData.value.forEach(it => {
          it.data.shift();
        });
      }
      echartInstance.setOption({
        series: chartData.value,
        xAxis: {
          type: "category",
          data: xData.value,
          splitLine: {
            show: false
          }
        }
      });
    });
  },
  { deep: true }
);

watch(
  () => props.selectTime,
  () => {
    changeTime(props.selectTime);
  },
  { deep: true }
);

watch(
  () => props.rackNumber,
  () => {
    echartInstance.dispose();
    echartInstance = null;
    xData.value = [];
    chartData.value = [];
    initechartInstance();
  }
);

watch(
  () => props.multipleSelection,
  () => {
    echartInstance.dispose();
    echartInstance = null;
    xData.value = [];
    chartData.value = [];
    initechartInstance();
  }
);

defineExpose({
  initechartInstance
});
</script>

<template>
  <div class="lineChartRefTime" style="width: 100%; height: 68vh" />
</template>