disinfector_vue/src/components/home/LineChart.vue

<script lang="ts" setup>
import * as echarts from 'echarts'
import { formatDateTime } from 'libs/utils'
import { onMounted, ref, watch } from 'vue'

const props = defineProps<{
  envData: any
}>()

const titles = {
  Internal: '仓内',
  WiredExtSensor: '探头',
  WirelessExtSensor: '探头',
}

watch(
  () => props.envData,
  (newValue) => {
    if (!chartRef.value) {
      return
    }
    let myChart = echarts.getInstanceByDom(chartRef.value)
    if (!myChart) {
      myChart = echarts.init(chartRef.value, null, { renderer: 'svg' })
    }
    const option = {
      title: {
        text: (titles[newValue?.type || ''] || '') + (newValue.type !== 'Internal' ? newValue?.id || '' : ''),
        left: 'center', // 水平居中
        top: 0,
      },
      grid: {
        top: 100,
      },
      tooltip: {
        trigger: 'axis',
        position: [10, 10],
        formatter: (params: any[]) => {
          if (!params || !params.length)
            return ''
          const time = params[0].axisValue
          let html = `<div>${time}</div>`

          params.forEach((item) => {
            let unit = ''
            switch (item.seriesName) {
              case '温度':
                unit = ' ℃'
                break
              case '相对湿度':
                unit = ' %RH'
                break
              case 'H₂O₂浓度':
                unit = ' ppm'
                break
              case 'H₂O₂相对饱和度':
                unit = ' %RS'
                break
            }
            // item.marker 就是 echarts 自动给你的小彩点
            html += `<div>${item.marker} ${item.seriesName}: ${item.data}${unit}</div>`
          })
          return html
        },
      },
      legend: {
        data: ['温度', '相对湿度', 'H₂O₂浓度', 'H₂O₂相对饱和度'],
        orient: 'horizontal', // 水平布局
        itemWidth: 10, // 图例图形宽度
        itemHeight: 10, // 图例图形高度
        columnWidth: 80, // 每列宽度，可按需调整
        top: '5%', // 距离容器顶部距离
        left: 'center', // 水平居中
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: newValue.data?.map(item => formatDateTime('HH:mm:ss', item.timestamp)),
      },
      yAxis: {
        type: 'value',
      },
      series: [
        {
          name: '温度',
          type: 'line',
          data: newValue.data?.map(item => item.temp.toFixed(2)),
          symbol: 'circle',
          symbolSize: 2,
          lineStyle: {
            color: '#1e90ff',
            width: 1,
          },
        },
        {
          name: '相对湿度',
          type: 'line',
          data: newValue.data?.map(item => item.rh.toFixed(2)),
          symbol: 'circle',
          symbolSize: 2,
          lineStyle: {
            color: '#32cd32',
            width: 1,
          },
        },
        {
          name: 'H₂O₂浓度',
          type: 'line',
          data: newValue.data?.map(item => item.h2o2.toFixed(2)),
          symbol: 'circle',
          symbolSize: 2,
          lineStyle: {
            color: '#ffd700',
            width: 1,
          },
        },
        {
          name: 'H₂O₂相对饱和度',
          type: 'line',
          data: newValue.data?.map(item => item.rs.toFixed(2)),
          symbol: 'circle',
          symbolSize: 2,
          lineStyle: {
            color: '#ff0000',
            width: 1,
          },
        },
      ],
    }
    myChart.setOption(option)
    myChart.resize()
  },
  {
    deep: true,
  },
)

const chartRef = ref<HTMLElement | null>(null)

onMounted(() => {
  echarts.init(chartRef.value, null, { renderer: 'svg' })
})
</script>

<template>
  <div ref="chartRef" style="height: 100%; width: 50%" />
</template>

<style scoped></style>