pic analysis

src/views/history/leakyCableStatus/components/picAnalysis.vue

 <template>
-  <el-dialog title="驻波比图形分析" :visible.sync="visible" width="60%" @close="cancel">
-    <div ref="chartLine" class="chartLine"></div>
+  <el-dialog
+    title="驻波比图形分析"
+    :visible.sync="visible"
+    width="1060px"
+    @close="cancel"
+  >
+    <div v-show="listData.length" ref="chartLine" class="chartLine" :key="componentKeys"></div>
+    <div v-show="!listData.length" style="font-size:20px;text-align:center"><i class="el-icon-warning" style="color:orange;margin-right:10px" />暂无数据</div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="cancel">关 闭</el-button>
     </span>
@@ -24,6 +30,8 @@ export default {
   data() {
     return {
       visible: false,
+      componentKeys: 0,
+      listData: []
     }
   },
   watch: {
@@ -35,6 +43,7 @@ export default {
     },
     curInfo(newV) {
       if (newV) {
+        this.componentKeys++
         this.init()
       }
     }
@@ -45,121 +54,126 @@ export default {
         let keyList = Object.keys(res.collect)
         let valueList = Object.values(res.collect)
         let finallyList = []
-        let obj = {}
-        let source = []
-        if(keyList.length == 1) {
-          valueList[0].map(item => {
+        for (var i = 0; i < keyList.length; i++) {
+          let obj = {}
+          let source = []
+          valueList[i].map(item => {
             let arr = []
-            arr.push(parseInt(item.distance),parseInt(item.value))
+            arr.push(parseInt(item.distance), parseInt(item.value))
             source.push(arr)
           })
-          obj.dimensions = ['float',  `${keyList[0]}`]
+          obj.dimensions = [`${keyList[i]}`]
           obj.source = source
           finallyList.push(obj)
-          finallyList.length ? this.getLine(finallyList) : ''
-        } else {
-          for(var i = 0; i < keyList.length; i++) {
-            let obj = {}
-            let source = []
-            valueList[i].map(item => {
-              let arr = []
-              arr.push(parseInt(item.distance), parseInt(item.value))
-              source.push(arr)
-            })
-            obj.dimensions = ['',  `${keyList[i]}`]
-            obj.source = source
-            finallyList.push(obj)
-          }
-          console.log(finallyList, 'finallyList');
-          finallyList.length ? this.getLine(finallyList) : ''
         }
-        
+        this.listData = finallyList
+        finallyList.length ? this.getLine(finallyList) : ''
       })
     },
     getLine(data) {
-      this.myChartLine = echarts.init(this.$refs.chartLine)
-      let option = {
-        legend: {},
-        tooltip: {},
-        dataset: data,
-        xAxis: {
-          type: "value",
-          boundaryGap: false,
-          axisLabel: {
-            //show:true,
-            // interval:2
-            // rotate:60,
-            color: "#30eee9",
-          },
-          axisLine: {
-            show: true,
-            lineStyle: {
-              color: "#397cbc",
+      if(data.length) {
+        this.myChartLine = echarts.init(this.$refs.chartLine)
+        let option = {
+          legend: {},
+          tooltip: {
+            trigger: 'axis',
+            formatter: function (params) {
+              if (params.length > 1) {
+                let str = params[0].data[0] + "<br />"
+                params.forEach(item => {
+                  str += '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:' + item.color + '"></span>'
+                  + '<span style="display:inline-block;width:70px;margin-right:5px;">' + item.seriesName + '</span>' 
+                  + "  驻波比" 
+                  + '<span style="font-weight:700;">' + item.data[1] + "</span><br />";
+                })
+                return str;
+              } else {
+                let str = params[0].data[0] + "<br />"
+                str += '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:' + params[0].color + '"></span>'
+                  + '<span style="display:inline-block;width:70px;margin-right:5px;">' + params[0].seriesName + '</span>' 
+                  + "  驻波比" 
+                  + '<span style="font-weight:700;">' + params[0].data[1] + "</span><br />";
+                return str;
+              }
             },
           },
-          axisTick: {
-            show: false,
-          },
-          splitLine: {
-            show: false,
-            lineStyle: {
-              color: "#195384",
-            },
-          },
-
-        },
-        yAxis: [
-          {
+          dataset: data,
+          xAxis: {
             type: "value",
-            name: "",
-            min: 0,
+            boundaryGap: false,
             axisLabel: {
-              formatter: "{value}",
-              textStyle: {
-                color: "#2ad1d2",
-              },
+              color: "#30eee9",
             },
             axisLine: {
+              show: true,
               lineStyle: {
-                color: "#27b4c2",
+                color: "#397cbc",
               },
             },
             axisTick: {
               show: false,
             },
             splitLine: {
-              show: true,
+              show: false,
               lineStyle: {
                 color: "#195384",
               },
             },
+  
           },
-        ],
-        // Declare several bar series, each will be mapped
-        // to a column of dataset.source by default.
-        series: [
-          {
-            type: 'line',
-            datasetIndex: 0
-          },
-          {
-            type: 'line',
-            datasetIndex: 1
-          }, {
-            type: 'line',
-            datasetIndex: 2
-          }, {
-            type: 'line',
-            datasetIndex: 3
-          }, {
-            type: 'line',
-            datasetIndex: 4
-          }
-        ]
-      };
-      this.lineOption = option
-      this.myChartLine.setOption(option)
-      // })
+          yAxis: [
+            {
+              type: "value",
+              name: "",
+              min: 0,
+              axisLabel: {
+                formatter: "{value}",
+                textStyle: {
+                  color: "#2ad1d2",
+                },
+              },
+              axisLine: {
+                lineStyle: {
+                  color: "#27b4c2",
+                },
+              },
+              axisTick: {
+                show: false,
+              },
+              splitLine: {
+                show: true,
+                lineStyle: {
+                  color: "#195384",
+                },
+              },
+            },
+          ],
+          series: [
+            {
+              type: 'line',
+              datasetIndex: 0
+            },
+            {
+              type: 'line',
+              datasetIndex: 1
+            }, {
+              type: 'line',
+              datasetIndex: 2
+            }, {
+              type: 'line',
+              datasetIndex: 3
+            }, {
+              type: 'line',
+              datasetIndex: 4
+            }
+          ]
+        };
+        this.lineOption = option
+        this.myChartLine.setOption(option)
+        window.addEventListener("resize", () => {
+          this.myChartLine.resize()
+        })
+      }
     },
     cancel() {
       this.visible = false
@@ -171,7 +185,7 @@ export default {
 
 <style>
 .chartLine {
-  width: 100%;
+  width: 1000px;
   height: 500px;
 }
 </style>
\ No newline at end of file