feat: 灰度图可视化、解决图表共用组件相互影响

meas_web/src/views/meas/envData/ECharts.vue

@@ -1,6 +1,6 @@
 <template>
-    <div :class="className" :style="{height:height,width:width}" />
-  </template>
+  <div :class="className" :style="{height:height,width:width}" />
+</template>
   
   <script>
   import * as echarts from 'echarts'
@@ -41,6 +41,11 @@
       chartData: {
         deep: true,
         handler(val) {
+          this.chart.dispose()
+          this.chart = null
+          this.$nextTick(() => {
+            this.initChart()
+          })
           this.setOptions(val)
         }
       }
@@ -67,5 +72,5 @@
       }
     }
   }
-  </script>
+</script>
   

meas_web/src/views/meas/envData/index.vue

@@ -360,7 +360,7 @@
       </div>
     </el-dialog>
     <el-dialog title="数据可视化" :visible.sync="fileVisible" width="70%" append-to-body>
-      <ECharts :chartData="chartData" />
+      <ECharts :class="chartType === 'heatmap'?'heatmapChart':''" :chartData="chartData" :width="chartType === 'heatmap'?'400px':'100%'" />
     </el-dialog>
   </div>
 </template>
@@ -400,7 +400,7 @@ import ECharts from "./ECharts.vue";
 
 export default {
   name: "EnvData",
-  components: { ECharts },
+  components: { ECharts},
   data() {
     return {
       // 遮罩层
@@ -541,6 +541,7 @@ export default {
       fileShowData: [],
       disabled: false,
       chartData: {},
+      chartType: "",
     };
   },
   created() {
@@ -816,7 +817,7 @@ export default {
       this.fetchLogFile(url)
         .then((text) => {
           this.fileShowData = text.split("\r\n");
-          this.handlePointChart(this.fileShowData);
+          this.handleHeatmapChart(this.fileShowData);
           this.fileVisible = true;
         })
         .catch((error) => {
@@ -838,7 +839,13 @@ export default {
     },
     // echarts数据
     handleLineChart(data) {
+      this.chartType = "line";
       const data1 = data[0].replace(/\s+/g, " ").split(" ");
+      const customName=data1.reduce((acc, label) => {
+        acc[label + 'Data'] = []; // 初始化数组
+        return acc;
+      }, {});
+      console.log("customName",customName);
       // console.log("data1",data1);
       // const data1 = ['wavelenth(μm)','R','Cd'];
       let wavelenthData = [],
@@ -849,11 +856,16 @@ export default {
       // }
       for (let i = 1; i < data.length; i++) {
         let row = data[i].split("\t");
-        wavelenthData.push(parseFloat(row[0]));
-        RData.push(parseFloat(row[1]));
-        CdData.push(parseFloat(row[2]));
+        let index=0
+        for (let key in customName){
+          customName[key].push(parseFloat(row[index++]))
+        }
+        // wavelenthData.push(parseFloat(row[0]));
+        // RData.push(parseFloat(row[1]));
+        // CdData.push(parseFloat(row[2]));
       }
-      this.chartData = {
+      console.log("customName",customName);
+      const chartData = {
         tooltip: {
           trigger: "axis",
           axisPointer: {
@@ -866,7 +878,7 @@ export default {
             axisTick: {
               alignWithLabel: true,
             },
-            data: wavelenthData,
+            data: customName[Object.keys(customName)[0]] ,
           },
         ],
         yAxis: [
@@ -903,48 +915,70 @@ export default {
           },
         ],
       };
+      this.chartData=JSON.parse(JSON.stringify(chartData))
     },
-    handlePointChart(data) {
+    handleHeatmapChart(data) {
+      this.chartType = "heatmap";
       // console.log("data",data);
-      let data1 = [];
+      let dataSet = [],
+        xData = [],
+        yData = [];
+      let min = Infinity; // 初始化最小值为无穷大
+      let max = -Infinity; // 初始化最大值为负无穷大
+      const num = Math.ceil(Math.sqrt(data.length));
+      for (let i = 0; i < num; i++) {
+        xData.push(i);
+      }
+      let x = 0,
+        y = 0;
       for (let i = 15; i < data.length; i++) {
-        let row = data[i].split(",");
-        data1.push([parseFloat(row), parseFloat(row)]);
+        let row = parseFloat(data[i].split(","));
+        dataSet.push([y++, x, parseFloat(row)]);
+        if (row > max) max = row;
+        if (row < min) min = row;
+        if (y === num) {
+          yData.push(x);
+          x++;
+          y = 0;
+        }
       }
-      console.log(data1);
-      this.chartData = {
-        tooltip: {
-          trigger: "axis",
-          axisPointer: {
-            type: "cross",
-          },
+      console.log("dataSet", dataSet);
+      const chartData = {
+        tooltip: {},
+        xAxis: {
+          type: "category",
+          data: xData,
         },
-        xAxis: [
-          {
-            type: "value",
-            scale: true,
-            splitLine: {
-              show: true,
-            },
-          },
-        ],
-        yAxis: [
-          {
-            type: "value",
-            scale: true,
-            splitLine: {
-              show: true,
-            },
+        yAxis: {
+          type: "category",
+          data: yData,
+        },
+        visualMap: {
+          min: min,
+          max: max,
+          calculable: true,
+          precision: 4,
+          inRange: {
+            color: ["#FFFFFF", "#000000"],
           },
-        ],
+        },
         series: [
           {
-            symbolSize: 5,
-            data: data1,
-            type: "scatter",
+            name: "辐射亮度",
+            type: "heatmap",
+            data: dataSet,
+            emphasis: {
+              itemStyle: {
+                borderColor: "#333",
+                borderWidth: 1,
+              },
+            },
+            progressive: 1000,
+            animation: false,
           },
         ],
       };
+      this.chartData=JSON.parse(JSON.stringify(chartData))
     },
   },
 };
@@ -967,6 +1001,10 @@ export default {
   }
 }
 
+.heatmapChart {
+  transform: translateX(80%);
+}
+
 ::v-deep .el-form-item .el-select {
   width: 200px;
 }