关联分析-图表更新

src/views/analysis/warningAnalysis/connectAnalysis/components/echart-content.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, onMounted, watchEffect } from 'vue'
+import { ref, onMounted, watch, reactive } from 'vue'
 import { plainOptions, } from '../connectAnalysis.data'
 import * as echarts from 'echarts';
 
@@ -17,11 +17,15 @@ let props = defineProps({
 })
 //获取dom元素节点
 let line = ref<any>();
+let myChart = ref()
+let option = reactive({})
+
 function initSeries(param) {
   if (param.length) {
-  let data= param.map((el, index) => {
+    let data = param.map(el => {
+      let seriesD = plainOptions.find(v => v.value == el.label)
       return {
-        name:plainOptions.find(v=>v.value==el.label)['label'],
+        name: seriesD['label'],
         type: 'line',
         stack: '',
         symbol: 'circle',
@@ -29,380 +33,161 @@ function initSeries(param) {
 
         itemStyle: {
           normal: {
-            color: plainOptions.find(v=>v.value==el.label)['color'],
+            color: seriesD['color'],
             lineStyle: {
-              color:plainOptions.find(v=>v.value==el.label)['color'],
+              color: seriesD['color'],
               width: 1
             },
             areaStyle: {
               color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                 offset: 0,
-                color: plainOptions.find(v=>v.value==el.label)['areaColor'][0],
+                color: seriesD['areaColor'][0],
               }, {
                 offset: 1,
-                color: plainOptions.find(v=>v.value==el.label)['areaColor'][1],
+                color: seriesD['areaColor'][1],
               }]),
             }
           }
         },
-        data: el.value
+        data: el.value.map(v => v[el.label])
       }
     })
     return data
   }
 }
+function getOption() {
+  myChart.value = echarts.init(line.value);
+  myChart.value.setOption(option);
 
 
-function getOption(param) {
-  nextTick(() => {
-    let myChart = echarts.init(line.value);
-    let option = {
-      grid: {
-        left: '2%',
-        right: '2%',
-        top: '6%',
-        bottom: '2%',
-        containLabel: true
+}
+function updateEchart(param) {
+  let opt = {
+    grid: {
+      left: '2%',
+      right: '2%',
+      top: '6%',
+      bottom: '2%',
+      containLabel: true
+    },
+    tooltip: {
+      trigger: 'axis',
+      backgroundColor: 'rgba(0, 0, 0, .6)',
+      textStyle: {
+        color: '#fff',
+        fontSize: 12,
       },
-      tooltip: {
-        trigger: 'axis',
-        backgroundColor: 'rgba(0, 0, 0, .6)',
-        textStyle: {
-          color: '#fff',
-          fontSize: 12,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        axisLabel: {
+          color: '#74767b',
+          overflow: 'truncate',
         },
-      },
-      xAxis: [
-        {
-          type: 'category',
-          boundaryGap: false,
-          axisLabel: {
-            color: '#74767b',
-            overflow: 'truncate',
-          },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: '#3173f0',
-              width: 1,      // 线的宽度
-              type: 'dashed' // 线的类型为虚线
-            }
-          },
-          axisTick: {
-            show: false,
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              type: 'dashed',
-              color: 'rgba(209, 229, 253)'
-            }
-          },
-          data: param.xData || []
-        }
-      ],
-      yAxis: [
-        {
-          type: 'value',
-          name: 'ppm',
-          nameTextStyle: {
-            color: '#74767b',
-            fontSize: 14,
-            lineHeight: 10,
-          },
-          min: 0,
-          // max: 1000,
-          axisLabel: {
-            formatter: '{value}',
-            textStyle: {
-              color: '#74767b'
-            }
-          },
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: '#27b4c2'
-            }
-          },
-          axisTick: {
-            show: false,
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              type: 'dashed',
-              color: 'rgba(209, 229, 253)'
-            }
+        axisLine: {
+          show: true,
+          lineStyle: {
+            color: '#3173f0',
+            width: 1,      // 线的宽度
+            type: 'dashed' // 线的类型为虚线
           }
         },
-        {
-          type: 'value',
-          name: '',
-          min: 0,
-          max: 100,
-          axisLabel: {
-            formatter: '{value}',
-            textStyle: {
-              color: '#74767b'
-            }
-          },
-          axisLine: {
-            show: false,
-            lineStyle: {
-              color: '#186afe'
-            }
-          },
-          axisTick: {
-            show: false,
-          },
-          splitLine: {
-            show: true,
-            lineStyle: {
-              type: 'dashed',
-              color: 'rgba(209, 229, 253)'
-            }
+        axisTick: {
+          show: false,
+        },
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: 'dashed',
+            color: 'rgba(209, 229, 253)'
           }
-        }
-      ],
-      // series: initSeries(param.yData)
-      series: [
-        {
-          name: 'CO浓度(ppm)',
-          type: 'line',
-          stack: '',
-          symbol: 'circle',
-          symbolSize: 0,
-          itemStyle: {
-            normal: {
-              color: '#3bd97a',
-              lineStyle: {
-                color: "#3bd97a",
-                width: 1.5
-              },
-              areaStyle: {
-                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                  offset: 0,
-                  color: 'rgba(59, 217, 122,0.05)'
-                }, {
-                  offset: 1,
-                  color: 'rgba(59, 217, 122,0.3)'
-                }]),
-              }
-            }
-          },
-          markPoint: {
-            itemStyle: {
-              normal: {
-                color: '#3bd97a'
-              }
-            }
-          },
-          data: param.yData.find(v => v.label == 'coVal') ? param.yData.find(v => v.label == 'coVal').value.map(el => el['coVal']) : []
         },
-        {
-          name: 'CH4浓度(%)',
-          type: 'line',
-          stack: '',
-          symbol: 'circle',
-          symbolSize: 0,
-
-          itemStyle: {
-            normal: {
-              color: '#f9c74a',
-              lineStyle: {
-                color: "#f9c74a",
-                width: 1.5
-              },
-              areaStyle: {
-                //color: '#94C9EC'
-                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                  offset: 0,
-                  color: 'rgba(249, 199, 74,0.05)'
-                }, {
-                  offset: 1,
-                  color: 'rgba(249, 199, 74,0.3)'
-                }]),
-              }
-            }
-          },
-          data: param.yData.find(v => v.label == 'ch4Val') ? param.yData.find(v => v.label == 'ch4Val').value.map(el => el['ch4Val']) : []
+        data: param.xData || []
+      }
+    ],
+    yAxis: [
+      {
+        type: 'value',
+        name: 'ppm',
+        nameTextStyle: {
+          color: '#74767b',
+          fontSize: 14,
+          lineHeight: 10,
         },
-        {
-          name: 'C2H4浓度(ppm)',
-          type: 'line',
-          stack: '',
-          symbol: 'circle',
-          symbolSize: 0,
-          itemStyle: {
-            normal: {
-              color: '#ac7bf1',
-              lineStyle: {
-                color: "#ac7bf1",
-                width: 1.5
-              },
-              areaStyle: {
-                //color: '#94C9EC'
-                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                  offset: 0,
-                  color: 'rgba(172, 123, 241,0.05)'
-                }, {
-                  offset: 1,
-                  color: 'rgba(172, 123, 241,0.3)'
-                }]),
-              }
-            }
-          },
-          data: param.yData.find(v => v.label == 'c2h4Val') ? param.yData.find(v => v.label == 'c2h4Val').value.map(el => el['c2h4Val']) : []
+        min: 0,
+        // max: 1000,
+        axisLabel: {
+          formatter: '{value}',
+          textStyle: {
+            color: '#74767b'
+          }
         },
-        {
-          name: 'C2H2浓度(ppm)',
-          type: 'line',
-          stack: '',
-          symbol: 'circle',
-          symbolSize: 0,
-          itemStyle: {
-            normal: {
-              color: '#50b2f9',
-              lineStyle: {
-                color: "#50b2f9",
-                width: 1.5
-              },
-              areaStyle: {
-                //color: '#94C9EC'
-                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                  offset: 0,
-                  color: 'rgba(80, 178, 249,0.05)'
-                }, {
-                  offset: 1,
-                  color: 'rgba(80, 178, 249,0.3)'
-                }]),
-              }
-            }
-          },
-          data: param.yData.find(v => v.label == 'c2h2Val') ? param.yData.find(v => v.label == 'c2h2Val').value.map(el => el['c2h2Val']) : []
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: '#27b4c2'
+          }
         },
-        {
-          name: 'CO2浓度(%)',
-          type: 'line',
-          stack: '',
-          symbol: 'circle',
-          symbolSize: 0,
-          itemStyle: {
-            normal: {
-              color: '#1fd0da',
-              lineStyle: {
-                color: "#1fd0da",
-                width: 1.5
-              },
-              areaStyle: {
-                //color: '#94C9EC'
-                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                  offset: 0,
-                  color: 'rgba(31, 208, 218,0.05)'
-                }, {
-                  offset: 1,
-                  color: 'rgba(31, 208, 218,0.3)'
-                }]),
-              }
-            }
-          },
-          data: param.yData.find(v => v.label == 'co2Val') ? param.yData.find(v => v.label == 'co2Val').value.map(el => el['co2Val']) : []
+        axisTick: {
+          show: false,
         },
-        {
-          name: 'O2浓度(%)',
-          type: 'line',
-          stack: '',
-          symbol: 'circle',
-          symbolSize: 0,
-          itemStyle: {
-            normal: {
-              color: '#ff6666',
-              lineStyle: {
-                color: "#ff6666",
-                width: 1.5
-              },
-              areaStyle: {
-                //color: '#94C9EC'
-                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                  offset: 0,
-                  color: 'rgba(255, 102, 102,0.05)'
-                }, {
-                  offset: 1,
-                  color: 'rgba(255, 102, 102,0.3)'
-                }]),
-              }
-            }
-          },
-          data: param.yData.find(v => v.label == 'o2Val') ? param.yData.find(v => v.label == 'o2Val').value.map(el => el['o2Val']) : []
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: 'dashed',
+            color: 'rgba(209, 229, 253)'
+          }
+        }
+      },
+      {
+        type: 'value',
+        name: '',
+        min: 0,
+        max: 100,
+        axisLabel: {
+          formatter: '{value}',
+          textStyle: {
+            color: '#74767b'
+          }
         },
-        {
-          name: '压差(kPa)',
-          type: 'line',
-          stack: '',
-          symbol: 'circle',
-          symbolSize: 0,
-          itemStyle: {
-            normal: {
-              color: '#3b4bd9',
-              lineStyle: {
-                color: "#3b4bd9",
-                width: 1.5
-              },
-              areaStyle: {
-                //color: '#94C9EC'
-                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                  offset: 0,
-                  color: 'rgba(59, 75, 217,0.05)'
-                }, {
-                  offset: 1,
-                  color: 'rgba(59, 75, 217,0.3)'
-                }]),
-              }
-            }
-          },
-          data: param.yData.find(v => v.label == 'sourcePressure') ? param.yData.find(v => v.label == 'sourcePressure').value.map(el => el['sourcePressure']) : []
+        axisLine: {
+          show: false,
+          lineStyle: {
+            color: '#186afe'
+          }
         },
-        {
-          name: '温度(℃)',
-          type: 'line',
-          stack: '',
-          symbol: 'circle',
-          symbolSize: 0,
-          itemStyle: {
-            normal: {
-              color: '#f18736',
-              lineStyle: {
-                color: "#f18736",
-                width: 1.5
-              },
-              areaStyle: {
-                //color: '#94C9EC'
-                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
-                  offset: 0,
-                  color: 'rgba(241, 135, 54,0.05)'
-                }, {
-                  offset: 1,
-                  color: 'rgba(241, 135, 54,0.3)'
-                }]),
-              }
-            }
-          },
-          data: param.yData.find(v => v.label == 'temperature') ? param.yData.find(v => v.label == 'temperature').value.map(el => el['temperature']) : []
+        axisTick: {
+          show: false,
         },
-      ]
-    };
-    myChart.setOption(option);
-    window.onresize = function () {
-      myChart.resize();
-    };
-  });
+        splitLine: {
+          show: true,
+          lineStyle: {
+            type: 'dashed',
+            color: 'rgba(209, 229, 253)'
+          }
+        }
+      }
+    ],
+    series: initSeries(param.yData)
+  };
+  option = Object.assign({}, opt)
+  if (myChart.value) {
+    myChart.value.setOption(option, true);
+
+  }
 }
 
-watchEffect(() => {
- 
-    props.echartData && getOption(props.echartData)
-  
+watch(() => props.echartData, (newV, oldV) => {
+  updateEchart(newV)
+}, { deep: true })
 
+onMounted(() => {
+  getOption()
+  window.onresize = function () {
+    myChart.value.resize();
+  };
 })
 
 </script>

src/views/analysis/warningAnalysis/connectAnalysis/index.vue

@@ -174,11 +174,13 @@ import { SvgIcon } from '/@/components/Icon';
     flex-wrap: wrap;
     gap: 16px;
     padding: 20px;
-    border: 1px solid #f0f0f0;
+    border: 1px solid #cad3e1;
     border-radius: 4px;
-    background: @card-bg-color;
+    // background: @card-bg-color;
+    background-color: #f8f9fc;
     align-items: center;
-    box-shadow: 0px 0px 8px 1px rgba(202, 211, 225, 0.5);
+    // box-shadow: 0px 0px 8px 1px rgba(202, 211, 225, 1);
+    
   }
 
   .filter-section {