fix: 图表动态渲染

src/components/home/LineChart.vue

@@ -1,41 +1,30 @@
 <script lang="ts" setup>
 import * as echarts from 'echarts'
-import { onMounted, ref, watchEffect } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 
 const props = defineProps<{
-  title: string
-  chartId: string
   envData: Home.DisplayrelyMgrParams
 }>()
 
-const temperatureData = ref<(number)[]>([0])
-const humidityData = ref<(number)[]>([0])
-const h2o2ConcentrationData = ref<(number)[]>([0])
-const h2o2SaturationData = ref<(number)[]>([0])
-const dataLength = ref(10)
-
-watchEffect(() => {
-  temperatureData.value.push(props.envData.temp)
-  humidityData.value.push(props.envData.rh)
-  h2o2ConcentrationData.value.push(props.envData.rs)
-  h2o2SaturationData.value.push(props.envData.h2o2)
-  dataLength.value = temperatureData.value.length
-})
-
-onMounted(() => {
-  const chartDom = document.getElementById(props.chartId)
-  if (chartDom) {
-    const myChart = echarts.init(chartDom, null, { renderer: 'svg' })
-
+const dataLength = ref(30)
+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: props.title,
+        text: '哈哈哈',
       },
       tooltip: {
         trigger: 'axis',
       },
       legend: {
-        // data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
         data: ['温度', '湿度', 'H2O2浓度', 'H2O2饱和度'],
         orient: 'horizontal', // 水平布局
         itemWidth: 10, // 图例图形宽度
@@ -56,7 +45,7 @@ onMounted(() => {
         {
           name: '温度',
           type: 'line',
-          data: temperatureData.value.sort((a, b) => a - b),
+          data: newValue.map(item => item.temp),
           symbol: 'circle',
           symbolSize: 2,
           lineStyle: {
@@ -67,7 +56,7 @@ onMounted(() => {
         {
           name: '湿度',
           type: 'line',
-          data: humidityData.value.sort((a, b) => a - b),
+          data: newValue.map(item => item.rh),
           symbol: 'circle',
           symbolSize: 2,
           lineStyle: {
@@ -78,7 +67,7 @@ onMounted(() => {
         {
           name: 'H2O2浓度',
           type: 'line',
-          data: h2o2ConcentrationData.value.sort((a, b) => a - b),
+          data: newValue.map(item => item.h2o2),
           symbol: 'circle',
           symbolSize: 2,
           lineStyle: {
@@ -89,7 +78,7 @@ onMounted(() => {
         {
           name: 'H2O2饱和度',
           type: 'line',
-          data: h2o2SaturationData.value.sort((a, b) => a - b),
+          data: newValue.map(item => item.rs),
           symbol: 'circle',
           symbolSize: 2,
           lineStyle: {
@@ -100,15 +89,23 @@ onMounted(() => {
       ],
     }
     myChart.setOption(option)
-  }
+  },
+  {
+    deep: true,
+  },
+)
+
+const chartRef = ref<HTMLElement | null>(null)
+
+onMounted(() => {
+  echarts.init(chartRef.value, null, { renderer: 'svg' })
 })
 </script>
 
 <template>
   <div class="line-chart">
-    <div :id="chartId" style="height: 50vh;" />
+    <div ref="chartRef" style="height: 50vh" />
   </div>
 </template>
 
-<style scoped>
-</style>
+<style scoped></style>

src/stores/homeStore.ts

@@ -43,6 +43,8 @@ export const useHomeStore = defineStore('home', () => {
   const defaultIntensityValue = ref(10)
   const defaultIntensityTypeValue = ref()
 
+  const allData = ref<any[]>([])
+
   /**
    * @function updateHomeData
    * @param {Home.DisplayrelyMgr[]} data - 当前设备所有环境数据（仓内、探头）
@@ -52,11 +54,24 @@ export const useHomeStore = defineStore('home', () => {
     const sensordata = data.sensordata
     if (sensordata && sensordata.length) {
       sensordata.forEach((item, index) => {
+        if (allData.value[index]) {
+          allData.value[index].data.push(item)
+          // data中的数据只保留最后30条
+          if (allData.value[index].data.length > 30) {
+            allData.value[index].data.shift()
+          }
+        }
+        else {
+          allData.value.push({
+            data: [item],
+          })
+        }
         h2O2SensorData.value[index] = {
           ...h2O2SensorData.value[index],
           ...item,
         }
       })
+      console.log('allData', allData.value)
     }
   }
 
@@ -140,6 +155,7 @@ export const useHomeStore = defineStore('home', () => {
     isDeviceIdle,
 
     h2O2SensorData,
+    allData,
     updateHomeData,
 
     updatePressure,

src/views/home/chart.vue

@@ -83,7 +83,7 @@ const onClose = () => {
   <main v-loading="loading" class="main-content">
     <div class="line-chart-title">
       <div v-if="formulaInfo && formulaInfo.name" class="line-chart-formula">
-        <HomeFormula style="background: #E0F0FF;" />
+        <HomeFormula style="background: #e0f0ff" />
       </div>
       <div class="line-chart-set">
         <bt-button
@@ -101,21 +101,20 @@ const onClose = () => {
         </bt-button>
       </div>
     </div>
-    <div class="line-chart-content" :style="{ 'grid-template-columns': `repeat(${h2O2SensorData.length},1fr)` }">
-      <div v-for="item in h2O2SensorData" :key=" item.title">
-        <LineChart :title="item.title" :chart-id="item.chartId" :env-data="item" />
+    <div
+      class="line-chart-content"
+      :style="{ 'grid-template-columns': `repeat(${homeStore.h2O2SensorData.length},1fr)` }"
+    >
+      <div v-for="(item, index) in homeStore.allData" :key="index">
+        <LineChart :env-data="item.data" />
       </div>
     </div>
     <div class="line-chart-bottom">
       <div class="home-chart-time">
         <div v-if="!homeStore.isDeviceIdle" class="home-remain-time">
           <div class="home-chart-label">
-            <span v-if="disinfectionState.state === 'disinfection'">
-              预计剩余时间:
-            </span>
-            <span v-else>
-              消毒状态：
-            </span>
+            <span v-if="disinfectionState.state === 'disinfection'"> 预计剩余时间: </span>
+            <span v-else> 消毒状态： </span>
           </div>
           <div v-if="curStateRemainTime" class="home-chart-value">
             {{ curStateRemainTime }}
@@ -161,11 +160,11 @@ const onClose = () => {
 </template>
 
 <style lang="scss" scoped>
-.main-content{
+.main-content {
   overflow: hidden;
   background: $gradient-color;
   height: $main-container-height;
-  .line-chart-formula{
+  .line-chart-formula {
     width: 40vw;
     //background: #E0F0FF;
     height: 3.5rem;
@@ -176,34 +175,34 @@ const onClose = () => {
     border-radius: 10px;
     margin-left: 2rem;
   }
-  .line-chart-set{
+  .line-chart-set {
     display: flex;
     justify-content: end;
     align-items: center;
     width: 65vw;
   }
-  .line-chart-title{
+  .line-chart-title {
     height: 15%;
     display: flex;
     align-items: center;
   }
-  .line-chart-content{
+  .line-chart-content {
     display: grid;
     height: 65%;
   }
-  .line-chart-bottom{
+  .line-chart-bottom {
     height: 15%;
     display: flex;
     padding-right: 20px;
-    .home-chart-btn{
+    .home-chart-btn {
       display: flex;
       justify-content: end;
       width: 65%;
     }
-    .home-chart-time{
+    .home-chart-time {
       width: 35%;
-      .home-remain-time{
-        background: #F6FAFE;
+      .home-remain-time {
+        background: #f6fafe;
         width: 27vw;
         height: 8vh;
         border-radius: 12px;
@@ -213,8 +212,8 @@ const onClose = () => {
         font-size: 24px;
         gap: 10px;
         margin-left: 1rem;
-        .home-chart-value{
-          color: #2892F3;
+        .home-chart-value {
+          color: #2892f3;
         }
       }
     }

src/views/home/index.vue

@@ -35,7 +35,7 @@ onMounted(() => {
     loading.value = systemStore.loading
     if (homeStore.h2O2SensorData && homeStore.h2O2SensorData.length) {
       styles.value = computedStyle()
-      console.log('homeStore.h2O2SensorData', homeStore.h2O2SensorData)
+      // console.log('homeStore.h2O2SensorData', homeStore.h2O2SensorData)
       environmentParams.value = {
         ...homeStore.h2O2SensorData[0],
         title: '仓内',
@@ -64,7 +64,7 @@ const styles = ref<any>({
 })
 
 const computedStyle = () => {
-  console.log('homeStore.h2O2SensorData', homeStore.h2O2SensorData.length)
+  // console.log('homeStore.h2O2SensorData', homeStore.h2O2SensorData.length)
   if (deviceStore.isLowCost) {
     if (homeStore.h2O2SensorData.length === 1) {
       return {