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,20 +54,7 @@ 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 => {
-            let arr = []
-            arr.push(parseInt(item.distance),parseInt(item.value))
-            source.push(arr)
-          })
-          obj.dimensions = ['float',  `${keyList[0]}`]
-          obj.source = source
-          finallyList.push(obj)
-          finallyList.length ? this.getLine(finallyList) : ''
-        } else {
-          for(var i = 0; i < keyList.length; i++) {
+        for (var i = 0; i < keyList.length; i++) {
           let obj = {}
           let source = []
           valueList[i].map(item => {
@@ -66,29 +62,46 @@ export default {
             arr.push(parseInt(item.distance), parseInt(item.value))
             source.push(arr)
           })
-            obj.dimensions = ['',  `${keyList[i]}`]
+          obj.dimensions = [`${keyList[i]}`]
           obj.source = source
           finallyList.push(obj)
         }
-          console.log(finallyList, 'finallyList');
+        this.listData = finallyList
         finallyList.length ? this.getLine(finallyList) : ''
-        }
-        
       })
     },
     getLine(data) {
+      if(data.length) {
         this.myChartLine = echarts.init(this.$refs.chartLine)
         let option = {
           legend: {},
-        tooltip: {},
+          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;
+              }
+            },
+          },
           dataset: data,
           xAxis: {
             type: "value",
             boundaryGap: false,
             axisLabel: {
-            //show:true,
-            // interval:2
-            // rotate:60,
               color: "#30eee9",
             },
             axisLine: {
@@ -135,8 +148,6 @@ export default {
               },
             },
           ],
-        // Declare several bar series, each will be mapped
-        // to a column of dataset.source by default.
           series: [
             {
               type: 'line',
@@ -159,7 +170,10 @@ export default {
         };
         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