lc_tunnel/web/src/view/screen/components/chart.vue

<template>
  <img src="@/assets/main_top_left.png" alt="" class="imgStyle"/>
  <div class="titleIcon"></div>
  <div class="chartBox_title">温度/湿度</div>
  <div id="environment" class="environment"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, watch } from 'vue'
import { useScreenStore } from "@/pinia/modules/screen";
const useScreen = useScreenStore()

onMounted(() => {
  setTimeout(function (){
    const list  = useScreen.tunnelList[0].envData
    chartLoading(list)
  }, 1000)
})

const chartLoading = (list) => {
  let myChart = echarts.init(document.getElementById('environment'));
  myChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#ffffff'
        }
      },
    },
    legend: {
      data: [
        // '待下发','处置中','已完成'
        {
          name: '温度',
          textStyle: {
            color: '#0EFCFF'          // 图例文字颜色
          }
        },
        {
          name: '湿度',
          textStyle: {
            color: '#0EFCFF'          // 图例文字颜色
          }
        }
      ],
    },
    xAxis: {
      type: 'time', // 使用时间类型的x轴
      boundaryGap: false,
      axisLine: {
        show:true,
        lineStyle:{
          color:'#0EFCFF',
          width:1,
          type:'solid'
        }
      }
    },
    yAxis: {
      axisLine: {
        show:true,
        lineStyle:{
          color:'#0EFCFF',
          width:1,
          type:'solid'
        }
      },
      splitLine: {
        lineStyle: {
          color: ['#0EFCFF']
        }
      }
    },
    series: [
      {
        name: '温度',
        type: 'line',
        data: list.map(item => [new Date(item.CreatedAt).getTime(), item.temperature])
      },
      {
        name: '湿度',
        type: 'line',
        data: list.map(item => [new Date(item.CreatedAt).getTime(), item.humidity])
      }
    ],
  })
}

// 监听 ref 数据变化
watch(() => useScreen.currentTunnel, (newValue, oldValue) => {
  yourMethod(newValue) // 调用你的方法
})

const yourMethod = (value) => {
  chartLoading(value.envData)
  // 你的逻辑代码
}

</script>

<style scoped lang="less">
  .imgStyle{
    width: 400px;
    height: 250px;
  }
  .titleIcon{
    width: 5px;
    height: 20px;
    background-color: #0EFCFF;
    position: absolute;
    left: 20px;
    top: 16px;
  }
  .chartBox_title{
    position: absolute;
    left: 30px;
    top: 15px;
    font-size: 20px;
    color: #0EFCFF;
  }
  .environment{
    width: 400px;
    height: 250px;
    position: absolute;
    left: 5px;
    top: 20px;
  }


</style>